Profile Picture

Ha, ik ben Lútsen Stellingwerff.

Designer, webdeveloper, father, husband, co-owner of hoverkraft.nl, workaholic, beer lover, coffee addict. Twitter, Medium, Linkedin.

Lutsen.Land

Schoon genoeg

De laatste jaren heb ik heel veel HTML en CSS geschreven. Vaak maakte Dirkjan het ontwerp in Indesign, en vervolgens zette ik het om in HTML. Ik deed m’n best alles super netjes en W3C te doen en volgens mij ben ik er best goed in. Supperstrakke HTML jongûh, command-u en genieten maar!

De laatste tijd gaat dit werk me steeds meer tegen staan. Want; hoe het er uit gaat zien is al bekend, dat is te zien in het Indesign bestand dat ik zo goed mogelijk probeer na te maken. Ik weet ook al wel hoe ik het ongeveer moet gaan maken, dat heb ik namelijk al heel vaak gedaan. Maar die hele fucking weg weer aflopen totdat je eindelijk bent waar je moet zijn, wat een eind is dat! En wat zie ik dan op mijn scherm? Iets wat als het goed is heel erg veel lijkt op wat Dirkjan ook op zijn scherm ziet. Alleen nu in een webbrowser in plaats van in Indesign.

Dit is natuurlijk totaal niet DRY. Het is één grote herhaling. Het voegt niets toe aan het ontwerp en het kost allemaal tijd die ik beter zou kunnen besteden aan iets dat wel iets aan het ontwerp toevoegt.

Waarom slaan we die stap dan niet over? Waarom werken we niet in een programma dat direct de HTML code genereert? Hoe moeilijk kan het zijn, de ene code (Indesign) omzetten in de andere code (HTML)?

Die programma’s zijn er ook1. De reden dat we ze niet gebruiken is dat ze geen “schone code” opleveren.

Schone code

Want schone code, daar draait het om. Het is de beroepseer van ierdere programmeur om schone code op te leveren. Kort gezegd wordt schone code belangrijk gevonden omdat je het als programmeur beter kunt lezen, omdat Google het beter kan lezen, en omdat je dan een wedstrijdje kunt houden wie de schoonste code heeft.

Schoon genoeg

Maar er bestaat geen 100% schone code. Voor een deel ontkom je dus niet aan het beschrijven van de vorm in je HTML. En voor een deel is schoon en vies ook subjectief. En Google is slim genoeg om die niet-zo-schone code gewoon te indexeren.

En schone code zit m’n creativiteit in de weg. Met schone code houd ik me aan de regeltjes van m’n vakgenoten en maak ik het Google gemakkelijk, maar steek ik minder tijd in het ontwerpen van de ultieme ervaring voor de bezoekers van m’n site. Google moet maar wat beter z’n best doen!

Ik denk dat het belangrijk is dat de code schoon genoeg is om mee te werken, en dat je een goed proces moet ontwikkelen om met door bijvoorbeeld Indesign of een andere WYSIWYG editor gegenereede HTML te werken.

Een goed proces

Een proces om met schoon-genoeg HTML te werken zou volgens mij een “basis-met-blokken” (ideeën voor een betere naam zijn welkom) aanpak kunnen zijn.

De basis

De basis is een HTML document dat in ieder geval de blokken-structuur van het document beschrijft. In het document staan alle blokken vermeld met ieder hun eigen class. Dit kan een eenvoudig HTML document zijn met behalve de definitie van de blokken geen inhoud, maar het kan ook het Indesign-naar-HTML document zijn, waar al wel veel andere markup in staat.

De blokken

De blokken worden in het basisdocument geplaatst, op de plek die hierin is aangegeven. Blokken kunnen alles bevatten, maar het ligt voor de hand ze voor twee zaken te gebruiken:

  • “Handgeschreven” code. Bijvoorbeeld voor een onderdeel dat template-variabelen bevat, of bijvoorbeeld Angular directives.
  • “Rich media”, bijvoorbeeld animaties ontwikkeld in Adobe Animate of Hype.

De bouwer

In bijvoorbeeld Grunt kunnen vervolgens alle blokken op de juiste plaats in het basisdocument geplaatst worden.

Deze manier van werken biedt de mogelijkheid om met visuele editors te werken, aangevuld met handgeschreven code waar nodig. Dit levert veel tijdwinst op.

Nog meer

En misschien kan het nog meer opleveren. Werken met een visuele editor is namelijk een veel directer manier van werken dan het programmeren van HTML. In een visuele editor zie je direct wat voor gevolg iedere aanpassing heeft. Bret Victor, één van mijn ontdekkingen van de afgelopen tijd, gelooft dat je hierdoor nieuwe inzichten krijgt die je door abstracte code te schrijven nooit kunt krijgen (hoewel hij het over veel spannendere zaken dan Indesign en HTML heeft, maar goed, welkom in mijn wereld Bret!). En zo dus betere ontwerpen kunt maken. En dit klinkt heel aannemelijk. Tijd om het uit te gaan proberen!

  1. Indesign beweert dat hij zelf HTML kan exporteren. Feitelijk gezien is dat waar, maar het resultaat lijkt qua vorm totaal niet op het oorspronkelijke ontwerp. Waardeloos dus. Er is echter ook een plugin voor Indesign, In5, die wel behoorlijk bruikbare HTML5 code oplevert. Verder hebben we gewerkt met Webflow, de code hiervan is best OK. Sinds kort kijken we naar Hype. De code hiervan is nogal onleesbaar, maar de animaties zijn erg mooi en makkelijk te maken.