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