Fresh Resources for Web Designers and Developers (May 2016)

It’s time for us to share another awesome list of resources for our fellow web developers. Last time we featured a number of references, apps, and a few JavaScript libraries.

Considering there are a lot of JavaScript libraries that we haven’t yet covered in this series, this installment will feature more jQuery plugins and a couple of references to improve our skills as web developers. Let’s check them out.


jQueryMy is a jQuery plugin to handle real-time data binding. It is compatible with native browser controls or inputs as well as a UI library like jQuery UI out of the box. It is equipped with validation, conditional formatting, and complex dependencies management which seems to make it a great – yet, lighter – alternative to an MV* framework like Backbone.js, Ember.js and Vue.js

jQuery My Homepage


Typically, the head tag contains the title tag, the link tag pointing to a stylesheet, and script tag to load a JavaScript file. This repository shows that there are a lot more that we can include within the head tag. The list includes general link and meta tags to one specific particular platform.

Content of the head elements


Developing a smooth page transition could be a real painful. We need to think of handling browser support for the History APIs, caching, pre-loading, as well as the animation to ensure it works as smooth and fast. SmoothState comes with all these in one package, allowing us to get the experience up and running in less time.

Smooth State Code Example


In short, SketchRunner is similar to the OS X Spotlight, Alfred, or the SublimeText Command Palette. It is a Sketch extension that gives a simple search interface to do several tasks normally done in the app menu. It streamlines to help you be more productive.

SketchRunner Home Page

Maintainable CSS

Maintainable CSS is an online book comprising many years of experience, refined techniques to compose stellar CSS that is maintainable in the long run throughout generations.

Maintainable CSS Home Page

Flexbox Patterns

This is a collection of snippets and drop-in HTML and CSS to build interface, such as header, footer, menu navigation, using the CSS Flexbox. If you find using Flexbox hard to comprehend, this is a great source of inspiration to finally learn Flexbox.

FlexboxPatterns Mascot


Infinite Scroll is a popular interface on the web where it pulls new content as we reach the bottom the page. Lavalamp is a JavaScript library, dubbed to replace Infinite Scroll. Check out the demo.

Lavalamp Demo


A JavaScript that detects mouse cursor when it is about to leave the viewport which likely indicates that the user is going to quit. When it does, you can use it to trigger a function to show a subscribe form or a simple popup message to increase your conversion rate.



Another color picker with a cool user interface. You can drag and drop colors to create your own color palette, making this a more visual and organized approach to building up a color scheme. Sign up to create an account to save your collections.

Coleure Interface


CSSX is a tool that allows you to write CSS in JavaScript. Nothing is changed though; It is the same native CSS syntax wrapped in a JavaScript function. I honestly haven’t yet figured out how I could leverage CSSX in any of my projects but it looks cool and is definitely worth mentioning.

CSSX Cover