Photo by AVI on Unsplash There is a simple way to add a visual disable state to an HTML element. We just have to add the following CSS class to the parent HTML element we want to disable: .disabled { cursor: initial; pointer-events: none; opacity: 0.5; } Caveats of this method: disabling the elements using […]
Long-awaited version 3 of the popular Vue framework is finally released (after 6 months in beta and release candidate), packed with interesting new things for Vue developers. Named “One Piece” and hosted in a separate repo, vue-next, for a period of time (to avoid being confused with 2.x and also not to be picked by […]
Starting with ECMA 6 we have a new loop iterating statement in the form of for…of. This helps us to loop thru an iterable object (array, string, map, set…) in a simpler fashion than the classic for loop. To achieve this, we are going to use the entries() method of the Array: for (const [index, […]
This article shows you how to update Vuetify on your existing project built with Vuetify 1 to the newly released Vuetify 2. This assumes that you have a Vue project using the Vuetify components library. Since Vuetify 2 is adopting the new Google Material Design 2, please check after the update all your components for […]
Let’s say in your Vue app you have a component that needs to fetch some data in order to display it on the template. This component needs this data on creation in order to be able to bind it on the template. Let’s take the following example: <template> <div class=”container”> <p>Name: {{name}}</p> <p>Age: {{age}}</p> </div> […]
Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage. Let’s […]
Let’s say you had a syntax like ng lint –format stylish on your package.json before Angular 6. Running this after you update to Angular 6 will result in the following error: Architect command with multiple targets cannot specify overrides. This error is not much of help when you know that before update the linting worked fine. For this […]
Most of the time when building an Angular Material application, you will need to customize your color palette, so that you adapt the look of your application to your client’s brand. In this article, we are going to do that customization for an Angular app that uses Angular Material. When you add Angular Material to […]
While developing JavaScript applications, often we need to make copies of Objects or Arrays containing Objects. Then we want to work with those copies without affecting the original objects. In a common scenario, we are going to deal with a simple, one level Object (an Object without other Objects nested inside), like in the following […]
In this article, we are going to learn how to run the tests of an Angular solution generated with @angular/cli into a Docker Container without changing any of the initial configuration generated by @angular/cli. This is very important in the context of Continuous Integration workflow when you want to run your tests as you commit […]