Fresh Resources for Web Designers and Developers (September 2015)

Last month, we have featured a couple of new tools, libraries, and apps which are aimed to improving your workflow and productivity as web developers. This month, we have a few more to share with you.

This round, we have a trendy beautiful forum software, a jQuery plugin to build a fancy circular progress bar, and a couple of free handy apps for further improving your productivity – plus one which may hinder it, but you’d probably still get it.

Let’s check them out.


WP-Papi is a collection of Classes that allow WordPress developers to create custom page types. As we create a new page, WP-Papi will display options of the types we have registered through WP-Papi Classes and APIs. Users are able to select which type to use prior to creating their pages. These classes also make it really easy to add custom meta boxes as well as remove existing ones in the Page Type.

WP-Papi user interface


Flarum is a new open source forum software built with PHP and Laravel. Flarum is still in its early stages, but it has been gaining traction in Github and is becoming one of the most popular PHP projects. Unlike many of established forum softwares which usually comes with a terrible-looking default theme, Flarum is simply beautiful and it is responsive. Try it out for yourself.

Flarum forum management system


Percircle is a jQuery plugin to build a circular progress interface. This plugin is customizable through some drop-in HTML classes. For example, to make the circle big you can add the big class; if you want it in Pink, add the pink class. Percircle has been made very easy to deploy, even for novices.



ScreenCat is a free remote collaboration and screen sharing app for Mac. Though ScreenCat is still in the alpha stage, at the time of this writing, it works as well as some of the popular apps, and in fact is downright easy to use. As you launch the app, it serves you with secret codes, which you can share to your colleague to give them access to your screen.



Here’s a Node.js module to beautify CSS output. With this, you can automate your CSS formatting output. Perfectionist can be used as a standalone module, in conjunction with PostCSS, or as plugin of Sublime Text and Atom. A great tool for anyone whose CSS write formatting is one of their top concerns.

CSS Perfectionist

CSS Grid Polyfills

In CSS3, the display properties have been extended with new values including the grid. The value does exactly that, to create a grid layout made by rows and columns. This value is experimental, and as with many other experimental features, the grid value does not work in some browsers. That’s where this polyfill comes in. You can refer to our previous post, HTML5 Shiv and Polyfills, to deploy a polyfill library.

CSS Grid Polyfills


Helium is a unique floating browser for OS X. It will remain visible on top of other active apps and windows. For instance, if you like to watch a video on Youtube while working on something, this browser will certainly come in handy. It also has a translucent mode that will not "intercept mouse clicks", allowing you to interact with what is in the background (behind the browser).


In Windows, you can snap the app window to the corners to split the windows to cover half of your screen, vertically or horizontally. Mac does not come with such functionality built-in (the Split View in El Capitan is a different concept). Spectacle is a free app that allows you to bring this function to OS X. You can drag or use shortcuts to organize your window apps ala Windows.

SpectacleApp for Mac

Github Resume

If you want your GitHub profile to be your portfolio, turn it into your resume with this handy tool. This URL generates a resume based on your Github profile. The resume will contain your profile along with your popular repositories, list all your skills in programming languages as well as the Github organizations you are involved in.

Github Resume


Thyme is an OS X app for time tracking. It is useful for freelancers whose service rate is charged on a per hour basis. It has four basic commands, start, pause, restart and finish which you can set shortcuts for. Thyme is free and really straightforward to use.

Timing for Freelancers