Jump to Navigation

Me on Twitter

  • RT @tewoz: Demain, lancement officiel de ma campagne de crowdfunding pour mon recueil de strips « Comme un Lundi » ! Je compte sur vous pou… 1 week 3 days ago
  • Found that in my old CD tower. Noticed the penguin ? Yes it's a #Linux version of #Tribes - Still one of the best g… https://t.co/4QEzHVXhmO 3 weeks 5 days ago
  • RT @esascience: In this #Hubble image, a very distant galaxy – nicknamed the Sunburst Arc – appears at least 12 times 4 weeks 5 days ago
  • The CIA just lost control of its hacking arsenal. Here’s what you need to know. - https://t.co/QrjTDlHJIA 5 weeks 2 days ago
  • RT @timberners_lee: Today the internet is 50 years old. The internet & the web it enabled have changed billions of lives for the better. B… 6 weeks 15 hours ago
  • Head-to-head evaluation of six password managers - Quantopian Security - Medium - https://t.co/WAiev023AJ 6 weeks 2 days ago
  • How I Fully Quit Google (And You Can, Too) - Featured Stories - Medium - https://t.co/d61000B5Fz 7 weeks 6 days ago
  • Just curious to see what happens if I publish a proof that's not been validated yet but another one has been since… https://t.co/tEjW1dOBZk 8 weeks 1 hour ago
  • Verifying myself: I am nicolabs on https://t.co/kWEo6pR64D. 8Q3_sZQCU_eT7R0adjPpzaxxehzySRwhjnWp / https://t.co/AIAa4UWCyX 8 weeks 1 hour ago
  • Verifying myself: I am nicolabs on https://t.co/kWEo6pR64D. SWkl7x3CLQ7yB21lfR5703KSVEq24aUwjKsG / https://t.co/aTGuWxSQzG 8 weeks 1 hour ago

Scaffolding the Web 2.0

h5bpinitializryeoman

 

Starting up with Web 2.0 development ?

Let's choose between three essentials tools to begin a new project !

 

HTML5 Boilerplate

HTML5 Boilerplate (a.k.a. H5BP) is the original scaffolding tool by Paul Irish & Co (will have to search for the exact history...).

It allows you to build a clean website structure with standard features based on best practices like :

  • responsive design-ready CSS
  • standard javascript libraries : Modernizr, Respond.js, ...
  • 404 page
  • Google Analytics
  • favicons for apple
  • many more...

It does not support CSS preprocessing (SASS, ...) and requires you some effort to upgrade to the latest version later (by separating your work from the original files that will be upgraded)...

It's good for small sites.

Find it at http://html5boilerplate.com

H5BP logo (star)

 

Initializr

While H5BP is a static project template to download, Initializr allows you to customize it by selecting the features you want on your site and then downloading the generated files.

It has 3 ready-to-use configurations :

  • Classic H5BP
  • Responsive (using a custom framework by @verekia)
  • (Twitter) Bootstrap

The customization is made online and on-the-fly : you can see the generated files directly online while filtering the features ("What's inside" button).
It still does not support CSS preprocessing.

Since it's simply a "configurator" over H5BP I find it more convenient than H5BP alone for small sites.

Find it at http://www.initializr.com

Initializr logo


Yeoman

To solve the "static template" issue, H5BP first evolved into "generator-mobile-boilerplate", then into several specialized tools now known as "Yeoman".

Those tools bring the features you usually want on any project :

  • yo scaffolds your project (like a Maven archetype)
  • Grunt and Gulp build and execute it (like Maven / Ant)
  • Bower and npm handle dependencies (like Maven / Ivy)

In short, Yeoman is the standard, complete tool suite for Web 2.0 developers like Maven is for Java developers.

Find it at http://yeoman.io

Yeoman logo

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • E-Mail addresses are hidden with reCAPTCHA Mailhide.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>. The supported tag styles are: <foo>, [foo].
  • Twitter-style #hashtags are linked to search.twitter.com.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.