Webdevelopment blog

Webdevelopment blog

Javascript x

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. You probably tried to test your asyncData or fetch hook but couldn't succeed. This article explains why this is, but also…

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

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 Vue directives and Vue components and when you can add your own custom directives. The differences between components and…

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

Continue reading

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 betekent dat tekenreeksen op elkaar worden aangesloten. Bij Grunt of Gulp tasks betekent dit dat verschillende bestanden worden…

Lees verder

Nederlandse reguliere expressies

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

Lees verder