2023
-
Don’t use stale bots
It’s okay for a software project to have a lot of open issues. It’s okay if you’re not able to triage issues, let alone close them. It’s not okay to use stale bots.
2022
-
Transparent iframes and dark mode
Today we’re talking about how transparent iframes, dark mode, unreadable text and varying levels of browser support are doing my head in. But don’t worry, there’s light at the end of the tunnel.
2021
-
Designing calculator apps
Looking at different calculator apps, we reflect on the imitative nature of all software and the dreaded concept of skeuomorphism.
-
RAW Power 3: an affordable digital photo development app for macOS
My personal review of RAW Power, a photo editing app for macOS and iOS that is shaping up to be an alternative to Lightroom or Aperture.
-
Learning XState by refactoring an old project
I’ve been wanting to learn XState, a JavaScript state machine library. I had one exercise in mind: porting the hand-rolled state code in the small click precision game I built last year, if possible.
2020
-
Laptop fundraiser: complete!
I asked if people wanted to gift me money to buy a laptop. Here’s what happened then.
-
A quick look at privacy-focused analytics for small sites
Looking for tools that are privacy-conscious, tell me which pages are the most visited, and are cheap enough.
-
A DevTools Retrospective: Or, Fund Me Maybe
In which I look back at my design and code work on Firefox DevTools and, well, ask kind readers to help me buy a laptop.
-
PHP code typing with Kirby CMS
Kirby 3 is built with PHP 7 and uses type annotations extensively, but this often won’t be reflected in an IDE. This post explores why, and what workarounds you can use.
-
Where should you put logic code in Kirby CMS?
Kirby CMS has a few options for where to put your PHP logic: in templates, controllers, page models or page methods. My favorite is page models, and we can work around their main limitation easily.
-
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.
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 sur Alsacréations
J’ai donné une petite interview pour le site alsacreations.com, un site communautaire autour des technologies web.
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
It’s definitely possible! But it’s not as easy as using linear-gradient in CSS. We explore a few techniques for using gradient fills on SVG icons in a web page.
-
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.
-
Images in the “content” CSS property
A series of tests for inserting content in “::before” and “::after” pseudo-elements.
-
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 …
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 …
-
Remove extraneous indentation from strings
So I made this: outdent.js. 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 often be a lot of …
-
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 …
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.
-
Je ne suis pas féministe, mais…
Est-ce que ça t’arrive de rire de ces féministes qui sont extrémistes, insensées, à côté de la plaque? Si on te décrivait comme féministe, tu trouverais ça insultant? Eh bien j’ai une mauvaise nouvelle pour toi: tu es peut-être bien un ou une féministe quand même.
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 …
-
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. …
-
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 …
-
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 …
-
Tests with CSS Generated Content
What can you put in a ::before?
-
Espaces et signes de ponctuation haute
À propos des espaces associés aux signes de ponctuation français et leur utilisation sur le Web.
-
Test de font-size-adjust (CSS 3)
Une page de test pour la propriété CSS font-size-adjust, qui permet d’ajuster la taille du texte en visant un ratio entre hauteur des minuscules (x-height) et taille du texte (font-size).
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 …
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?
2008
-
Espaces unicode et navigateurs web
Il existe 16 espaces en Unicode, dont 2 sont redondantes. Cette page teste le rendu de 12 de ces espaces dans les navigateurs. Des résultats sont compilés pour les principaux navigateurs.
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 …