26 Nov 2014, 09:30

Around the Web - November 2014




HTML5/CSS/Responsive Web Design

  • 7 CSS Units you may not know about : rem, vh, vm, vmin, vmax, ex and ch. I did not know the two latter. Some more examples for the vh/vm and vmin/vmax.
  • About rem and em more specially, if you want to move from a fixed approach (ie pixel one) to a more fluid/adaptive one (em/rem), you should read this article  and then this one which explain the issue with pixels and the new way to manage it. You can also use em/rem for positionning content ; em/rem are not only about text.
  • 5 obsolete features in HTML5: hgroups tag, pubdate and scope attributes, command and center elements. With the good way to implement them and/or some workaround if you still need them.
  • RWD adoption 2014 : top 100/1000/10.000 sites are evaluated - from to what extend is RWD implemented to mobile site vs RWD benchmarks in terms of performance.
  • 6 technologies that will change the web platform : asm.js, paralleljs, ECMAScript 6, web components, installable webapps, CSS Grid layout
  • The state of Web Animation 2014 : Between the post-Flash area and the Web Animation API to be implemented in all browsers, a review of current challenges and polyfill to bring animations into the browsers. Comments are also worth to read to get more resources.
  • If you are interested in a book about RWD, seems the latest book from A book apart may interested you : Responsible responsive web design (related review)


Web Performance

  • M6 Tech team made a review of their participation to Velocity conf (day 1, day 2, day 3), a web performance oriented conference. Even if their synthesis is in French, related slides and video are in English. You can also find the one of 2013 (day 1, day 2, day 3)


React (Facebook)

  • React through the ages : an interesting introduction (from origin to what's coming) about React, a JS library to build user interfaces.

23 Oct 2013, 09:30

Static site generator

For the sailing association I am a member of, we are to build a new site. Creating the first pages, I quickly had the issue of copy/pasting html code from one file to another when I changed some common element (navigation menu, etc). Not willing to invest in a CMS at that step (not later for the need we have) I asked about tools to do a simple thing : allowing me to include some html code so that I could split HTML files and apply the DRY principle.

Below a summary of the tools mentionned :

  • Tacot : coded in python, it was exactly what I had in mind ; a cool feature is the "autoreload" which detectes when files are changed and it also uses the Mako template language which allows you to have some logic in your html.
  • Clay : coded in python and was exactly also what I had in mind. The only advantage over tacot, is the usage of the Jinja template language (which I'm familiar with as it's the one used in Django (almost) and Flask)
  • Pelican : coded in python but for what I have in mind it still seems more blog oriented than page oriented.
  • A solution based on Flask / Frozen-Flask : could be a interesting solution but would require too much work to start having something. It's more a CMS-like solution from which you generate a static html version. Too "complex"  for my needs.
  • Jekyll : coded in ruby, seems a very complete solution (autoreload, syntax highlighting, permalink, links, etc). If you want more than Jekyll for blogging purposes, you can have a look at octopress too.
  • Web Server (Apache / Nginx / ...) + SSI : I wanted pages to be generated at build level and not at rendering one and I would like to avoid being dependent from a given webserver at developement stage.
  • PHP : I could have used the require/include functions but same as above, I do not want to have a technical dependancy (I want only html files at the end) and I do not want to require PHP for such a need.
  • Punch : based on node.js but seemed too complex for my needs (or I missed something)

After a quick review, I chose Clay so far, which is at it defines itself : a rapid prototyping tool. It fits perfectly my current needs.

28 Aug 2013, 23:45

Web Roundup - 28/8

A few links I found interesting and would like to share with you :

  • Javascript Best Practices Part 1 and part 2 : title is self explainatory ;-)
  • The CSS/JS/HTML framework Boostrap (initiated and used by Twitter) is released in his 3rd version with a huge amount of rewrite, improvements, more mobile first oriented, etc. You can use it only if you do not plan to have people using IE7. But who still uses this prehistorical browser (execpt France ??)
  • Decoupling your HTML / CSS / Javascript code : the author shares some best practices he adopted to decouple his html / css / js code to avoid that an impact on the style breaks a javascript event and vice versa or avoid that a change in the html markup would break some JS/CSS rules. He uses prefix  (like js-*) or uses of is-* to refer to state on an event. Even if it would lead to increase the amount of code, at least regression should be avoided.
  • Remember also that id & classes were created for HTML first for itself and then were used by CSS to apply style and not the opposite ; Read this article (in French) for the full version on this.

03 Apr 2013, 22:22

Web Roundup - 3/4

Below some links I found useful / relevant / interesting to share :

19 Mar 2013, 22:14

Browser Diet : How to lose weight in the browser ?

Browser Diet is an initiative to promote best practices on front end web performance. It includes so far 24 best practices on different categories :

  • HTML
  • Javascript
  • CSS
  • JQuery
  • Images
  • Server optimisation

For each best practices, bad and good practices are introduced and a tool are suggested to achived this best practices.

If you are familar with YSlow or Page Speed, you may know most of them. However some best practices are mode "code oriented" and the fact that some tools are suggested or some links to useful ressources make it worth to read even if you are familar with webperf topic.

18 Dec 2012, 22:09

Devtools Tips & Tricks

For Chrome users especially, a review of Devtools, ie tools for web development.

It presents some built-in features but also some related extensions to improve debug and track performance issue in particular.

You can also use Chrome to do some remote debug for moblie apps to ease your work.


Use arrows to go back and forth.

03 Dec 2012, 22:44

Advent calendars, 2012 version

Each year, there used to be advent calendars about web or event IT in general. 2012 is not an exception. Purpose is that each day and till Christmas, a new article related to the topic is published.

Below a list of existing advent calendars :

Other ones but not yet updated for 2012 :

If you know other, just share them in the comments !