Ara Abcarians Logo

Useful Tools For Developers

3 minute read

One thing I have learned working at an agency for almost 4 years now is that things need to be done yesterday. We are constantly asked to do the impossible which means we can use all the help we can get. I’ve put together a list of fantastic tools and references that consistently save my life. Hope they help you out too!

Boilerplates

HTML5 Boilerplate
A rock-solid default for HTML5 awesome.
Twitter Bootstrap
Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
Mobile Boilerplate
A best practice baseline for your mobile web app.
HTML Email Boilerplate
Boilerplate for creating email templates.
Bones
An HTML5 Starter Theme for easy WordPress Development. Based off the HTML5 Boilerplate, Bones is the best way to start a new HTML5 WordPress Project.

Responsive Design

CSS Media Queries
Boilerplate CSS3 Media Queries.
Skeleton
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
YAMB
YAMB is a small set (boilerplate) of tools and best practices that allow web designers build responsive websites faster.
1140 Grid
Fluid/Responsive down to Mobile using media queries.
Golden Grid System
A folding grid for responsive design.
Gridpak
Responsive grid generator, completely customizable.
Tiny Fluid Grid
Fluid to min/max widths, No mobile specific/media queries.
320 & Up
Prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

HTML & CSS

CSS Lint
CSS Lint is an open source CSS code quality tool originally written by Nicholas C. Zakas and Nicole Sullivan.
Normalize.css
Alternative to CSS Resets, normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
BoxCSS
BoxCSS packages all your css files into a single cached minified request.
BoxResizer
BoxResizer resizes your images through a proxy and allows you to adjust the quality, change the format or transform the image in a single request.
Prefixr
Cross-Browser CSS in Seconds!
CSS3 Please
The Cross-Browser CSS3 Rule Generator
Sprite Cow
Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.
Placehold.it
A quick and simple image placeholder service.
Dabblet
An interactive playground for quickly testing snippets of CSS and HTML code.

JavaScript & jQuery

JS Hint
JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions.
jsPerf
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways.
BoxJS
Boxjs gives you the flexibility of a modular loading system whilst providing the speed of a single, compressed JS file.
jQuery Boilerplate
Simple jQuery Plugin template for beginners and above.

Miscellaneous

ImageAlpha
Instead of using PNG fixes like dd_belatedpng.js that slow down or create that nasty “frozen” state in ie6 download this awesome app.
Formalize
Break the cycle of inconsistent form defaults, style forms with impunity!
Copy Paste Character
A web and iPhone application for copying the ‘hidden’ characters that comes with the computer’s typefaces, to be pasted into emails, tweets, text documents, forums and whatever else you might need to spice up.