2020
- A short history of body copy sizes on the Web
It’s hard to pick a font size that is just right, especially as you try to adapt to different screens and scenarios. Looking at the recent history of how we got here can give us some perspective. W…
2019
- Et tu cliques cliques cliques, à côté du bouton ♫
Que ce soit à la souris ou sur un écran tactile, un pourcentage de nos clics tombera à côté de la cible, voire sur le bouton voisin. C’est un peu frustrant, mais n’est-ce pas une fatalité ? Regardons ça de plus près.
- Interview des gens du web : Florens Verschelde
J’ai donné une petite interview pour le site alsacreations.com, un site communautaire autour des technologies web créé par Raphaël Goetter et Rodolphe Rimelé et auquel j’ai beaucoup participé il y a une dizai…
2018
- Static site generators
I’ve been looking for a decent static site generator to build a simple, 10-page-or-so documentation site, and I’m failing. Here are some notes on my journey, to serve as a warning sign to future travellers, and thoughts on what static site generators could do better.
- Styling buttons, the right way
Learn how to create an accessible button style which can be used with the correct semantic element: <a> or <button>.
- Command line tips
Semi-random tips I’ve learned that help working with the command line.
- Gradient fills for SVG icons
Using gradients on SVG icons is not as easy as using linear-gradient in CSS, but it can still be done. Let’s explore a few techniques.
- A few wishes for privacy settings in Firefox
Firefox could do more to limit online tracking. Recently with the Quantum effort, Mozilla rebranded Firefox along three attributes: speed, customization and privacy. Yet the browser’s defaults allow most tracking techniques by default, for the sake of compatibility with existing websites.
- Printing background colors with CSS and SVG
Web browsers do not print background colors by default. Here’s a trick for printing a flat color, e.g. if you have a white logo or graphic.
- Blogging with public drafts
I’m a perfectionist and often take too long to hit Publish on an article, or to finish a draft that got out of hand. One solution I found is to just publish the draft.
- Reading books again
I had pretty much stopped reading books in the past few years, and wanted to change that. So I got an e-reader a year ago, and it worked.
2017
- ReMarkdown.css
Styling HTML elements as if they were plain Markdown text.
- Using CSS variables in SVG icons
Pass several colors and styles to a SVG symbol instance, using CSS Custom Properties. This requires preparing SVG icons to accept specific names.
2016
- The math of CSS Locks
CSS Locks are a Responsive Web Design technique that lets you transition smoothly between two property values when the screen gets smaller or bigger.
- CSS Selector Wars (KiwiParty 2016)
Support de présentation de ma conférence à la KiwiParty 2016 à Strasbourg. On y parle de stratégie pour gérer ses styles CSS sans provoquer des conflits dans tous les sens.
- La vie sans jQuery
Pour apprendre à utiliser le DOM, passez-vous de jQuery sur votre prochain projet.
- How to work with SVG icons
A complete guide to SVG icons in HTML pages, with the symbol sprites technique.
- Browser support for SVG symbol sprites
All modern browsers support using SVG symbols from a different SVG element in the same page, or from a remote SVG document on the same domain.
- Alternatives to the “em” CSS unit
You don’t have to use the “em” for everything. Pixels are probably better for media queries and layout, and “rem” can be useful for text.
- Image decorations for “object-fit”
When using “object-fit: contain”, the painted image may be smaller than the actual <img> element. Styling this image becomes challenging.
2015
- Possible issues with em-based media queries
Some demos of how em-based media queries and px-based widths can become mismatched, and should be avoided. All content sized in pixels Some content sized in pixels All content sized in pixels, demo…
- Bisexualité et pansexualité
Pas mal de gens cherchent à définir la pansexualité en l’opposant à la bisexualité, et inversement. Cette opposition me pose problème, notamment parce que ces deux termes: ont des définitions multiple…
2014
- Push and Wait: the UX of pedestrian crossing buttons
I came across a discussion of pedestrian crossing buttons today and I find it really interesting from a usability and user experience point of view, so I wanted to share a few thoughts.
- Namespaced HTML classes
Let’s say you’re releasing some library or library-ish code which makes use of HTML classes. You want to allow users of your code to just put a given class somewhere and get a specific result. How do you…
- Remove extraneous indentation from strings
So I made this: outdent.jsdemo · source · github Why? A pet peeve of mine with browser developer tools is that when using the “Edit as HTML” feature, or even when editing text nodes, there will …
- Async Typekit & the Micro-FOUT
I’m no performance expert but I use almost 200 KB of web fonts on this website, via Typekit, and I was wondering how it impacted performance. After experimenting a bit with async loading, I noticed a pe…
- Markdown heading in CSS comments
I use Markdown-inspired headings in my CSS comments, to structure my code and make it easier to parse visually and maintain. I tend to use two, sometimes three levels of headings. For the first two…
- Full page video background with media queries
How to build a video background that fully covers an element using iframes and media queries.
2013
- The right camera
Don’t buy a new camera. Use the one you already have instead. The right camera is the one you have.
- My next design
For maximum visual impact and touch-awareness, button height should be equal to the average adult’s thumb width times the Golden Ratio.
- Last.fm scrobbling
I removed last.fm scrobbling from all the music players I was using on my computers and on my phone. I closed my last.fm account, whose pages now show a “User not found” message along with a cute sad mixtape icon. Here’s why.
- The Virgin
This might be the hardest thing I’ve tried to write to this day. This is about me, and the title says it all.
- Sexual Orientation Forecast
The infamous Kinsey Scale This is it, for now: I’m mostly attracted to women but can be and have been attracted to men as well. Depending on mood, time or weather conditions, it feels like I’m som…
2012
- Ceci n’est pas du second degré
Le second degré, le vrai, c’est super sérieux et c’est super dur à faire correctement. Il ne suffit pas de dire quelque chose «juste pour rire», ça n’a même rien à voir.
- I’m not a feminist, but—
Do you sometimes ridicule feminists because they’re so extreme/illogical/irrelevant? Do you feel that being described as a feminist would be insulting? Then I have news for you: you might be a feminist anyway.
2011
- Icon font accessibility
Chris Coyier wrote a demo of what you can do with icon fonts and it’s rather compelling. Chris has included a rebuttal of the “oh yeah but it’s not accessible” argument but sadly his answer only address…
- Fade-in / fade-out effects with CSS
A common webdesign need is to show and hide elements with fade-in and fade-out effects. This is commonly done using JavaScript to manipulate the value of the opacity CSS property of elements over…
- Basic styling of button elements
You will want to use <button> elements for e.g. buttons triggering JavaScript actions, and not <a href="#">…</a> which has different semantics. Here’s how to reset button styles efficiently.
- Simple base stylesheet
This is a base stylesheet that I use in some of my projects as an alternative to CSS Resets. I don’t just copy it and go on writing other CSS styles, but tend to modify the rules to fit each project. G…
- Le Web c’est pas en 72 dpi, coco!
Je vous propose de dézinguer un mythe du petit monde de l’informatique et du graphisme. Ce mythe dans sa plus simple expression: Le print c’est en 300 dpi, et pis le web c’est en 72 dpi. Et donc, ça c’e…
- Comment utiliser <abbr> en HTML?
L’élément HTML abbr indique qu’un mot est une abréviation (au sens large, ce qui regroupe les sigles, acronymes, et plus généralement toute écriture raccourcie). Lorsqu’on souhaite indiquer le sens de l’abrévi…
- Espaces et signes de ponctuation haute
À propos des espaces associés aux signes de ponctuation français et leur utilisation sur le Web.
2010
- Music tagging done right
Call me a computer freak or a music nerd if you will, but I like to tag my music with more than the dead simple artist/title combo. Only problem is, music players just don’t care.
- Empêcher les flottants de dépasser de leur conteneur
Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottant…
2009
- La fusion des marges en CSS
D’où viennent les écarts étranges que l’on observe parfois entre certains blocs d’une page? Comment se fait-il que des marges disparaissent? Et pourquoi cette marge-là semble-t-elle s’appliquer à mon conteneur et pas à mon titre ou mon paragraphe? La fusion des marges pourrait bien être derrière tous ces mystères.
- À quoi servent les balises “meta”?
Question éternelle des forums de discussion sur la conception web et le référencement: les balises META, ça sert à quelque chose? C’est pris en compte par les moteurs de recherche? Est-ce que ça permet d’allonger les péniches?
- HasLayout et bugs de rendu dans Internet Explorer 6-7
Le HasLayout est un mécanisme internet d'Internet Explorer 6 et 7, qui provoque de nombreux problèmes de rendu (bugs d'affichage) ou à l'inverse permet d'en éviter ou corriger. Cet article présente ce m…
- Guide de survie du positionnement CSS
Cet article de début 2009 concerne le positionnement CSS compatible avec Internet Explorer 6 et 7. Il mentionne seulement les possibilités supplémentaires de CSS 2.1 (IE8+), et ne mentionne pas ce…
- Les codages ASCII, ISO-8859-1, Windows-1252 et MacRoman
Vous avez surement déjà croisé certaines des appellations suivantes: ASCII, ANSI, Latin1, ISO-8859-1, MacRoman, Windows-1252, etc. Elles désignent toutes des codages de caractères (on utilise aussi l’an…
2008
- Gabarits HTML et CSS simples
J’ai créé ces 11 gabarits pour la formation Elephorm Apprendre XHTML et CSS. Ils correspondent aux types de mise en page de site web courants en 2008, utilisent principalement float et pos…
2007
- Design fluide en trois colonnes avec “float”
Cet article décrit une technique obsolète, qui peut être facilement remplacée par des techniques plus modernes :CSS Grid Layout, CSS Flexbox Beaucoup de sites web présentent une mise en page sur t…
2006
- Gérer la taille du texte avec les “em”
Pour améliorer sensiblement l’accessibilité d’un site web, il faut permettre le redimensionnement du texte, afin qu’il s’adapte aux résolutions et aux paramètres des utilisateurs. Pour cela, on utilisera l…