DEV Community: Obinna Ogbonna

Angular Preloading

Obinna Ogbonna — Sun, 19 Apr 2020 10:36:49 +0000

Have you ever been in a situation where you needed to call an API to return data needed in a particular component and its HTML structure?
And then, you're not certain if that api has valid data at the moment?

If you have been in this situation multiple times like I have been, then you'll very much appreciate angular Preload feature.

Preloading feature in summary, is to enable lazy loaded modules to be able to fetch data needed for its component functions at the point of routing.

Preloading improves user experience a lot, as it can load all data needed for a module or component at the point where you hit the route, and gracefully handle situations where data needed for such component is not available.

Below is a code snippet to preload all lazy-loaded modules in your route:

    import { PreloadAllModules } from '@angular/router';

    const appRoutes: Routes = [
        ...
    ]

    RouterModule.forRoot(
        appRoutes,
        {
            preloadingStrategy: PreloadAllModules
        }
    )

This is an explanation on how preloading works.

Custom Preloading

Most times, you and I know that we do not want ALL lazy loaded module to be preloaded, as it may affect performance. We only want some feature modules to be preloaded. Here is how you can do that...

First thing to do is to create a service that will implement your preloading strategy. Let's call the class SelectivePrelodingStrategyService


    import { Injectable } from '@angular/core';
    import { PreloadingStrategy, Route } from '@angular/router';
    import { Observable, of } from 'rxjs';

    @Injectable({
    providedIn: 'root',
    })
    export class SelectivePreloadingStrategyService implements PreloadingStrategy {

        preload(route: Route, load: () => Observable<any>): Observable<any> {
            if (route.data && route.data['preload']) {
            // log the route path to the console
            console.log('Preloaded: ' + route.path);

            return load();
            } else {
            return of(null);
            }
        }
    }

Then, on every route that you want to be preloaded, add this code:::


    {
        path: 'books',
        loadChildren: () => import('./books/books.module').then(m => m.BooksModule),
        data: { preload: true }
    }

Finally, on the routing module, replace the preloading strategy with the service created above

    import { PreloadAllModules } from '@angular/router';
    import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service';

    const appRoutes: Routes = [
        ...
    ]

    RouterModule.forRoot(
        appRoutes,
        {
            preloadingStrategy: SelectivePreloadingStrategyService
        }
    )

Prefetching Component Data

You can pre-fetch data from the server using a resolver so it's ready the moment the route is activated. This will also allow to handle errors before routing to the component. There is no point routing to a component where the data required is not available, or showing a blank component while waiting for the data to load from APIs.

To do this, we create a resolverservice. we call it BookDetailResolverService


    import { Injectable }             from '@angular/core';
    import {
    Router, Resolve,
    RouterStateSnapshot,
    ActivatedRouteSnapshot
    }                                 from '@angular/router';
    import { Observable, of, EMPTY }  from 'rxjs';
    import { mergeMap, take }         from 'rxjs/operators';

    import { BookService }  from './book.service';
    import { Book } from './book';

    @Injectable({
    providedIn: 'root',
    })
    export class BookDetailResolverService implements Resolve<Book> {
        constructor(private cs: BookService, private router: Router) {}

        resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Book> | Observable<never> {
            let id = route.paramMap.get('id');

            return this.cs.getBook(id).pipe(
            take(1),
            mergeMap(book => {
                if (book) {
                return of(book);
                } else { // id not found
                this.router.navigate(['/book-center']);
                return EMPTY;
                }
            })
            );
        }
    }

Then, we import this resolve into the routing module and add a resolve object to the detail component route configuration


    import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { BookHomeComponent } from './book-home/book-home.component';

import { BookDetailComponent }     from './book-detail/book-detail.component';

import { CanDeactivateGuard }             from '../can-deactivate.guard';
import { BookDetailResolverService }    from './book-detail-resolver.service';

const bookRoutes: Routes = [
    ...
  {
      path: ':id',
            component: BookDetailComponent,
            canDeactivate: [CanDeactivateGuard],
            resolve: {
              book: BookDetailResolverService
            }
  },
  {
    path: '',
    component: BookHomeComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(bookRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class BookRoutingModule { }

Finally, the BookDetailComponent can fetch the book details from the route data as shown below...


    ngOnInit() {
        this.route.data
            .subscribe((data: { book: Book }) => {
            this.editName = data.book.name;
            this.book = data.book;
            });
    }

A practical guide on linear-gradients - CSS

Obinna Ogbonna — Sun, 10 Nov 2019 02:50:14 +0000

Linear gradients are identified by using the linear-gradient() function within the background or background-image property. It must include (at least) two color values.

Before any gradient backgrounds are identified, it's good to put in a default background property with a solid color. The solid color is to be used as a fallback should a browser not support gradient backgrounds.

Varying the gradient angle

By default, the gradient goes from the top of the block to the bottom. It is equivalent to writing this:


    div {
        background-image: linear-gradient(to bottom, rgb(100, 100, 100), rgb(200, 200, 200));
    }

You can use the keywords to top, to bottom, to left, to right, to top left, to top right, to bottom left and to bottom right to change the angle or direction of the gradient

Another way to set gradient angles is through a degree value.


    div {
        background-image: linear-gradient(0deg, rgb(100, 100, 100), rgb(200, 200, 200));
    }

0deg is equivalent to to top
90deg is equivalent to to right
180deg is equivalent to to bottom
270deg is equivalent to to left
360deg brings you back to to top again.

Colour stops

A color stop is a position along the gradient that has a specific color. You can specify as many colors as you like along gradient, and the browser will calculate all the colors between those stops.

This


    div {
        background-image: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(150, 0, 0))
    }

is equivalent to:


    div {
        background-image: linear-gradient(to bottom right, rgb(255, 0, 0) 0%, rgb(150, 0, 0) 100%)
    }

So here we have one color stop at 0, and one at 100% of the way across the block the element is applied to. But there is no point writing these, as this is the default. Instead, it is a lot more useful to add color stops in between the start and end. For example:


    div {
        background-image: linear-gradient(to bottom right, rgb(255, 0, 0),
        rgb(100, 0, 0) 50%,
        rgb(50, 0, 0) 75%,
        rgb(150, 0, 0));
    }

Here we are starting with a really light red, then going to a darker red at 50%, an even darker one at 75%, and then a slightly lighter one at 100%.

Instead of percentages, you can use fixed values of length like px. However, for liquid layouts, percentages are recommended because the conditions in the code remain true despite any change in width or height.

Transparency gradients

You can vary the alpha channel value of the color along the gradient. For example:


    div {
        background-image: linear-gradient(to right,
        rgba(100, 100, 100, 1),
        rgba(100, 100, 100, 0.5))
    }

Repeating linear gradients

Instead of linear-gradient, you can use repeating-linear-gradient. This takes the color stop values and repeats them endlessly. It doesn't make much sense to do this with percentage values, but with fixed units, it can create some cool effects.

Here we are starting at a bright full red, moving to a darker red after 20px, then moving back to the full red at 40px. Because it is a repeating gradient, it keeps repeating this pattern until the end of the block.

Browser support and old syntax

For compatibility with older browser versions and WebKit versions, you should consider including vendor prefixes versions of the property, all including the older syntax. This is basically the same, except:

The direction keywords are the opposite way round and don't include the word to. So top left is equivalent to to bottom right, bottom is equivalent to to top, and so on.
When signifying angles for directions, you need to do some recalculation, as 0deg used to mean horizontal towards the right (equivalent to left), and now it means vertical and upwards (equivalent to top).

A full cross browser block that also looks after older browser syntax would look like this:


    div {
        background-image: -webkit-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:   -moz-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:       -ms-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:           -o-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:               repeating-linear-gradient(70deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
    }

A Practical Guide on Radial Gradient - CSS

Obinna Ogbonna — Fri, 08 Nov 2019 19:15:19 +0000

This works just like linear gradients and share many of the same values with linear gradients. However, we use the radial-gradient() function instead.

Radial gradients work from the inside to the outside of an element. Thus, the first color identified within the radial-gradient() function will sit in the absolute center of the element, and the second color will sit on the outside of an element. The browser will then create the transition between the two colors.


    div {
        background: #4666368;
        background: radial-gradient(#648880, #293f50);
    }

You can set color stops at different percentages across the element, so in fluid layouts the gradient will adjust to fit as the element changes in size. The general syntax of radial gradient is.

radial-gradient(size shape at position, color stops);

For older browsers the syntax is:

radial-gradient(position, size and shape, color stops);

Syntax for a full cross browser syntax would look like this:


    div {
        background: rgb(75, 75,200);
        background: -webkit-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:     -moz-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:         -ms-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:             -o-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:                 radial-gradient(circle at 50% 50%, rgb(75, 75, 200), rgb(0, 0, 75));
    }

We'll look at the three syntax areas - size and shape, position and color stops.

Position

The position the gradient radiates from is determined by specifying the position of its center. This takes the form of at, followed by keyword or unit values, specified in the same way as CSS background-position. So,

circle at left top means"place the gradient center in the top left corner".
circle at 20% 70% means "place the gradient center 20% across the element and 70% of the way down".
circle at 0% means "place the gradient center on the left hand edge of the element, centered vertically". If you only specify a single value, that value is taken as the horizontal value, and the vertical is set to 50% (or center).
If you set no value at all for the gradient position, it is assumed to be in the center of the element, i.e. center center or 50% 50%.

Size and Shape

You can combine explicit sizes or implicit sizes and shape keywords to set the size and shape.

Explicit Sizes

When using explicit sizes, the two values you set are the horizontal and vertical radii of the shape. You can combine them with keywords circle, ellipse. Of course, single values are expected with circle (one radius) and two values for ellipse (two radii). The values use any of the length units, apart from percentages. Few examples:

40px circle means "make the gradient circular, and give it a radius of 40px".
2em 4em ellipse means "make the gradient an ellipse, and give it a minor radius of 2em, and a major radius of 4em".

If you don't set value for ellipse at all, the setting defaults to implicit size (ellipse cover)

Implicit sizes

The keywords that can be combined with the shape are: closest-side, closest-corner, farthest-side and farthest-corner.


    .close-side {
        background: radial-gradient(closest-side circle at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

    .close-corner {
        background: radial-gradient(closest-corner ellipse at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

    .far-side {
        background: radial-gradient(farthest-side circle at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

    .far-corner {
        background: radial-gradient(farthest-corner ellipse at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

You can use the keywords contain in place of closest-side and cover in place of farthest-corner. However, be sure it is properly supported by browsers.

Color Stops

You can specify the position of any number of color stops along the gradient (starting at the center of the gradient and going outwards) in any length unit. The colors can be in any preferred format.

Repeating Radial Gradients

Use repeating-radial-gradient function instead of radial-gradient to repeat the pattern you have set as far as the element it is applied to extends.

Note that you can use radial gradients anywhere you can use images - border-image, list-style-image, etc.

Optional Chaining and Nullish Coalescing - TypeScript 3.7!!

Obinna Ogbonna — Wed, 06 Nov 2019 13:57:23 +0000

TypeScript is a language based on JavaScript that adds static type-checking along with type syntax. Static type-checking lets us know about problems with our code before we try to run it by reporting errors if we do something questionable.

Yesterday, 5th November, a new version of TypeScript was released. The new features include:

Optional Chaining
Nullish Coalescing
Assertion Functions
Better Support for never-Returning Functions
--declaration and --allowJs
More Recursive Type Aliases
The useDefineForClassFields Flag and The declare Property Modifier
Build-Free Editing with Project References
Uncalled Function Checks
Flatter Error Reporting
// @ts-nocheck in Typescript Files
Semicolon Formatter Option
Website and Playground Updates
Breaking Changes:
- DOM Changes
- Class Field Mitigations
- Function Truthy Checks
- Local and Imported Type Declarations Now Conflict
- API Changes

We'll be looking at Optional Chaining and Null Coalescing. Here is a comprehensive read on all the new features.

Optional Chaining

At its core, optional chaining lets us write code where we can immediately stop running some expressions if we run into a null or undefined. There's a new operator - ?. for optional property accesses. When we write code like this

let x = foo?.bar.baz();

this is a way of saying that when foo is defined, foo.bar.baz() will be computed but when foo is null or undefined, stop what we're doing and just return undefined.

More plainly, that code snippet is the same as writing the following.


    let x = (foo === null || foo === undefined) ?
        undefined :
        foo.bar.baz();

Note that if bar is null or undefined, our code will still hit an error accessing baz. Likewise, if baz is null or undefined, we'll hit an error at the call site. ?. only checks for whether the value on the left of it is null or undefined - not any of the subsequent properties.

Keep in mind that ?. acts differenty than those && operations since && will act specially on "falsy" values (e.g. the empty string, 0, NaN, and, well, false). The new operator ?. doesn't short-circuit on valid data like 0 or empty strings.

Optional Element Access

Optional chaining includes optional element access which acts similarly to optional property accesses, but allows us to access non-identifier properties (e.g. arbitrary strings, numbers, and symbols):


    /**
        * Get the first element of the array if we have an array.
        * Otherwise return undefined.
    */
    function tryGetFirstElement<T>(arr?: T[]) {
        return arr?.[0];
        // equivalent to
        //      return (arr === null || arr === undefined) ?
        //          undefined :
        //          arr[0];
    }

Optional Call

This allows to conditionally call expressions if they're not null or undefined.


    async function makeRequest(url: string, log?: (msg: string) => void) {
        log?.(`Request started at ${new Date().toISOString()}`);
        //  roughly equivalent to
        //      if (log != null) {
        //          log(`Request started at new ${new Date().toISOString()}`);
        //      }
        const result = (await fetch(url)).json();

        log?.(`Request finished at ${new Date().toISOString()}`);

        return result;
    }

The "short-circuiting" behaviour that optional chains have is limited to property accesses, calls, element accesses - it doesn't expand any further out from these expressions. In other words,

let result = foo?.bar / someComputation()

doesn't stop the division or someComputation() call from occuring. It's equivalent to


    let temp = (foo === null || foo === undefined) ? undefined : foo.bar;

    let result = temp / someComputation();

That might result in dividing undefined.

Nullish Coalescing

This introduces a new operator ??. It is a way to "fall back" to a default value when dealing with null or undefined. When we write code like

let x = foo ?? bar();

this is a new way to say that the value foo will be used when it's "present"; but when it's null or undefined, calculate bar() in its place.

Again, the above code is equivalent to the following.

let x = (foo !== null && foo !== undefined) ? foo : bar();

The ?? operator can replace uses of || when trying to use a default value. For example, the following code snippet tries to fetch the volume that was last saved in localStorage(if it ever was); however, it has a bug because it uses ||.


    function initializeAudio() {
        let volume = localStorage.voume || 0.5

        // ...
    }

When localStorage.volume is set to 0, the page will set the volume to 0.5 which is unintended. The ?? operator avoids some unintended behaviour from 0, NaN and "" being treated as falsy values.

CircleCI Test Configuration for Angular Projects

Obinna Ogbonna — Sun, 18 Aug 2019 20:26:42 +0000

One of the best ways to keep your project bug free is through a test suite, but it's easy to forget to run tests all the time. Continuous integration (CI) servers let you set up your project repository so that your tests run on every commit and pull request.

CircleCI is a paid service, but it is provided free for open source projects. You can create a public project on Github and add CircleCI without paying.

Configure project for CircleCI

Create a folder called .circleci at the project root
In the new folder, create a file called config.yml with the following content

    version: 2

    jobs:
        # The test job
        test:
            working_directory: ~/project-name
            docker:
                - image: circleci/node:10-browsers
            steps:
                # Checkout the code from the branch into the working_directory
                - checkout
                # Log the current branch
                - run:
                    name: Show current branch
                    command: echo ${CIRCLE_BRANCH}
                # Restore local dependencies from cache
                - restore_cache:
                    keys:
                    - v1-dependencies-{{ checksum "package-lock.json" }}
                    - v1-dependencies-
                # Install project dependencies
                - run:
                    name: Install local dependencies
                    command: npm install
                # Cache local dependencies if they don't exist
                - save_cache:
                    key: v1-dependencies-{{ checksum "package-lock.json" }}
                    paths:
                        - node_modules
                # Lint the source code
                - run:
                    name: Linting
                    command: npm run lint
                # Test the source code
                - run:
                    name: Testing
                    command: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
                # End to End test
                - run:
                    name: End to End Test
                    command: npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js

Configure CLI for testing in chrome
Commit you changes and push them to your repository
Sign up for Circle CI and add your project. Your project should start building.

Circle CI configuration file

A Circle CI config file has 3 main components; a version, a list of jobs and a list of workflows.

The version is simply the Circle CI version that we are going to use.

A job can be compared to an independent environment for running a list of commands or steps. Common things you can achieve with a job include;

instaling the tools you need to run/build/test your project.
executing bash commands.
storing or restoring items from the Circle CI cache.

A workflow is a way to manage your jobs. You may need a job to run only on specific branches or at specific times, or you want some of the jobs to run in parallel and some in sequence. Workflow is where you make these configurations.

In our case, we have only one job; the test job. These are the attributes of the test job.

The docker attribute: Specify a docker image used to create the container of the environment. Circle CI comes with a list of pre-built images that you can find here

    docker:
        - image: circleci/node:10-browsers

The working directory attribute: The current directory which will be the place where all the steps run.

    working_directory: ~/project-name

The steps attribute: This is a list of steps (commands) that you want to run in the current job.

    steps
        # Checkout the code from the branch into the working_directory
        # Log the current branch
        # Restore local dependencies from cache

There are a few types of steps we'll use in our configuration.

The checkout step: used to checkout the code from the current branch into the working directory.

    - checkout

The run step: used to execute a bash command. You can specify a descriptive name which you are going to see in the Circle CI interface

    - run:
        name: Testing the project
        command: npm run test

The save_cache step: used to store a cache of a file or a directory in the Circle CI storage. A common use case is to install the npm dependencies only once and then cache the node_modules folder using a hash of the package-lock.json (or package.json) file as the cache key.

    -save_cache:
        key: v1-dependencies-{{ checksum "package-lock.json" }}
            paths:
                - node_modules

The restore_cache step; used to restore a cached item using the cache key.

    - restore_cache:
        keys:
            - v1-dependencies-{{ checksum "package-lock.json" }}
            - v1-dependencies-

Putting the CI job into a workflow

In this case, we want to run the test job when we commit to develop, staging or the master branch. A workflow by default is triggered by pushing to any branch.

The test workflow has a filter attribute which is used to select the branches that it will run on. The code snippet is shown below

    workflows:
        version: 2
        # the test workflow
        test_workflow:
            jobs:
                - deploy:
                    filters:
                        branches:
                            only:
                                - develop
                                - staging
                                - master

Add the workflow code snippet to the config.yml file, commit and push your changes. Your project is ready to build.

Configure CLI for CI testing in Chrome

When the CLI commands ng test and ng e2e are generally running the CI tests in your environment, you might still need to adjust your configuration to run the Chrome browser tests.

Follow the steps below to configure CLI

In the Karma configuration file, karma.conf.js, add a custom launcher called ChromeHeadlessCI below browsers:

    browsers: ['Chrome'],
    customLaunchers: {
        ChromeHeadlessCI: {
            base: 'ChromeHeadless',
            flags: ['--no-sandbox']
        }
    },

In the root folder of your e2e tests project, create a new file named protractor-ci.conf.js. This new file extends the original protractor.conf.js

    const config = require('./protractor.conf').config;

    config.capabilities = {
        browserName: 'chrome',
        chromeOptions: {
            args: ['--headless', '--no-sandbox']
        }
    };

    exports.config = config;

Now you can run the following commands to use the --no-sandbox flag:

    ng test --no-watch --no-progress --browsers=ChromeHeadlessCI
    ng e2e --protractor -config=e2e/protractor-ci.conf.js

References

Angular Test Documentation

Free Code Camp tutorial on CircleCI 2.0