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 […]
Vue 3 is out – what should I do next?
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 […]
Javascript for of index
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, […]
Vuetify upgrade to 2
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 […]
Fetch data needed on component’s template in Vue before render
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> […]
How to @extend sass classes or use sass global variables in Vue components
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 […]
New ng lint syntax on Angular 6
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 […]
Create custom color theme on Angular Material
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 […]
Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method
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 […]
How to run Angular tests on CI Docker Container with Chrome
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 […]