Autofill met het autocomplete attribuut
Maak het invullen van formulieren veel gemakkelijker voor de gebruiker met autofill.
Blogs per categorie: adventskalender
Voltooi jouw team
Wanneer we naar code of naar websites kijken, kunnen we veel leren over de makers, hun prioriteiten, welke technieken er gebruikt zijn, en meer. Helaas kunnen we ook slordheden ontdekken. Daar hoef je geen ontwikkelaar voor te zijn, gezien reguliere gebruikers ook deze problemen ervaren. Test een aantal websites met Lighthouse, en we zien verschillende mankementen, vaak problemen met de laadsnelheid of toegankelijkheid. Waarom hebben zoveel websites dezelfde problemen?
Tim SeverienOmscholen naar Front-End Developer - Tips van een ervaringsdeskundige
In dit blog deel ik mijn ervaringen als omscholer. Ik geef tips hoe je erachter komt of het front-end development vak wat voor voor je is, hoe je je omschoolt en hoe je aan je eerste baan als front-ender komt.
Annemiek NieboerEasy Accessibility
2025! Een nieuw jaar en 365 dagen om mooie dingen te maken voor het web. Maar doe je het wel toegankelijk? Het zal je vast niet ontgaan zijn, in juni van dit jaar gaat de EAA in; European Accessibility Act. Deze verplicht bedrijven in Europa om toegankelijke producten en diensten te leveren. Uiteraard vallen websites hier ook onder. Voor overheden gold dit in Nederland al langer, maar in 2025 zullen ook front-end developers die niet voor een overheid werken, hiermee rekening moeten houden.
Josee WoutersNext level ontwikkeling - Mijn reis door Nextjs en de ontdekking van V0
Nextjs is een fullstack oplossing voor je webapplicatie waarbij server-side rendering door middel van server components centraal staat. Op de website van Nextjs staat een goed uitgewerkt leerprogramma waarmee je jezelf snel de basiskennis eigen kunt maken. Van de makers van Nextjs en Vercel is er nu ook een AI-chatinterface beschikbaar genaamd V0. Met V0 maak je binnen 'no time' websites op basis van Nextjs.
Rik van der SarEen card met een ‘inverted border radius’
De inverted border radius is een leuk effect wat je toe kan voegen aan diverse web componenten. In deze blogpost lopen we stap voor stap door een mogelijke implementatie gebaseerd op HTML & CSS.
Imani DapIt's all in the details: Microanimaties als kers op de taart
Voeg microanimaties toe aan je site om deze net dat beetje extra te geven.
Anke WillemsAan het roer als front-end lead developer
Wat komt er bij kijken een front-end lead developer te zijn? Een overzicht, persoonlijke ervaringen, tips & tricks.
Arjan EisingJamstack - Unwrapping De (mogelijke) toekomst van webdevelopment! 🎁
Een beknopte introductie tot de Jamstack-architectuur, die pre-rendering, ontkoppeling en statische bestanden combineert om webontwikkeling te stroomlijnen zonder complexe serverinteractie aan de client-side.
Gabriël MoawadMijn favoriete tools als front-enddeveloper, een compleet overzicht
In deze blog deel ik mijn favoriete tools als front-enddeveloper, waaronder browsers, projectmanagement- en ontwikkelsoftware. Dit zijn de tools die mijn workflow ondersteunen en die ik dagelijks gebruik.
RositaWat bepaalt de toegankelijke naam van een element?
De toegankelijke naam van een element is hoe de browser een element doorgeeft aan hulptechnologieën zoals een screenreader of braille bord, en vormt de manier waarop iemand die een site niet (goed) kan zien de inhoud tot zich neemt.
Kilian ValkhofWebXR - The React Way
Ontdek hoe je meeslepende Virtual en Augmented Reality-ervaringen kunt bouwen met WebXR en React. Het is gemakkelijker dan je denkt!
Ruben van der LeunHerfstblaadjes zien
{ [...] als we ons afvragen wat dit wij is, wat zien is en wat ding of wereld is, komen we terecht in een labyrint van moeilijkheden en tegenstrijdigheden. Wat Sint-Augustinus zei over de tijd — dat het voor iedereen volkomen bekend is, maar dat niemand van ons het aan de anderen kan uitleggen — moet ook van de wereld worden gezegd. — Maurice Merleau-Ponty, Het Zichtbare en het Onzichtbare (1968) } Afgelopen herfstvakantie was ons gezin op vakantie in de Duitse E...
Job van AchterbergA Design Token Carol
Design Tokens implementeren. Waarom zou je eraan willen beginnen? Welke mogelijkheden zijn er? En wat komt men zoal tegen tijdens de implementatie ervan?
Nina WestenbrinkWordt eens volwassen; Het Accessibility Maturity Model
In een wereldbeeld waarin diversiteit en inclusie gelukkig steeds meer op de agenda staan, is digitale toegankelijkheid voor veel organisaties nog onbekend terrein. De meeste organisaties komen er mee in aanraking door wettelijke eisen, omdat ze bijvoorbeeld producten leveren aan een overheidsorganisatie. Daar wordt gevraagd of ze aan de gestelde eisen rond digitale toegankelijkheid voldoen.
Ronny HendriksDit is hoe ik omga met het developer imposter syndroom
Wat voor syndroom? Het imposter syndroom. Vrij vertaald naar het Nederlands het ‘bedriegers syndroom’. Ik hoor sommigen denken, wat mankeer je dan? Nou, eigenlijk niets. Zo is er is geen diagnose voor. Maar het is wel degelijk iets. Voornamelijk binnen de tech industrie is het percentage van ‘developer imposter syndroom’ erg hoog. Uit een onderzoek uit 2018 blijkt zelfs meer dan de helft van de developers, er in min of meerdere mate last van hebben.
Sander LangendoenIntl, de ECMAScript internationalisering API
Intl is de standaard ECMAScript internationalisering API en wordt al sinds 2016 door alle browsers ondersteund, maar ontwikkelaars vallen toch vaak terug op onnodige (en verouderde) JavaScript bibliotheken.
Edwin MartinDesign Tokens gebruiken voor de Theming van een website
De kans is groot dat je hier terecht kwam omdat je op zoek was naar een effeciente manier om theming toe te passen in een website. Om te beginnen is het belangrijk om duidelijk te krijgen wat er precies met Theming en Design Tokens bedoeld wordt.
Sanne PetersDe Balans Tussen DRY en KISS
Als professionele (front-end) developer is de kans groot dat je in een team werkt en dat je rekening moet houden met het feit dat andere developers met jouw code zullen moeten werken. Het is dan van belang dat je nette code schrijft. Allereerst zodat andere developers je code begrijpen, maar—laten we wel wezen—ook omdat je niet wilt dat andere developers denken dat je er niets van bakt. De makkelijkste manier om nette code te schrijven is door je te houden aan development principes.
Paul van den DoolHoe de pandemie mijn werk en woning veranderde
Maart 2020 was de maand dat de wereld (weer) voorgoed veranderde. Dit is de tweede keer voor mij en velen van ons dat het wereld voorgoed veranderde. Eerst op 11 september 2001 en nu in maart 2020. Hoewel er gesproken wordt over weer naar “normaal” gaan, is het “normaal” van voor maart 2020 is voorgoed weg. Onze manier van werken is voor velen veranderd: de pandemie liet zien dat voor vele vakgebieden thuiswerken mogelijk is, en dat mensen die thuis willen werken dat moeten kunnen, terwijl de...
Darice de CubaDe uitvinding van het function keyword
Ergens in een parallel universum dicht bij het jouwe... staat Steve Jobs op een groot podium.
Maarten HusHow I stopped worrying and learned to love Docker
Developen is natuurlijk het leukste als de omgeving waarop je werkt ook zonder issues werkt. Dat scheelt veel frustratie en je hoeft alleen maar na te denken over het schrijven van mooie code. Zo werkten we op mijn werk eerst met VirtualBox / Vagrant. We gebruikten één virtual machine waarop alle sites draaiden. Om een website draaiend te krijgen moesten we na een Git clone nog best veel handelingen verrichten om een website daadwerkelijk te kunnen gebruiken. Werkte *oké-ish*, maar daarna zij...
Anke WillemsWees (niet) slim en gebruik webstandaarden
Aangezien dit een lang artikel is, eerst even in het kort: Gebruik van webstandaarden kunnen je helpen keuzes te maken; Slimmere mensen dan ik hebben allerlei manieren bedacht om het wereldwijde web te gebruiken, inclusief allerlei randvoorwaarden en afwegingen; Er bestaat een voorstel voor alles wat je maar kan bedenken; Het web is niet gemaakt voor de browser; Jij gebruikt webstandaarden. Ben je een front-end developer die meer wil weten over het internet of het wereldwijde web? Ben je ee...
Derk-Jan KarrenbeldDe slimmigheden in de standaardstylesheets van browsers
Een marge van 8px om je hele pagina, koppen zijn uit zichzelf al groter en wie heeft dat afgrijselijke lettertype uitgekozen? Een "ongestijlde pagina" is stiekem helemaal niet zo ongestijld, maar bevat een flinke bak styling. Waar komt die stijl vandaan?
Kilian ValkhofWe leerden een steen hoe hij moest denken, maar nu heeft hij een paar bevooroordeelde meningen…
Tegenwoordig kom je ze op steeds meer websites en in (web)applicaties tegen: Algoritmes. Complexe berekeningen op basis van een tal van datasets die samen het perfecte antwoord weten op jouw vraag, probleem of behoefte! Je komt ze tegen als je een film wilt kijken op Netflix, wanneer je een antwoord zoekt op Google en zelfs wanneer je je belastingaangifte doet! Deze kleine helpertjes zitten overal verstopt en zijn natuurlijk een geweldige oplossing voor automatisering, want een computer kan g...
Esther de VriesHoe ik mezelf leerde werken met Webflow + tips! (hoe jij jezelf iets nieuws kan leren)
Toen Nederland in maart 2020 in lockdown ging, ben ik begonnen met leren coderen. Dit deed ik elke dag. Dat wierp zijn vruchten af want uiteindelijk kreeg ik een baan als developer.
Rosita RampertaapNullish Coalescing en Optional Chaining
Sinds ECMAScript 2020 zijn twee veelgevraagde features onderdeel geworden van de geliefde (en gehate) taal, JavaScript: de Nullish Coalescing operator en Optional Chaining. Beide zijn vooral *syntactical sugar*; een syntactische toevoeging voor iets wat we al konden schrijven, maar wel toevoegingen die welkom zijn, omdat ze code leesbaarder houden.
Tim SeverienEen button ontwerpen, het lijkt zo simpel
Een van de eerste zaken die ik in Adobe XD heb ontworpen, waren buttons voor het nieuwe design system van mijn werkgever. Onze producten bevatten vooral pagina’s met formulieren en daar horen buttons bij. In prototypes probeer ik die buttons zoveel mogelijk het gedrag mee te geven voor de uiteindelijke implementatie. In deze blogpost beschrijf ik mijn ervaringen met het maken van een button in Adobe XD, het gebruik ervan in prototypes en hoe bruikbaar de CSS is voor de ontwikkelaars.
Jasha JoachimsthalEen mobile app maken met JavaScript
Je hebt op je telefoon vast ontelbare apps staan. Misschien heb je wel Netflix, Instagram, de app van Burger King, of de fitness app Sworkit. Wat hebben deze apps met elkaar gemeen? Ze zijn allemaal gemaakt met JavaScript. Verschillende JavaScript frameworks maken het nu mogelijk om ‘gewoon’ met JavaScript, HTML en CSS een mobile app te maken voor bijvoorbeeld iOS of Android. Maar wat komt er nog meer bij kijken als je jouw met JavaScript gemaakte app ook echt wil uitbrengen in de verschillen...
Josee WoutersRemix en Next.js: "echt" full-stack bestaat niet, of wel?
Een goede blog begint altijd met een controversiële titel, zeggen ze toch? Maar er zit wel een gedachte achter.
Lody BorgersJe eerste keer als spreker
Misschien ken je het wel: Je zit in de zaal bij de [Fronteers conferentie](https://fronteers.nl/congres), ziet een spreker op het podium staan en denkt "Hey, dat is misschien ook wel eens leuk om te doen". Of je ziet iemand uit je kring op het overzicht van sprekers staan van een conferentie in New York of Madrid en denkt "wow! Dat is tof! Dat wil ik ook." Maar ja, hoe pak je dat aan, beginnen als spreker? Want is dat niet lastig? Waar moet ik het over hebben? En hoe maak ik zulke briljante s...
Stefan KoopmanschapGezellig, een spelletje
Je zit met de hele familie onder de kerstboom en de veilige gespreksonderwerpen raken uitgeput. Om het gezellig te houden stel je voor om een spelletje te doen. De meesten hebben wel zin in Scrabble, maar je kan die doos nergens vinden! Geen paniek, je bouwt gewoon je eigen spel. Met HTML en CSS timmer je dat bord zo in elkaar.
Peter DoolaardZure developers & uitnodigende communicatie
Iedereen kent ze wel. De zuurpruimen, de klagers. Niets is ooit goed genoeg, en het probleem ligt altijd bij de incompetentie van anderen. Misschien komt er wel meteen een naam en gezicht bij je in beeld. Ik geef toe, ik ben zelf ook niet vies van een beetje gezanik en gezeur.
Wes OudshoornIk ben een div
Stond er wekenlang als werktitel in de planning. Klinkt niet echt veelbelovend. Ronduit saai eigenlijk.
Petra KnipValkuilen van toegankelijke componenten
Al zijn je bouwblokken (componenten) nog zo mooi, je kan er nog steeds verkeerd mee bouwen!
Erik KroesPersoonlijke ontwikkeling
Als front end developer bevindt je je in de luxe positie om in het midden te zitten van meerdere disciplines, zoals back end development, UX, design en project management. Doordat je daar in het midden zit heb je ook de mogelijkheid om je te bewegen of te verschuiven in één van die richtingen. Nu zal je daar natuurlijk niet altijd bewust mee bezig zijn, maar soms gebeurt dat van nature, zoals in mijn geval.
Robert van der ElstSchrijf mee aan de Fronteers Adventskalender 2022!
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.
Een "that's all folks" animatie in CSS met slechts één div
CSS is opgebouwd uit allemaal rechthoeken. Rechthoeken kunnen boven of onder andere rechthoeken liggen. Rechthoeken kunnen ook weer andere rechthoeken in zich hebben, en dan kan je er voor kiezen dat de binnenste rechthoeken ook buiten hun omringende rechthoek zichtbaar zijn (dat ze overflowen) of dat ze afgekapt worden door de omringende rechthoek (met overflow:hidden). Maar als je wilt dat een rechthoek aan één zijde wel buiten de omringende rechthoek zichtbaar is, maar niet aan de andere k...
Kilian ValkhofBasics van front-end testing
Als front-end developer zullen de begrippen unit test, integration test en end-to-end test je waarschijnlijk wel bekend voorkomen. Maar wat is het en wanneer gebruik je welke test? Dit artikel is een kleine intro tot de verschillende soorten tests en tools die je als front-end developer tot je beschikking hebt om je code te testen en uiteindelijk de kwaliteit te verbeteren. Unit test Het begint meestal met unit tests. Een unit test is een test die een op zichzelf staand onderdeel van je code ...
Melle Wynia"Even snel" een project starten
Je kent het wel, je wil even snel iets bouwen of wat code uitproberen. Je maakt een map aan, gooit daarin een index.html, een CSS bestand en een JavaScript bestandje, om vervolgens met wat code te rommelen. In dit voorbeeld heb je gewoon statische bestanden die je in een browser (naar keuze) kunt laden om te checken of het klopt wat je aan het maken bent. Je kent het wel, je wil even snel iets bouwen of wat code uitproberen. Je maakt een map aan, gooit daarin een index.html, een CSS bestand e...
Renee de KruijfNot another JS framework - zelf een JavaScript framework schrijven
React beter leren. Het staat al een hele tijd op mijn to do list, omdat we op mijn werk met React werken. Ik leer het beste door dingen te doen, maar ik hou niet van korte "Hello World" tutorials van een uurtje waarna je eigenlijk nog niets hebt geleerd. Daarom kreeg ik een studieopdracht op het werk: bouw React na. Mijn eigen JavaScript framework maken... Ik moest even slikken. Dat kan ik toch nooit?! Maar ik liet het even bezinken, kreeg wat eerste instructies en ging toen toch aa...
Josee WoutersLabels zijn niet altijd wat ze lijken: hoe wordt de Accessible Name berekend?
Sinds november ben ik aan de slag als Web Accessibility Consultant bij Eleven Ways. Het toegankelijk maken van websites (zodat iedereen ze kan gebruiken) is altijd al een onderwerp geweest waar ik me graag voor wilde inzetten. Al tijdens mijn eerste werkweek leerde ik iets wat me verraste. Ik herinner me dat ik luidop “Woah!” zei tegen mijn computerscherm. Dat “iets” is de zogeheten Accessible Name. Omdat er niet veel Nederlandstalige artikelen over te vinden zijn, wijd ik er graag een stukje...
Sophie RagasBeveiligde gegevens ophalen met OpenID Connect en access tokens
Wat hebben de website van je bank, een webshop en Twitter gemeen? Ze hebben een publiek gedeelte en tonen daarnaast content op basis van je account. Nadat je bent ingelogd, kun je bij je bank je saldo bekijken, geld overmaken of een nieuwe pas aanvragen. Op de webshop kun je eerdere bestellingen raadplegen of je verlanglijstje bijwerken. Bij Twitter kun je tweets plaatsen, notificaties ontvangen of je profiel aanpassen. Het is wel de bedoeling dat de frontend de gegevens van de juiste gebruik...
Jasha JoachimsthalEen betere sfeer begint bij jezelf (en eindigt bij je collega's)
Laten we voor 2021 als goed voornemen noteren dat we het nieuwe jaar fijner met elkaar omgaan. Dat we wat meer naar elkaar omkijken, beter samenwerken in het signaleren van eenzaamheid en er voor waken een negatieve impact te hebben op het werkplezier van onze collega's. Ik heb helaas meegemaakt hoe het is om in een toxische omgeving te werken. Ik had daarna een vol jaar nodig om terug mezelf te worden. Dat is ondertussen een aantal jaar geleden maar ik denk er nog vaak over na wat ik anders ...
Introductie Web Components
Web components is een W3C webstandaard waarmee je, eenvoudig gezegd, je eigen HTML-tags kunt maken. Het toevoegen van een plattegrond op je webpagina kan dan zo eenvoudig zijn als het toevoegen van deze tag: <g-map latitude="52.3812258" longitude="4.9001255"></g-map> Met web components kan je component-gebaseerd werken zonder dat je een JavaScript framework nodig zoals Angular, React of Vue. De tag moet wel beschikbaar gemaakt worden in de pagina met JavaScrip...
Edwin MartinBewustwording, de noodzaak van echte verhalen over ontoegankelijkheid
In mijn vele gesprekken met mensen over toegankelijkheid komt vaak het woord "bewustwording" voorbij. De reden dat websites of diensten ontoegankelijk zijn is vaak geen onwil, maar eerder het feit dat men er gewoonweg niet bij stilstaat dat het voor een grote groep mensen ontoegankelijk is. Ik merk zelf ook dat ik beter snap hoe ontoegankelijk een website kan zijn voor bijvoorbeeld iemand die blind is als ik het van hun zelf verneem. Zoals een keer bij een workshop, dat ik iemand di...
Darice de CubaDingen gedaan krijgen
Hoe kan je nou zoveel mogelijk halen uit de schaarse tijd die je thuis hebt met alle afleidingen die daar bij komen? Het is een gevleugelde zin geworden dit jaar: "Het zijn rare tijden". Het gaat dan natuurlijk over de Corona-crisis. We hebben een aantal dingen, zowel zakelijk als privé anders moeten inrichten de afgelopen tijd. Thuis werken is één van die aanpassingen. Het werk moet gedaan worden, maar hoe doe je dat? Developers zijn zogenaamde kenniswerkers en het werk dat we doen...
Renee de KruijfAnke en de eerste stapjes in het land van Drupal Theming
Halverwege 2020 switchte ik van baan, en begon ik als front-ender bij een webbureau dat voornamelijk met het CMS Drupal werkt. Ik heb nooit veel met Drupal gewerkt, maar front-end is front-end, toch? Wrong! Deze cartoon over de Drupal learning curve had me al genoeg moeten waarschuwen. :) Drupal is groot, massief, en kan ontzettend veel. Maar alles zit er dus ook in, op een grote en massieve manier. Niks lean en snel. Maar als je het Drupal-beest eenmaal een beetje doorhebt, valt het best te ...
Anke WillemsSemantiek, wat betekent het?
Als men het heeft over de kwaliteit van HTML-code gaat het vaak over semantiek. Maar wat is nou semantiek? Wat is semantische HTML, en waarom zou je je er wat van aantrekken? Wat is semantische HTML? Semantiek is het communiceren van je intentie door middel van je gekozen HTML. Dit garandeert niet de correcte uitkomst, maar als je een andere intentie communiceert dan de uitkomst, dan klopt het sowieso niet. Een bekende HTML-tag is bijvoorbeeld de <h1>. Deze tag wordt vaak gebruikt voor ...
Erik KroesWe 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 ...
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...
Melle WyniaCliché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. Een cliché voor reclame voor King pepermunt Clichés zijn niet per definitie onwaar of fout. Het kan heel handig zijn om in clichés te denken. H...
Paul van BuurenRustig 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? Wellic...
Pieter BeekmanHoe 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. Stap 1: Bepaal jouw doelgroep Wanneer je je doelgroep helder hebt, kun je ook beter het doel van je website bepalen. Wanneer ouderen jouw doelgroep zijn, zullen zij niet snel online een afspraak inplannen, maar eerder telefonisch contact met je willen opnemen. Stap 2: Bepaal het doel van je website Wat wil je dat je bezoekers gaan doen? Wil j...
Marieke KuitMaak 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. Als jouw reactie nu duh! is, dan hoef je natuurlijk niet verd...
Roel van GilsWaarom 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? Waarom een hobbyproject belangrijk is Om nieuwe ontwikkelingen te proberen Voor veel front-enders is ondersteunen van IE11 nog...
Josee WoutersHet 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...
Sander LangendoenToegankelijkheid 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 ...
Marjon BakkerWordPress 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. WordPress has a reputation among developers that it’s cumbersome, slow to load a...
Luc PrincenEen 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… Weinig ontwikkelaars weten nog...
Maarten BrouwersHoe 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. Hoe kom je er op? In 2015 besloot ik, zoals veel web designers en developers, over te stappen van Photoshop naar Sketch. Al heel snel kon ik daar goed mijn weg in vinden en vooral de manier waarop je in Sk...
Kilian ValkhofDe 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. Maar de tijd heeft niet stil gestaan. Onze computers werden beter, onze browsers wer...
Koen KivitsCSS 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: <div style="color: red; border: 1px solid red">Waarschuwing</div> Hetzelfde geldt voor JavaScript met de style property: element.style = "color: red; border: 1px solid red"; Dit is erg onhandig, want nu staan de CSS-stijlen verspreid over meerdere bestanden, wat het onderhoud lastig maakt. Wil je een stijl die je vanuit HTML of JavaScript gezet hebt, wijzigen via CSS,...
Edwin Martin8 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. 1. Het gebruik van afkortingen verbetert je leesbaarheidsscore "Een goede FK-score is belangrijk voor A11Y vanwege de U in WC...
Erik KroesGoeie 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 draagvlak krijgen voor je app, script, plugin of anderszins, valt of staat bij goede documentatie. Gebruikers zijn ongeduldig, ze zoeken iets dat snel werkt. En als ze zich in de steek gelaten voelen zonder goede documentatie, zoeken ze door naar de volg...
Anke WillemsEen 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. Zo deden wij dat bij Withlocals voor onze dat...
Joep van der HeijdenSchrijf 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. English below - Je mag schrijven over elk onderwerp dat front-end gerelateerd is. Denk bijvoorbeeld aan blogs over accessibility, tools, UX/UI, frameworks. Wil je sch...
Josee WoutersMet 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: We waren in 2018 voor het eerst in een aantal jaar weer aanwezig op de ISOC nieuwjaarsborrel, hielden een eigen nieuwjaars- en zomerborrel, een flink aantal succesvolle workshops, voor ...
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. TL;DR: wees bescheiden omring je niet met klonen van jezelf deel je kennis laat je inspireren door kunst zeur niet 1: Jij bent niet je gebruiker Eigenlijk zijn toegankelijkheidsrichtlijnen een grote les in nederigheid. Elk succescriterium is een herinnering: niet iedereen is zoals jij. Er zijn mensen die het web anders gebru...
Paul van BuurenWat 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. Alhoew...
Anke WillemsCSS 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 feedba...
Peter-Paul KochMin 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. Niet eerder is er zo hard gewerkt aan toegankelijkheid als het afgelopen jaar. Jarenlang is de Nederlandse overheid hierin koploper. Maar andere branches zoals onderwijs, banken en ...
Jules ErnstWebdeveloper 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: Zit je momenteel nog op de middelbare school? Volg dan een opleiding als Communication & Media Design aan een hogere school. Hier leer je namelijk veel meer vaardigheden, die niet direct iets met het vak te maken hebben, maar waar je wel ontzettend veel aan hebt in je l...
Tim OerlemansLettertypes 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. In de loop van de jaren werd gelukkig steeds meer mogelijk. Zo kregen we met HTML 2.0 ni...
Amy Davis"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 deve...
Sander LangendoenEen 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. Wat gaan we bouwen? Een verkleinde versie van mijn beer-api. Deze versie vraagt biertjes...
Thomas MachielsenBeginnen 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. 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 Progre...
Niels LeenheerHoe 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 stukje...
Roel van GilsCSS 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 ku...
Bart VenemanWord 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. Beginnen met leren Veel front-end developers beginnen door te experimenteren. Het is niet zo moeiijk om daarmee te beginnen. Je hebt alleen een browser en een texteditor nodig. Twee hele goede voorbeelden zijn Visual Studio Code en Atom en ze zijn gratis! Daarna wil je ...
Tim SeverienOver 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. Mijn eigen website is ook zo’n lekkende kraan. In de loop der jaren heb ik er heel wat versleten. Van ‘p...
Josee WoutersHoe 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. Geef mij maar een uitdaging! Je zou de Web Content Accessibility Guidelines (WCAG) door kunnen nemen. Deze richtlijn van het W3C is verankerd in regelgeving en is int...
Erik KroesPrettier, 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 al...
Edwin MartinMooi 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 j...
Monique DubbelmanIn 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… Daarnaast heb ik dingen die ik specifiek moet weten voor m’n werk. Ik ben bekend met WordPress, Alterian, Hippo, en EpiServer. Mijn nieuwe baan is echter bij een bedrijf dat grotendeels werkt met Drupal. Drupal leren is geen kleinigheidje, er is e...
Tom HartwigBegin 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 inleid...
Melle WyniaTwaalf geschenken van Fronteers
(Vrij naar “The Twelve Days of Christmas”) Op de eerste dag van Kerstmis, schonk Fronteers aan mij: Een geweldige conferentie Mijn eerste Fronteers conferentie was in 2015. Nou ja, ik kwam de conferentie niet bezoeken, ik kwam mijn vrouw ophalen die de conferentie bezocht. Toen ik binnenkwam legde ik aan Anneke Sinnema bij de Fronteers booth uit dat ik even ergens wilde gaan zitten totdat de boel afgelopen was. Of ik een t-shirt wilde? Maar ik was geen lid. Gaf niet. Wat is je maat? Alsjeblie...
Job van AchterbergPump 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 waarme...
Iain van der WielInclusive 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. Vaak gaan talks, blogs en slack channel chats over: wanneer ARIA te gebruiken, hoe te gebruiken, goede HTML-structuur, CSS tips (denk aan: class ‘screenreaders’), kleurcontrasten en lettertyp...
Darice de CubaCode 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. Maar ja, wij leven in de realiteit. In de realiteit schrijven we onze code niet allemaal op dezelfde manier en is onze code zeker niet foutloos! Wanneer we in teams werken aan dezelfde codebase, i...
Lody BorgersSchrijf 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! Één van mijn voornemens voor 2018 was namelijk om meer te gaan schrijven. Niet vanwege het schrijven op zich, maar wel w...
Koen KivitsFronteers 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. Wat kun je verwachten? Natuurlijk zullen er blogs verschijnen over zaken waar we als front-enders dagelijks mee werken, zoals lettertypes of verschillende tools om je workflow te verbeteren. Maar er zullen ook een aantal verrassende blogs voorbij komen, denk aan het maken van sketchnotes of een persoonlijke noot over de balans werk-pri...
Josee WoutersSchrijf 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. Tot 1 november kan iedereen zich aanmelden om een blog te schrijven. Je mag schrijven over elk onderwerp dat front-end gerelateerd is. Misschien heb je wel goede voornemens ...
Josee WoutersDr. 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. Scope Scopes in JavaScript (en alle andere programeertalen) zijn een soort ballenbak. Alle v...
Arjan EisingContent 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. Na het klooien met een Enterprise Content Management System (Magnolia 2.0) tijdens een stage begin 2005 en het klagen over de markup die mijn toenmalige blog (WordPress 1.5) uitkakte, had ik het door: "Dit moet beter." Niet omdat het Web het nodig had, niet omdat klanten er om vroegen en niet omdat ik een gat in de markt z...
Krijn HoetmerClosure 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. Voordat we inhoudelijk beginnen, een kleine disclaimer: het gebruik van deze tools is voor kleine tot medium websites overkill. Verwacht niet een drop-in repl...
Johan SchuytScalable 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 cour...
Jochen VandendriesschePrototype 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. Class inheritance in JavaScript, waarbij een object de eigenschappen erft ...
Peter van der ZeeDeferred 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. Even een stapje terug in de tijd, toen we nog met guldens en franken betaalden. Als je een muisklik wilde afvangen, deed je dat met element.onclick = someFunction; Dat werd een probleem als een ander stukje code ook naar de klik wilde luisteren. Dat kon niet, want aan oncli...
Edwin MartinWelkom 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 driedimensi...
Peter BeverlooGeharnast 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. Te...
Tom GreuterKlaar 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. Eerste testen Je hebt waarschijnlijk al een smartphone voor prive-gebruik. Kijk er eens op naar je recente projecten. Waarschijnlijk zie je al direct enige zaken die voor verbetering vatbaar zijn. Maak een lijstje, en spreek met jezelf af dat je hier in je volgende project iets aan gaat doe...
Peter-Paul KochLearn 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. Vergeet alles wat je over Flexbox weet: we beginnen opnieuw! De spec is namelijk veranderd; de nieuwste versie verscheen op 29 november 2011! Wat heb je nodig? Chrome Canary heeft een deel van de spec geïmplementeerd. Als je mee wilt doen heb je niets anders nodig dan Chrome Canary en je favoriete text ...
Stephen HayHet 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 matrixtransformatie...
Anne van KesterenClients 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. Voor veel Fronteers is er echter één persoon die ons die kans geeft. En die komt toch wat minder in de lijst met goede voornemens voor. Nee, niet de Kerstman … de klant. En terecht. Want die k...
Ruben BosKijk 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. Wat is er mis met klassieke afbeeldingen? Wel, het zijn vaak grote bestanden en ze jagen het aantal HTTP requests de hoogte in—of je moet beginnen knoeien met sprites. Elke keer je een pixel wil veranderen moet je weer dat logge program...
Lennart SchoorsHet 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.) Wie al wat langer in dit wereldje meedraait (hier, neem nog een Werthers Echte), heeft de verandering van "slicer" naar "front-end developer" meegemaakt. Vroeger zat er vaak niemand tussen de designe...
Jan MoesenEen 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. De basis De basis van elke responsieve website (van elke website eigenlijk) is natuurlijk de conte...
Vasilis van GemertWaarom 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. Standaarden bevorderen innovatie Standaarden zijn een onzichtbaar, maar onmisbaar deel van de mees...
Andreas CretenJavaScript-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. Als je nu een willekeurige string bestaande uit meerdere karakters wil gaan coderen volgens encode(), hoe zou jij dat dan doen? Er zijn natuurlijk verscheidene mogelijkheden, maar de ene is al leesbaarder/compacter/sneller/handiger/robuuster dan de andere. Laat ons om t...
Mathias BynensFront-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. Waar hebben we het over? Voor HTML en JavaScript zijn er een paar bekende spelers, zoals Haml en CoffeeScript. Voor CSS hebben we talen als Sass e...
Roy TomeijResponsive 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...
Roel Van Gils3D-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? Voor het genereren van computer graphics zijn veel en vaak complexe berekeningen nodig. Een gemiddeld boek over computer graphics staat stijf van de moeilijke formules, die voor de gemiddelde mens niet of nauwelijks te lezen zijn en niet echt uitnodigen om er mee aan de slag te gaan. In deze beknopte handleiding wordt de basis ui...
Arjan WesterdiepActeurs, schilders en technici
Wat doet de moderne front-ender van nu tegenwoordig anno 2011? Hij is een acteur-schilder-technicus. Als ze me vragen wat ik doe, zeg ik: “Ik maak websites.” Dat snapt m’n oma van 90 en dat snapt m’n dochter van 9. Want iedereen weet tegenwoordig wat een website is en wat je er ongeveer van kunt verwachten. De magie van een eigen website hebben is helemaal voorbij. Je hebt drie rollen als front-ender: acteur, schilder en technicus. De acteur Je hebt het inlevingsvermogen nodig van een acteur...
Paul van BuurenWebrichtlijnen 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. Wat houdt die verplichting precies in? Momenteel moeten websites van de rijksoverheid voldoen aan het hoogste niveau, dus alle richtlijnen onder versie 1. Mede-overheden zoals gemeenten en waterschappen moeten eind 2012 voldoen aan prioriteit 1, en per 1...
Janita TopPatronen 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. Waarom? Niets blijft hetzelfde en het maken van een ...
Egor KloosHTML5 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. In de praktijk is HTML5 video nog volop in ontwikkeling. Belangrijke opties ontbreken nog, niet alle browsers herkennen <video> en de browsers die dat wel doen ondersteunen verschillende formaten. HTML5 video wer...
Jeroen WijeringWaarom 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ëvolueer...
Stijn JanssenAdventskalender 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. Middels de artikelen willen we de kennis binnen Fronteers verspreiden onder andere leden, en natuurlijk naar niet-leden. De artikelen hebben zeer diverse onderwerpen, zodat iedereen—zowel beginner als gevorderde—iets op kan steken van deze reeks. Elke schrijver heeft de mogelijkheid om 75 euro...
Arjan Eising