Useful HTML-, CSS- and JavaScript Tools and Libraries

Advertisement

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.

Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

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.

HTML EMAIL BOILERPLATE2

Initializr3
This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator4 as well.

Start an HTML5 Project in Seconds5

Layer Styles6
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.

Layer Styles7

Mobile Boilerplate8
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.

Mobile Boilerplate9

Kotatsu10
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.

Kotatsu12

Vogue13
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.

Vogue - Auto-reload stylesheets whenever CSS files are saved14

LiveReload15
LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js16, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.

mockko/livereload - GitHub17

css-x-fire18
This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.

CSS-x-fire - Allows editing CSS properties in the IDE from Firebug CSS editor - Google Project Hosting19

Ffffallback20
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.

Bulletproof Font Stacks21

LESS.app for Mac OS X22
LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.

LESS.app For Mac OS X23

Less-Boilerplate24
Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.

mgeraci/Less-Boilerplate25

Needle v0.1a126
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.

Needle: Automated tests for your CSS — Needle v0.1a1 documentation27

inuit.css28
A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.

inuit.css—cooler than a polar bear’s toenails…29

Spritemapper30
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.

Spritemapper31

CSSsitemap System32
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.

CSSsitemap System33

Normalize.css34
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.

Normalize.css: A New Kind of CSS Reset35

Holmes36
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.

HTML5 Diagnostics with CSS37

Zen Coding38
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.

CSS Stress Testing and Performance Profiling39
Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers.

CSS Crush40
A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.

CSS Crush41

CSSPrefixer42
CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.

Painless CSS Prefixes43

iOS Media Query Previewer44
A very simple tool to preview how a particular website looks on an iPhone as well as iPad.

iOS Media Query Previewer45

CSS Pivot46
Here you can add CSS styles to any website and share the result with a short, handy link.

PCSS47
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.

JavaScript Tools

Modernizr 248
Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk Ateş and Alex Sexton.

Modernizr 249

yepnope.js50
A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.

yepnope.js51

FitText52
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.

Flexible Font Sizes with jQuery53

jQuery Waypoints54
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Waypoints55

jQuery Plugin Boilerplate56
This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.

jQuery Plugin Boilerplate57

ligature-js58
This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.

ligature-js - JavaScript to convert text patterns into common typographic ligatures. - Google Project Hosting59

Placeholder jQuery Plugin/Polyfill60
This jQuery plugin provides support for the new placeholder="" HTML5 form attribute in browsers that don’t natively support it (IE et al).

Normalize.css: A New Kind of CSS Reset61

StronglyTyped62
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.

StronglyTyped: A library for strongly typed properties & constants in JavaScript63

Kaffeine64
A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.

Kaffeine65

Crossroads.js66
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.

Crossroads.js: JavaScript Routes System67

Doctor JS68
Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:

Doctor JS69

HEAD.js70
A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely.

Hivelogic71
Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom72.

Hivelogic - The Anti-Spam Email Address Enkoder Web Form73

JavaScript Garden74
A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.

Programming Advice for JavaScript Developers75

Syntaclet76
By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.

Makes boring code look pretty! {} Syntaclet77

Bookmarkleter78
This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).

Bookmarkleter79

Bookmarklet Crunchinator80
This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.

Grids

The JavaScript Grid81
A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

The JAVASCRIPT GRID – A JavaScript based grid overlay82

Grid Calculator83
A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.

Grid Calculator by Nicolaj Kirkgaard Nielsen84

GridCalc85
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.

GridCalc - Grid calculator and generator86

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.

Customized Grid Patterns88

Susy89
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.

Un-obtrusive Grids for Designers90

Griddle.it91
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.

Griddle.it - Web page alignment made easy92

Last Click

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.

ASCII Character Pronunciation Rules94

Weave Silk95
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.

Screenshot96

From Me To You97
No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On her photography blog, Jamie Beck presents scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that her photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image98. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.

From Me To You99

Related Articles

You might also want to take a look at our previous related articles:

(vf) (il)

Footnotes

  1. 1 http://htmlemailboilerplate.com/
  2. 2 http://htmlemailboilerplate.com/
  3. 3 http://initializr.com/
  4. 4 http://switchtohtml5.com/
  5. 5 http://initializr.com/
  6. 6 http://layerstyles.org/
  7. 7 http://layerstyles.org/
  8. 8 http://html5boilerplate.com/mobile/
  9. 9 http://html5boilerplate.com/mobile/
  10. 10 http://www.askthecssguy.com/kotatsu/index.html
  11. 11 http://www.limaker.com/
  12. 12 http://www.askthecssguy.com/kotatsu/index.html
  13. 13 http://aboutcode.net/vogue/
  14. 14 http://aboutcode.net/vogue/
  15. 15 https://github.com/mockko/livereload
  16. 16 http://livejs.com/
  17. 17 https://github.com/mockko/livereload
  18. 18 http://code.google.com/p/css-x-fire/
  19. 19 http://code.google.com/p/css-x-fire/
  20. 20 http://ffffallback.com/
  21. 21 http://ffffallback.com
  22. 22 http://incident57.com/less/
  23. 23 http://incident57.com/less/
  24. 24 http://mgeraci.github.com/Less-Boilerplate/
  25. 25 http://mgeraci.github.com/Less-Boilerplate/
  26. 26 http://needle.readthedocs.org/en/latest/?redir
  27. 27 http://needle.readthedocs.org/en/latest/?redir
  28. 28 http://csswizardry.com/inuitcss/
  29. 29 http://csswizardry.com/inuitcss/
  30. 30 http://yostudios.github.com/Spritemapper/
  31. 31 http://yostudios.github.com/Spritemapper/
  32. 32 http://theleggett.com/2011/05/04/csssitemap-system/
  33. 33 http://theleggett.com/2011/05/04/csssitemap-system/
  34. 34 http://necolas.github.com/normalize.css/
  35. 35 http://necolas.github.com/normalize.css/
  36. 36 http://www.red-root.com/sandbox/holmes/
  37. 37 http://www.red-root.com/sandbox/holmes/
  38. 38 http://code.google.com/p/zen-coding/
  39. 39 http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
  40. 40 http://the-echoplex.net/log/css-crush
  41. 41 http://the-echoplex.net/log/css-crush
  42. 42 http://cssprefixer.appspot.com/
  43. 43 http://cssprefixer.appspot.com
  44. 44 http://markboultondesign.com/tools/index.html
  45. 45 http://markboultondesign.com/tools/index.html
  46. 46 http://www.csspivot.com/
  47. 47 http://pcss.wiq.com.br/
  48. 48 http://www.modernizr.com/
  49. 49 http://www.modernizr.com/
  50. 50 http://yepnopejs.com/
  51. 51 http://yepnopejs.com/
  52. 52 http://fittextjs.com/
  53. 53 http://fittextjs.com/
  54. 54 http://imakewebthings.github.com/jquery-waypoints/
  55. 55 http://imakewebthings.github.com/jquery-waypoints/
  56. 56 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
  57. 57 http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
  58. 58 http://code.google.com/p/ligature-js/
  59. 59 http://code.google.com/p/ligature-js/
  60. 60 https://github.com/danbentley/placeholder
  61. 61 https://github.com/danbentley/placeholder
  62. 62 http://leaverou.me/2011/05/strongly-typed-javascript/
  63. 63 http://leaverou.me/2011/05/strongly-typed-javascript/
  64. 64 http://weepy.github.com/kaffeine/
  65. 65 http://weepy.github.com/kaffeine/
  66. 66 http://millermedeiros.github.com/crossroads.js/
  67. 67 http://millermedeiros.github.com/crossroads.js/
  68. 68 http://doctorjs.org/
  69. 69 http://doctorjs.org/
  70. 70 http://headjs.com/
  71. 71 http://hivelogic.com/enkoder/form
  72. 72 http://mollom.com/
  73. 73 http://hivelogic.com/enkoder/form
  74. 74 http://bonsaiden.github.com/JavaScript-Garden/
  75. 75 http://bonsaiden.github.com/JavaScript-Garden/
  76. 76 http://www.syntaclet.com/
  77. 77 http://www.syntaclet.com/
  78. 78 http://chris.zarate.org/projects/bookmarkleter/
  79. 79 http://chris.zarate.org/projects/bookmarkleter/
  80. 80 http://ted.mielczarek.org/code/mozilla/bookmarklet.html
  81. 81 http://javascriptgrid.org/
  82. 82 http://javascriptgrid.org/
  83. 83 http://gridcalculator.dk/
  84. 84 http://gridcalculator.dk/
  85. 85 http://www.problem.se/labs/gridcalc/
  86. 86 http://www.problem.se/labs/gridcalc/
  87. 87 http://modulargrid.org/#app
  88. 88 http://modulargrid.org/#app
  89. 89 http://susy.oddbird.net/
  90. 90 http://susy.oddbird.net
  91. 91 http://griddle.it/
  92. 92 http://griddle.it/
  93. 93 http://www.codinghorror.com/blog/2008/06/ascii-pronunciation-rules-for-programmers.html
  94. 94 http://www.codinghorror.com/blog/2008/06/ascii-pronunciation-rules-for-programmers.html
  95. 95 http://weavesilk.com/
  96. 96 http://weavesilk.com/
  97. 97 http://fromme-toyou.tumblr.com/tagged/cinemagraph
  98. 98 http://www.css-101.org/articles/two-layer-image/animated-gif-with-a-jpg-background.php
  99. 99 http://fromme-toyou.tumblr.com/tagged/cinemagraph
  100. 100 http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
  101. 101 http://coding.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins/
  102. 102 http://coding.smashingmagazine.com/2011/02/16/css-useful-coding-techniques-and-design-solutions/
  103. 103 http://www.smashingmagazine.com/2011/01/18/time-saving-and-educational-resources-for-web-designers/

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Suddenly inspired!

    June 10, 2011 4:37 am

    Excellent list, will have fun exploring everything this weekend, thanks SM!

    0
  2. 2

    Very nice and useful =D

    0
  3. 3

    This is an exemplary post about how helpful Smashing Magazine is for designers and front-end developers, Its strange but I haven’t used more than one or two of these services in past, I have my own set of css and html templates that I use when starting a new project.
    I am amazed to see some of these resources which can be extremely helpful to me.
    Table styler, list creator, layer styler are absolutely awesome.
    I still have to code my first HTML5 website, I’m lagging behind but HTML5 Boiler Plate will definitely be helpful.

    Anyway, Big Thanks SM.

    0
  4. 4

    This is an extremely useful list. I’m excited to explore the resources I haven’t used yet.

    0
  5. 5

    Smashingmagazine rulez!

    0
  6. 6

    Just to let you know, if you like fittext.js, I ported it for mootols http://beta.rdsign.net/code/article_12.

    0
  7. 8

    Please excuse the blatant self promotion, but I’ve been working on something that others may find useful:

    http://chipcullen.com/font-combinator/

    It’s a tool that allows you to try different font combinations quickly – one for header, one for paragraph. It uses Google Web Fonts, plus some common system fonts.

    [If others do find it useful, or have any good ideas on how to improve it, I would love to hear it!]

    0
  8. 9

    Stefan Rynkowski

    June 10, 2011 5:45 am

    Wow, very useful. My Weekend = Exploring this list.

    0
  9. 10

    From Me To You looks amazing!!!

    0
    • 11

      was it just me, or did it totally remind anyone else of the photographs in the harry potter movies? i suspect we’ll be seeing more of this technique/magic in the future.

      0
  10. 12

    michael stephan

    June 10, 2011 6:27 am

    wow thanks, lots of goodies here! I love this site!

    0
  11. 13

    now this is truly an incline on ma smashing!
    terrific selection of pure usefulness!

    0
  12. 14

    Thanks for the tools but i really like the last part. XD

    0
  13. 15

    Pedro Magalhães

    June 10, 2011 8:32 am

    Wonderful!

    0
  14. 16

    The new Teehan + Lax baseline grid very useful as well: http://www.teehanlax.com/blog/designing-faster-with-a-baseline-grid/

    0
  15. 17

    Just want to give a quick plug to http://www.NotJustaGrid.com a modular CSS Framework I launched a few months ago and have been getting great feedback on so far. A SASS version has also been created https://github.com/emachnic/NotJustAGrid—SASS

    0
  16. 18

    Hashgrid? Or did I miss it. Anyway #useful

    0
  17. 19

    Very helpful list. This is what I’ve been looking for :)

    0
  18. 20

    Nice & useful collection. “From me to you” is out of the box idea.. I just love it..

    0
  19. 21

    Mehrdad Nassiri

    June 11, 2011 3:31 am

    Wow !
    really nice resources …

    thank you.

    0
  20. 22

    Wow!!!

    Thanks a lot for this very helpful list.

    0
  21. 23

    These articles are the best, thanks!

    0
  22. 24

    Hey its nice post and i liked the last image of the animation in the gif file. Can you release another post in that topic guys.

    0
  23. 25

    Can you please post a tutorial on how to create that last .gif file? Pretty please?!

    0
  24. 26

    That’s Jamie’s tumblr blog. Jamie Beck is a woman. And those photos are all hers, she doesn’t collect them.

    0
  25. 28

    Susy is a Sass framework built with Compass, not a Rails framework.

    0
  26. 29

    very nice article , love it

    0
  27. 30

    Thanks alot! Love it.

    0
  28. 31

    conroy@ web designer

    June 13, 2011 4:43 am

    This is an awesome list of tools. I really love working in CSS and I am looking forward to use Layer Styles for this purpose.

    0
  29. 32

    good one.. helpful indeed

    0
  30. 33

    Absolutely loved this article. Terrific set of tools for bring the web to life.

    0
  31. 34

    Fantastic list, I can see myself using quite a few of these in upcoming projects!

    0
  32. 35

    Just another PHP-based CSS preprocessor including css variables, flexible file merging and realtime compression: http://csskon.blacmox.de/en

    Cheers

    0
  33. 36

    I prefer http://www.css3.me/ than Layer Style which is buggy.

    0
  34. 37

    I use bluePen Editor ( http://bluepeneditor.com ) for a while.. I’m quite satisfied with it despite the fact, that it is in beta version.

    0
  35. 38

    great and usefull article! this will help all of us to make good stuffs!

    0
  36. 39

    We use Knockout.js quite alot. It’s a MVVM-like JS framework.
    //B

    0
  37. 40

    great list… I ran across a plugin mentioned, about creating li elements quickly.. I didn’t know that another service existed for doing that… Even I created a small tool which helps in creating li elements and even complete navigation bar structures.. May be it might be of help to someone… Also if some coda plugin developer wants to help me out in creating a plugin for coda, it would be great!

    Here is the link http://code-pal.com/listify/

    0
  38. 41

    this list is awesome, i like most of them and decided to use of some of them in my own projects.

    0
  39. 42

    collection is useful, but I like the online code beautification
    http://nehadesigner.blogspot.com/2011/04/make-your-bore-code-to-look-pretty.html

    Thanks,
    Samiksha

    0
  40. 43

    from me to you and Weave Silk looks greate .. i’m really like it :)

    0
  41. 44

    Ashish Ganguly

    July 5, 2011 9:50 pm

    ProCSSor.com ?
    Compass framework?
    CSS3please?

    0
  42. 45

    Very useful tools, thanks.

    0
  43. 46

    Thank you and thank you.

    0
  44. 47

    Hendrik-Jan Francke

    August 4, 2011 7:23 am

    Thanks for the list. I do like that Smashing keeps me up-to-date on the latest tools. Today I tested out 3 of them. All 3 are quite problematic. Not nearly as good as promised.

    The intro states “we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources”. It doesn’t directly state that these resources have been tested. Based on my experience today, I think you should state whether resources listed have been tested. Why? I can’t imagine Smashing would have declared the ones I tested as ‘useful’ if you had tested them.

    Now, if one 1 of 3 had been problematic, I wouldn’t have posted this reply. But since all 3 were problematic, it makes be doubt the usefulness of the list of resources.

    0
  45. 48

    Great post i like this. Here is another post about HTML, CSS and JavaScript:- creativesolutionmedia.com/blog/item/24-html-css-and-javascript-working-together

    0
  46. 49

    There is a web IDE that combines live reload, Less, and Zen Coding, pythonfiddle.com

    0
  47. 50

    Budiman Indrajaya

    April 1, 2012 4:27 pm

    I know i have said this many time before to Smashingmagazine, and i wanna say it again now,, Thank You for your great post! ^_^

    0
  48. 51

    It would be good to add html5maker.com to this list as it is one of best online JavaScript animation tools.

    0

↑ Back to top