Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things.
HTML and CSS Tools
HTML Email Boilerplate1
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.
A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.
A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.
A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker11.
This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.
A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.
Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.
This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.
David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.
Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.
The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.
Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code.
A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.
FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.
A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.
A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.
This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.
Modular Grid Pattern87
This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.
A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.
A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.
ASCII Pronunciation Rules for Programmers93
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.
From Me To You97
You might also want to take a look at our previous related articles:
- Powerful New CSS Techniques and Tools100 (April 2011)
- CSS: Innovative Techniques and Practical Solutions102 (February 2011)
- Time-Saving and Educational Resources for Web Designers103 (January 2011)
- 1 http://htmlemailboilerplate.com/
- 2 http://htmlemailboilerplate.com/
- 3 http://initializr.com/
- 4 http://switchtohtml5.com/
- 5 http://initializr.com/
- 6 http://layerstyles.org/
- 7 http://layerstyles.org/
- 8 http://html5boilerplate.com/mobile/
- 9 http://html5boilerplate.com/mobile/
- 10 http://www.askthecssguy.com/kotatsu/index.html
- 11 http://www.limaker.com/
- 12 http://www.askthecssguy.com/kotatsu/index.html
- 13 http://aboutcode.net/vogue/
- 14 http://aboutcode.net/vogue/
- 15 https://github.com/mockko/livereload
- 16 http://livejs.com/
- 17 https://github.com/mockko/livereload
- 18 http://code.google.com/p/css-x-fire/
- 19 http://code.google.com/p/css-x-fire/
- 20 http://ffffallback.com/
- 21 http://ffffallback.com
- 22 http://incident57.com/less/
- 23 http://incident57.com/less/
- 24 http://mgeraci.github.com/Less-Boilerplate/
- 25 http://mgeraci.github.com/Less-Boilerplate/
- 26 http://needle.readthedocs.org/en/latest/?redir
- 27 http://needle.readthedocs.org/en/latest/?redir
- 28 http://csswizardry.com/inuitcss/
- 29 http://csswizardry.com/inuitcss/
- 30 http://yostudios.github.com/Spritemapper/
- 31 http://yostudios.github.com/Spritemapper/
- 32 http://theleggett.com/2011/05/04/csssitemap-system/
- 33 http://theleggett.com/2011/05/04/csssitemap-system/
- 34 http://necolas.github.com/normalize.css/
- 35 http://necolas.github.com/normalize.css/
- 36 http://www.red-root.com/sandbox/holmes/
- 37 http://www.red-root.com/sandbox/holmes/
- 38 http://code.google.com/p/zen-coding/
- 39 http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
- 40 http://the-echoplex.net/log/css-crush
- 41 http://the-echoplex.net/log/css-crush
- 42 http://cssprefixer.appspot.com/
- 43 http://cssprefixer.appspot.com
- 44 http://markboultondesign.com/tools/index.html
- 45 http://markboultondesign.com/tools/index.html
- 46 http://www.csspivot.com/
- 47 http://pcss.wiq.com.br/
- 48 http://www.modernizr.com/
- 49 http://www.modernizr.com/
- 50 http://yepnopejs.com/
- 51 http://yepnopejs.com/
- 52 http://fittextjs.com/
- 53 http://fittextjs.com/
- 54 http://imakewebthings.github.com/jquery-waypoints/
- 55 http://imakewebthings.github.com/jquery-waypoints/
- 56 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
- 57 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
- 58 http://code.google.com/p/ligature-js/
- 59 http://code.google.com/p/ligature-js/
- 60 https://github.com/danbentley/placeholder
- 61 https://github.com/danbentley/placeholder
- 64 http://weepy.github.com/kaffeine/
- 65 http://weepy.github.com/kaffeine/
- 66 http://millermedeiros.github.com/crossroads.js/
- 67 http://millermedeiros.github.com/crossroads.js/
- 68 http://doctorjs.org/
- 69 http://doctorjs.org/
- 70 http://headjs.com/
- 71 http://hivelogic.com/enkoder/form
- 72 http://mollom.com/
- 73 http://hivelogic.com/enkoder/form
- 76 http://www.syntaclet.com/
- 77 http://www.syntaclet.com/
- 78 http://chris.zarate.org/projects/bookmarkleter/
- 79 http://chris.zarate.org/projects/bookmarkleter/
- 80 http://ted.mielczarek.org/code/mozilla/bookmarklet.html
- 83 http://gridcalculator.dk/
- 84 http://gridcalculator.dk/
- 85 http://www.problem.se/labs/gridcalc/
- 86 http://www.problem.se/labs/gridcalc/
- 87 http://modulargrid.org/#app
- 88 http://modulargrid.org/#app
- 89 http://susy.oddbird.net/
- 90 http://susy.oddbird.net
- 91 http://griddle.it/
- 92 http://griddle.it/
- 93 http://www.codinghorror.com/blog/2008/06/ascii-pronunciation-rules-for-programmers.html
- 94 http://www.codinghorror.com/blog/2008/06/ascii-pronunciation-rules-for-programmers.html
- 95 http://weavesilk.com/
- 96 http://weavesilk.com/
- 97 http://fromme-toyou.tumblr.com/tagged/cinemagraph
- 98 http://www.css-101.org/articles/two-layer-image/animated-gif-with-a-jpg-background.php
- 99 http://fromme-toyou.tumblr.com/tagged/cinemagraph
- 100 http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
- 102 http://coding.smashingmagazine.com/2011/02/16/css-useful-coding-techniques-and-design-solutions/
- 103 http://www.smashingmagazine.com/2011/01/18/time-saving-and-educational-resources-for-web-designers/