HugoGiraudel.com

Things I'd like to be able to do in 2013

Mon, 13 May 2013 00:00:00 -0700

This post will be kind of "personal" since I want to talk about things I would like to be able to do before the end of the year.

Get better at JavaScript #

God, I suck at JavaScript.

God, I suck at JS. Hopefully, I get slightly better each day. My code is more and more structured but I'm far from being even acceptable at JavaScript. So many things are still a mess in my head. I'd really like to get better before the end of the year. At least good enough to do some simple stuff without struggling for hours.

Learning Canvas #

I have good hope that once I'll be more comfortable with JavaScript, I will also be more comfortable with Canvas. This is a fantastic tool offering close to endless possibilities. I had the opportunity to use it once or twice during the past, but it was mostly coming in some kind of library.

I know there are some pretty good tutorials out there to learn how to use Canvas but I didn't take the time to dig into them. What do you think guys, worth it? Or we can live without it for now?

Learn how to use Flexbox #

I have some basic knowledge regarding the Flexible Box Module. I even made all the CSS-Tricks Almanac entries on this stuff and the complete guide for it. But I am not comfortable with this. I haven't implemented it in any project yet, and can't wait to do so.

I truely believe Flexbox is the future of CSS layout.

I truely believe Flexbox is the future of CSS layout, especially when it comes to RIA (Rich Internet Applications) and web apps. Floats and inline-blocks are sucky as hell when it comes to complex architectures.

On a lesser extend (mostly because of the browser support), I think the Grid Layout Module is equally very interesting. Layout possibilities are endless, and it's only the beginning: the specification is still not over.

Finally understanding z-index #

I consider myself as a good "CSS developer" (if such a thing even exists); I have solid knowledge on the language, I know how to do pretty much anything that comes in a standard-to-advanced front-end project and I'm aware of performance, accessibility, responsive design and all the topics that cool kids talk about. But if there is one thing I still don't get properly, it has to be z-index.

What I look like when dealing with z-index

I swear, guys behind the specification of this property were either sadist or completely high. If you're asking me, this is by far one of the most complicated things to understand in CSS2.1. This excellent article by Philip Walton proves it.

Work on a medium to large scale project #

I feel like I lack some experience when it comes to large-scale projects. Same goes with team work. Even if I work on a team, I use to be the only developer on projects I'm working on. Other guys are either designers or managers, and such.

I'd really like to work with several developers on a same project before the end of the year. I'm sure I will learn a ton of things. It is very different to work with multiple guys on the same code basis from working alone with one's own code.

Final words #

It has been week since I first designed the first draft of this post in my head. Back then, I wanted to include "go to a conference", and even "speak to a conference". Hopefully, I don't have to include them since I'll be attending the KiwiParty as a speaker in late June. Very excited. :)

Anyway, this is only the tip of the iceberg, there are so much more things I would love to learn and do before even the end of the month. Alas, time isn't expandable!

What about you guys? What is it that you'd like to be able to do before the end of 2013?

Six months of blogging

Fri, 10 May 2013 00:00:00 -0700

Hey guys! Yesterday, the blog was 6 months old. Launched in November 9th 2012 as a quick and dirty plateform to drop some posts when I get time, now built on Jekyll, Sass and GitHub Pages, I have to say I am pretty happy with what I have done so far with this.

I take this article as an opportunity to make some kind of assessment. Any comment appreciated of course. ;)

A few analytics #

About the blog

In 6 months, I've released exactly 30 articles (this is 31st) including 3 specials: 2 interviews (one of me from Clément Osternaud and one of Manoela Ilic from me) and a guest post (from Ana Tudor).

The most successful article is definitely Dig deep into CSS linear gradients (the guest post from Ana Tudor) with more than 30,000 viewed pages and 32 comments. Then it is a very old one: Why I switched from LESS to Sass with over 12,000 viewed pages for 29 comments. The third most read article is My CSS aha moment with about 11,000 viewed pages and 30 comments. Note that other articles like Why a CSS alternative to the select element is not possible, Simulate float: down and Future of CSS layout: Grid has been very welcomed as well.

All articles have drawn more than 82,000 unique visitors for about 150,000 viewed pages. The average visit duration is close to one minute, and the number of page per visit is around 1.4.

Spiky visits between February and April

About you

Chrome gets more than 60% of the browser share.

Enough about me, let's talk about you: 28% of users come from United States, 8% come from United Kingdom, then a little more than 7% from France.

Regarding browser, I'm a lucky bastard: Chrome gets more than 60% of the browser share on my site, then it's Firefox with 17.5%, and then Safari with 16%. Internet Explorer comes further with 1.8%.

Mobile vs Desktop

About 14% users are reading articles on their mobile phone (cf. fig 2). and 7 out of 10 of them use an Apple phone. The 3 others use Android (I'm in).

The most important traffic source is definitely Twitter (actually t.co), then it's Reddit and then Codrops. A little further behind, we have Sidebar.io, Google and CSS-Tricks.

What's next? #

You tell me. Is there anything you'd like to see?

I'm thinking about adding an excerpt for each blog post to the home page. I think some people asked for it. My problem with this is that excerpt are a pain in the ass to do if you want to do it right, and when generated, it generally sucks. I'll see if I can come up with a decent solution.

I would also like to add a small banner for Browserhacks in the sidebar. I'll work that out anytime soon.

Anyway, thank you all for reading. That's what keeps me writing. ;)

Automatic figure numbering with CSS counters

Thu, 02 May 2013 00:00:00 -0700

My CSS Aha moment

Tue, 30 Apr 2013 00:00:00 -0700

I'd like to share with you my CSS "Aha moment". The "Aha moment" is when some day, in the very back of your head, two neurons get in touch and all of the sudden things become clear as crystal.

All elements on a page are rectangles.

I think mine was like two years ago or something and since then my CSS has been better than ever. I don't really remember how it came up, but suddenly I understood that absolutely all elements on a page are rectangles.

God, that sounds stupid now but it really helped in understanding how to make efficient CSS. You know, at first you don't necessarily get that a line of text isn't shaped around the text but follows the same pattern as all other elements.

And when you get that and most generally the whole box-model (that says width equals width + padding-left + padding-right + border-left + border-right.), everything becomes so simple.

CSS Box Model

Seriously, the first thing to understand when learning CSS is that every element is following the same pattern: a content-box in a padding-box in a border-box in a margin-box; I don't know why my teachers didn't even start with that.

Once you get that, it's really not that hard to produce correct (not necessarily efficient, but still correct) CSS.

What about you? What was your Aha moment?

My interview by Clément Osternaud

Tue, 23 Apr 2013 00:00:00 -0700

French front-end developer Clément Osternaud interviewed me for his site. Below is the translation of the whole interview.

Could you introduce yourself in a few lines #

My name is Hugo Giraudel. I'm a front-end developer on a work-based learning at Crédit Agricole Sud Rhône Alpes in Grenoble (France), hoping to work in a web agency starting from September. I'm really into front-end languages especially CSS & JS, as well as everything that comes with those languages: ergonomy, performance, accessibility, user experience, and much more.

I am the co-author of Browserhacks — a website aiming at gathering all the dirty little secrets from browsers to do some browser sniffing ; not that I support that kind of thing but someone had to do such a tool. ;) I also developed Wild Web Watch — a web-related watch tool (which unfortunately gets old pretty badly). I also take care of the Sass port of Raphaël Goetter's framework, KNACSS.

Beside that, I write a lot for the web, starting on my site but for Codrops and CSS-Tricks as well, and on some other places as guest posts like for Todd Motto.

What is your school/professional path? #

Since I didn't know what to do after highscool, I decided to join Ariès Grenoble - a school for computer graphics (web, print and 3D stuff) in order to become a Game Designer.

During the preparatory class, I realized I don't like 3D stuff, which makes me revise my path a little bit. Since I have two sisters and a brother in the web industry, I decided to join the "Webdesign" formation just to "see what it looks like". A long and kind of boring year since this formation included a lot of print design (yes, this is weird for a Webdesign formation).

In September 2011, I got into the "Webmaster" formation (still in Ariès) in a work-based learning at Crédit Agricole Sud Rhône Alpes; I felt like I fit. I wrapped my head around an array of languages — going from HTML/CSS to PHP/MySQL passing by ActionScript 3 and Flex — and got my diploma with commendation, pretty confident in the idea of becoming a web developer.

I wanted to push this idea further last year by joining what comes close to "Computer Science" (still in Ariès) but I have to say I really don't belong here. Back-end languages like Java & C++ and server stuff really don't please me.

According to you, what are the required qualifications for your job? #

I love experimenting and trying new things.

That ain't easy. I think the biggest "problem" of client-side languages is that they are dependent on the client. This implies a lot of hacks and tricks to make everything work everywhere. This is even more true today with mobile devices like tablets and smartphones or even TV screens! So this asks for a lot of patience and experience (the latter comes with time, hopefully).

I also think we really have to love experimenting and trying new things. We work with constantly evolving languages which implies reading as much docs and tutorials as we can. Being aware of incoming things is part of a web developer's job.

What do you like the most in your job? And the least? #

My favourite thing in my job hasto be learning things. It's definitely because I'm passionate that I'm comfortable with some things today. As good as my web teacher has been, I don't owe him my skills (not all of them at least). Long story short, I enjoy reading web related stuff.

I enjoy reading web related stuff.

Beyond reading, it's great to be able to easily discover and learn new things like CSS features, JavaScript APIs, preprocessors and much more (especially thanks to tools like CodePen and GitHub). And if we ever happen to use what we've learnt in real-life projects, then it's even better!

Ironically, even if I am able to define what I like in my job I don't think I'm able to tell what I like the least. Maybe not being always able to use everything I know in real-life projects because of technical constraints like performance, maintainability or browser support. But this is part of the job; we can't use everything we know, especially when it comes to new — somewhat borderline — features ("hello CSS grid!").

But this "bad side" of our job is what makes it interesting. Producing clean, maintainable and future-proof code is what makes the front-end developer work fun.

Where do you see yourself in 10 years? #

Haha! That's a tough one! I guess I'd love to work in a company with an interesting web unit with a dedicated team to move things forward. I particulary hope to keep my thirst of learning. If I manage to keep that, I'll consider myself happy. ;)

"CSS is easy"

Mon, 15 Apr 2013 00:00:00 -0700

Véronique Bouvier translated this article in French on her blog.

I am studying what comes close to "Programming Sciences". My mates are hardware, server or back-end guys. When I tell them I prefer front-end, especially HTML/CSS I always get the same reaction: "CSS is easy".

And I always tell myself the same thing "Yeaaaaah... so that should explain why your CSS is a fucking mess".

CSS is easy... syntactically #

Yes. CSS has a very easy syntax based on english words. I don't think it could be much simpler since it can be summed up in 3 words: selector, property, value.

A 8-year-old child could do some CSS without even having any explanation on how to do so. Even HTML has a more complicated syntax than CSS since there are some elements which need a closing tag, some don't, some have attributes, some don't, some can't be inside others and so on. CSS is always the same.

selector [, selector2, ...] [:pseudo-class] {
 property: value;
 [property2: value2;
 ...]
}

Most of all, CSS means something. It uses real words, understandable by anyone. When you read .element { color: red; }, you can be pretty sure it means an item called "element" is red. It's a no brainer.

A constantly evolving language #

The first "problem" (for lack of a better word) with CSS is that it is a constantly evolving language. It was first introduced in 1994 if no mistake; so almost 20 years ago. After 3 major versions (CSS1, CSS2 and CSS2.1), CSS is now divided into modules growing at their own speed (Colors Level 3, Selectors Level 4, etc.). It means you cannot simply "learn CSS" then don't get back to it. You can learn the bases, yes but it's not enough.

Some things I learnt 2 years ago are irrelevant now, and some things I'm learning today might disappear or become bad practices in the future. It is a non-stop evolution —which is cool but— which requires developers to be very careful.

Browser dependant #

The thing is, since CSS is a language compiled on the client side (meaning by the browser itself), its interpretation depends on the compiler (once again, the browser).

Yes, HTML and JavaScript as well. But unless you're using new HTML5 elements (which don't provide much more than semantic), your HTML —as long as it is valid— won't differ from one browser to another.

JavaScript is kind of like CSS. The interpretation depends on the JavaScript engine version. For example, Internet Explorer 9 doesn't use the same ECMAScript engine as Firefox or Chrome (Chakra for IE9, SpiderMonkey for Firefox, V8 for Chrome).

Anyway, in order to write consistent CSS, you have to know which browser supports which feature, or partially support them, and how to draw fallback, when to use hacks, and so on. It requires some knowledge, and most of all, some experience.

Take the Flexbox module for example. It has been introduced in 2009 and has known 3 different syntaxes since then resulting in a blurry mess when trying to have the best browser support:

.flex {
    -ms-box-orient: horizontal;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

This is the kind of thing that makes CSS tricky (some people would say annoying).

Final words #

A simple syntax doesn't make an easy language.

CSS isn't easy. Combining a very permissive (somewhat broken) syntax with constantly evolving features and rendering inconsistencies makes CSS not that easy at all. Yes, the syntax is simple, but a simple syntax doesn't make an easy language.

And when you have to deal with performance, modular architecture, and responsive webdesign, it becomes even less easy. But that's a whole 'nother story.

Raw JavaScript jQuery-style fadeIn() / fadeOut()

Sun, 14 Apr 2013 00:00:00 -0700