An Approach on Building an Advanced Initial Boilerplate

Since some time I found myself defining a good starting point for a new project over and over again. While I use HTML5 Boilerplate in nearly all of my projects it’s not enough as an initial package. Since I’m using SASS (in its dialect SCSS) and have some other things I define over and over again I decided to set up a package that lets me start easily and includes a lot of tools that are necessary for my projects.

This is an introduction to init, the starting point for projects that require a bit more than just HTML5 Boilerplate.

Visit project on GitHub       Download

Not just HTML5 Boilerplate …

With HTML5 Boilerplate we are creating an awesome starting point for front-end developers that want to use a solid boilerplate that has defaults that are useful for everyone. Besides that we want to keep it simple and straightforward. That’s why adding a preprocessor or complex dependencies to HTML5 Boilerplate is not possible.

For the team I’m working with at /gebrüderheitz and me it’s important to have a solid basis for projects we do that we can use over and over again. Other developers have this need too and that’s why there is Twitter Bootstrap or ZURB’s Foundation (just to name two) out there.
Just while developing this project my buddy Kahlil came up with a nearly similar approach: HTML5 Boilerplate on Crack. He has different things in his package then init has. Keep an eye on that.

Simplify Development

For init I decided to use Grunt.js as a development- and deployment-tool. Grunt is a Node.js based task-oriented tool that simplifies developing and deploying JavaScript a lot. Since Grunt has a big and valuable community there are a lot of plugins that you can use with it to help developing HTML and CSS too.
Currently we are thinking about including Grunt into HTML5 Boilerplate, which is a great step in moving the project to the next stage.

As stated before I love using SASS as a preprocessor and I have some structure I like to apply to my SCSS-development files which I already outlined in my post about my personal coding guidelines. This requires to have Ruby installed on your local machine to compile SCSS into a CSS-file or to use a tool like CodeKit that does everything for you. I am actually a big fan of CodeKit but also like to have the compilation as part of my whole build process for a website.

SCSS compilation is integrated in init’s Gruntfile.
By running grunt watch you start a process which watches for changes in your SCSS-files and compiles the CSS-file automatically unsing Sindre Sorhus’ awesome Grunt-plugin grunt-sass. Besides that the watch-task recognizes changes in your JavaScript files and lints them on the fly.

If you’re not dependent on any special server-environment you can easily fire up ./server.sh on your console to start a small Ruby-server with a tab in your favorite browser.

There are a lot of other goodies in the project. Please visit GitHub and read the project’s readme-file for more information.

I’d also encourage everyone to keep an eye on Yeoman since I think it can do a lot more then my package does and will be awesome. It will be available soon.

It’s Open Source

This project is Open Source and I would love to see some people chiming in and discussing the project in its current state to make it better. I’d love to get some feedback from all of you!

Apart from that please feel free to use it for your projects. It’s all under MIT License and thus pretty much there for all your needs.

Thanks for being awesome, community <3!!

Is Mothereffin’ jQuery Up?

Some weeks ago I made a pull request for HTML5Boilerplate which should update jQuery to the latest version available on the Google CDN. How ever I copied the old version of minified jQuery because the uncompressed version was available but the minified wasn’t. Stupid thing!

That’s why I created Is Mothereffin’ jQuery up? The service checks three major CDNs for the availability of the latest jQuery version.

View Is Mothereffin’ jQuery up?

How to Check if the File is up

I had some difficulties to find the right method how to detect if a file is already available with JavaScript. If you don’t have to deal with cross-domain requests this is not a big thing and done pretty easy. But I need cross-domain requests.

If a file is not available on a server, the request dies with an error 404 and no callback will be called. See this Fiddle for a test-case. Even a try-catch-expression does not help.

I decided to check all files for availability and if the request ends up in an error nothing will happen. The script will check if all files are available after three seconds and will otherwise “tell” the user that it’s not. This is not a bullet-proof method as it could take more then three seconds to request all files. If you have a better idea please let me know.
For the moment the resources will be labeled as “available” when they are loaded even if they were labeled “not available” before. So you will not end up with wrong result, it just may take a second more to show you that.

The Styles

The project was build “mobile-first”. It makes use of the CSS3 Flexible Box Model instead of float and all the other stuff.

I’m not supporting IE in any way because I think most web-developer don’t use Internet Explorer.

Todo

  • Support more libraries such as Mootools, Dojo, Prototype, ExtJS and YUI
  • Let users submit other CDN via a form
  • Link buttons to their libraryDone with this commitsuggestion by Mathias

Let me know if you want some other features.

Contribute via GitHub

I’ve put this project up on GutHub. Feel free to contribute or just watch it.

Feature requests can also be placed in the issue-tracker there.

HTML5 Boilerplate Favicon PSD-Template

No longer maintained

Version 3.1 – Update 25.11.2012

Add current 16x16px favicon.

Version 3.0 – Update 25.05.2012

And again Daniel updated the template with some great things.
It now features the “new” HTML5 Boilerplate icons, you get a better overview of what icons are present and how the output of images is.
Apart from that Daniel made a bug-fix for the 144×144px touch icon where the PNG wasn’t saved by default.


Version 2.0 – Update 21.03.2012

Daniel has updated the favicon template with a 144×144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built into the latest version of the iPad. A version of this is also included in HTML5 Boilerplate by default. Please read this issue for more information and remember Mathias’ article, which he updated recently.

Thanks goes out to Daniel.


I’m using HTML5 Boilerplate (H5BP) for nearly all of my projects at the moment. Why? Mh, I think mostly because it provides best practice for so many things concerning front-end development. With H5BP I learned how to use favicons (or touch icons) in different variations for smartphones and stuff properly.

Friend and boss Daniel designed a nice PSD template to create the various icons you need. It has four different sizes and includes slices and meta-information for everything. You just need to include your favicon, “Save for Web” and you’re done.

He gives it away for free. So feel free to download and share. It would be pretty nice if you check out his Twitter-stream and follow him.

Preview   Download PSD

Additions

Please be aware that you also should add an apple-touch-icon.png. You could do this by copying apple-touch-icon-57x57-precomposed.png and rename this. Thanks Sven for the heads up.

A Note on .ico

Since you should always use a .ico file for the favicon in order to get it working in Internet Explorer I would advice you to open favicon.png in Photoshop and use the ICOFormat plugin to generate the .ico file.

Multi-Layer Favicons

Jon R. Humphrey made a layered favicon template and shared it on GitHub. Please check it out, it might be more helpful than this template from time to time.