Forem: Dragoljub Bogićević

Windows -> Docker -> Shared Volume/Folder

Dragoljub Bogićević — Tue, 14 Apr 2020 11:15:41 +0000

Almost a year ago I had issues setting up the shared volume on Windows machine, tried a few tutorials I found online but that did not help...
So I decided to share my experience.

First of all, we need Docker, here are installation instructions.
You can verify your installation by running this command:

docker -v

and output should be similar to this:

Docker version 18.09.2, build 6247962 - OK, so we are ready to go.

Why do we need a shared volume?

We want to have a shared folder because then we can use our favorite code editor on our Windows machine and all changes will be automatically synced with our Docker container.

Let's enable the share drive option.
Open up Docker Desktop and click on Shared Drives:

On the right side select drive, you want to share, in my case, it is drive C, and finally, click on the Apply button.

Now, we can test this up, open up CMD and type this command:

docker run -it -v c:/docker:/docker alpine sh

please note that before running this command, for this purpose, I created a docker folder on my C drive.
The most important part of the command above is -v c:/docker:/docker which is directory mapping, c:/docker is a folder on the host machine, Windows, :/docker is part regarding the container, you can name directory the way you want, a directory will be created automatically for you.

After the command is executed we will be in our Docker container:

Now we can see what do we have in this container by running:

ls -la

so the docker directory is created for us. Now we can cd into it and create a new file to test whether syncing is working type:

cd docker && touch testfile1

as a result, we have a file created:

now we can check if folder on Windows is up to date:

Great! It is working.

Just to double-check, create one more file but this time on Windows:

now, check container:

It is working, nice!

This is all you need to do in order to utilize the sharing folder option between Windows as a host and a Docker container.

Thank you for reading!

npm - are your dependencies vulnerable

Dragoljub Bogićević — Fri, 10 Apr 2020 08:03:35 +0000

TL;DR

npm audit found 936 vulnerabilities in my project.
npm audit fix fixed 929 of 936 vulnerabilities, others require manual review. 😎 👌

As developers we are using 3rd party dependencies all the time, and why would not we, right? But, are we aware of our dependencies code base, are we sure if they are following best practices especially regarding security? In most cases we are not...

Luckily, we can utilize npm audit command to help us with vulnerabilities. Down bellow you can see part of package.json of project that I am working on for several months now, project is not still in production so I did not check dependencies since project started (bad practice, I know...).

"dependencies": {
    "@angular/animations": "~8.0.1",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/platform-server": "~8.0.1",
    "@angular/router": "~8.0.1",
    "@ngrx/effects": "^8.2.0",
    "@ngrx/entity": "^8.2.0",
    "@ngrx/router-store": "^8.2.0",
    "@ngrx/store": "^8.2.0",
    "@ngrx/store-devtools": "^8.2.0",
    "@nguniversal/express-engine": "^8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "bootstrap-4-grid": "^3.1.0",
    "express": "^4.15.2",
    "guid-typescript": "^1.0.9",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.15",
    "ng-click-outside": "^5.1.1",
    "ng-svg-icon-sprite": "^1.7.0",
    "ng2-datepicker": "^3.1.1",
    "ngx-device-detector": "^1.3.19",
    "ngx-slimscroll": "^7.1.0",
    "rxjs": "~6.4.0",
    "saturn-datepicker": "^8.0.1",
    "stacktrace-js": "^2.0.0",
    "tslib": "^1.9.0",
    "underscore": "^1.9.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.1",
    "@angular/cli": "~8.0.4",
    "@angular/compiler-cli": "~8.0.1",
    "@angular/language-service": "~8.0.1",
    "@compodoc/compodoc": "^1.1.10",
    "@ngrx/schematics": "^8.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "commit-message-validator": "^0.1.11",
    "husky": "^3.0.8",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "prettier": "^1.18.2",
    "pretty-quick": "^1.11.1",
    "protractor": "~5.4.0",
    "puppeteer": "^2.1.1",
    "svg2sprite-cli": "2.0.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack-bundle-analyzer": "^3.6.1",
    "webpack-cli": "^3.1.0"
  }

After executing npm audit command this is the shorter version of an output:

found 936 vulnerabilities (908 low, 12 moderate, 16 high) in 26333 scanned packages
  run `npm audit fix` to fix 929 of them.
  1 vulnerability requires semver-major dependency updates.
  6 vulnerabilities require manual review. See the full report for details.

As you can see, 936 vulnerabilities, the results are not great at all. So after running npm audit fix this is the outcome:

updated 4 packages in 19.129s
fixed 929 of 936 vulnerabilities in 26333 scanned packages
  6 vulnerabilities required manual review and could not be updated
  1 package update for 1 vuln involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

Almost everything is fixed, nice.

We all know that ensuring that dependencies do not contain any known security vulnerabilities is very important for the overall security. Solution described above is one way to do it, but it still requires some kind of manual work.

Much better way to stay secure and up-to-date is to automate process by integrating tools like Dependabot or Snyk - they will check your dependencies, check possible vulnerabilities and then create new pull request with updates, after what you need to check everything and merge pull request.

Thank you for reading!

My Docker aliases / cheat-sheet

Dragoljub Bogićević — Wed, 08 Apr 2020 09:33:54 +0000

I believe that most of us use docker and docker-compose on daily basis, so I decided to share part of my .bashrc file.
Maybe someone will find it useful...

General
Images
Containers
Networks
Volumes
Docker-Compose

Note about pattern I tried to follow for aliases:

for docker commands first letter is always d, for docker compose is dc
if command is related to images then next letter of alias is i, for containers is c and so on...
following this pattern I found it pretty easy to remember all aliases

General

alias dve="docker -v"
alias dl="docker login --username=dragol"

Explanation

dve - prints out current docker version
dl - docker login, will prompt you for password

Images

alias dil="docker images"
alias dip="docker image prune -f"

Explanation

dil - list all docker images available on my machine
dip - remove all dangling images -f is flag for force

Containers

alias dcl="docker ps"
alias dcla="docker ps -a"
alias dcp="docker container prune -f"
alias dci="docker inspect"
alias dciip="docker inspect -f \"{{ .NetworkSettings.IPAddress }}\""
alias dcs="docker start"
alias dcd="docker down"
alias dcr="docker restart"

Explanation

dcl - list running containers
dcla - list all containers
dcp - remove all dangling containers
dci - here you need to pass container id in order to get various information about particular container
dciip - returns container IP address
dcs - here you need to pass container id in order to start container
dcd - here you need to pass container id in order to stop container
dcr - here you need to pass container id in order to restart container

Networks

alias dnl="docker network ls"
alias dni="docker network inspect"
alias dnrm="docker network rm"
alias dnp="docker network prune -f"

Explanation

dnl - list networks
dni - here you need to pass network id in order to see it's details
dnrm - here you need to pass network id in order to delete it
dnp - remove all dangling networks

Volumes

alias dvc="docker volume create"
alias dvl="docker volume ls"
alias dvrm="docker volume rm"
alias dvp="docker volume prune -f"
alias dvi="docker volume inspect"

Explanation

dvc - here you need to pass volume name in order to create it
dvl - list volumes
dvrm - here you need to pass volume id in order to delete it
dvp - remove all dangling volumes
dvi - here you need to pass volumeid in order to see it's details

Docker-Compose

alias dcv="docker-compose -v"
alias dcu="docker-compose up"
alias dcd="docker-compose down"
alias dcb="docker-compose build --no-cache"
alias dcc="docker-compose config"

Explanation

dcv - prints out docker compose version
dcu - start docker compose
dcd - stop docker compose
dcb - new docker compose build from ground up
dcc - check if docker-compose.yml file is valid

Basically, this commands I used the most, I did not post here functions from my .bashrc file (~15), I used them for commands with more the one arguments. Feel free to use them and modify as needed.

Thank you for reading!

npm vs npx - which to use when?

Dragoljub Bogićević — Tue, 31 Mar 2020 08:56:07 +0000

Let's see what is the difference between these two.

What is npm

npm (Node package manager) is the world's largest software registry. It is installed with Node.js which means that you have to install Node.js to get npm installed on your computer.
npm includes a CLI that can be used to download and install packages.

To start working with npm first we need to create package.json (this file holds various metadata relevant to the project. File is used to give information to npm that allows it to identify the project as well as handle the project's dependencies) file by executing this command:

npm init -y

This command will create package.json file in the current directory with default settings because we used -y flag.

To add packages from npm registry we can run this command:

npm i eslint

The command will add eslint linter to our project (it will create node_modules package and update package.json file with eslint as a dependency) - and basically, this is the main job of npm.

This is how package.json looks like after eslint installation:

{
  "name": "dev.to",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "eslint": "^6.8.0"
  }
}

Ok, so we have dependency included in our package, but how to use it? Well, this is the point where npx can jump in.

What is npx

npx is also a CLI tool whose purpose is to improve the experience of using packages from the npm registry (since npm version 5.2.0 npx is pre-bundled with npm - tnx StefanT123 for pointing this out). With npx it is easy to run any sort of Node.js based executable. Let's see examples:

To execute eslint we have two choices:

./node_module/.bin/eslint --init

Although, all node executable is located in .bin directory running the command above is not so user friendly, instead, we can use npx:

npx eslint --init

Much better!

If for some reason you do not want to use npx, you can install eslint globally:

npm install -g eslint

Now package will be installed in node_modules in user directory on your machine which means that you can run eslint globally in any directory.

Of course, there are a lot of use cases for npm and npx usage, I pointed out just basic ones.

Thank you for reading!

Angular Modules - Custom Lazy Load Strategy

Dragoljub Bogićević — Thu, 26 Mar 2020 12:40:58 +0000

Contents:

What are modules
Example of a module
Lazy-loading feature modules
- Default way
- Using custom preload strategy
Summary

Before we tackle module lazy loading and custom preloading strategies, let's start from the beginning and figure out what modules actually are.

What are modules

As you may know, Angular apps are modular based and Angular has its own modularity system called NgModules.

NgModules are like containers for a closely related set of capabilities, for example, you can have auth, user, booking, shared modules that can contain components, directives, pipes, services and other cohesive blocks of code.

Each module can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules achieving encapsulation.

Example of a module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ MyLogger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

In order to define a module we need to use NgModule() class decorator and pass metadata to it, here are commonly used properties:

imports: an array of other modules that are imported in this case by AppModule, we are importing other modules when we want to reuse for example components or directives defined in them.

providers: an array of services defined in AppModule; they become accessible in all parts of the app.

declarations: an array of components, directives, and pipes that belong to this NgModule.

exports: an array of components, directives, and pipes that belong to this NgModule but we want to make them publicly visible, or should I say, imported and reused by other modules.

bootstrap: The main application view, which hosts all other app views. Only the root NgModule should set the bootstrap property

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary.

Here you can see an example of module eager load (please open the console to see the outputs; both modules are loaded at the same time).

Lazy-loading feature modules

For large apps with lots of routes and modules, consider lazy loading — a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

Default way

Here you can see an example of a module being lazy-loaded (please open the console, at the beginning only AppModule will be loaded, after you click on Go to login button the AuthModule will be loaded on demand).

Using custom preload strategy

Here you can see an example with custom lazy load strategy - this means than you can provide additional metadata for a module and load it in after a certain period of time. This can be useful if you aware of your application flow, and for example while user is on module 1 may be filling up forms then using custom preload strategy module 2 will be downloaded in the background. (please open the console, at the beginning only AppModule will be loaded, after 5 seconds AuthModule will be loaded as well).

Summary

To wrap-up, lazy loading is a really useful and powerful feature available by default in the Angular framework. You should use it regularly in order to have smaller initial bundles and improve application performance.

Please, leave a comment down below if you would like to see in-depth explanations of examples used above.

Thanks for reading!

Git - checkout to the previous branch

Dragoljub Bogićević — Wed, 25 Mar 2020 11:42:19 +0000

I did not know about this git command since this morning, I found it very useful so I decided to post it here like git tip of the day...

git checkout - // will checkout to previous branch

Hopefully, you will find it useful as well...

Utils for JavaScript - what do you use regularly?

Dragoljub Bogićević — Sat, 21 Mar 2020 12:15:17 +0000

Recently, I started working on my own utils set of JavaScript functions that can be used on every day basis.

This is the current list (full docs can be found here):

Compare objects
Compare arrays
Check if an array or an object is empty
Make array unique
Get min value of an array of numbers
Get max value of an array of numbers
Check if variable is an integer
Create random number
Cache function result
Calculate how much time a function takes to run

Which functions do you use, in which cases, please comment down bellow, certainly I would consider all suggestions and add new functions as part of npm package.

Thank you for reading and all suggestions!

JavaScript - Array Execution Speed

Dragoljub Bogićević — Fri, 13 Mar 2020 21:32:33 +0000

Did you ever wonder about execution speed of JavaScript arrays? Neither do I. So let's find out what is going on when using different approaches for array creation.

To create an array in JavaScript we can use array literal like this:

let testArray = [1, 2, 3];

or we can use the keyword new like this:

let testArray = new Array(1, 2, 3);

The two examples above do exactly the same, create new array with values. But what is the difference, which approach we should use and why?

To find out let's test the first snippet here.

After each code execution I refreshed the page
and results varied between ~93ms and ~99ms.

So, let's do the same with second code snippet here.

For some reason, results variations are more common, so I had results from ~1500ms to even ~7500ms.

So, the outcome of this simple post is kinda obvious:

For simplicity, readability and execution speed, use the first one (the array literal method).

Thanks for reading!

Session Storage vs Local Storage vs Cookie

Dragoljub Bogićević — Mon, 24 Feb 2020 18:24:32 +0000

The main purpose of this post is to give you a brief overview of these features:

Session storage

stores data only for a session, meaning that the data is stored until the browser (or tab) is closed
data is never transferred to the server
can only be read on client-side
storage limit is about 5MB
opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window

// Write
sessionStorage.setItem('key', 'value');

// Read
let data = sessionStorage.getItem('key');

// Delete
sessionStorage.removeItem('key');

// Delete all
sessionStorage.clear();

Local storage

stores data with no expiration date
storage limit is about 5MB
data is never transferred to the server

Cons:

plaintext, hence not secure by design
limited to string data, hence need to be serialized = can not be used by web workers
XSS
can only be read on client-side

// Write
localStorage.setItem('key', 'value');

// Read
let data = localStorage.getItem('key');

// Delete
localStorage.removeItem('key');

// Delete all
localStorage.clear();

Cookie

stores data with expiration date
storage limit is about 4KB
cookie is sent to the server with each request
can be read/write on client-side and server-side (if the cookie is marked as HttpOnly than it is inaccessible to client-side scripts)

// Write
document.cookie = "key=value";

// Read
let x = document.cookie;

// Update
document.cookie = "key=new value";

// Delete - for deletion you should set expiration parameter to past date
document.cookie = "expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

How to Recognize an Array

Dragoljub Bogićević — Sat, 22 Feb 2020 20:23:52 +0000

In order to distinguish whether variable is an array or not we have couple of options.

But before we start it is good to mention that arrays in JavaScript are special kind of objects as you can see down bellow:

let testArray = [1, 2, 3];

console.log(typeof testArray); // object

We can check if variable is an array with this code snippet:

let testArray = [1, 2, 3];

console.log(Array.isArray(testArray)); // true

The problem with this solution is that Array.isArray() method is introduced in ECMAScript 5, so if you need support for older browsers you can do something like this by using constructor property:

let testArray = [1, 2, 3];

console.log(testArray.constructor === Array);  // true
console.log(testArray.constructor.name === 'Array');  // true
console.log(testArray.constructor.toString().indexOf('Array') > -1); // true

Also, we are allowed to use instanceof operator:

let testArray = [1, 2, 3];

console.log(testArray instanceof Array); // true

Note:

Although, we can create an array by using new Array() we should prefer way we used in examples above for simplicity, readability and execution speed.

Thank you for reading!

Typescript - simple model/collection package

Dragoljub Bogićević — Mon, 03 Feb 2020 18:45:58 +0000

Recently, while I was learning about typescript generics I decided to write simple package for models and collections. Code sneak peek bellow:

import { Model } from 'pera-trta';
import { Collection } from 'pera-trta';

interface ICategoryProps {
    id: number;
    name: string;
}

class CategoryModel extends Model<ICategoryProps> {}

class CategoryCollection extends Collection<CategoryModel, ICategoryProps> {}

const cc = new CategoryCollection();
const c1 = new CategoryModel({ id: 1, name: 'pera' });

Package provides basic functionalities for models and collections by simple extending those classes.

Some of the functionalities that package provide are:

IntelliSense support
CLI support
get model property by key
update some properties of the model
update only one model property
store models in the collection
sort collection items
find particular item/items
map collection items ...

For more information about the package including the CLI support, and examples visit npm page.

Thank you for reading and if you have any suggestion please feel free to reach out.

JavaScript - How to make objects immutable?

Dragoljub Bogićević — Sun, 26 Jan 2020 19:50:35 +0000

In this post, we will learn a couple of ways of creating immutable objects in JavaScript, as well what are the pros and cons of each approach. Object immutability will reduce side-effects and unpredictable behavior.
We will cover:

const
preventExtentions
seal
freeze

Note: this also applies for TypeScript

1. const

The first to come to mind is, of course, const, const prevents re-assign the object but the object's contents (e.g., its properties) can be altered.

Let's see the example:

const person = {
    firstName: 'pera',
    lastName: 'trta',
    address: {
        street: 'street'
    }
}; 

// person = false;                    // re-assign is not allowed
person.firstName = 'pera pera';       // update is allowed
person.middleName = 'pt';             // add is allowed
person.address.street = 'street 123'; // update is allowed
delete person.lastName;               // delete is allowed

2. preventExtentions

As we saw, const has a drawback regarding object immutability. Another alternative is Object.preventExtensions() a method which prevents adding new properties to the object (updating and deleting existing properties is still allowed).

const person = {
    firstName: 'pera',
    lastName: 'trta',
    address: {
        street: 'street'
    }
};

Object.preventExtensions(person);
// true
console.log(Object.isExtensible(person));

// person = false;                    // re-assign is not allowed
person.firstName = 'pera pera';       // update is allowed
person.middleName = 'pt';             // add is not allowed
delete person.lastName;               // delete is allowed
person.address.street = 'street 123'; // update is allowed *
person.address.newProperty = 7;       // update is allowed *

* Please, keep reading, explanation is at the end of the post.

3. seal

Another Object's method is seal. This one will prevent adding (sealing an object prevents new properties from being added) new and deleting existing properties to and from the object (updating existing properties is still allowed).

const person = {
    firstName: 'pera',
    lastName: 'trta',
    address: {
        street: 'street'
    }
};

Object.seal(person);

// sealed objects are by definition non-extensible
console.log(Object.isExtensible());
// true
console.log(Object.isSealed());

// person = false;                    // re-assign is not allowed
person.firstName = 'pera pera';       // update is allowed
person.middleName = 'pt';             // add is not allowed
delete person.lastName;               // delete is not allowed
person.address.street = 'street 123'; // update is allowed *
person.address.newProperty = 7;       // but here add is allowed *

* Please, keep reading, explanation is at the end of the post.

4. freeze

Another Object's method is freeze - freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added, updated or removed.

const person = {
    firstName: 'pera',
    lastName: 'trta',
    address: {
        street: 'street'
    }
};

Object.freeze(person);

// freezed objects are by definition non-extensible
console.log(Object.isExtensible());
// true
console.log(Object.isFrozen());

// person = false;                    // re-assign is not allowed
person.firstName = 'pera pera';       // update is not allowed
person.middleName = 'pt';             // add is not allowed
delete person.lastName;               // delete is not allowed
person.address.street = 'street 123'; // but here update is allowed *
person.address.newProperty = 7;       // here add is allowed as well *

* So, what is going on lines with the asterisk sign?

The result of calling Object.preventExtensions(object), Object.seal(object), Object.freeze(object) only applies to the immediate properties of object itself which means if the value of those properties are objects themselves (in our case property address is an object), those objects are not affected by the methods. The solution for this issue will be in another post.

Thank you for reading!