Blog – Page 17 – Johan Ronsse

Why you’ll probably regret using Tailwind

July 8, 2020 - Posted in css development tailwind webdev - 22 comments
I see Tailwind being used by a lot of people. I totally get why it’s so popular. It looks great, the design choices are sensible, and you have copy-pastable code that reliably renders in the same way.

It nets you results quickly which feels nice and rewarding. I think Tailwind is a perfect framework for two kinds of situations:
1. people who don’t want to learn CSS
2. people who want a standardized look and want to copy paste from an external library (i.e. Tailwind UI)
I mostly wanted to shut up about Tailwind, and I hoped that people would realize it should be avoided after a while. But that doesn’t seem to be happening. So I think I have to fight the fight and talk about why you should not use Tailwind.

I have had a lot of thoughts about Tailwind, and most of these thoughts come from a place of being the code maintainer of a large scale web application codebase. So mind you, when I am talking about regret in the title, I am talking about a big web app context where your code is going to be maintained for years to come.

I am not talking about your Sunday side project. I am talking about real, big work® projects here. I am talking about maintaining something that has a lot of complexity that many people will work on for years to come.

You might be tasked with choosing a CSS architecture for that. And you might have heard about this framework called Tailwind. It’s popular right now and it seems to be the 2020 choice.

You look at the website and you see this nice framework that promises you that things are going to be cool in Tailwind land. And you might be thinking: cool, let’s try that.

I urge you to reconsider your options. I would advise you to not use it.

I really don’t know why Tailwind got so popular over the last year. I think it’s because it does a lot of things right. Surely if the authors can make $1.8M in preorders for Tailwind UI, something must be up. But at a fundamental level, I think its ideas are wrong and lead to problems, and I am going to explain why.

The main problem is that the kind of code you are creating with Tailwind, especially on large scale applications, is the kind of code that you’re going to have to swap out in a few years. Why? Because it’s unmaintainable at best. I will explain below.

An API on top of an API

Tailwind is a framework that heavily relies on utility classes. Utility classes are classes that typically do one single thing e.g. .flex makes a <div> have display: flex. Utility classes create an API on top of what is already a declarative API (CSS itself).

This can lead to problems when
1. the original API (CSS itself) might change in the process, so now you have a mapping problem
2. the mapping itself is not that great, and has bugs on its own
To dive into situation 1, let’s think about how maybe CSS grid will have an evolution in its syntax. Now you don’t just have to update your code, but also the in-between framework (Tailwind).

To dive into an example of situation 2: I was on a project a while ago where somebody mapped Flexbox to utility classes wrongly (i.e. the mapping contained obvious mistakes) and that code had made into production, was versioned, and we couldn’t change it. I thought that was very painful.

Tailwind’s coding style creates its own problems, which you then have to solve

There’s also a deeper problem: because you are essentially recreating the CSS API with utility classes, you end up with a huge file. The current Tailwind utilities.css file is 1.8 megabyte and contains 80 000 lines of code.

Tailwind proponents will tell you that you can remove unused CSS with Tailwind’s tooling. And this is exactly the problem that I want to talk about: now you have to solve a problem that’s inherent to the framework, adding complexity to your project.

In the Routify and Svelte Discord channels I routinely see people struggling to get the toolchain around Tailwind working. So many people struggling with a toolchain that is totally unnecessary is a real problem. Removing code that shouldn’t be there in the first place should not be necessary.

Sidenote: I’m not against utility classes

Surely it feels nice to be able to quickly write flexbox things in a declarative way, and it has it’s uses. I’ve happily wrote declarative flexbox code in the past to quickly set up layouts. I am not against utility classes at all. It’s quite handy to set up layouts quickly with utility classes. I can also totally relate to the idea of designing in the browser with a set of utility classes.

When I do web app layouts we typically have a lot of different panes and panels going on in your app with varied logic about how they should resize. In a prototyping or an early app phase it’s super handy to not have to write a specific (BEM) component for everything and just build things out with utility classes.

But you have to be careful with utility classes. Because what you’re essentially doing is building a complication on top of CSS itself.

When you use a utility classes, for example declaring a flex utility on a div, you are doing it in HTML instead of declaring it in CSS this can quickly lead to unmaintainable code.

I use utility classes in one-off situations. Tailwind style code uses utility classes for everything. Tailwind lovers will now come back to me with arguments about @apply but this is just throwing more complexity on something that is already complex.

Adding complexity to complexity

Tailwind’s HTML code is fine for very simple projects (which will now have the drag of a whole toolchain to purge unused selectors but OK).

But let’s just imagine you have a bit of a bigger project, with a basic app layout that is working, with a few panels and a few buttons.

You now have to update the code for the next requirement – a bit of responsiveness. The UI has to change according to a breakpoint. So you add some Tailwind breakpoint classes to the thing you are making.

You realize your specific situation requires a very specific breakpoint. So you change your Tailwind config to add this breakpoint. You kind of realize it would be easier to just write the breakpoint directly in CSS, but you want to do things the Tailwind way.

If you would do things the regular CSS way, your media queries list basically lives in two worlds: the tailwind config and a local CSS file. And now you’ve lost your breakpoint structure. So you have to adhere to the Tailwind style.

And then let’s say you have a new situation: dark mode has to be supported. So suddenly your colors all have to change according to the dark mode logic. So now you add a bunch of classes to whatever you are creating again… you look at your button code and you see that the color of the button is directly in the HTML (gray-100). And the opposed color is actually called gray-900 in your design system. So now you add a class to the button for the dark situations. And you now realize that there are 7 variants of your button in your codebase and they all have different class combinations.

Now, with the previous responsive example, and this dark thing piled on top of it, you have a sorry mess.

And then you realize that some aspects of what you’re doing would be way easier to handle directly in (S)CSS, using contextual media queries and proper use of the cascade.

Maybe your web app is never going to see the complexity I am talking about. Maybe your apps are not responsive or they don’t support dark mode. But most of my work supports some form of skinnability, is as responsive as possible and needs to be maintained over several yerars.

Putting values on the same class level in HTML is basically destroying the cascade for you. So don’t do it.

Complexity overload and no proper way to manage it

The problem with Tailwind is that you end up with an overload of classes in your HTML and no way to manage these.

Tailwind’s creator says it’s not a problem because your code can essentially lives in deep presentational components and it can be abstracted away. But this kind of coding strategy leads to its own problems (e.g. prop drilling)

I’m especially wary of this situation where you have one button that has 6 HTML classes, and then another button that has 5 HTML classes, and another one that has 7 HTML classes. And they’re all different combinations. Now you have to do some serious digging through the codebase to try and bring everything in line, and you’re going to be comparing which of the three buttons have class overlap. Nobody is waiting for that task. And frankly, it’s probably just not going to happen.

It’s code rot that’s going to happen as soon as you have a few people working on a project with moderate complexity.

I fear for a Tailwind future

I already see Tailwind popping up all the time in Javascript articles that have nothing to do with CSS. The authors use it because it’s a quick way to style their tutorial. In the process they’re halving the shelf life of whatever they’re writing, and dirtying up their examples with a boatload of HTML classes.

I fear for the general codebases of web apps when too many people decide that Tailwind is the way to go. Now, on the other hand, this means I’ll have an infinite stream of work to refactor bad codebases to better ones. So I guess I’m not complaining.

Just do yourself a favor and stop using Tailwind.
Input & output

June 19, 2020 - Posted in nederlands opinie politiek

Een week of twee geleden verscheen er een post in mijn feed van een jonge politicus, ik denk 22 jaar, die na 3 jaar gedemotiveerd was en ermee stopt.

Dat vond ik precies een beetje snel om iets op te geven. Je moet tijd in iets steken om van iets een succes te maken.

Ik ben 14 jaar aan het werk, 9 jaar zelfstandig en mijn huidig bedrijf is 6 jaar oud. Ik timmer aan de weg, en het gaat me soms wat te traag. Maar de weg is sowieso lang.

Ik ga er altijd van uit dat enige vorm van succes minstens 10 jaar zal duren. En dan is het nog snel gegaan. En dan kan je nog een gesprek beginnen over de relativiteit van succes en wat succes dan juist betekent.

In ieder geval, hoeveel moeite je in iets steekt en hoe je het aanpakt vind ik wel een interessant gegeven. Iets om over na te denken. Vooral omdat ik ook nog mijn eigen plaats in de politiek zoek. Ook daar ga ik er van uit dat het een lange weg wordt.

De jongeman in kwestie is teleurgesteld door lokaal haantjesgedrag, door geen kansen te krijgen van de oude garde, doordat er niemand hem helpt als hij campagne voor zichzelf voert.

Maar dan denk ik: wat had je dan verwacht? Wat dacht je dat er ging gebeuren? Dat je je aanbiedt en opeens alle deuren openen? Dat mensen je spontaan gaan helpen in een logica waar het op een bepaalde manier ieder voor zich is?

Hij neemt er een anekote bij van duizenden brieven schrijven en opsturen. Hij vind duidelijk dat hij enorm veel moeite heeft gedaan. Ik kan zijn gevoel wel begrijpen, maar ik denk ook dat het een kwestie is van perspectief.

Het is niet omdat je een volume aan werk verzet, dat daardoor alle deuren openen. Het werk was misschien niet effectief. Misschien was je bezig met het verkeerde werk. Misschien landt je boodschap niet. Misschien heb je (nog) niet de juiste kwaliteiten.

Het effectieve werk in de politiek is politiek bedrijven: de juiste politieke beslissingen nemen vanuit de inhoud. Werken aan de inhoud is je inlezen, je informeren, een idee kunnen formuleren en naar buiten brengen. Hetgene dat dat werk tegelijk helpt en in de weg zit: je collega’s en concullega’s. Afhankelijk van je positie heb je verantwoordelijkheid voor de officiële formulering en uitvoering. Maar je kan even goed politiek bedrijven zonder officieel mandaat. Als ik een opiniestuk schrijf, is dat ook politiek. Als ik een e-mail stuur naar een parlementslid is dat ook politiek.

Er is een soort werk is naast de politiek waar sommigen zich graag aan vastklampen, zich dan jaren inzetten, en denken dat ze daardoor uiteindelijk beloond zullen worden. De blog post in kwestie is een goed voorbeeld. Ik denk dat je dan de foute verwachtingen hebt.

Dit zij-werk heeft weinig te maken met politiek bedrijven. Het lijkt alsof je dan denkt denken dat door maar hard genoeg lokaal te werken het zal helpen om een bepaalde positie te verkrijgen, om vanuit daar dan opeens aan het effectieve werk te beginnen. Misschien kan je het omgekeerd bekijken, en beginnen met het effectieve werk.

Diff test

June 13, 2020 - Posted in Uncategorized

Iets om later nog te gebruiken. Code diffs om een concept uit te leggen:

	let count = 0;

	const button = document.createElement('button');
-	button.textContent = `Clicks: ${count}`;
+	const strong = document.createElement('strong');
+	strong.textContent = count;

+	button.append(
+		document.createTextNode('Clicks: '),
+		strong
+	);

	button.addEventListener('click', () => {
		count += 1;
-		button.textContent = `Clicks: ${count}`;
+		strong.textContent = count;
	});

	return button;
}

Via.

Sim racing (part 5)

June 1, 2020 - Posted in games simracing
Nota: deze post is op verschilende momenten geschreven, bewerkt, vergeten en weer opgepikt: dus vergeef me enige incoherentie.

Wat is er de laatste maanden gebeurd in sim racing land?

Niet zo veel eigenlijk. Na een periode van veel Gran Turismo (zie de vorige post) heb ik vooral een periode niet veel ge-simraced.

Ten eerste had ik mijn hand gebroken in januari, dus dan kon ik gewoon fysiek niet racen. Ten tweede vond ik dat je er behoorlijk wat tijd in moet steken om er goed in te worden. ‘s Avonds heb ik soms niet meer veel fut om super geconcentreerd te trainen.

Hand gebroken maar toch ff proberen :’)

En ik noem het bewust trainen: om een bepaald niveau te halen moet er echt moeite in gestoken worden. Er komt dan voor mij altijd zo’n punt dat ik denk: ik ga écht geen uren steken in een seconde van mijn tijd halen. Dan doe ik liever iets anders.

Mijn sim racing fun heb ik dan een tijdje vooral gehaald uit nieuwe dingen proberen. In deze blog post: een klein overzicht.

Assetto Corsa Competizione: nieuwe tracks

Voor ACC is er in Februari een “intercontinental” pack geleased met 4 nieuwe tracks: Bathurst, Kyalami, Laguna Seca en Suzuka.

Kyalami kende ik nog niet, dus daar heb ik even op geoefend. Laguna Seca is heel plezant in ACC. Wat betreft de andere 2: zowel Bathurst als Suzuka had ik reeds leren waarderen in Gran Turismo.

Nu, achteraf bekeken. Op zich tof dat het bestaat allemaal, maar ik start ACC zéér weinig op. Ik heb dit echt letterlijk 1 of 2 keer opgestart de laatste maanden.

Assetto Corsa: open world mods proberen

Asseto Corsa 1 op de PS4 was min of meer mijn eerste sim-racing-liefde. Een paar maanden geleden kocht ik AC1 voor PC, wat heel goedkoop te vinden is op Steam.

De reden dat ik dit nog eens gekocht had, ook al heb ik het reeds op PS4, was om de open world mods te proberen. Voor AC1 zijn er verschillende track mods waar je op een nieuw soort tracks kan rijden waar je lang op kan doorrijden.

De bekendste nieuwe open world mod is LA Canyons die gefocust is op de sfeer van de bekende highways langs de kust van Californië.

Een ander interessant iets dat ik even getest heb ik Shutoku Revival Project, wat de sfeer van racen op de snelweg rond Tokyo moet opwekken.

Beide projecten zijn zeer interessant, maar het zijn ook echt hacks op een bestaand spel en dus qua gameplay ervaring redelijk knullig. Eens je aan het rijden bent is het fijn, maar het is duidelijk dat dit een mod is en geen echt spel door allerlei kleine probleempjes.

Eerlijk gezegd is dit ook een beetje een gedoe met de juiste bestanden in de juiste mappen zetten en in forum threads zoeken naar de juiste mods en de juiste instellingen. Iets te nerdy voor mij.

iRacing: try 2

Begin april dacht ik iRacing nog eens een kans te geven. En ik moet zeggen: dit was echt veel plezanter dan de vorige keer.
- De Porsche Cayman GT4 gekocht, en deze auto ligt me wel
  - Een verademing t.o.v. de Porsche GT3 Cup car waar ik absoluut niet mee kan rijden (nochtans is GT3 rijden geen probleem in andere games)
- Rijles gekregen op Brands Hatch (thx Marnick)
- Skip Barber gekocht (soort oldschool F3 auto)
- En de tracks Zandvoort en Zolder – en die eens getest
Hier is een video die ik onlangs maakte van iRacing + Brands hatch.

Merk op dat ik met 2 camera’s mijzelf en de pedalen film. Dit was een experimentje met OBS.

Ik las in mijn blogpost (nr. 4) dat ik dit wou proberen en… zo zie je maar… uiteindelijk komt een idee er wel van.

iRacing: try 2 (continued)

Het eerste stukje over iRacing schreef ik enkele weken geleden. Nu ik de post publiceer merk ik dat er toch weer wat meer gebeurd is in sim racing land.

Zo ben ik toch ietsje verder gegaan met iRacing en heb ik enkele officiële races gedaan. En daarnaast heb ik aan de zijlijn een beetje de Zolder Touring Cup gevolgd.

Maar daarover misschien later meer!
Getting better with VS Code

May 26, 2020 - Posted in computers development javascript workflow
I spent part of the past “long weekend” learning about MongoDB and Firebase. In the process I used VSCode (instead of my old buddy TextMate) and wrote what’s below as reference for myself. It might be useful to some.

Formatting code

Add an .editorconfig file to the root of your project:
```
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://EditorConfig.org

root = true

[*]
indent_style = space
indent_size = 2

# Settings
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
```
Add a .prettierrc file to the root as well:
```
{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": true
}
```
For options, please refer to this page.

Now, use ⌘+⇧+P to launch the command pallette and search for format document:

Toggle the built-in terminal

Use Ctrl+` to toggle the built-in terminal.

Vue snippets

Install this extension.

Then, you can use snippets like:
```
vbase // To set up a default template
vcomponents // to import a component within a default export
```
Inline color edit

Hover over a color to see the box to edit a color in-place.

Open a project in VScode

Make sure you have the “code” command installed.
```
cd ~/Sites/project-name
code .
```
Column selection

⌥+Shift and click from top left to bottom right of the box you want to select (or reversed)

File explorer

⇧+⌘+E to view files.

Multi pane editing

Drag a tab to the right side to create a secondary pane.
Re: Office-centricity

May 24, 2020 - Posted in entrepreneurship remote standpunt

Omdat Twitter soms wat moeilijk te volgen is.

Dit is een reactie op en draadje door Jeroen Lemaire, CEO van In The Pocket op Twitter. Jeroen reageert op de beslissing van Shopify en Twitter om “digital by default” te gaan. Wat Shopify en Twitter daarmee bedoelen is dat ze er van uit gaan dat iemand op afstand werkt, ipv op een centraal kantoor. Ze gaan dus weg van een visie van “office-centricity” waar het kantoor de centrale as van communicatie is.

Ik reageer op enkele punten van Jeroen.

Om te beginnen: ik ben ervan overtuigd dat bedrijven, incl het mijne, thuiswerk een betere plek zullen kunnen geven in de work-life mix dankzij dit grote WFH-experiment. Er zijn tal van voordelen: geen pendel, meer tijd voor het gezin, meer focus.

Akkoord.

Maar de claim dat kantoren passé zijn, lees ik vooral bij mensen die de rekening voor zichzelf gemaakt hebben. Bedrijven hebben een maatschappelijke rol en moeten breder denken.

Wie is er bij gebaat bij thuiswerk by default? Niet de jonge schoolverlater alvast, die nog een netwerk moet uitbouwen, mentors vinden en professionele skills aanleren. Of zeggen Lutke en Dorsey dat het begeleiden van schoolverlaters het werk is van andere bedrijven?

Over een netwerk. Als we het over een klassiek netwerk hebben – waarom zou iemand dat netwerk vinden op een kantoor? Je hebt directe collega’s en een leidinggevende; dat heb je even goed op afstand.

Ik heb mijn netwerk gevonden via allerhande community events en conferenties, niet via op een kantoor werken.

En wat met die ervaren professionals? Hebben zij geen verantwoordelijkheid om collega’s te inspireren, te mentoren, te helpen? Bij @itpocket hebben ze dat alvast wel. Wat zou het jammer zijn als hun kennis enkel nog ingezet wordt voor zogeheten “performance”.

En waarom heb je hier een kantoor voor nodig? Wat heeft dit met een kantoor te maken?

Als het dan over mentoring gaat. Ik ben momenteel op afstand een stage aan het begeleiden, samen met mijn collega’s. Wat heeft dit te maken met een kantoor?

Ook de structuur die het kantoorleven brengt in het leven van mensen is voor velen belangrijk. Thuiswerk vraagt een grote zelfstandigheid. Om in de 24/7 asynchrone stroom van info en taken staan zonder op te branden moet je sterk in je schoenen staan.

Het zijn, IMO, altijd die “sterken” die zo hard tegen het kantoor tekeer gaan. Zij die geen problemen hebben met zelforganisatie, carrière mgmt, onafhankelijkheid. Ik vind dat een egocentrische houding

Je zit in een beroep waar je mensen voor nodig hebt die je vertrouwt om complexe taken op te kunnen lossen, en je zou hen dan niet kunnen vertrouwen met enige zelfstandigheid? Ik vind dit een vreemde opstelling.
Skip a word in the terminal on Mac OS

May 21, 2020 - Posted in development workflow
This is about terminal text navigation on Mac OS.

I knew I could use Ctrl + A and Ctrl + E to jump to the beginning of a line and the end of a line respectively.

Turns out you can also use Esc + B or Esc +F to jump to the beginning or the end of a word. These shortcuts are quite bizarre and require either very large hands or a lot of finger gymnastics.

What you can do to provide a better option is first to make sure the “Use option as meta key” is checked in Terminal settings (⌘+.)…

Using the Pro theme, naturally.

… and then you can use ⌥+B and ⌥+F to move between words.

I am learning some MongoDB and it’s quite useful to jump between words when you are navigating through longer strings:

So try to insert a long string:
```
db.tours.insert({ "tourName":"The Wines of Santa Cruz", "tourLength": 3, "tourDescription: "Discover Santa Cruz's wineries")}
```
And then use ⌥+B to move backwards through the words.

Now, how to remember this? (A mnemonic device)
- Ctrl+E: End of line
- Ctrl+A: A is the first letter of the alphabet, so it’s the start (this one is a bit weird)
- ⌥+B: Back
- ⌥+F: Forward
Edit: turns out you can also use Ctrl+B and Ctrl+F to skip a character. Cool!
VLAIO jaarverslag: jaar na jaar slechter

May 14, 2020 - Posted in belgische-problemen entrepreneurship

In het VLAIO jaarverslag van 2017 stond welke bedrijven er steun kregen in met innovatiesubsidies en waarom.

In het jaarverslag van 2018 stonden enkel namen van bedrijf en het bedrag. Geen woord over wat zij doen.

In het jaarverslag van 2019 is het blijkbaar zelfs niet meer nodig om een oplijsting van bedrijven te maken die steun ontvingen.

Tijd voor een vraag hierover in de relevante commissie, mij dunkt.
Overwerk

May 9, 2020 - Posted in corona nederlands persoonlijk

Ik ga me de coronatijd misschien herinneren als een periode van immense productiviteit, maar wellicht ook als een periode van een serieus slechte balans tussen werk en privé.

Het is niet zozeer dat het erg druk is op het werk, maar dat ik het druk maak voor mezelf door de tijd die er is te gebruiken om dingen bij te leren, dingen te programmeren, dingen te creëeren. Ik haal daar veel voldoening uit, maar na een tijd lijkt het alsof ik niks anders meer doe dan dat.

Tijd om daar verandering aan te brengen. Ik ga eens proberen om een weekend niéts te doen dat met design of code te maken heeft.
How to add PostCSS to Routify starter

May 1, 2020 - Posted in routify svelte webdev workflow
Here’s some step-by-step instructions on how to add a basic CSS setup to a Routify-powered project.

Install the postcss plugin:
```
npm i -D rollup-plugin-postcss
```
Import it inside rollup.config.js:
```
import postcss from 'rollup-plugin-postcss'
```
Reference it as a plugin:
```
plugins: [
    postcss(),
    // ...other code
```
Import in main.js:
```
import './css/style.css';
```
- Make sure to create the CSS folder under src
- And create the CSS file
Now reference the correct file in __index.html:
```
<link rel='stylesheet' href='/css/style.css'>
```
That’s it! We are thinking about shipping this as a default in Routify.

Chip in here if you want to contribute to the discussion.