Do you retroactively apply web accessibility (WCAG) to your apps, or is it already on your backlog for this sprint? Then you need to read this article. We – all frontend developers – are approaching WCAG completely wrong. It’s part of our job, but we treat it as an afterthought. Stop the bullshit about being EAA-compliant and make accessibility a real part of your work.
Do you ever feel like the frontend of every website and application has become increasingly complex over time? In the past, we built everything using CSS, HTML, and a little bit of JavaScript, but now everything is done with Angular, React, or Vue, with just a bit of CSS and HTML. What has changed, and is this shift actually a positive one?
Since my childhood, I have been passionate about cars and everything related to them. Even at a young age, I knew every model. I spent hours flipping through car magazines searching for new facts and always dreamed of owning an exotic car. Initially, I used to dream of owning a Ferrari, but as I grew older and wiser,…
As a frontend developer, my days are primarily filled with crafting JavaScript-based components using frameworks like Vue, React, or Angular. These frameworks excel at empowering me to create reusable frontend elements, whether it's buttons, modals, links, or accordions. However, as I reflect on my reliance on these…
Recently, I purchased a HomeWizard Wi-Fi P1 Meter. This device provides me with insights into the electricity and gas usage in my home. With 4 solar panels installed, I anticipate generating excess electricity during the spring and summer months. Despite knowing the capacity of the panels, I am unsure of the exact…
When you setup a new project with the official create-nuxt-app or when you do it manually you probably setup a testing framework to write unit tests. Most Nuxt.js and Vue applications use the official @vue/test-utils which includes clever methods and options to help you write the best unit tests for your application. You probably tried to test your asyncData or fetch hook but couldn't succeed. This article explains why this is, but also…
To debug your JavaScript code you probably use your web console a lot. By logging variables, add logging in callbacks and add logging statements at certain breakpoints you can understand and improve your code. You’re probably familiar with the Console methods ‘log’, ‘warn’ and ‘error’ but did you know that there are a lot more methods? In this article I will share my favourite 3 and will show some tricks. And yes, the familiar…
A directive is an HTML attribute with the purpose to reactively apply side effects to the DOM. In Vue directives are prefixed with v-, you probably have already used a few directives before; v-if, v-for, v-model etc. But did you know you can write your own directives? This article will explain the differences between Vue directives and Vue components and when you can add your own custom directives. The differences between components and…
As of April 6, 2020, Google bots will no longer honour data-vocubulary.org markup in your html pages. Structured data based on this markup will lose its value and support. Starting January 2020 Google sent mails to developers that markup on their website is deprecated. The solution(s) The fix for this problem is fortunately easy. Where you’re using the data-vocubilary.org now, you should use the markup described on schema.org. Another…
You just pushed your code, it was a new feature and you are proud that your code coverage is 100%. Is it safe to say since the coverage is 100% that you didn’t introduce bugs? I believe you can't. So what is coverage?Code coverage gives you an indication on how much lines and/or branches of your code are covered with tests. A code coverage of 70% tells you that 70% of your lines of code are touched and executed with the tests. It therefore…
When you edit a component in Adobe Experience Manager (AEM) the system is smart enough to not reload the page but to only reload the html of the component. A nice trick to let editors edit content without wasting any time waiting on the page to reload. The problem Unfortunately this comes with an issue; frontend frameworks.…
With the release of MacOS Mojave and the beta of iOs 13 it's possible to bring the system wide darkmode to the web. Using dark colors instead of white reduces glare, which in turn reduces eye fatigue. Most importantly, Dark Mode can improve your ability to see certain aspects of video and photos, such as color and detail. So on paper it sounds like something we really want to bring to all our websites. In your stylesheet Safari comes with…
When you develop a Vue application you're probably developing multiple components. Many components work independently and are therefore easy to use, but in some occasions, you want your components to work together. For example, when you want to share data, share a state or want to use output from one component in an other component. Although the documentation of Vue feels complete and clear, it lacks information about implementing communication…
Vue wordt door steeds meer developers gebruikt. Laravel geeft out of the box de mogelijkheid om gebruik te maken van Vue en Bootstrap, maar ook React of Angular developers kiezen steeds vaker voor Vue. Na het meewerken bij een aantal projecten waar VueJS wordt ingezet begin ik te merken dat er nauwelijks wordt getest. Meest genoemde redenen zijn dat het testen te veel tijd kost en dat unit testen in de frontend moeilijk is. Volgens een…
Vaak krijg ik de vraag hoe het toch komt dat AngularJS velden valideert en foutmeldingen toont voordat een gebruiker iets heeft ingevuld in het webformulier. AngularJS blinkt juist uit in het opzetten van formulieren en het zou dus gemakkelijk moeten zijn om dat aan te passen. Gelukkig is dat zo, maar je zal wel de basis werking van AngularJS formulieren moeten begrijpen.States van een AngularJS formulierElk formulier van AngularJS houdt…
Op LinkedIn vliegen de opdrachten waar met Angular gewerkt wordt je om de oren. Vaak wordt er bij een opdracht omschrijving een hele lijst gegeven van Angular versies waar je ervaring mee moet hebben. Hoe komt het eigenlijk dat er zo veel versies zijn en zijn er veel verschillen?AngularJS en AngularAls je spreekt over Angular spreek je altijd over Angular versie 2 of later. De eerste versie heet AngularJS. Het grootste verschil tussen AngularJS…
Het liefst test je alles binnen jouw Angular project, alleen dan weet je dat je code goed werkt na elke verandering. Binnen een component test je naast private en public attributen ook private en public methods. Public methods kun je gemakkelijk testen door in de unit test deze methods direct aan te roepen. Met verschillende parameters test je elk pad binnen deze method en weet je dat de code werkt en blijft werken. Bij private methods…
Als je gebruik maakt van AngularJS componenten kan je er voor hebben gekozen dat elk component een nieuwe AngularJS app wordt. Je hebt dan nette en kleine componenten die je snel kunt inladen, maar toch kun je tegen problemen aanlopen. Als je bijvoorbeeld routing gebruikt kun je geen apps laden via de ng-app attribute. Routes zullen elkaar overschrijven waardoor apps onverwacht zullen reageren. Memory leaks voorkomen Met de app-manager…
AngularJS is een uitstekend framework om snel client-side apps mee te maken. Het MVC framework biedt controllers, services, factories, views, directives en componenten. Servies, controllers en views hebben een duidelijke functie binnen de app, maar components en directives hebben veel gemeen. Belangrijkste kenmerken Components heeft een template maakt een component (nieuw DOM element) is technisch een directive Directives voegt gedrag toe…
Two-way binding heeft webdevelopment veranderd. 'live' laten zien aan gebruikers wat er gebeurt en 'live' verwerken van de input van gebruikers zorgen voor de gebruikers voor een prettige ervaring. Een ander voordeel is dat jij als developer nauwelijks code in de view-layer van je applicatie hoeft te schrijven om…
Een nieuw AngularJS project is zo gestart, je laadt AngularJS in via een CDN en je schrijft al snel de eerste controller en directive. Snel komen er meerdere classes en modules in je app en begin je moeite te krijgen met het vinden van de juiste code. Als jij de weg in een nieuw project moeilijk kunt vinden kunnen je collega's de weg waarschijnlijk ook niet vinden. Er zijn veel artikelen geschreven hoe een AngularJS app het beste ingedeeld…
Tools zoals Gulp en Grunt helpen front-end developers bij de ontwikkeling van websites of webapplicaties. De termen Concat, Uglify en Minify worden door beide tools gebruikt, maar wat betekenen deze termen en nog belangrijker, wat kunnen we ermee?ConcatConcat komt van het woord concatenation, wat letterlijk vertaald betekent dat tekenreeksen op elkaar worden aangesloten. Bij Grunt of Gulp tasks betekent dit dat verschillende bestanden worden…
Met AngularJS schrijf je in een handomdraai een SPA. Maar hoe krijg je nou inzicht in het gebruik van de app? Bij een reguliere website kun je gebruik maken van Google Analytics. Door de trackings-code van Google Analytics in het html document van de website te plaatsen, kun je het gebruik van de website meten. Elke pagina op de website wordt voorzien van deze code, zodat je kunt zien welke pagina's worden bekeken en hoe bezoekers navigeren…
Met de komst van de mogelijkheid om met de browser de locatie van een gebruiker te bepalen hebben steeds meer websites locatie ondersteuning. Om deze manier kan informatie die belangrijk is voor de gebruiker worden getoond. Denk hierbij aan slaapplaatsen in de buurt bij Airbnb en restaurants in de buurt bij Whatsfood.…
Een reguliere expressie biedt een gestructureerde methode om patronen te definiëren waarmee een computer tekst kan identificeren. Deze methodiek volgt een formele syntaxis, die deels gestandaardiseerd is. Reguliere expressies worden breed toegepast, bijvoorbeeld op websites en in webapplicaties, voor het valideren van e-mailadressen en postcodes. Zo wordt bijvoorbeeld een e-mailadres gecontroleerd op de aanwezigheid van alle vereiste patronen.…
HTML5 is de nieuwste versie HTML, die nog steeds wordt ontwikkeld. Websites worden steeds meer voorzien van verschillende soorten media, het gebruik van het internet is ook gewijzigd. HTML5 biedt nieuwe mogelijkheden die het gebruik van nieuwe technieken makkelijker maakt. Een HTML5 document zal minimaal uit de volgende regels bestaan: <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>title</title>…
Een crawler is - zoals omschreven in de IT Glossary van Gartner (Gartner, Gartner IT Glossary, 2013) - een stuk software dat ontworpen is om URL's op websites te volgen om vervolgens nieuwe URL's te vinden. Het zoeken en het volgen van URL's is een recursief proces, waardoor de crawler een oneindig pad op het internet volgt naar nieuwe webpagina's en websites. Een crawler bestaat uit verschillende componenten en een crawler kan op verschillende…
