Getting Things Done: TODO Zero

Not a geeky topic this time! On August 17th I gave a talk about productivity at Yelp.
Here are the slides:

Deep dive into CSS Preprocessors

On May 31st, I gave this talk at SFHTML5 about CSS Preprocessors:

Initializr: With Great Templates Comes Great Responsivity!

Resize Me - Responsive Web Design Template

Today I’m proud to announce that a “Responsive template” is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors… Making your site work correctly on all these devices is a real nightmare. Well guess what? This nightmare is… absolutely not over! But as least, the boilerplate code of a responsive layout is now here to make your life easier.

Let’s see how it works and what best practices are introduced with this new template.

Continue reading “Initializr: With Great Templates Comes Great Responsivity!” »

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)” »

An overview of developing Windows 8 apps with HTML, CSS and JavaScript

Build Windows 8

After almost one week spent at BUILD Windows 8 conference in Anaheim, it’s time to let you know what’s important for you as Web Developers!

Windows 8 is the new major release of Windows announced earlier this year, with some big surprising news: Windows 8 apps use HTML5. It wasn’t easy to imagine how this was made possible since the whole interface looks really native. Now the conference is over, it’s way clearer and I will try to summarize what have been announced and what will interest you as Web Developers.

Continue reading “An overview of developing Windows 8 apps with HTML, CSS and JavaScript” »

Welcome to my new blog!

Hi there, welcome to my blog!
I’m Jonathan Verrecchia, but good luck to remember how to spell my last name! So let’s keep it shorter and simpler with “Verekia”.

I’m a 23 years old Parisian Front-End Web Developer, completely passionate about HTML, CSS and JavaScript. And believe it or not, I have a life too! I play music, like to party, travel as much as possible (oh, and by the way, I’m currently in a plane flying to Los Angeles, California right now, but more on that later).

Few notable things about me: I have a French blog about HTML5 and CSS3, which led me to write a book about HTML5 this year (it’s also in French, so good luck with that too!).

My book about HTML5

You might know me through another of my projects called Initializr. It’s a tool to generate a new HTML5 project based on HTML5 Boilerplate super quickly, you should take a look! It became the official custom builder of Boilerplate, so you can consider me as a contributor of HTML5 Boilerplate, although I don’t work on the core content.

Initializr - HTML5 templates generator

Anyways, because of some of these facts, Microsoft invited me to California to attend BUILD Windows 8 conference, which will deal with HTML5 in many ways. And that’s why I’m now on this plane! This major event is the perfect opportunity for me to start a new blog, in English this time, and keep you informed about what is being said at this 4 days conference.

A plane

I will also post few updates about my Californian adventures since I will move to San Francisco next week, and will stay there for 2 months and a half. So I hope you will like this blog, if so, you can follow me on Twitter as well (no French spam, promise!).

Ciao ciao!