Fresh Resources for Web Designers and Developers (July 2015)

Web developers are blessed with free tools and resources found online, which we dutifully collect in our Fresh Resources series every month. If you missed last month’s batch, revisit it here or check out the rest of the fresh resources compiled in the early part of the year.

For the July 2015 batch, we are highlighting fresh tools and resources that would facilitate your tasks, ranging from WordPress plugins that allow you to deploy plugin updates privately to a JavaScript library to add engaging animations.


This plugin adds extra functionality to WordPress administration which is similar to OS X Spotlight. With it, you get to quickly access files and folders in your Mac. Once installed, hit the Shift twice, then type in what you would like to access. It makes WordPress administration more accessible with the use of the keyboard.

SiteOrigin CSS

SiteOrigin CSS is a robust WordPress plugin to customize any theme appearance in real time. The plugin adds a new panel under the Appearance > Custom CSS menu. Therein, you can write custom CSS rules to overwrite the CSS of the theme you are using, or you can also use the GUI panel to add the CSS rules intuitively.


DynmaicJS is a library to apply physics-based animation. I’m not a Physic expert but the examples here in this menu look really cool. It can animate HTML and SVG elements, and it gives you fast performance without any dependency. dynamic has been tested on Safari 7+, Firefox 35+, Chrome 34+ and IE10+.

Airplane Mode

This plugin will prevent several WordPress external HTTP requests such as to Google Fonts, Gravatar, and WordPress updater from attempting to connect to plugins and themes repositories for updates. It’s a useful plugin for local development to suppress errors from occurring when these calls fail (which usually happens when you are developing locally under exceptionally slow Internet).


A collection of videos that are great for your website headers. All videos are free, licensed under Public Domain. Don’t forget to check out the “How to Use” section to learn how to add the video to your web page.


VibrantJS grabs prominent colors from an image. It also exposes a few APIs that allow you to process the obtained color, such as switching the color format and deciding the proper composition for background and text. You can use it to improve your website interface with the dynamic color generation, use the color as a placeholder image when the image is not fully loaded yet, or create a web application for generating a color swatch.


This library grabs two prominent colors and generates a CSS gradient out of the obtained colors. Similar to VibrantJS, You can apply the gradient as the image placeholder for when the image is not fully loaded or as an overlay color.

GradifyCSS: gradient generator


PurifyCSS cleans up unused CSS rules out of your stylesheet. You can use this to trim down stylesheet sizes of large frameworks such as Bootstrap and Foundation by up to 40%. PurifyCSS is available as a Grunt and Gulp plugin.

Title Capital for WordPress

The name has said it all. This WordPress plugin will turn titles as well as headings within the content into proper capitalization upon saving or publishing the post and page. I find this plugin useful for websites with multiple authors to retain consistency in their website’s content.

WordPress capital title

GitHub Updater

This plugin allows user to install and automatically update WordPress plugins hosted in GitHub. Despite the name, the plugin also supports Bitbucket and GitLab, including one in a private repository. It’s a useful plugin for developers who develop and distribute their plugins or themes exclusively only for their clients.

Update Plugins and Themes from Github and

Code Examples

A collection of code examples from WordPress Theme Review Team. At the moment, the example consists of codes to build Theme Customizer components using the Customizer API including to create the Section, Settings and Panel. More codes examples of best practices added in the future.

Code Examples