Romain Goetz :


Mains courtes

getting inline svg in production //08-12-2018

The following is a guest post by Rob Levin. Rob is a Senior UI/UX Developer at Mavenlink, and coauthor of the Unicorn UI CSS Button Library. Their 2.0 release is using an SVG icon system, and here he shares some issues he's ran into along the way, and how you can watch out for them and fix them. Plus, Rob provides a full system you can use, including a working build process and demo.

You've read up on how inline SVG's are better than font icons and are ready to take the plunge. You call a meeting with your team to discuss moving over to inline SVG icons. Your boss is skeptical. He looks you in the eyes and says "So, can you guarantee this isn't going to come back and bite us in the butt?". You hesitate a bit, but somehow conjure up the confidence to confirm, "Yes, this is definitely the direction we need to go!"

This was me just a couple months ago, and here are some "gotchas" I ran in to with corresponding workarounds. I'll start by examining the workarounds one by one, and then provide a working example at the end.



learning from twitter - John Resig //01-12-2018

learning from twitter - John Resig

An issue popped up on Twitter this past week that caused the web site to be generally unusable for many users. It appears as if attempts to scroll were unbearably slow and caused the site to be unresponsive.

The Twitter team investigated and determined that if they reverted the version of jQuery that they used back to 1.4.2 from 1.4.4 the site would be responsive again. After more investigation they determined that the code that was slow was doing a contextual selector search for an item by class name, for example: $something.find(".class").

Une solution JQ / JS pour éviter les multiples requêtes d'ajax au scroll, en mettant en place un timer.


Adele //05-07-2018


Adele Goldberg. The Icon.
No. Adele – the Design Systems Repository, is not named after Adele – the singer. This is a tribute to one of the most important computer scientists focused on graphic user interfaces, design patterns and object-oriented programming – Adele Goldberg.
A>dele Goldberg worked at XEROX PARC in the 70s and managed the System Concepts Laboratory where, together with Alan Kay and others, she developed Smalltalk-80 – an object-oriented, dynamically typed programming language that was meant to power the "human-computer symbiosis".
Needless to say, SmallTalk also pioneered many concepts important to all modern design systems. Objects in Smalltalk were easily transferable between applications and customizable. Smalltalk also served as the foundation of PARC's work on graphically based user interfaces (many GUI concepts have been developed by Adele Goldberg and her group!).



barba.js //05-07-2018

barba.js is a small (4.4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages.
It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user's web experience.



Bluma //05-07-2018

Bulma is an open source CSS framework based on Flexbox



Slick //05-07-2018

The last caroussel you'll ever need.

git-hub demo


Manipuler des documents //18-06-2018

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.


Designing for open source software //14-06-2018

We all believe open source software is badly designed because, historically, it was.
Mattermost → Relay
When you hear the words “open source” attached to a product, what image comes to mind? Do you imagine an office full of designers obsessing over every little pixel? Or do you imagine an army of alpha-nerds piecing together a slap-dash knockoff of some proprietary software?

We all believe open source software is badly designed because, historically, it was. (#NotAllOpenSourceSoftware)

Thirty years ago, in 1988, the very concept of a license or design language for software was far beyond the average person. A decade later, everything was still awful. Software barely worked. Your PC definitely had a virus on it. HTML had a tag. Installing Linux required weeks of patience and belief in oneself — the kind of conviction I would need to train for a marathon. If there is one canonical failure we can promote as the poster child of this dark era, it is OpenOffice. Or StarOffice or LibreOffice or Apache OpenOffice or OOo or AOO or whatever name you might know it by. When the very name of the product is this broken it’s unlikely to succeed as a brand.

Fast forward ten more years. As of 2008, Firefox was eating Microsoft’s lunch. Firefox was open source, fast, and standards-compliant. It was easy to like Firefox. But we didn’t like Firefox. We loved Firefox. Firefox had a brand before it was Firefox. A brand isn’t a snappy name and a cute logo. Your product is your brand and your product is dictated by its design.

par: Varun Pai



google-webfonts-helper //10-06-2018

Let’s get this straight: The effort to host Google web fonts on your own server is immense! First of all you need to download all .eot, .woff, .woff2, .ttf and .svg files, then copy them onto your server and finally paste a CSS snippet.

Sounds easy? Well it could be, if Google would actually provide any direct links to download these files and a customized CSS for self-hosting them. To fix this problem without using font generation services like Font Squirrel, I decided to publish a little service called google-webfonts-helper.

A Hassle-Free Way to Self-Host Google Fonts by Mario Ranftl



spectre.css //09-06-2018

Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.



Madding and pargins — write maintainable CSS //17-03-2018

I spent like two years using margins and padding the wrong way. The problem is so frequent among web developers, I've taken to calling them madding and pargins. People get them mixed up.

Let's take a look at what they actually do.

Article sur le collapse des margins en css.


BEM Naming //14-03-2018

It is a known fact that the right styleguide can significantly increase development speed, debugging, and the implementation of new features in legacy code. Sadly, most CSS codebases are sometimes developed without any structure or naming conventions. This leads to an unmaintainable CSS codebase in the long term.

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.


Badass libre font //21-01-2018

Badass libre font

Une sélection de typographies web libres par WOMXN.


SVG.js //18-01-2018

Une library JS pour animer des éléments SVG plutôt rapide.


Responsive Images 101 //17-01-2018

Cours sur les différentes méthodes pour réaliser des images responsives. Balises <img srcset=""> et <picture>.


An Introduction to Interaction Flows //10-01-2018

Exemple de graphique d’interactions d'applications & de sites internet.

27/09/2017 - Havana Nguyen


BBC GEL - Design Patterns //10-01-2018

Collection de patterns utilisés sur le site de la BBC, avec leurs guidelines.


Bower Beginner’s Guide //10-01-2018

Guide sur l'utilisation de bower (Package manager pour web dependencies et libraries).


Coffe is the color //10-01-2018

Coffe is the color

Expérimentation sur les couleurs hexadécimales. Analyser le dictionnaire anglais pour des résultats ne contenant que les lettres ABCDEF et la limiter aux mots composés de 6 ou 3 lettres. Et afficher les couleurs correspondantes en code hexadécimal.


Creating Usability with Motion: The UX in Motion Manifesto //10-01-2018

Article sur la création d'animations d'interface pour sites internet & applications.

31/03/2017 - Issara Willenskomer


Css grid course //10-01-2018

Cours d'apprentissage des CSS Grids.

23/12/2017 - Per Harald Borgen


Freebies //10-01-2018

Collection de Mockups gratuits (design & web).


How To Design Style Guides For Brands And Websites //10-01-2018

Différents conseils et étapes pour la création de guidelines.

21/06/2010 - Kat Neville


How to Write a Perfect Error Message //10-01-2018

Conseils pour l'écriture de messages d'erreurs.

31/07/2017 - Vitaly Dulenko


Html Symbols //10-01-2018

Html Symbols

Références HTML, unicode, Hexadécimale, et entités pour les symboles de ponctuation et les caractères ASCII.

2017 - Toptal Designers


Human Interface Guidelines //10-01-2018

Les guideslines d'Apple pour les développeurs de logiciels et d'applications sur leurs plateformes & outils.


50 Meticulous Style Guides //10-01-2018

Collection de guidelines orientés web & flat / trendy

Mary Stribley


Modern Asynchronous CSS Loading //10-01-2018

Présentations de méthodes pour charger de manière asynchrone des feuilles de style.

11/30/2017 - Scott


Optical Effects in User Interfaces //10-01-2018

Optical Effects in User Interfaces

Article à propos de l'équilibrage optique d'éléments graphiques et d'icones.

13/09/17 - Slava Shestopalov


Semantic CSS With Intelligent Selectors //10-01-2018

Article à propos des selector html & css.

20/08/13 - Heydon Pickering


Accessible Footnotes with CSS //07-01-2018

Article à propos des notes en bas de page sur des pages html.

June 17, 2015 - Hugo Giraudel


a11y.css //31-12-2017

Outil d'highlighting d'erreurs en sémantique & css.

2014 — 2017 - Gaël Poupard