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

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

Head

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.

SmoothState

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.

SketchRunner

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.

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.

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.

Lavalamp

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.

Glio

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.

Coleure

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.

CSSX

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.