10 Fresh Resources For Web Developers January 2016

2015 was the great year for the web: web technologies have been adopted in many form factors that are beyond for building a website or a web application. Many mobile and desktop applications are now built with the help of HTML, CSS and JavaScript. This is made by the portability nature of the web technologies and libraries such as React.js, Angular and Node.js.

Don’t Miss: 15 UX and UI Tools for Designers

After keeping this in mind, I have put together a handful of JavaScript and CSS libraries.

  1. Flat Slider

Flat can improve the website usability since it can bring user more focus on the text and making everything readable from big screens down to mobile.


jQuery UI comes with the collection of common web interface including a Slider. A UI is a User Interface, which allow user to select the range of numeric values.

The Flat Slider is a web tool that makes customizing the jQuery UI style, which was once a very scary task but now it is a lot easier.  With this tool you can change the orientation: horizontally and vertically. You can also change the background color with this tool.

  1. Utility Open Type

Open Type is a format for scalable computer fonts. It was built on its ancestor TrueType, having the TrueType’s basic structure and more intricate data structures for prescribing typographic behavior.


Utility Open Type is a collection of drop-in classes to apply advanced CSS typographic features such as font ligatures, small capital letter and a lot more. They basically give the best possible reading experience for your users in fine details. It reduces nicely in order, unsupported browser.

Utility Open Type helps you to make the most of the font that you are loading. Because the open type features should be easy to apply, cascade predictably or fallback gracefully.

  1. Linear

Linear is a ruler app for Mac. You can utilize the ruler to quantify site pages, discover the extent of an element without opening the DevTools or make sense of if an element is splendidly focused. You can have multiple rulers and switch the unit from PX to EM.


With this tool, you can change the font value of the base. There dark and light themes are also available which change the look of your ruler. And in this you can make multiple rulers all you need to do this is to be sure that all the rulers are perfectly aligned.

  1. StickyStack

StickyStack is a jQuery plugin that creates a stacking effect by sticking boards as they reach to the top of the viewport. It is a lightweight plugin with the few options to configure the page container, stack section, as well as the box shadow of the stacks. You can check out the demo here.


StickyStack is the tool that only requires jQuery and a child like sense of wonder. And it is also very easy to use, you have to include jQuery after this call the .StickyStack () on the main content.

  1. ResponsifyJS

ResponsifyJS is one of the popular constraints for the responsive images without sacrificing anyone’s face. It usually scales the image properly, but this switch the main important point of the image when it is scaled down to the very small viewport size.


It allows you to define the focus area on an image using data-focus-xxx tag. It is very lightweight JavaScript library that you can use to set coordinates to maintain the image focus while it is being resized.

  1. Colorify

 Colorify is the light weight JavaScript that allows you to extract the colors from the images and then allow you to manipulate them. With the help of this tool you can manipulate the plain color image into a beautiful image. Colorify.js will provide the spice up in your design.


With Colorify.js, you can extract the main color from an image. You can also generate the gradients that are based on the color of images. Also you can load images dynamically.

Note that you can use this tool only after the completion of the documentations that it’s required. All the documents are mentioned in the site whose link is given above.

  1. Viewer

Viewer is the jQuery plugin for image light box. It is the fancy popular way to zoom-in the images on the web. This is the plugin that comes with an amazing option that allows you to customize the every bit of the lightbox interface.


 The Viewer also provides the set of APIs and custom Events for total control over the lightbox response and behavior. It has to two mode options: Modal mode and Inline mode. This is the tool that provides almost all the methods such as view, zoom, rotate, flip, show, hide etc.

  1. DeviceMock

DeviceMock is a JavaScript library that permits you to make device frames or mockups, for example, a phone, a tablet and a desktop. Similarly, the library provides choices to set the theme color of the frame, the size, and additionally the frame orientation.


It may be the good alternative to showcase your web and app in the place of using the Photoshop. DevideMock.js can give device frames for any of the elements whether it is div, img or iframe.

  1. BookBlock

BookBlock is the jQuery plugin that will create the booklet like component and lets you navigate all its items just by flipping the pages. It is beautiful alternative that displays the multiple images on your website.


You can check out the demo here to get an idea about that how the BookBlock creates the booklet.

  1. Clrs

Clrs is an action to reformulate the default web colors into a more eye friendly, modern color tone. Furthermore, it advocates an arrangement of color combination for better availability. You can send these colors through NPM, Diamond (Ruby), and Photoshop and Artist shading swatches.


With this tool, grazing your prototypes just got easier. The utilities of borders and text include classes to set the text and or border color. With this you can easily set the stroke and inline color.

That’s it, here I am done now. If you know about any other new asset for web developers, then leave that in a comment section; I will be happy to hear. Or if you have any query regarding these tools or plugins you can leave that in a comment section.


  1. Lamb January 10, 2016
  2. คลิปโป้ March 24, 2016
  3. หนังโป๊ April 16, 2016

Add Comment