Florens Verschelde

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 to XState, if possible.

javascript learning

Looking for tools that are privacy-conscious, tell me which pages are the most visited, and are cheap enough.

software analytics privacy

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.

personal open-source

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.

software cms php kirby

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.

software cms php kirby

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.

design typography devices

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.

24joursdeweb.fr design usability css

J’ai donné une petite interview pour le site alsacreations.com, un site communautaire autour des technologies web.

alsacreations.com design usability css

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.

software cms

Learn how to create an accessible button style which can be used with the correct semantic element: <a> or <button>.

html css accessibility

Semi-random tips I’ve learned that help working with the command line.

software cli

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.

svg css

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.

opinion privacy software

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.

css svg

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.

personal writing

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.

personal books

Styling HTML elements as if they were plain Markdown text.

html css

Pass several colors and styles to a SVG symbol instance, using CSS Custom Properties. This requires preparing SVG icons to accept specific names.

svg css

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 typography rwd

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.

css talk

Pour apprendre à utiliser le DOM, passez-vous de jQuery sur votre prochain projet.

javascript dom

A complete guide to SVG icons in HTML pages, with the symbol sprites technique.

svg html

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.

svg html

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.

css typography

When using “object-fit: contain”, the painted image may be smaller than the actual <img> element. Styling this image becomes challenging.

css

Some demos of how em-based media queries and px-based widths can become mismatched, and should be avoided.

css rwd

A series of tests for inserting content in “::before” and “::after” pseudo-elements.

css

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 …

opinion society bisexuality

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.

design usability

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 …

html css

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 …

javascript

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 …

css

How to build a video background that fully covers an element using iframes and media queries.

html css

Don’t buy a new camera. Use the one you already have instead. The right camera is the one you have.

opinion photography

For maximum visual impact and touch-awareness, button height should be equal to the average adult’s thumb width times the Golden Ratio.

design opinion

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.

personal music software

This might be the hardest thing I’ve tried to write to this day. This is about me, and the title says it all.

personal

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 …

personal bisexuality

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.

opinion society

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.

opinion society sexism

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.

opinion society sexism

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 …

html accessibility

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 …

css

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.

html css

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. …

css

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 …

lesintegristes.net design typography devices

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 …

html

What can you put in a ::before?

css

À propos des espaces associés aux signes de ponctuation français et leur utilisation sur le Web.

design typography

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).

css browsers

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.

personal music software

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 …

alsacreations.com 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.

alsacreations.com css

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?

alsacreations.com html seo

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.

typography html encoding

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 …

alsacreations.com css accessibility typography