Fresh Resources for Web Designers and Developers (January 2017)

This series has come a long way through which we have witnessed web development tools come and go; one time they shine, a few months later they are made obsolete with other latest tools. Nonetheless, we have some fresh tools on the list for our developers to explore this month which include JavaScript libraries, a Sketch plugin for responsive UI design, and a couple of CSS frameworks.


A JavaScript library that allows you to present typing effects of a list of text; a kind of effect that you might have seen on the web lately. This JavaScript library is easy to implement with a handful of options to customize the effect. You can install this library thru NPM or load it via the CDN at

Opera Neon

Opera used to be the first to introduce tab-based browser, and since then we have browsers with so-called Tabs and Speed Dial. Opera has recently released its new initiative, named Opera Neon. A new browser with fresher interface such as so-called omnibox, split-screen mode, and beautiful wallpaper selections. So, can Opera Neon change the browser space once again? This we’ll have to see.


At.js is JavaScript library that allows you to add smileys, mention friends, or tagging; something like we have seen on Slack, Twitter, and Facebook. This plugin requires jQuery, which allows it to work on Internet Explorer 7 and perhaps Internet Explore 6 too. Fantastic!


Release makes creating a new version release of a software in Github more efficient. A new release is usually accompanied with a changelog, and this module allows you to populate the changelog automatically derived from the Git commit messages.


A JavaScript beautifier ensuring our JavaScript code is formatted in a consistent way. It supports ES2017 and JSX.


Ayu is Sublime Text theme with a fresh and modern appeal. It comes with 2 tones dark and light. Ayu means beautiful in Indonesia, and so to speak; it makes Sublime Text UI more beautiful.

JSON Splora

A lightweight application for editing, and visualizing JSON data. The app compatible with Windows, Linux, and MacOS.


A JavaScript to zoom image gracefully. Optimized for mobile, works nicely in the hi-def screen, and is easily customizable.


Ramme is an Instagram desktop client. Though it is unofficial, but maybe you can learn a couple of new things from the source code.

Change Username

A WordPress plugin that once activated, adds a “change” link beside the username input and allows you to change the username.


NodeifyWP is a quite unique WordPress plugin. It allows you to use WordPress as usual then output the content using a Node.js module. I haven’t yet tried this plugin on any project. But the presentation I saw in WordCamp Denpasar 2016, this plugin looks very promising to modernize WordPress development.


ColorMe is quite unlike other color generator apps that I’ve seen before. Aside from generating color codes, the app also gives control over adjusting the color brightness, shade, hue, saturation, contrast, etc.

WP-CLI Packages

A collection of extensions of WP-CLI that adds extra command lines and parameters to perform additional tasks such as one for deploying WordPress to remote server, migrating a WordPress site, flushing caches, and a lot more.

Tailor Page Builder

A WordPress plugin that enables you to create non-linear content with a drag-n-drop interface. The plugin is extensible for a new component to add unique content type. It provides WP-API to manage these content as well. Tailor Page Builder is by far the best plugin on this category.


XVG is a Chrome extension that displays SVG graphic outlines and anchors that can help you to debug the SVG objects easily.


RibbonJS is a JavaScript library that enables you to generate decorative ribbons on your website, as you can see the following screenshot. It is just 1kb in size, and easy to customize.

Auto Layout

Auto-Layout is a Sketch plugin that provides a number of preset screen sizes to test your UI design. So you can assure the design looks equally good whether it is viewed on iPhone 5, iPhone 6, etc. The plugin also allows you to define custom sizes in case it is not available in the preset. See how the plugin in action in this video.


Funcssion is a collection of CSS classes that follows Pure Function principle. Each CSS class defines a single purpose of styling. This CSS Framework is currently a work in progress with more features to introduce in the future such as responsive Grid, Buttons, etc.


A lightweight and easy to use framework to build presentation slides using just HTML and CSS. Webslides currently provides a couple of nice slide templates where you can start your slide presentation immediately.

Resilient Web Design

Resilient Web Design is an online book. This book is nothing technical, instead, it covers histories, principles, and inventions that shape the Web as we know in today’s world. I think it is a great read for the weekend.