Fronteers — vakvereniging voor front-end developers

Er zijn in totaal 70 posts geplaatst onder de categorie adventskalender. Je vindt ze hieronder.

We wish you...

These last days of the year are a time to look back at what you did the past year and to look forward to what's to come. At Fronteers we can look back at a great year. We became a member of the W3C, Fronteers Conference was amazing as always and we hosted a couple of awesome workshops.

And we also have a lot to look forward to. We're gonna present a new design for our identity, we're starting work at our new website and of course there will be more workshops and in the autumn another edition of Fronteers Conference.

We hope you had a great 2019 and we wish you a happy christmas and a sparkling 2020. Of course, our volunteers have some new year's wishes for you too.

Cybersecurity: 4 tips voor developers

Denk je het volgende hypothetische scenario eens in: maandagochtend kom je op je werk. Je bent wat vroeger dan normaal, vandaag zelfs de eerste van je team. Terwijl de koffiemachine druk aan het malen is, maalt jouw hoofd ook. Deadlines, volle backlogs, sprintmeetings. Drukke dag. Je opent je e-mail. Een bericht valt op: vannacht om 02:47:35 was het systeem een minuut heel langzaam. Hoewel het niet jouw taak is, besluit je toch even te gaan kijken.

“Dit is wel heel vreemd”, denk je bij jezelf. Je hart begint harder te kloppen en je denkt: “met één medewerkeraccount zijn betaalinformatie en andere privé-gegevens van klanten bekeken in minder dan 53 seconden?” Je realiseert direct dat Herman dit niet zelf zou kunnen hebben gedaan. Sterker nog, hij zou niet eens toegang tot dit deel van de applicatie moeten hebben.

Clichés op het web

Letterlijk is een ‘cliché’ een metalen plaat waarmee je illustraties kunt afdrukken. Figuurlijk is een cliché een afgesleten manier van spreken of denken. De eerste keer dat je een grap maakt, is ‘ie leuk. De tweede keer is ‘ie al minder. Na tien keer is ‘ie saai. Clichés zijn de doodgeslagen cola van je denkvermogen, om het op z’n BLØFs te zeggen.

Rustig aan de gourmet dankzij Cypress.io

De feestdagen, dagen vol met eten, gezelligheid en nog meer clichés, komen er weer aan. Het laatste wat je op deze dagen wilt: een telefoontje over code die niet werkt. Last minute op kerstavond uitrollen vond je al geen goed idee, maar nu heb je er dubbel spijt van.
Maar hoe is dit te voorkomen, behalve door niet op kerstavond nog iets uit te rollen? Hoe kun je met een gerust hart aanschuiven bij de gourmet met de wetenschap dat bijvoorbeeld de login-knop op je site nog steeds inlogt? Wellicht is Cypress.io wel het overwegen waard...

Hoe pak je de opbouw van een website aan?

Het opbouwen van een website gaat meestal niet over één nacht ijs en vergt kennis en inzicht. Toch zijn er heel wat zaken die je ook zelf kan uitwerken.

Maak deze kerst een vriend blij met lekker makkelijke collapsibles

Ik heb een paar vreemde gewoonten. Een ervan is dat ik op iedere website met een accordeon of een FAQ mijn code inspector even opengooi. Gewoon om te checken of de developers <details> en <summary> gebruikt hebben voor het open- en dichtklapgebeuren. Je zou namelijk wel gek zijn om deze handige HTML-elementen niét te gebruiken in 2019. Helaas moet ik in de meeste gevallen mijn code inspector hoofdschuddend weer sluiten.

Waarom een hobbyproject (niet) belangrijk is

Veel developers kennen het wel: een hobbyproject om nieuwe dingen te leren, je mee uit te leven en andere dingen te kunnen programmeren dan in het dagelijkse werk vaak mogelijk is. Zeker met alle snelle veranderingen in de front-endwereld, is het een goede manier om 'bij te blijven'. Maar is het echt zo belangrijk om als front-end developer een hobbyproject te hebben?

Het belang van een style guide

In de meeste organisaties waar ik heb gewerkt, is er wel een UX-designer aanwezig. Deze levert de designs aan waarin je duidelijk kunt zien hoe een UI is opgebouwd en vind je uitleg over hoe bepaalde elementen zich tot elkaar verhouden. Ook vind je vaak styleregels. Bijvoorbeeld welke fonts er gebruikt worden, welke fontgroottes moeten er worden toegepast en bij hoeveel woorden wordt een tekst afgekapt en toont er een 'read more' tekst. Allemaal zaken waar we als front-end developer vaak niet meer over hoeven na te denken. Toch zijn er een aantal zaken die van belang zijn als je een consistente UI wilt bouwen.

Toegankelijkheid begint bij het eerste design

Al bij het ontwerpen van een nieuwe site is het belangrijk om rekening te houden met toegankelijkheid. Als toegankelijkheidsonderzoeker kom ik bij het testen van websites vaak problemen tegen die al in de designfase zijn veroorzaakt.
Wanneer je als front-ender weet waar je op kunt letten, dan kun je al heel vroeg in het bouwproces de juiste vragen stellen aan designers. Zo kunnen veel problemen al voor de livegang opgelost worden. En is er veel minder reparatie achteraf nodig.

In dit artikel wil ik graag ingaan op een aantal punten die van belang zijn als je een design moet omzetten in een HTML-webpagina.

WordPress for developers who hate WordPress

WordPress is now over sixteen years old. In those sixteen years it’s grown to power over 33% of the ten million most popular websites. And yet, the most popular system for publishing websites is one of the most hated systems for developers. At least according to the Stack Overflow developer survey who ranked WordPress as the most dreaded platform to work with this year. It has been in the top three for years now.

Een andere manier

De kracht van het internet is dat de technieken relatief eenvoudig te gebruiken zijn. Gedreven door het idee dat er binnen enkele seconden iets op het scherm moet staan lijkt het tegenwoordig noodzakelijk om een Single Page App op te tuigen die begint vanuit het neerzetten van placeholders, waarin vervolgens content wordt geladen vanuit GraphQL en REST API’s. Vergelijk dat eens met de eenvoud van weleer, waarbij je HTML en CSS kon uploaden met een FTP programma…

Hoe ik zelf een browser schreef

Zelf een browser schrijven klinkt als een slecht idee, zeker als je zelf een front-end developer bent en dus helemaal geen C++ of andere native taal kent. Toch besloot ik een aantal jaar geleden om te kijken of ik het kon en ondertussen is mijn browser nu doorontwikkeld tot serieus product.

De full-stack mythe

Een aantal jaar geleden was het web nog een stuk eenvoudiger. We gebruikten HTML en CSS om onze websites te maken, met eventueel wat JavaScript om het geheel een beetje schwung te geven. Had je dynamische content, dan maakte je een back-end in bijvoorbeeld PHP met eventueel een MySQL-database erachter. Als web developer was het niet ongewoon om op deze manier van voor tot achter met een website bezig te zijn.

CSS Custom Properties, Cascading Variables en het Einde van de Stijl

Het is al heel lang mogelijk om de CSS-stijl vanuit HTML te bepalen met het style attribuut:

8 Rare Tips Waarvan Toegankelijkheidsexperts Niet Willen Dat U Ze Weet!

Nummer 4 Zal Je Een Epileptische Aanval Geven!

Deze titel is geschreven als een zogenaamde clickbait-titel en ironisch bedoeld. Clickbait-titels presenteren vaak misleidende tips als een vorm van krachtige geheime kennis. In dit geval willen toegankelijkheidsexperts niet dat je deze tips kent omdat ze een slecht advies zijn. Dit zijn tips die je niet moet volgen.

Goeie docs = Happy devs

Je hebt een geweldige app gemaakt, een mooie site gebouwd of een stevig CMS in elkaar gezet. Maanden werk. Je snapt zelf helemaal hoe het in elkaar zit. En dan komen ze: de vragen. Vragen van anderen die met jouw product aan de slag gaan.

Een eigen kalendercomponent bouwen

Het is natuurlijk belangrijk componenten in je applicatie niet allemaal zelf te maken, maar gebruik te maken van het enorme assortiment aan componenten die al geschreven zijn door anderen. Het kost immers tijd om dingen zelf te maken en dus ook geld. Maar soms is het ook goed om eens kritisch te kijken naar welke functionaliteiten je daadwerkelijk benut van het component dat je gebruikt en is het ook gewoon leuk en leerzaam om zelf iets te bouwen.

Schrijf mee aan de Adventskalender 2019!

De Fronteers Adventskalender is terug! 24 blogs van 24 schrijvers over uiteenlopende front-end onderwerpen. Wil jij graag een blog schrijven voor Fronteers, meld je nu dan aan. Tot 31 oktober kan iedereen een voorstel indienen voor een blog. Schrijvers mogen een donatie van 75 euro uit de verenigingskas doen aan een goed doel.

Met Fronteers het nieuwe jaar in

Het afgelopen jaar, mijn eerste jaar als voorzitter van Fronteers, was een veelbewogen jaar! Als doorsnee lid had ik geen idee van het werk dat er in zit om de vereniging draaiend te houden. Laat staan hoeveel energie er in gaat steken nieuwe initiatieven te ontplooien! Ik ben tevreden dat er zoveel gelukt is:

Fuck the system, be nice

Het is de tijd voor de goede voornemens. Laat me je helpen een fijnere collega te worden met 5 Ware Waarheden om een leukere collega en een betere front-ender te zijn.

Wat ik leerde van twaalf uur tekenen tijdens Fronteers

Naast de vele technische blogposts in de adventskalender, gaat deze post over tekenen. Of eigenlijk ‘Sketchnotes’. Je ziet ze steeds meer op Twitter en andere sociale media, en het tekenen van die oh zo mooie notities wordt vaak gezien als het grootste goed in de Instagram- en YouTube-wereld. En jazeker, het helpt je vast ook nog om beter te concentreren, de stof te snappen en wellicht ook nog meteen de wereldvrede te starten! Superfijn natuurlijk, maar daar ga ik het niet over hebben. Alhoewel, een beetje wereldvrede is al een mooi streven.

CSS en JavaScripters

Een probleem dat ik de laatste twee of drie jaar steeds vaker zie opduiken, is dat het lijkt alsof een boel JavaScripters, vooral diegenen die in grote toolchains hebben geïnvesteerd, niet meer zo goed weten hoe CSS werkt.

Om daar wat aan te doen heb ik het plan opgevat hier een boek aan te wijden. Dit artikel is een soort voorschot daarop. Bovendien is het leuke van de Fronteers-crew dat de meeste mensen vloeiend zijn in zowel CSS als JavaScript en dat ik hier dus wellicht wat nuttige feedback kan krijgen.

Min of meer toegankelijk

Ik werk al jaren aan een toegankelijk web. Toegankelijk voor iedereen. Rekening houdend met verschillende manieren van waarnemen, bedienen en begrijpen van content. En het web moet beschikbaar zijn op elk platform waar je een website mee kan bezoeken. Zo heeft Sir Tim Berners-Lee het world wide web ooit neergezet.

Webdeveloper worden zonder (dure) opleiding

Na lang wikken en wegen ben je eruit, je wilt (front-end) webdeveloper worden. Maar waar begin je? Ga je een (HBO)-opleiding doen of meld je je aan voor een coding bootcamp? Er zijn verschillende routes die je kunt nemen:

Lettertypes op het web, wat kan ik ermee?

In het begin van het web was dat niet zo veel: de browser deed alles voor je. Het enige waar je controle over had was je HTML. Met semantische HTML-tags gaf je betekenis aan stukjes van je pagina, zoals <h1> tot <h6> voor kopjes. Je browser besloot dan hoe dat er uit zag. Zo werden kopjes in hoofdletters weergegeven op monochrome tekst-terminals, of groter en dikgedrukt in grafische browsers.

"Ik doe ook front-end"

Nadat ik kennis heb gemaakt met een Poolse collega bij het koffiezetapparaat, bevliegt mij weer eens een terugkerend vraagstuk. Mijn Poolse collega blijkt een back-end developer te zijn die in een geheel Pools team werkt voor mijn nieuwe opdrachtgever. Terwijl ik tijdens het tappen van mijn espresso uitleg dat ik tijdelijk word ingehuurd als front-end developer, reageert hij direct “Yes, I do front-end too”. Ik dwaal direct af, nadenkend over zijn skills, gezien hij aangeeft een back-end developer te zijn. Ik zie front-end development als een specifiek vakgebied, waar je bepaalde skills voor nodig hebt. Terwijl ik teruglopend naar mijn plek hem nog eens profileer, vraag ik mezelf af; wat voor type front-end developer ben ik zelf eigenlijk?

Een API schrijven als een front end developer

De laatste 12 maanden ben ik aan de slag gegaan om een “beer-API” te bouwen. De voornaamste reden om een API te bouwen was om te oefenen. En nu laat ik graag zien hoe ik het heb aangepakt. Hopelijk inspireert het jou ook om zelf een API te bouwen, ook als front-end developer! Na dit artikel kun je zelf een kleine API bouwen. Je zou bijvoorbeeld een database kunnen bijhouden met boeken die je hebt gelezen.

Beginnen met WebBluetooth

Het web is traditioneel altijd goed geweest in het praten met servers. De hele infrastructuur van het web is erop gebaseerd. Maar nu het web dankzij Progressive Web Apps naar native applicaties toe beweegt, hebben we ook de mogelijkheden van native apps nodig. Het ophalen en tonen van tekst, afbeeldingen en formulieren is niet meer genoeg.

Hoe een blinde klant zich heel even miljonair waande

Tijdens een screenreader demo zorgt het wel eens voor verwarring (of hilariteit) als een Engelse afkorting met een sappig Vlaams accent wordt opgelezen, of wanneer een screenreader iets onverstaanbaars uitkraamt. In uitzonderlijke gevallen leest een screenreader ook iets voor wat er helemaal niet lijkt te staan. Weird!

Front-endontwikkelaars die hun werk testen met een screenreader — dat is een prima gewoonte — komen hierdoor wel eens in de verleiding om 'ter verduidelijking' verborgen stukjes tekst toe te voegen, of te vervangen door iets anders (bijvoorbeeld met behulp van een aria-label).

Is dat nou echt nodig? Of maakt het je webinhoud juist minder toegankelijk? Dat onderzoek ik voor je in dit artikel.

CSS statistieken om je codebase te verbeteren

Front-end is makkelijk, CSS helemaal. Toch valt het veel developers niet mee om complexiteit de baas te blijven bij groeiende CSS codebases. Zeker wanneer met meerdere personen en teams aan een project gewerkt wordt, is het lastig om bij te houden en te controleren of iedereen zich nog wel aan de afspraken houdt. Het klassieke voorbeeld is de monoliet van duizenden regels code die meer dan 50 tinten grijs bevat of ruim 100 unieke font-sizes. Gelukkig zijn er tools voorhanden die je inzicht kunnen geven in de CSS die jouw applicatie uitspuugt. Deze tools analyseren je CSS en genereren een rapport met bijvoorbeeld de filesize, het aantal selectors, de unieke kleuren en ga zo maar door. Tijdens een presentatie die ik hierover een aantal jaar geleden gaf, bleek de interesse voor CSS statistiek-tools groot, dus hieronder wat tips om CSS statistieken in te zetten om de kwaliteit van je codebase inzichtelijk te maken en te verbeteren.

Word een front-end developer

Begin september 2018 heeft Shaun Michael Stone zijn ervaringen, mening en advies gedeeld over hoe het is om front-end web engineer te zijn.

In dit artikel wil ik mijn ervaringen delen over het begin van een front-end carrière.

Over websites en lekkende kranen

Bij de loodgieter thuis lekt de kraan. Het kind van de dokter is altijd ziek. De schoenmaker loopt op versleten schoenen. Wat heeft het Nederlands veel spreekwoorden die allemaal ongeveer op hetzelfde neerkomen. Het is dan ook geen wonder waarschijnlijk dat dit voor veel front-enders ook opgaat. Voor anderen de mooiste dingen bouwen, maar de eigen website is vaak een ondergeschoven kindje.

Hoe test ik de toegankelijkheid van mijn website?

Top! Je wil testen of je website toegankelijk is voor iedereen. Daarmee help je niet alleen de mensen met een beperking, waarvan er steeds meer zijn in onze vergrijzende maatschappij. Een toegankelijke website is voor iedereen fijner in gebruik, en er zijn nog veel meer goede redenen om met toegankelijkheid aan de slag te gaan.

Prettier, de eigenzinnige code-opmaker

Bij HTML, CSS en JavaScript en de meeste andere computertalen is niet voorgeschreven hoe je de code moet opmaken. Alles op één regel of juist niet, veel spaties, tabs of alles dicht op elkaar, voor de computer maakt het echt niet uit.

Dit zorgt er ook voor dat iedereen een eigen stijl ontwikkelt. Dat is op zich niet erg, maar als meerdere ontwikkelaars met elk een eigen stijl aan dezelfde code gaan werken, dan wordt dat lastiger. Met verschillende stijlen wordt de code lastiger leesbaar en als code steeds anders wordt opgemaakt geeft dat vervuiling in het versiebeheersysteem.

Mooi rood is niet lelijk

7 tips voor het kiezen van de juiste kleuren voor je website of app

Design is een vak, laat dat duidelijk zijn. Maar soms heb je als websitebouwer even geen budget voor een professionele designer. Of vind je het gewoon leuk om zelf te doen.

Betekent dat dan maar dat je website of app lelijk moet zijn? Zeker niet! Hoewel design veel breder gaat dan alleen het visuele aspect, is het kiezen van de juiste kleuren voor je website behoorlijk bepalend, want hey, het oog wil ook wat. Daarom geef ik je in dit artikel 7 tips voor het bepalen van de juiste kleuren voor je website of app.

In evenwicht

Ons front-end vakgebied is ontzettend breed. Elke week zie ik weer iets waar ik me in wil verdiepen omdat het me interessant lijkt. Een nieuw trucje met CSS custom properties, de nieuwe versie van VueJS, het ontcijferen van Heap Snapshots in Chrome…

Begin met regular expressions

Misschien dat je het wel kent: als je in je team begint over regular expressions trekken er vaak direct een aantal lijkbleek weg en beginnen er meteen een aantal anderen te kwispelen van enthousiasme. Allebei hebben ze gelijk, het is een soort superwapen. Een superwapen waarmee je soms met een regel code honderden regels code kunt besparen. In goede handen los je bondig problemen op. In de verkeerde handen leidt het tot code die niemand meer wil aanraken. Dit artikel is bedoeld als een inleiding voor die mensen die lijkbleek wegtrokken, maar nu toch wel nieuwsgierig geworden zijn.

Twaalf geschenken van Fronteers

(Vrij naar “The Twelve Days of Christmas”)

Op de eerste dag van Kerstmis, schonk Fronteers aan mij:

Pump up the JAM

In de jaren dat ik werk als front-end developer, en ook in mijn tienerjaren als hobby, heb ik vele sites ontwikkeld in een heel scala aan frameworks en CMS’en. De bekendste CMS’en waar ik mee heb gewerkt zijn toch wel WordPress, Drupal en Sitecore. Maar hoe verschillend al deze traditionele CMS’en ook zijn, hoe je er in de basis een website mee ontwikkelt blijft vrijwel hetzelfde:

Zet een installatie op van het CMS, begin de paginatypes en content daarin te definiëren en maak templates waarmee je de content mee presenteert. Voor veel sites werkt deze werkwijze ook gewoon prima, gezien de hoeveelheid websites er sinds jaar en dag op deze manier ontwikkeld zijn.

Inclusive Design is Design

Als men het over een toegankelijk en inclusive website heeft, gaat dit vaak over dat de website goed te gebruiken is voor mensen die schermlezers gebruiken en mensen die kleurenblind of slechtziend zijn. Het betekent vaak ook dat de website goed te gebruiken is met alleen een toetsenbord zonder een muis.

Code in style!

In een perfecte wereld schrijven we allemaal code zonder bugs, onduidelijkheden of stijlfouten. Discussies over spaties, tabs, haakje-op-dezelfde-regel-of-juist-op-die-eronder bestaan alleen in de fantasieboeken die we aan onze kinderen voorlezen. In een perfecte wereld bestaat alleen perfecte code.

Schrijf eens iets anders dan code

Langzaam maar zeker kruipen we alweer het nieuwe jaar in. Tijd om terug te blikken op het afgelopen jaar en goede voornemens te maken voor het nieuwe jaar. Normaal gesproken betekent dat voor mij dat ik constateer dat er weinig van mijn goede voornemens terecht is gekomen, en herpak ik mezelf met een "maar volgend jaar wordt mijn jaar." Dit jaar doe ik het anders!

Fronteers Adventskalender 2018

Morgen begint de Fronteers Adventskalender. Vanaf 1 tot en met 24 december verschijnen er 24 blogs van 24 verschillende auteurs over uiteenlopende onderwerpen.

Schrijf mee aan de Fronteers Adventskalender!

Heb jij altijd al een blog willen schrijven voor Fronteers? Dan is nu je kans! In december keert de Fronteers Adventskalender terug. 24 blogs van 24 schrijvers over alles dat met front-end (en Fronteers) te maken heeft. En de schrijvers mogen een donatie van 75 euro uit de verenigingskas doen aan een goed doel naar keuze.

Content management door de ogen van een vrolijke front-end fröbelaar

"Dat kan beter." Zo dacht ik in 2004 ook toen ik het zoveelste op maat gemaakte BeheerDing in elkaar geknutseld had en ontevreden was met het resultaat.

Dr. Strangescope or: How I Learned to Stop Worrying and Love the Closure

Scopes en closures in JavaScript zijn altijd een soort van taboe geweest: het is er altijd, maar je hebt het er liever niet over. In dit artikel probeer ik, voor de beginnende JavaScripter, een introductie in scopes en closures te geven. En aangezien ik een enorme filmfreak ben, heb ik er enkele referenties naar de film 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb' in gestopt.

Closure Tools

Misschien heb je er van gehoord, misschien ook niet, maar Google zelf is er in ieder geval trots op. Het is de onderliggende (client-side) kracht van Gmail, Google Docs, Google Maps en het meest recente Google Plus! Closure Tools zijn een set tools bedoeld om client-side ontwikkeling wat te vergemakkelijken danwel te professionaliseren.

Scalable Vector Graphics en responsive web

Het blijft grappig om te zien hoe print en web verder van elkaar verwijderd zijn dan ooit tevoren. De evolutie van het web is op zijn minst spectaculair te noemen. Van fluid designs met animated gifs en flashy backgrounds langsheen de fixed dimension websites die langzamerhand aan het uitsterven zijn. Printdesign heeft altijd genoten van de vaste afmetingen die het gedrukte eindwerk met zich meebrengt en het gebrek aan interactieve elementen, terwijl webdesigners meegroeiden met de meest courante schermresolutie. Jarenlang was 960 pixels de vaste waarde, maar 1 apparaat zette deze wereld op zijn kop. De revolutie die de iPhone teweeg bracht in het mobiele weblandschap was nooit gezien en de kloof tussen web en print design werd voor de zoveelste keer groter. Toch hebben deze één gemeenschappelijk überformaat: SVG.

Prototype in JavaScript

Op zich is het heel makkelijk om met JavaScript te beginnen. Maar als je dan wat verder gaat kijken wordt het al snel moeilijk. De meeste mensen lijken te struikelen over closures, context en prototype. Ik wil in deze post graag prototype behandelen en eens zien of ik het een beetje kan verhelderen. Ik zal daarbij de termen lekker in het Engels houden, want met vertalen introduceer je alleen maar (nog meer) verwarring.

Deferred en promise in jQuery

Deferred en promise? Gaan we het hebben over uitstellingen en beloftes in jQuery? Nee, gelukkig niet. Deferred en promise zitten sinds versie 1.5 in jQuery en daarmee kan je asynchrone functies zoals Ajax beter afhandelen.

Welkom op het Audiologische Internet

Het internet. Een praktisch oneindige bron aan tekstuele en grafische informatie. Tegenwoordig kunnen wij, als webontwikkelaars, gebruik maken van net iets meer dan twintig jaar aan evolutie betreft mogelijkheden op het internet. Wat begon als statische tekstdocumenten groeide al snel door tot interactieve pagina’s, en tegenwoordig zelfs tot webapplicaties met miljoenen regels aan JavaScript code en multiplayer spellen. De afname in het gebruik van Adobe Flash, samen met de nieuwe driedimensionale grafische mogelijkheden die WebGL geïntroduceerd heeft, heeft nadruk gelegd op een zintuig dat het internet nog niet volledig kan verzorgen: het gehoor.

Geharnast JavaScript

Het belang van JavaScript op het web is de laatste jaren enorm toegenomen. Ten eerste heeft JavaScript deels de animatierol van Flash overgenomen, ten tweede is het web applicatiever geworden, waardoor JavaScript (bijvoorbeeld in Ajax-communicatie) een grote vlucht genomen heeft. De rol JavaScript wordt groter en tegelijkertijd neemt de professionalisering toe. Het is opvallend te zien dat veel best practices uit de back-end-wereld gemeengoed aan het worden zijn bij JavaScript-development. Testen is zo'n belangrijk onderdeel.

Klaar voor de mobiele tsunami

Als ze het niet nu al doen, wordt 2012 het jaar waarin je klanten je gaan vragen om een mobiele website. Hier zijn wat snelle wenken voor diegenen onder ons die mobiel nog niet echt goed bestudeerd hebben.

Learn you a Flexbox for Great Good!

Dus...je wilt iets weten over Flexbox; misschien heb je er wel eens van gehoord, of misschien heb je één van de vele tutorials erover gelezen. Het kan zelfs zijn dat je er al mee gewerkt hebt.

Het platform bouwen

"Dat kan beter." Zo dacht ik zeven jaar geleden over de standaarden voor het web. En eerlijk gezegd, dat is niet echt veranderd. De omvang wel. Toen hadden we qua standaarden HTML, CSS, JavaScript, beetje HTTP, en XML leek belangrijk, maar niemand gebruikte het. Nu is HTML een parser, syntax, taal, omvat het video, audio, en offline applicaties. CSS bestaat uit over dertig min of meer onafhankelijk ontwikkelde componenten, van verticale text layout tot arbitraire matrixtransformaties, van animaties tot kleuren met alpha-kanaal. En het aantal JavaScript API's is enorm gegroeid, met als doel de traditionele computerplatformen te vervangen. Dat JavaScript zo'n honderd keer sneller is geworden helpt daar natuurlijk in mee.

Clients from heaven

Deze adventskalender is eigenlijk één grote aanloop naar goede voornemens voor het nieuwe jaar. Want naast meer sporten en minder drinken beloven we onszelf ook dat we eindelijk eens een goede responsive site gaan bouwen, Javascript pro gaan worden en alleen nog maar HTML5 video players zullen inbouwen.

Kijk mama, zonder afbeeldingen! Grafische elementen maken met CSS

Zoals Stijn Janssen het al aangaf, we zijn geen slicers meer. Het idee van een website als een verknipt Photoshop document staat op uitsterven, en wij als front-end developers gebruiken steeds minder gif’s, jpg’s en png’s om onze designs visueel aan te kleden.

Het is al goud wiens cursor blinkt

Een pijnlijk vergezochte titel voor een alledaags onderwerp: de opdrachtregel of terminal. Die tekstinterface voor je computer mag dan wel al meegaan van toen de mainframes nog op stoom werkten, tegenwoordig is hij hipper dan ooit. (Een zwart scherm is het nieuwe, euh, zwart.)

Een tik op de neus

Een website bouwen op een responsive-design-manier is te vergelijken met aangevallen worden door een haai. Je weet dat je de haai gewoon een tik op zijn neus moet geven maar hoe doe je dat precies? Zo'n haai is ook best imponerend. Dit artikel legt uit hoe je een responsieve site bouwt, hoe je hem opzet. En in onze voorbeeldsite gaan we dieper in op het geven van een tik op de neus van een haai.

Waarom standaarden essentieel zijn

Je hebt vast en zeker al ooit een vaatwasmachine of een oven gekocht. Heb je toen, om er zeker van te zijn dat het in je keuken paste, opgemeten hoe groot het nieuwe toestel was? Normaal gezien was dat niet nodig, omdat de afmetingen van inbouwkeukentoestellen gestandaardiseerd zijn. Op een paar uitzonderingen na zullen toestellen van eender welke leverancier zonder probleem in je keuken passen.

JavaScript-pret met alle karakters in een string

Stel: je hebt een functie encode() geschreven, die een string bestaande uit één enkel karakter als argument neemt, en een gecodeerde versie van dat ene karakter teruggeeft. Een praktisch voorbeeld hiervan is ROT-13-encodering.

Front-end meta languages

Front-end meta languages. Een hippe, zelfverzonnen naam voor talen die compileren naar HTML, CSS en JavaScript, maar dat zelf niet zijn. Het gebruik scheelt op z'n minst veel typewerk en zorgt voor overzichtelijkere code. Dankzij extensies als Compass is er nog meer tijdsbesparing en gemak te realiseren, bijvoorbeeld voor het beheer van je sprites.

Responsive images; een experiment

Goed anderhalf jaar geleden weerklonken de eerste oh's en ah's in de Twittersphere. Toen was responsive webdesign niet meer dan een—weliswaar beloftevolle—gimmick. Sindsdien is het hard gegaan: klanten hebben de mond vol over mobile first en vandaag zijn zelfs onze moeders verslingerd aan hun iPad's. Er is uitstekend leesvoer voorhanden, webdesigners overal te lande zijn druk aan het experimenteren en de eerste responsieve websites voor het brede publiek staan te blinken op het internet. Over een jaar is responsive webdesign niet langer bijzaak, maar noodzaak.

3D-graphics

De volgende theorie heeft betrekking op de wijze waarop 3D-graphics berekend worden. Welke processen spelen zich buiten het zicht van de gebruiker af in de computer?

Acteurs, schilders en technici

Wat doet de moderne front-ender van nu tegenwoordig anno 2011? Hij is een acteur-schilder-technicus.

Webrichtlijnen 2: de nieuwe standaard

Sinds juni van dit jaar is de nieuwe versie van de Webrichtlijnen, versie 2, de officiële overheidsstandaard. Dit betekent dat overheden bij het bouwen van nieuwe websites moeten kiezen voor deze versie, via het 'pas toe of leg uit'-principe.

Patronen voor de groei

Zelf, met de hand, een website maken is tegenwoordig zo lastig nog niet. Echter, een grote maatwerk website is heel andere koek. In het begin lijkt het wel simpel maar iedere beslissing heeft invloed op je volgende beslissing en één verkeerde beslissing kan heel snel tot frustratie leiden. Mocht je toevallig het (on)geluk hebben om meerdere grote websites te maken en te onderhouden, dan ben je, als je niet uitkijkt, al heel snel de sigaar.

HTML5 Video | Een overzicht

HTML5 introduceert verschillende nieuwe tools voor het bouwen van dynamische websites en applicaties. Eén hiervan is het <video> element. In theorie maakt dit het invoegen van video's in websites net zo simpel als het invoegen van afbeeldingen met het <img> element.

Waarom een slicer een front-end developer is geworden

Het internet gebruikte je vroeger enkel voor het weergeven van simpele, gestructureerde gegevens. Met de stijgende populariteit van het internet wilde iedereen zijn eigen website onderscheiden van de andere. Naast de interessante content die je op je website toonde, wilde je ook een visueel onderscheid maken ten opzichte van de rest van de wereld. Je wilde je eigen stempel drukken op het groeiende internet. Ik ben op zoek gegaan naar het verhaal achter het woord 'slicer' en hoe dit geëvolueerd is naar een volwaardig beroep als front-end developer.

Adventskalender 2011

Vanaf morgen verschijnt op ons weblog elke dag, tot aan kerst, een artikel gerelateerd aan front-end webtechnologieën. Bijna alle bijdragen voor deze adventskalender zijn geschreven door Fronteersleden.