Webdevelopment blog

Webdevelopment blog

How I added my Porsche EV to Homekit

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,…

Reading time: 12 minutes

Continue reading

CSS-only Carousel Slider

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…

Reading time: 4 minutes

Continue reading

Homekit `Power consumption` sensor

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…

Reading time: 7 minutes

Continue reading

How to test Nuxt.js asyncData and fetch hooks

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.…

Reading time: 4 minutes

Continue reading

My 3 favourite console methods in JavaScript

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…

Reading time: 4 minutes

Continue reading

Vue components vs directives

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…

Reading time: 4 minutes

Continue reading

How to fix “Breadcrumbs issues detected”

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…

Reading time: 3 minutes

Continue reading

What is code coverage?

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…

Reading time: 2 minutes

Continue reading

Vue components disappear in AEM

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.…

Reading time: 6 minutes

Continue reading

Dark mode on your website

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…

Reading time: 2 minutes

Continue reading

Communication between Vue components

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…

Reading time: 7 minutes

Continue reading

Starten met unit testen in Vue

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.…

Leestijd: 8 minuten

Lees verder

Validatiemeldingen tonen met AngularJS

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…

Leestijd: 3 minuten

Lees verder

Waarom er veel versies van Angular zijn

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…

Leestijd: 2 minuten

Lees verder

Unit testen van private methods in Angular

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…

Leestijd: 2 minuten

Lees verder

AngularJS apps starten en stoppen

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.…

Leestijd: 2 minuten

Lees verder

AngularJS: Het verschil tussen Components en Directives

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…

Leestijd: 3 minuten

Lees verder

4 performance tips voor AngularJS apps

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…

Leestijd: 4 minuten

Lees verder

Kickstart een AngularJS project

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…

Leestijd: 2 minuten

Lees verder

Het verschil tussen Concat, Uglify en Minify

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…

Leestijd: 2 minuten

Lees verder

AngularJS en Google Analytics

Met AngularJS schrijf je in een handomdraai 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…

Leestijd: 2 minuten

Lees verder

MySQL: Afstand-berekeningen met longitude en latitude

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.…

Leestijd: 2 minuten

Lees verder

Nederlandse reguliere expressies

Een reguliere expressie is een manier om patronen te beschrijven waarmee een computer tekst kan herkennen. Er bestaat hiervoor een formele syntaxis, die deels is gestandaardiseerd. Reguliere expressies worden bijvoorbeeld op websites en in webapplicaties gebruikt om e-mailadressen en postcodes te valideren. Een e-mailadres…

Leestijd: 5 minuten

Lees verder

Een minimaal HTML5-document

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…

Leestijd: 2 minuten

Lees verder

Wat is een crawler?

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…

Leestijd: 7 minuten

Lees verder