March – Week 4

“Isn’t it pretentious to start every article with a quote, makes you look like a tool.”
– Anon.

Last time we looked at media queries, and how we can use them to re-shape the site as the browser window is resized. Creating our own media queries for every site though, seems like a pain just to accommodate half the internet! Fortunately frameworks can solve this problem for you.

You’ve been using Sublime Text, but developers have a lot of tools they may or may not use, sometimes and not all the time. Whether you’ll use them at all is actually beside the point right now, we want to be modern and relevant so we’ll try them first. (Some tools may not be useful right now, but later, perhaps.) Ok so we’re looking at another Tuts+ course, Tools of the modern web developer. Here’s what I got from it:

  1. Everything in unit 2 is great, Yeoman is great, however the trouble with it is, for me it wasn’t useful at this stage (+ I’ll come back to it later). You should already be using Emmet for Sublime, and I never found Markdown useful, perhaps you will.
  2. The general consensus seems to be that Sass is better than LESS, though again same problem as Yeoman. At this stage it was too much trying to integrate all this stuff at once, maybe watch a bit of the video to get an idea about how these tools can improve workflow and the health of your documents, then move on (more on Sass later).
  3. I’m cutting more out! I’m not really into HTML or JS abstraction, so I avoided Jade and Haml, though you may feel differently. Same with Coffeescript, some people really like it (it purports to make JavaScript more readable, but I don’t think it’s a good idea for beginners to cover up the core language in further layers. If your still tempted to “simplify” JS, read this before you do.)
  4. Next up is Mustache and Handlebars, not willing to say which you should choose. But again I didn’t return to HTML templates until a few months later and I was a bit better with JavaScript. Still if you can see the value of using it now, by all means.
  5. Unit 8: Mobile debugging – ok. Local web servers – uncertain. (If you get stuck then fear not, we’ll return to it later.) Autosave – didn’t work for me! Chrome DevTools – very helpful, learning how to run JavaScript in the console and use breakpoints might seem confusing at this stage but you’ll be wanting to return to this.

Why am I telling you to come back later, why not post this all later. Well like I mentioned above, trying to shoehorn all these different tools into your website and workflow isn’t easy. In fact, I found it a damn nuisance, therefore I suggest gently introducing them as you get more confident. Start with Bootstrap and Boilerplate. These frameworks help you build a bit quicker, build another site, play around with making everything responsive and add some of your own media queries.


1. Tuts+ course – Tools of the modern web developer.
2. Try using Bootstrap and Boilerplate in a project.

Leave a Reply