Bogdan | Bogdan's blog https://blog.bogdancarpean.com Code and anything else. Sat, 24 Dec 2022 02:14:57 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://blog.bogdancarpean.com/wp-content/uploads/2022/12/icons8-pencil-drawing-96.png Bogdan | Bogdan's blog https://blog.bogdancarpean.com 32 32 Simple disable mode using only CSS https://blog.bogdancarpean.com/simple-disable-mode-using-only-css/?utm_source=rss&utm_medium=rss&utm_campaign=simple-disable-mode-using-only-css https://blog.bogdancarpean.com/simple-disable-mode-using-only-css/#respond Sat, 24 Dec 2022 02:14:57 +0000 https://blog.bogdancarpean.com/?p=451 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 […]

The post Simple disable mode using only CSS first appeared on Bogdan's blog.]]> 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 CSS only does not disable the keyboard tab focusing. At the time of writing, there is no viable CSS only solution to disable the tab navigation. For this, a tabindex=”-1″ property should be used on the HTML element. To dynamically switch the tabindex we need to use JavaScript to find the element and change the value.

The post Simple disable mode using only CSS first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/simple-disable-mode-using-only-css/feed/ 0 Vue 3 is out – what should I do next? https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3-is-out-what-should-i-do-next https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/#respond Thu, 24 Sep 2020 03:00:34 +0000 https://blog.bogdancarpean.com/?p=389 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 […]

The post Vue 3 is out – what should I do next? first appeared on Bogdan's blog.]]> 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 npm install as @latest), the new version promises increased performance, smaller bundle size, and interesting new features to at least intriguing us for discovering more.

Let’s take a first look at what’s new to decide if we go all-in with the new version or wait for the moment.

Vue 3 introduces the Composition API, which addresses the biggest problem (*personal opinion) of Vue, the use of mixins. Mixins are a good way of abstracting code to make it more reusable, but they have some flaws: they hide the code – at some point, a method defined in the mixin is called into the component, but that method is nowhere to be found inside the component. So you start digging up, losing time tracing the method to debug. In the extreme case of mixins nested in other mixins, this job increases in complexity. Other downsides are possible namespace clash (when you define a method in your component with the same name as one in the mixin) and have side effects hard to trace and the possibility of adding too much code in the mixin that is only partly used in a component at the time, this way incorporating to much bloat in components. The new Composition API in Vue 3 is giving us a new way of defining reusable code in Composables, which are more concise and clear as structure, then import these building blocks to construct our components.

Vue 3 promises to be faster and to have a smaller bundle size. On Vue 2, one way of gaining performance was to transform stateful components in functional ones when you have a lot of them in the DOM, to save lost time on register/unregister when re-rendering. On Vue 3, the functional prop was taken out from components (only render functions from now on), but the difference in performance between functional components and stateful ones became negligible, so we are advised to use only stateful components (for the part of us that does not like to use render functions).

Another point that will increase the performance of a Vue 3 application is compiler-informed Virtual DOM. This means that at compile-time, the resulting render functions that go into the bundle are flagged when they contain runtime dynamically changing elements. This way, at runtime, the Virtual DOM is aware of the elements to look for changes and not waste time on watching static ones.

In Vue 3, tree-shaking of Vue internals has been added at compile time. This is a step further in the “progressive framework” approach, allowing us to transport in the bundle only the Vue internals we are actually using. More than this, we have the possibility to manually flag the compiler for the parts it can’t detect automatically for tree-shake.

The new proxy-based reactivity system will speed even further the runtime of our application (check the MDN docs on proxies to find more on this interesting topic).

Some other interesting new features can be found in Vue 3.

The new <teleport> component allows us to render a part of the component template somewhere else in the DOM than the containing component place. Very useful for triggering a modal or a spinner from inside of a component to a more generic point in the DOM (e.g. <body>). Or, when you have a hamburger button on a mobile collapsed layout header to be able to trigger the navigation list outside that layout component.

<suspense> is another component that acts as a wrapper for our component, allowing it to have an alternate template displayed until async operations are executed. Simply put, it allows us to show a loading template until the actual template is loaded and hydrated.

The new Vue 3 now supports multiple elements in the root of the <template>. This means no more wrapping all the elements in the template in one big <div> to avoid an error. Nice addition!!!

<v-model> has a new API in the form of <component v-model:key=”binding”>. This allows us to pass multiple v-model binding for the same component. Multiple two-way bindings on one component. Nice!!!

Filters have been removed from Vue 3 (these are the pipes for those coming, like myself, from the Angular world). From now on, to avoid confusion, only direct method binding {{ convertToCelsius (degrees) }}.

Some additions have been made to the Single File Components syntax. One is the new <script setup>, which is a shorthand to use instead of returning the setup function for the Composition API. The other interesting one is <style vars>, which allows us to pass CSS variables to the style sheet and this way to control dynamically the style at runtime.

For those of you wanting to tweak the framework or even to use parts of Vue to build their own framework, new modular internals of Vue 3 are here, replacing the monolith core of Vue from former versions.

Lastly, the wide use of TypeScript in Vue 3 allows you to have on the fly type inference in your component when you instantiate a variable. And if you already declare the type of your props, you’re already there.

The last thing to mention is that Vue 3 will stay on @next tag until somewhere the end of 2020 when a coordinated switch of all components to @latest will be made. Also, a minor release of Vue 2.7 is scheduled for Q1/2021, having all the 3.x backward compatible features included and the migration build for 3.x. At that point, 2.7 will enter LTS for 18 months.

Now that we have a clearer picture of what Vue 3 brings to the table, we ask ourselves what to do next? And as usual, there are few different answers to this question, depending on the current state of your application.

If you have a small application(s) that work fine and have no benefit from using the above-mentioned changes, just keep them on 2.x.

If you start a new application with Vue, start it directly on Vue 3, this way you have all the new benefits of the framework and your application is future proof for what’s to come for a longer period of time. The only drawback in this situation is that some of the submodules are not yet on stable releases, but I think most are stable enough (beta or RC) to be usable and soon stable.

If your application is a complex one and you were already thinking of some refactoring, could be the time to start architecting for the transition to Vue 3 and by the time you figure it out, hopefully, all the pieces will be in place for a fast migration and the benefits brought by Vue 3.

Else, if you have a complex application that is working fine now, you will want to wait a bit for the migration build to be in place and do a two-step migration to Vue 3 using this build as an intermediary step.

Either way, hope you will enjoy the new iteration of the framework and happy coding!

 

The post Vue 3 is out – what should I do next? first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/vue-3-is-out-what-should-i-do-next/feed/ 0 Javascript for of index https://blog.bogdancarpean.com/javascript-for-of-index/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-for-of-index https://blog.bogdancarpean.com/javascript-for-of-index/#respond Mon, 01 Jun 2020 16:36:25 +0000 https://blog.bogdancarpean.com/?p=376 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, […]

The post Javascript for of index first appeared on Bogdan's blog.]]> 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, element] of myArray.entries()) {
  console.log(index, element)
}
The post Javascript for of index first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/javascript-for-of-index/feed/ 0 Vuetify upgrade to 2 https://blog.bogdancarpean.com/vuetify-upgrade-to-2/?utm_source=rss&utm_medium=rss&utm_campaign=vuetify-upgrade-to-2 https://blog.bogdancarpean.com/vuetify-upgrade-to-2/#respond Thu, 22 Aug 2019 20:52:20 +0000 http://blog.bogdancarpean.com/?p=324 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 […]

The post Vuetify upgrade to 2 first appeared on Bogdan's blog.]]> 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 style changes and adjust where needed.

First, two commands to remove the Vuetify 1 lib from your project and to add Vuetify 2 to your node_modules:

npm remove --save vuetify
npm install --save vuetify@latest

If you try to build your project at this point, you will likely get the following error:

This dependency is not found:

* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js

That is because Vuetify changed the style language from Stylus in Vuetify 1 to Sass in Vuetify 2. Find your vuetify.js config file (mine is in /src/plugins/vuetify.js) and do the following changes:

* Delete import 'vuetify/src/stylus/app.styl'

Replace with

import 'vuetify/dist/vuetify.min.css'

In my Vuetify 1 project, I also had a custom primary color. This is how the instantiation of Vuetify changes on vuetify.js:

Before
======

Vue.use( Vuetify, {
           theme: {
             primary:'#01884e'
           }
        })

After
=====

Vue.use( Vuetify )

export default new Vuetify({
                     theme: {
                       themes: {
                         light: {
                           primary: '#01884e'
                         }
                       }
                     }
                   })

The only thing left is to add Vuetify in your Vue instance. This is done in main.js file:

import Vuetify from '@/plugins/vuetify' //your path to vuetify.js file could be different

//then we add Vuetify to our Vue instance

new Vue({
      Vuetify
}).$mount('#app')

Hoping this Vuetify 2 upgrade guide has helped you on how to update Vuetify without hassle, I wish you happy coding.

The post Vuetify upgrade to 2 first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/vuetify-upgrade-to-2/feed/ 0 Fetch data needed on component’s template in Vue before render https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/?utm_source=rss&utm_medium=rss&utm_campaign=fetch-data-needed-on-components-template-in-vue-before-render https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/#respond Thu, 01 Aug 2019 06:00:10 +0000 http://blog.bogdancarpean.com/?p=311 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> […]

The post Fetch data needed on component’s template in Vue before render first appeared on Bogdan's blog.]]> 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>
</template>
<script>
data():{
  return{
    name: null
    age: null
  }
}

created():{
  fetchUser().
    then(res => {
     this.name = res.data.name
     this.age = res.data.age 
    }
    )
}
</script>

In this example, we have a Vue Component that needs to fetch the user name and age before being able to create the template and display them. We use the lifecycle hook created() to fetch the data in the component. This will finally work, because of the reactive nature of Vue, but we are going to have an error in the console telling us that name is undefined. This happens because when we navigate to the component and this one gets rendered, the value of the variables is not yet fetched, the component rendering first the template, then executing the script. So we get the error on the console, then the script is run, data is fetched and displayed.

Let’s see how to do that without having the error on the console:

<template>
 <div class="container" v-if="dataFetched">
   <p>Name: {{name}}</p>
   <p>Age: {{age}}</p>
 </div>
</template>
<script>
data: {
  return {
    name: null
    age: null
    dataFetched: false
  }
},

beforeRouteEnter(to, from, next) {
  fetchUser().
    then(res => {
      next(vm => vm.setUser(res.data)
    })
},

methods: {
  setUser(user){
    this.name = user.name
    this.age = user.age
    this.dataFetched = true
  }
}
</script>

To achieve this, we first use the beforeRouteEnter() guard of the Vue Router that is called before the Router navigates to our component route. This guard has three parameters: to, from and next. From is an object containing the information about the route we are navigating from, also the parameters passed by route, to is the information about the route we are navigating to, next() is the function we call after we executed all we need on the guard to pursue the navigation.

But moving the fetch logic from the lifecycle hook to the guard alone won’t solve our problem because fetch is an asynchronous operation that will start on the guard, then next is called, leading to template rendering before data being fetched and virtually the same error on console.

To achieve this, we use a trick. We declare a boolean in the component, let’s say dataFetched, that we instantiate to false and we use it to trigger with v-if the render of the container div only when the data is fetched. We set the variable to true in the setUser method in the component after data is fetched, this way preventing the render of the template and the error on the console.

Happy coding!!!

The post Fetch data needed on component’s template in Vue before render first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/fetch-data-needed-on-components-template-in-vue-before-render/feed/ 0 How to @extend sass classes or use sass global variables in Vue components https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/#respond Wed, 20 Mar 2019 04:16:21 +0000 http://blog.bogdancarpean.com/?p=274 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 […]

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.]]>
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 assume that you have a class that you want to extend

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

Assuming you generated your project with @vue/cli, you have to add the following statement to vue.config.js in order to have file visibility throughout your application

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}

Then, you can use @extend on which component you want

<style lang="scss" scoped>
.my_extended_class {
  @extend .my_class_to_extend;
}
</style>

Remember that you have to use sass in both extended and extender sheets for this to work.

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/feed/ 0 New ng lint syntax on Angular 6 https://blog.bogdancarpean.com/new-ng-lint-syntax-on-angular-6/?utm_source=rss&utm_medium=rss&utm_campaign=new-ng-lint-syntax-on-angular-6 https://blog.bogdancarpean.com/new-ng-lint-syntax-on-angular-6/#respond Tue, 19 Jun 2018 22:50:36 +0000 http://blog.bogdancarpean.com/?p=251 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 […]

The post New ng lint syntax on Angular 6 first appeared on Bogdan's blog.]]> 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 to work, we have to add the name of the application after the ng lint command: ng lint your_app_name --format stylish

The post New ng lint syntax on Angular 6 first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/new-ng-lint-syntax-on-angular-6/feed/ 0 Create custom color theme on Angular Material https://blog.bogdancarpean.com/create-custom-color-theme-on-angular-material/?utm_source=rss&utm_medium=rss&utm_campaign=create-custom-color-theme-on-angular-material https://blog.bogdancarpean.com/create-custom-color-theme-on-angular-material/#respond Thu, 01 Feb 2018 02:04:34 +0000 http://blog.bogdancarpean.com/?p=197 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 […]

The post Create custom color theme on Angular Material first appeared on Bogdan's blog.]]> 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 your app, you have the choice of four pre-built themes: deeppurple-amber, indigo-pink, pink-bluegrey or purple-green.
An Angular Material theme is based on five color palettes, each palette being just a collection of nuances generated from one main color: the primary palette (the main color used across the application), the accent palette (color used for floating action button and interactive elements), the warn palette (used for all error displays), the foreground palette (used for text and icons) and the background palette (used for element backgrounds).
Let’s say we are going to define a custom theme using three colors: the primary color, the accent (or the contrast) color and the warn color. For the first two, we are going to generate custom palettes, for the third, we are going to use the material red predefined palette.
First, we are going to generate a scss file, let’s call it your-theme.scss, in a common zone folder, let’s say app/common/themes.
Into this file, we are going to @import the theming file from Angular Material which contains the mat-core() mixin, containing all the common styles used by material components. (mat-core() should only be included once in your app to not duplicate the common styles).
@import '../node_modules/@angular/material/theming';

@include mat-core();

Next, we need to generate the material palettes for our two custom colors (primary and accent). An excellent site to do this is mcg.mbitson.com. In our example, we are going to use #008a00 as the primary custom color and #ca5d1e as the accent color. On the generator, enter the name you want for your color variable, click on the arrow on the right of the color box on the header and enter the color code in the input field under the color picker. Click choose and you will see the material nuances generated from your custom color. To export the palette, click on the clipboard icon on the header, then choose output format Angular JS 2 (Material 2). Copy the generated code in our your-theme.scss file. Do the same for the accent color. We will end up having the two custom color material palettes:

@import '../node_modules/@angular/material/theming'; @include mat-core();

@include mat-core();

$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
    50 : #f9ece4,
    100 : #efcebc,
    200 : #e5ae8f,
    300 : #da8e62,
    400 : #d27540,
    500 : #ca5d1e,
    600 : #c5551a,
    700 : #bd4b16,
    800 : #b74112,
    900 : #ab300a,
    A100 : #ffdfd7,
    A200 : #ffb5a4,
    A400 : #ff8c71,
    A700 : #ff7858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

Now, all we have left to do is to declare the three palettes, declare the new theme using the three palettes and then add the newly created theme into the material themes.

@import '../node_modules/@angular/material/theming';

@include mat-core();


$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
    50 : #f9ece4,
    100 : #efcebc,
    200 : #e5ae8f,
    300 : #da8e62,
    400 : #d27540,
    500 : #ca5d1e,
    600 : #c5551a,
    700 : #bd4b16,
    800 : #b74112,
    900 : #ab300a,
    A100 : #ffdfd7,
    A200 : #ffb5a4,
    A400 : #ff8c71,
    A700 : #ff7858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

//the first two are the custom palettes we declared above
$my-theme-primary: mat-palette($my-primary);
$my-theme-accent: mat-palette($my-accent);
//the third, for the warn color, is the predefined material red palette
$my-theme-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

@include angular-material-theme($my-theme);

The only one thing left to do is to import the generated theme file into the styles.scss file found in the root of your application

@import "./path/to/your-theme.scss"

If you’re in Montreal and passionate about Angular, come meet at Angular Montreal Meetup

The post Create custom color theme on Angular Material first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/create-custom-color-theme-on-angular-material/feed/ 0 Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method https://blog.bogdancarpean.com/deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method/?utm_source=rss&utm_medium=rss&utm_campaign=deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method https://blog.bogdancarpean.com/deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method/#respond Fri, 12 Jan 2018 14:08:06 +0000 http://blog.bogdancarpean.com/?p=182 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 […]

The post Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method first appeared on Bogdan's blog.]]> 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 example: 
let originalObject = {name: 'Bunt', type: 'dog'};

Then, we want to make a copy of the originalObject. In ES6, we are going to do something like this:

let copiedObject = Object.assign({}, originalObject);

This will create the copiedObject with all the properties and respective values of the originalObject. Now, if we want to change a value in the copiedObject, this will not change also the value into the originalObject:

copiedObject.type = 'cat';

console.log(originalObject.type); // will print 'dog'
console.log(copiedObject.type); // will print 'cat'

Now, what is going to happen if we have a nested Object inside our Object, doing the same operations?

let originalObject = {name: 'Bunt', details: {type: 'dog', color: 'brown'}};

let copiedObject = Object.assign({}, originalObject);

copiedObject.details.type = 'cat'; 

console.log(originalObject.details.type); // will print 'cat' 
console.log(copiedObject.details.type); // will print 'cat'

As you can see, when you change the value of a property in the nested Object of copiedObject, that change is perpetuated to the same property of the nested Object in originalObject. You’ll ask why that happened? Because JavaScript passes the primitive values (string, number, etc.) as value-copy and the compound values (Objects, Arrays, Functions) as reference-copy to the value of the primitives on that Object. This way, when we copied the Object containing the nested Object, we have created a shallow copy of that object, meaning that the primitives found at the first level of the Object have values that are copied, thus when we change them into the copiedObject, they are not going to change in the originalObject while all other property found in a nested object will have the value passed as a reference to the same property value into the nested Object of originalObject, thus when we change its value, we actually change the value of the reference, resulting on both nested Objects having the modified property value.

Now, what’s the solution to deep copy an Object or Array, meaning that we want to have a copy free of references at all nested levels so we can change the values inside without the fear of breaking the original?

The first solution you are going to find is to serialize the Object to a JSON, then parse back that JSON to a JavaScript Object, practically passing the Object thru a string that will clean up the Object tree from the references nested inside by recreating a new Object with copied properties and values from the original one.

let copiedObject = JSON.parse(JSON.stringify(originalObject));

But this is a controversial solution. Why? Because this is going to work fine as long as your Objects and the nested Objects only contains primitives, but if you have objects containing functions, this won’t work. Neither for Date.

So, what’s the working solution? We are going to use lodash’s cloneDeep method to deep copy the Object. Lodash is an excellent JavaScript utility library for those not knowing it yet. The cloneDeep method will iterate all levels of the original Object and recursively copying all properties found.

The example I will give here is in Angular. Since we don’t want to carry all the bundle of lodash to the client, we are going only to import the cloneDeep method.

First, let’s install lodashinto our project:

yarn add lodash or npm install lodash

Once installed, we are going to use in our component:

import * as cloneDeep from 'lodash/cloneDeep';

...

clonedObject = cloneDeep(originalObject);

Importing cloneDeep will add to your build 18kb, a fair price to pay in order to have a reliable deep copy solution for you Objects.

I added a demo app on Github here.

Interested in Angular? Join our Angular Montreal Meetup.

The post Deepcopy of JavaScript Objects and Arrays using lodash’s cloneDeep method first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/deepcopy-of-javascript-objects-and-arrays-using-lodashs-clonedeep-method/feed/ 0 How to run Angular tests on CI Docker Container with Chrome https://blog.bogdancarpean.com/how-to-run-angular-tests-on-ci-docker-container-with-chrome/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-run-angular-tests-on-ci-docker-container-with-chrome https://blog.bogdancarpean.com/how-to-run-angular-tests-on-ci-docker-container-with-chrome/#respond Sat, 06 Jan 2018 05:31:33 +0000 http://blog.bogdancarpean.com/?p=171 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 […]

The post How to run Angular tests on CI Docker Container with Chrome first appeared on Bogdan's blog.]]> 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 to the repo.

For this example I’m gonna use the Atlassian Bitbucket Pipelines for continuous integration, but is not limited to it, you can use it in any other environment that is using a Docker Container, like Bitbucket, to test and build your Angular app.

To be able to test the Angular solution generated with @angular/cli, we need a Docker Container with Node to run npm install in order to install the dependencies and then we need an instance of chrome to run the tests.

For this, we have two solutions. I prefer the first one in which we take the official Node Docker Container, for the time being, 6.9.4, we install the chrome browser, then run npm install to fetch the dependencies of the project, then finally run our tests.

For Atlassian Bitbucket Pipelines, we are going to use the following code in the commit bitbucket-pipelines.yml file:

image: node:6.9.4

pipelines:
  default:
    - step:
        caches:
          - node
        script:
          - apt-get update; apt-get install -y gettext-base;
          - echo 'deb http://dl.google.com/linux/chrome/deb/ stable main' > /etc/apt/sources.list.d/chrome.list
          - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
          - set -x && apt-get update && apt-get install -y xvfb google-chrome-stable
          - wget -q -O /usr/bin/xvfb-chrome https://bitbucket.org/atlassian/docker-node-chrome-firefox/raw/ff180e2f16ea8639d4ca4a3abb0017ee23c2836c/scripts/xvfb-chrome
          - ln -sf /usr/bin/xvfb-chrome /usr/bin/google-chrome
          - chmod 755 /usr/bin/google-chrome
          - npm install
          - ./node_modules/@angular/cli/bin/ng -v
          - ./node_modules/@angular/cli/bin/ng test --watch=false

Please take into consideration that this is the code for a debian linux machine inside the Docker Container, so you have to adapt if you have a different machine.

I said that this solution is my preferred one because I want to test my app against the newest chrome version and I achieve this by installing the latest on each commit I make.

The downside of this solution is that it has to fetch all the updates for the linux machine and install chrome and it will take between 2 and 3 minutes to accomplish so this can become costly if you have a time limit on your Bitbucket account.

The second solution is to take a container from Docker Container Hub containing already Node and Chrome and to run the code starting from npm install. This way you cut in half the runtime, but you are going to test against the version of chrome installed into the Docker Container.

Have fun!

The post How to run Angular tests on CI Docker Container with Chrome first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/how-to-run-angular-tests-on-ci-docker-container-with-chrome/feed/ 0