Connect With WRD
feed via e-mail
feed via e-mail

Previously, at WRD, very nice color palette generation tools were introduced.

Colourcode is another one which offers a very original-yet-easy way of creating them.

The color schemes are generated with the mouse location/movements and multiple options exist for setting the scheme type: monochrome (with light/dark grey), analogic, triad and more.


Once created, it can be downloaded as styles (.less and .scss) or .png. It is also possible to save the palette for future use or share with a link.

Colourcode can be used freely online or, it is open source, it can be self-hosted.

It is already possible to find very nice icon fonts around but there is always room for new ones.

Ionicons is a fresh + free icon font with a slick design and a very good fit for web apps as it includes many “action icons”.


The font has items for arrows, comments, loaders, users, media controls, weather, charts, social and more.

There are 400+ unique icons however it is open source and new ones being added regularly.

There are many online tools for beautifying our code and they are usually handy when working on formats like JSON or XML.

Code Beautifier is a website which has a pack of these formatters including HTM, JSON, XML, CSS or JavaScript.

Also, which is handier, there are converters like JSON-to-XML, XML-to-JSON, CSV-to-JSON/XML and more.

Code Beautify

Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders.

It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript.

The slider is responsive, it’ll adapt well to all devices and comes with touch support.


You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus.

Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).

Elegant Themes, a brand that creates lovely WordPress themes, is sharing a very nice freebie.

It is a set of 90 free flat icons that are high-quality and available in 2 variations: colored or single-color.

The items are presented inside a circle and the download package includes multiple file types: .AI, .EPS, .PDF, and .PNG (64px and 128px).

90 Flat Icons

It is sometimes the network our the computer but losing the internet connection happens to everyone.

And, when this happens to the users while they are browsing your website, we can inform them nicely so that they easily know “the problem is not about the site”.

Offline.js, a simple JavaScript library, detects the disconnection and presents an alert to the users about it.


Also, it re-sends any failed Ajax requests once the connection is back so that the users are not affected at all.

The library is plug ‘n’ play with no setup and it comes with multiple good-looking themes.

Creating the design and functionality of a form with HTML is the most standard way.

Alpaca, a form-creation-library that is built with jQuery, aims to change that by separating the data and presentation.

It transforms a pre-formatted JSON schema into a fully-functional form which can be styled easily with CSS.

Alpaca - jQuery Forms

Using that approach, it is possible to reuse the same code on any platform (mobile- tablet, desktop).

The library is pre-packaged with controls, wizards, layouts, I18N support and pluggable template engines for EJS, Handlerbars and jQuery.tmpl.

Alpaca’s documentation is worth checking for finding out out its capabilities.

SVG is one of the most attractive formats for creating any type of graphics that work on any platform.

However, SVG has new features which are only available in modern browsers too.

Snap is an impressive + free JavaScript library that eases working with SVG and focuses only to modern browser support.

JavaScript SVG Library - Snap

It is created by the developer of the most popular SVG library, Raphaël, and it supports features like masking, clipping, patterns, full gradients, groups, and more.

Snap works with existing or Snap-generated content and also comes with a simple API for animation.

Usually, clients can imagine how a design or logo will look like in real world and realistic mock-ups help to overcome this issue a lot.

Webdesigner Depot has teamed up with PSDCovers and giving away a must-have mock-up kit.

Photoshop Mock-up Actions

The kit includes 100 mock-ups as Photoshop actions and there are items for books, brochures, business cards, CDs, bags and more.

All of them come with different views and, once created, you can customize them further with tuning the shadows, colors, etc.

The mock-ups are high-quality and they render up to 12,400 x 9,300 pixels at 300ppi.

10 years ago, icons were all about 3D and being colorful. Then the Web 2.0 effect came and shininess is added.

Right now, it is all about flat icons and, Flaticon, a website that enables us to search them quickly is pretty handy.

There are icon sets created by the developers (Freepik, which is a creative resources search engine) and also by other designers.

Flaticon Photoshop Plugin

It is possible to make a single icon search or browse them in categories or sets.

Flaticon now has a free Photoshop extension that makes searching simpler, right in the image editor we always use.

Using the extension, we don’t have to leave Photoshop and can find the icon + get it inside the canvas quickly.

Uptime Robot