Fresh Resources for Web Designers and Developers (September 2016)

We are back again with a handful resources for our fellow web developers. In this installment, the collection is quite diverse. We have on the list a desktop application, a few web application, handy PHP and JavaScript libraries, and a couple of WordPress plugins. Let’s check them out.


Marp is an editor to create presentations in Markdown. It has two panels: an Editor on the left and a Preview on the right, where you can view the slide output in real time. It’s available in OS X, Windows, and Linux. It’s a great alternative to a bloated software like PowerPoint.



A JavaScript to display image lightbox and gallery. The lightbox interface is equipped with a handful of buttons where you can zoom-in, zoom-out, download the image, and turn the image fullscreen. It is truly an all-in-one package JavaScript library in this category.

Light Gallery

React Developer Tools

React Developer Tools is a Google Chrome extension that allows us decode Reacts rendered components on the browser. Once installed, it adds a new tab in the DevTools where you can inspect the root, elements and debug React components as you would with regular HTML.


SharingButtons is a sharing buttons generator. It currently supports a number of popular social sites such as Facebook, Twitter and Pinterests. The output unloads the JavaScripts bloats and can later be easily customized through CSS.

SharingButtons generator user interface


Baffle is a JavaScript library that adds a nice engaging effect to text. It is hard for me to name this kind effect, but it certainly looks cool. Check out the demo!

Baffel.js homepage


HyperTerm is a terminal emulator, an application, built on top of HTML, CSS, and JavaScript. It is modular where developers can contribute, introducing modules that add new functionality. The app is currently only available for macOS.

HyperTerm dark homepage


OverHang.js is a jQuery plugin to show instant notification. The plugin is customizable. You can set the text message in the notification, the colors, and how long it appears before it fades out.

OverHang code snippet


Grafika is a collection of PHP functions that allows us to manipulate image. We can apply image filters like blur and sepia. We can also transform images like flipping, rotating and resizing.

Grafika Github repository

Simple Typography

Simple Typography is a Sass library that resets Typography styling – such as font sizing and line height. It’s another small library that you might want to utilize to make text on your website beautifully and proportionally sized.

Simple Typography

Jekyll Admin

Jekyll is a static blog generator. This is an official Jekyll plugin that adds a GUI editor to write posts with Jekyll; this makes author post with Jekyll more intuitive.

Jekyll Admin Interface


Anime.js is a JavaScript library to perform fluid animation on the web. It applicable to regular HTML, SVG, CSS Transformations. Find the complete instruction to make use the most of it and some inspiring examples in the documentation.

Anime.js homepage


PostLeaf is a PHP-based CMS equipped with some handy features built-in. Front-end editing, backups, pages, posts, oEmbed, SEO, and navigation are things necessary that do the chore of maintaining websites easy.

Postleaf responsivity in multiple screen size

Browsers Logos

A complete collection of all browser logos. You can find icons for popular browsers like Chrome, Firefox and Internet Explorer, including the icons of their mobile app. You can also find less popular browsers that you may have never heard before, such as Blisk, Iridium, and Orbitum.

A few logo of popular browsers


A WordPress plugin to help us improve accessibility on a website. Once activated, the plugin will evaluate our websites with tota11y, deliver feedbacks for violations that affect accessibility, and suggest solutions to fix it.

Plugin interface

Automatic Alternative Text

Another WordPress plugin worth mentioning, that improves website accessibility by adding alt text to images uploaded through WordPress Media manager. The generated “alt” text is powered by Microsoft Computer API.

WordPress Media Library interface


A JavaScript library, a polyfill, for HTML 5.1 multi-range output which is currently is still poorly implemented in browsers. Lea Verou shared her story behind this library in her recent post, Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders, which is definitely worth reading.

Multi-range logo in the homepage

jQuery Payment

A jQuery plugin developed by Stripe, a payment processing service. This plugin makes developing a credit card form less terrifying. It supports numerous credit cards including Visa, Master Card Amex, UnionPay, and JCB.

Trix Editor

Trix is a WYSIWYG editor that we can utilize to produce content. Deploying trix is quick and easily extensible with new functionality to meet your need. You can find all the instructions in the documentation get up and running Trix on your web application.

Trix editor interface


Recipe is a collection of PHP to run common utility functions such as grab Gravatar image, generating a QR code, convert an array to an object, and much more.

QR code with PHP Recipe code snippet


Note: PaperWorks is no longer available.

A note-taking built on top of PHP and Angular, which means you can deploy it in a web server. This might be a good alternative to a desktop app like Evernote or OneNote, in a way that you can manage and customize almost everything out of it, and store your data privately on your own server.