» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #10

De kunst van minimaal coderen - Klein maar fijn

Wat is minimaal coderen? We hebben het hier niet over het maken van minimalistische vormgeving, maar over het zo klein mogelijk houden van de totale bestandsgrootte van een webpagina. De laatste paar jaar hebben er verscheidene competities (compo’s) plaatsgevonden op dit "vakgebied".

Wat deze compo’s gemeen hebben is het doel: het maken van een webpagina waarvan het totaal aantal bytes van alle gebruikte bestanden (html-files, gifs, jpegs, stylesheets) onder de gestelde limiet blijft. De inzendingen hoeven geen statische pagina’s in traditionele zin te zijn; ook spellen, animaties en tools doen mee. De inhoud variëert van informatief tot handig tot grappig tot poëtisch tot bizar.

Verreweg de bekendste compo is the5k.org, dit jaar alweer voor de derde keer gehouden. 365 Inzendingen werden beoordeeld en inmiddels is de uitslag bekend. Eerdere rondes vonden plaats in 2000 en 2001.

Daarnaast was er de 7kb.de compo in 2000 en de web4096 compo in 2000 en 2001.

De kleinste compo (qua limiet in ieder geval) is zonder twijfel 256b.htm. In februari/maart 2002 voor het eerst georganiseerd en inmiddels begonnen aan een tweede ronde. De grootte van de inzendingen moet binnen de 256 bytes blijven, wat in de praktijk slechts een paar regels code is.

Motivatie

Van oudsher is het beperken van de totale downloadtijd van een webpagina een belangrijk onderdeel van webdesign. Hoewel tegenwoordig minder benadrukt, vanwege de steeds sneller wordende internet-verbindingen, blijft het de moeite waard om bandwidth-besparing te bevorderen. Bovendien is het stellen van extreem strenge limieten een mooie uitdaging om je talent en techniek van het optimaliseren te testen.

Wat het minimaal coderen echter zo leuk maakt is dat de opgelegde beperking de creativiteit bevordert. De limiet dwingt je tot het zoeken naar bijzondere oplossingen, tot het nadenken over de gevolgen van elke stap die je neemt in het bouwproces. Je leert analyseren, maakt kennis met nieuwe technieken, ontdekt truukjes. Bovendien wordt je gedwongen na te denken over de ‘bare essentials’: wat is het minimaal noodzakelijke om je boodschap over te brengen; wat zijn de écht belangrijke onderdelen.

Het is spannend om een complex geheel uit een simpele basis te toveren; met zo min mogelijk bytes zoveel mogelijk detail of complexiteit te realiseren. Door de code terug te brengen tot het absolute minimum is het effect soms bijna magisch. De code verwordt tot een toverspreuk van willekeurige karakters, zelfs voor mensen die er verstand van hebben. Vooral de entries van de 256-byte compo zijn hier mooie voorbeelden van, omdat daarvan de code zo klein is dat het in één oogopslag te overzien is.

Naast dit alles is het gewoon leuk om je kennis van webdesign te gebruiken om mooie dingen te maken, of het nou een animatie, een spel, een tool of een statische pagina is.

Aanpak

Vaak is de eerste stap het moeilijkst: bepalen wat je wilt gaan maken. Houd in eerste instantie geen rekening met de limiet, maar bedenk gewoon iets leuks, interessants of bijzonders om te maken. Het kan geen kwaad om groot te beginnen; zeker voor een relatief grote limiet als 5k (5120 bytes; een scherm vol html/javascript code) geldt dat, alhoewel het weinig lijkt, bijna alles mogelijk is qua functionaliteit.

Als je niets nieuws weet te bedenken kun je natuurlijk altijd proberen een bestaande grote versie van iets om te bouwen naar een kleine versie die in de limiet past. Zo worden vaak spellen zoals schaken, tetris of pong nagebouwd. Zie de huidige the5k.org inzendingen voor voorbeelden van nagebouwde spellen (sommige zelfs 3D), browsers, besturingssystemen en tekenprogramma’s.

Wanneer je eenmaal een idee aan het uitwerken bent is het handig om modulair te denken. Hiermee bedoel ik: inventariseren welke aspecten of onderdelen je kunt aanpassen/verminderen/verwijderen om de bestandsgrootte eventueel te beperken en rekening houden met dingen om te schrappen. Bedenk echter ook alvast dingen die je wellicht nog kunt toevoegen, als mocht blijken dat je ruimte over hebt. Vaak wordt het geheel uiteindelijk veel kleiner dan verwacht, dan is het leuk om nog wat te kunnen uitbreiden.

Wees echter voorzichtig met het opvullen van de overgebleven ruimte met meer en meer functionaliteit of detail; meer is niet altijd mooier. Bovendien geven sommige compo's bonuspunten op basis van het aantal bytes dat je onder de limiet bent gebleven.

Als je echt zeker wilt zijn van de haalbaarheid van hetgeen je wilt bouwen, is het handig na te denken over de volgende vragen:

  1. wat zijn de minimaal benodigde elementen van mijn boodschap?
  2. welke visuele elementen kunnen die boodschap uitdrukken?
  3. wat is het simpelste algoritme om die elementen te plaatsen/bewegen zoals ik wil?
  4. wat zijn de kleinste html of javascript commando’s om dat algoritme uit te voeren?

Tips voor verkleining bestandsgrootte

Ten eerste: vergeet (tijdelijk) wat je geleerd hebt over het schrijven van nette html-code. Alhoewel het aanhouden van correcte, validerende code normaliter een mooi en nobel streven is, is bij het inkorten van je html-tags voor een zo klein mogelijke bestandsgrootte alles geoorloofd. Met name Internet Explorer is hier zeer flexibel in; het maakt meestal niets uit als je wat minder nauwkeurig volgens de standaarden codeert. Dat betekent: geen afsluitende tags (</td>), geen "quotes" om parameters, oude niet-css tags en parameters gebruiken (font, bgcolor) - alles is toegestaan. Vaak kun je zelfs de <body> en <html>-tags weglaten.

Let wel: als je wilt dat je code ook blijft werken in andere browsers (zoals Mozilla/Netscape 6) zul je hier wat voorzichtiger in moeten zijn; stap voor stap testen is een must.

Stel je wilt grafische elementen gebruiken. Grafische bestanden optimaliseren kan op een aantal manieren:

Ideaal is natuurlijk als je helemaal geen externe grafische bestanden nodig hebt. Je zou de volgende dingen kunnen proberen:

Verder nog wat trucjes om Javascript-code in te korten:

Het loont de moeite korte kleurwaardes uit te proberen; in CSS is kleurwaarde #ABC gelijk aan #AABBCC, #FFF gelijk aan #FFFFFF, enzovoort. Zo kun je 3 bytes per kleur besparen, als je het niet erg vindt om jezelf te beperken tot ‘websafe’ kleuren. Of gebruik voorgedefinieerde korte kleurnamen.

Ben je zo'n beetje klaar met coderen, haal dan zoveel mogelijk van de whitespace (enters en spaties) weg tussen de html-tags en javascript-commando’s. Begin hier niet te vroeg mee, je wilt het jezelf niet te moeilijk maken om op het laatste moment nog ideeën te kunnen toevoegen of veranderen.

Wil je voor de overzichtelijkheid toch graag enters in je code behouden, sla dan je bestanden niet op als DOS Text, maar als UNIX Text; elke regeleinde neemt dan slechts 1 byte in beslag in plaats van 2. Een text editor zoals Metapad biedt de gelegenheid bij het opslaan het bestandstype te selecteren. Metapad heeft trouwens als bijkomend voordeel een ‘Calculate size’ optie; druk op F12 om te zien hoeveel bytes het huidige bestand inneemt.

Onderschat ook het belang van een goede naamgeving niet. Een toepasselijke naam is een handig middel om, zonder toename van bestandsgrootte, extra verduidelijking of stof tot nadenken te geven betreffende het gemaakte. Een eigen voorbeeld: Evil Twin.

Tenslotte

Veel plezier! Zoniet met het zelf maken van minimale webpagina’s, dan wel met het bekijken van de creaties van anderen - waar ze ongetwijfeld met plezier aan gewerkt hebben.

Auteur

Milo Vermeulen

Wat is minimaal coderen? We hebben het hier niet over het maken van minimalistische vormgeving, maar over het zo klein mogelijk houden van de totale bestandsgrootte van een webpagina. De laatste paar jaar hebben er verscheidene competities (compo’s) plaatsgevonden op dit "vakgebied".

Publicatiedatum: 12 augustus 2002

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs