Fresh Resources for Web Designers and Developers (December 2014)
Editor’s note: We’ve come to the end of another year. This final month of 2014, we’re looking at a round of resources by Daniel Pataki.
A developer’s toolbelt should always contain plenty of items but should never be considered final and unchangeable. Fellow developers are creating great tools every day. Some of these go on to be huge successes like the Foundation framework or Twitter Bootstrap, but some remain diamonds in the rough.
To round up a great year, I’ll take a look at some great tools that have proven to come in very handy for my own use. From documentation creation to loader elements, here’s a useful collection of tools for all web developers.
Daux.io
Daux.io is an extremely capable documentation generator. It is completely free, and the source code can be found on Github. You can run the documentation on a web server or with Grunt if you prefer.
There is a lengthy feature list, with built-in support for Github flavored markdown, a file editor, Google Analytics, and many more features. Plenty to help you out with most projects. [Get it here]
Ladda
In the creator’s own words, Ladda is “A UI concept which merges loading indicators into the action that invoked them“. Ladda enables you to create awesome interaction indicators for buttons.
A number of sizes and animations are available. I particularly enjoy the progress bars, which have been built right into the buttons. [Get it here]
Revaxarts Theme Documentor
This project is used by a number of Themeforest authors but can be used for any documentation purpose. Its online interface makes it easy for you to assemble your documentation, and it has great HTML5 tech to store them on your local computer.
Plus you can enable auto-saving and come back any time to complete the docs. In addition, it has json import and export functionality and theme modification capabilities, allowing you to tailor it pretty well to your company colors. [Get it here]
Unicode Table
Unicode characters can be a great help when you want to add specific characters not usually found on keyboards. You should always be careful of adding arrows and other elements because screen readers may not handle them well but in some cases they still are the most effective solution. This Unicode Table is my favorite because it allows me to search with plain English like “circle” or “arrow” and get a pretty good list of results to work from. [Get it here]
WordPress Plugin Boilerplate
WordPress Plugin Boilerplate is now in its third iteration. It’s a boilerplate for creating modular WordPress plugins. It tries to impose a stricter architecture on you, which should lead to better code. Thus, leading to equal interpretation by all programmers. It takes an object-oriented approach which is a breath of fresh air amidst all the procedurally coded plugins. [Get it here]
CSS Guidelines
CSS Guidelines is basically a set of rules and best practices for writing CSS. It was written by Harry Roberts – a front-end architect – who knows his stuff well. The goal is to make your CSS as clear as possible so everyone can understand it at a glance.
The rules cover everything from syntax and commenting to naming conventions, specificity and architectural principles. If some of it is over your head, don’t worry, try to keep to things you can understand and your code will already be that much better! [Get it here]
Spinkit
Another entry into loading animations, Spinkit provides awesome CSS only transformations for simple elements. Whether you use them for loading or interaction purposes, they are easy to grab off the site and then make your own. [Get it here]
Random User Generator
Since Random User Generator is a fully functioning API, you can build it into your application development needs as a dynamic tool. No more having to go to the website to generate test data each and every time.
It spits back emails, addresses avatars, names, all that good stuff, using a fast and secure connection. Using it programmatically with AJAX is extremely simple and understandable, this is something you shouldn’t forget for your next project! [Get it here]
jQuery Plugin Boilerplate
The jQuery Plugin Boilerplate is a starting template for jQuery plugins which employs good practices throughout. Javascript is something a lot of developers learn as an afterthought. As a result, lower quality code tends to be written.
By using the boilerplate, you are already writing better code by adhering to some simple rules it lays out. How the plugin is initialized, how functions are added, and so on. There’s also a more recent version which you can get via the site. [Get it here]
Regex 101
Many people are scared of regex because of the perceived complexity and the difficulty of testing with it. Regex 101 helps us by allowing the testing of our regex right in the browser.
Tools like explanations, hints, match explanations and others are also offered. I find this an invaluable tool because I myself struggle a bit with regex, but this tool helps me figure it all out much faster! [Get it here]
Font Awesome
Of all the icon fonts available on the web, Font Awesome is my favorite resource. It is completely free, regularly updated and has over 450 icons at the moment. I use it regularly in a wide range of projects, from designs to keynotes to websites.
Since it is a proper font, you can embed it in any capable application, making it a very flexible and portable option. Be sure to check out the Cheat Sheet for a full list of copy-pastable icons, class names and hex codes. [Get it here]
