DEV Community: Aliakbar Salehi

OH! No, My Macbook is super slow 😱

Aliakbar Salehi — Fri, 24 Sep 2021 14:59:00 +0000

last week my dev laptop (MacBook Pro 13-inch, 2019, Four Thunderbolt 3 ports) went super slow. The laptop fan was working at high speed, it sounds like a bitcoin miner.
I was curious to see what happened. Nothing was working correctly, really weird!.

I opened the Activity monitor and checked processes and app resource usage. CPU usage was normal, then I moved to the memory, it was fine, and then I moved to the disk usage. OH! There were just a few megabytes free.
How it was possible, I use this Macbook just for working purposes.

I used the grandperspectiv to visualize the HDD usage.

and found these 3 major reason:

docker.raw (64GB )
node_modules folders
Application cache (chrome, Mozilla, developer tools, yarn and nvm)

solutions:

you can change the size of docker.raw in docker settings ( have a look at this link
I suggest using this command in your home folder to remove node_modules in all old packages

find . -name 'node_modules' -type d -prune -exec rm -rf '{}'

clean npm and yarn cache

Just by these 3 simple solution I freed up to 100GB of my disk storage.

How to use AWS SSM in offline mode for daily development.

Aliakbar Salehi — Sun, 16 Aug 2020 07:50:45 +0000

Nowadays lots of teams use AWS SSM to keep their secrets safe, But some times you need to run your app in local development machine without connecting to the AWS SSM.
In this Article I will try to Explain a simple solution to use your secrets in offline mode.

one of the common solution to use AWS SSM is injecting the secrets as environment variable in docker OS. Application can easily access to all variable and secrets which it needs. ssm-env.

Solution:

AWS CLI has a nice feature to fetch all secrets recursively (--recursive --with-decryption). we use it to fetch All secrets in our local development as a dotenv file.

#!/bin/sh

REGION=eu-west-1
PROFILE=default

AWS_SECRET_PATH="/secrets/service/TESTAPP/eu/staging/"         
SECRET_FILE_PATH="secrets/eu-staging.env"

currentDate=`date`

echo "# Last update = $currentDate" > $SECRET_FILE_PATH


(export AWS_REGION="$REGION"; export AWS_DEFAULT_REGION="$REGION"; aws --profile $PROFILE ssm get-parameters-by-path --path "${AWS_SECRET_PATH}" \
             --recursive --with-decryption \
             --output text --query "Parameters[].[Name,Version,Value]"  \
            | while read key version value  ; do echo "# version $version " >> $SECRET_FILE_PATH ; echo "${key##*/}=$value" >> $SECRET_FILE_PATH ;  done)

The result would be the eu-staging.env file

# Last update = Di 28 Jul 2020 17:26:08 CEST

# version 1 
DB_PASSWORD=Xrttrsdfseww
# version 2 
API_PASS=sdfsdflklhfs

The Date time on top of file shown you the last Update.

to run your app you could use dotenv-cli

dotenv -e secrets/eu-staging.env yarn start

you could easily extend this script to fetch all environment secrets based on your needs.

Aliakbar Salehi

Run docker image with AWS SSM

Aliakbar Salehi — Tue, 30 Jun 2020 23:16:41 +0000

Have you ever faced with. this situation: Your code works fine in local development but there are errors on staging or production.

I always try to run the current deployed version via docker in my local machine and see is it works fine and via ssh try to investigate the docker container.

It would be easy to run your docker image in local, attach a shell to it and see what is happening there just with docker run --rm -it -p 8080:8080 ....
but it will be complex if you use AWS EC2 and AWS SSM.

Let me to add some salt on it. you (your company) use custom deployment tools with temp access to AWS.

As you know AWS Secrets Manager helps you protect secrets needed to access your applications, services, and IT resources. It is more secure. also you can use your secrets for different apps easily.

the issue is when you want to run your docker image with secrets which you stored in AWS.

Solution:

AWS cli always keep his credential inside the file $HOME/.aws/credentials. read more
Even you use custom tools to login or deploy to AWS, this file in your machine keep your credentials.

This file normally is look like this:

[default]
aws_access_key_id=AKIAIOSFODNN7EXAMPLE
aws_secret_access_key=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

[CUSTOM_TEST]
aws_access_key_id=AKIAIOSFODNN7EXAMPLE
aws_secret_access_key=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

You can set the default profile for aws cli by set the Environment variable AWS_PROFILE.

By this feature you can run your docker easily, mount your aws credential file to your docker image, and set the AWS_PROFILE

docker run --rm -it   -p 8080:8080/tcp \
-v $HOME/.aws/credentials:/root/.aws/credentials:ro \
--env "NODE_ENV=production" \
--env "AWS_PROFILE=CUSTOM_TEST" \
--env "AWS_DEFAULT_REGION=eu-west-1" \
--dns 8.8.8.8 \
MY_DOCKER_IMAGE:latest

Note: I have supposed you are using the amazon linux image, you need to change -v $HOME/.aws/credentials:/root/.aws/credentials:ro based on the your image root.

Dependency Injection in JAVASCRIPT (Awilix decorator)

Aliakbar Salehi — Sun, 28 Jun 2020 17:44:00 +0000

SOLID is one of the important factors to have a clean and maintainable code.
one of the most popular with an easy learning curve for DI in javascript world is awilix.
there are also other popular alternatives such as inverify, but if you go to their documentation it is really huge.

in overall, I don't want to compare them in this article , just I try to share my simple code which could be helpful for you if you decide to work with awilix.

const getKeyName = (x: string | Function) => typeof x === 'string' ? x : (<Function>x).name
type dependencyType = 'request' | 'response' | 'nextFunction' | 'logger'
export function InjectDependency(
    ...dependencies: Array<
        dependencyType
        | Function
        | Record<string, dependencyType | Function>
    >
) {
    return <T extends { new(...args: any[]): {} }>(constructor: T) => {
        return ({
            [`__${constructor.name}__injected`]: class extends constructor {
                constructor(...args: any[]) {
                    if (args.length) {
                        const proxy = args[0]
                        super(proxy)
                        for (let d of dependencies) {
                            switch (typeof d) {
                                case 'object':
                                    Object.keys(d).forEach(key => {
                                        this[key] = proxy[getKeyName(d[key])]
                                    })
                                    break
                                default:
                                    const key = getKeyName(d)
                                    this[key] = proxy[key]
                                    break
                            }
                        }
                    }
                }
            }
        })[`__${constructor.name}__injected`]
    }
}

This code is a simple decorator on express js, you can easily get your dependencies inside an object without writing extra code.

I will try to explain it in next posts.

How JS Symbols helps frontEnd developer to keep Metadata:

Aliakbar Salehi — Sun, 28 Jun 2020 11:11:19 +0000

As a frontend Developer maybe you ask yourself what is the advantages of using Symbols? How it could help us to have cleaner and better code?
In this article we do not go in deep of the symbols specification, we try to use symbols In real app and see how it helps frontend world. if you search in google you will find a lot of resources about the symbols specification.

One of the common question which my friends always ask me on frontend developing is how to keep metadata related to the object which fetched fron the backend or rest api such as isLoading, is Edited, ... .

Imagin we want to show a book in a list with pagination from backend

    {
        "title":"Javascript",
        "author":{
            "name": "Aliakbar",
            "family":"Salehi"
        },
        "tags": ["javascript", "React", "frontend", "web"]
    }

and let user to select, edit or delete it.
In this situation we need metadata to keep the status of the book object

what is the index of the current book
is book data changed?
what is the current view of the book (edit, read, new, loding)
Errors on communication with data (update Error, delete error, ... )

theere are several data structure to keep these metadata:

keep metadata seperated and connect to origin object via Identifier key:

    const book={
        "title":"Javascript",
        "author":{
            "name": "Aliakbar",
            "family":"Salehi"
        },
        "tags": ["javascript", "React", "frontend", "web"],
    }

    const metaData={
        isLoading:false,
        edited: false,
        mode: viewMode.Read
        index:12,
        totoalBooks: 128,
    }

add metadata inside the original Object

    const book={
        "title":"Javascript",
        "author":{
            "name": "Aliakbar",
            "family":"Salehi"
        },
        "tags": ["javascript", "React", "frontend", "web"],
        __metadata:{
            isLoading:false,
            edited: false,
            mode: viewMode.Read
            index:12,
            totoalBooks: 128,
        }

    }

by default second approach is easier to read and access metadata specially when we work with a list of items, but it needs to sanitize the data and remove __metadata before sending the change into the backend as it is just client side metadata.

The magic of Symbol Properties:

I use always metadata inside the origin object as a Symbol property,

        const book={
            "title":"Javascript",
            "author":{
                "name": "Aliakbar",
                "family":"Salehi"
            },
            "tags": ["javascript", "React", "frontend", "web"],
            [Symbol.for("metadata")]:{
                isLoading:false,
                edited: false,
                viewMode: viewMode.Read
                index:12,
                totoalBooks: 128,
            }
        }

this approach has several advantage:

As you know, Symbol properties in Object acts as a private hidden property, so you can use JSON.stringify(book) without any concern about the metadata. read more

    /// update book after change
    restApi.Update(JSON.stringify(book))
    /// metadata property will be sanitized automatically without any effort or extra code

abother benifit of metadata as a symbol property is Symbols are not enumerable in for...in iterations.
so you can iterate without any concern or extra logic/code in items ( it is to helpful when you use some libraries such as normalizr to normalize yorur data)

easy to access the metadata or change them

    book[Symbol.for("metadata")].isLoading = true;
    // or 
    const {mode , isLoading}= book[Symbol.for("metadata")]
    if(isLoading)
        renderBook( mode)
    else 
        renderLodingComponent()

Aliakbar Salehi