Build a simple client-side MVC app with RequireJS

Require JS Logo

As a web developer, you certainly often started coding your JavaScript in a single file, and, as the code base gets larger and larger, it became really difficult to maintain. To solve this problem you can split your code in several files, add more script tags and use global variables to reach functions declared in other files. But this pollutes the global namespace and for each file an additional HTTP request consumes bandwidth, which slows down the loading time of the page.

If this happened to you, you certainly understand that there is a strong need to organize our front-end code differently, particularly if we have to build large-scale web apps with thousands of lines of JavaScript. We need a new way to organize all this mess to make it easier to maintain. This new technique consists in using script loaders. Plenty of them are available on the web, but we’ll focus on a very good one called RequireJS.

In this step by step tutorial you will learn how to build a simple MVC (Model – View – Controller) app using RequireJS. You don’t need any particular previous knowledge of script loading – we’ll see the basics together.

Continue reading “Build a simple client-side MVC app with RequireJS” »

DON’T READ this Less CSS tutorial (highly addictive)

Less CSS logo

WARNING: If you like copy-pasting, find-replacing, scrolling in giant messy CSS files, not reusing your code, writing hundreds of times the same thing, you should definitely LEAVE THIS PAGE RIGHT NOW. I’m serious, if you start reading this tutorial, you might like it and could dangerously become way more productive. At the end of this read, you might even think crazy things like “pure CSS sucks” ! You’ve been warned…

EDIT: I strongly recommend reading or watching my talk about CSS Preprocessors and consider using Sass instead of Less.

If you’re a web developer or designer you probably faced this kind of situation before:
“I wonder if we should use a different theme on our website, can we try a blue one instead of the current green?”

2 possible answers:

  • A pure CSS developer: “Damn… Can you come back in 15 minutes?”
  • A Less CSS developer: “Sure! Wait just a second… Done, look!”

If you’re using pure CSS, even when respecting best practices, chances are that your answer will be the first one. Indeed, CSS is really far from being perfect. Hasn’t it come to your mind that some essential features are missing from a such widely used language? For instance, very basic things like variables.

Declaring a simple variable to store a color at the top of your stylesheet and being able to change the entire theme of your site by only changing this single variable would be pretty neat right? And what about all these repetitions each time you use CSS3 properties with vendor prefixes? Wouldn’t it be useful to have to declare that just once?

Well guess what, we’re gonna fix that! This article will demonstrate the power of Less, an enrichment of CSS using JavaScript. It adds tons of awesome features missing from CSS to make your web developer life so much easier. Trust me, once you’ve tried it, it changes the way you code your stylesheets forever and you’ll never come back to pure CSS!

Continue reading “DON’T READ this Less CSS tutorial (highly addictive)” »