DEV Community: Edrick Ee

Learning Map & Set (in JS) while doing leetcode

Edrick Ee — Tue, 14 Sep 2021 03:33:50 +0000

I was going through a leetcode question yesterday with my pair
This was my pair's problem.

question was:

You are given an array of words where each word consists of lowercase English letters.

wordA is a predecessor of wordB if and only if we can insert exactly one letter anywhere in wordA without changing the order of the other characters to make it equal to wordB.

For example, "abc" is a predecessor of "abac", while "cba" is not a predecessor of "bcad".
A word chain is a sequence of words [word1, word2, ..., wordk] with k >= 1, where word1 is a predecessor of word2, word2 is a predecessor of word3, and so on. A single word is trivially a word chain with k == 1.

Return the length of the longest possible word chain with words chosen from the given list of words.

const longestStringChain = (wordsArray) => {
  let result = [];
  let index = 0;
  wordsArray = wordsArray.sort((a,b) => {return a.length - b.length});
  const innerHelper = (start) => {
  if (start > wordsArray.length -1) {
    return;
  }
  let currentChain = [];
  currentChain.push(wordsArray[start]);
  for (let i = start + 1; i < wordsArray.length; i++) {
    let currentComparison = wordsArray[i];
    if (currentComparison.length - currentChain[currentChain.length - 1].length === 1) {
      let chainWord = currentChain[currentChain.length - 1];
      for (var j = 0; j < currentComparison.length; j++) {
        if (currentComparison[j] !== chainWord[j]) {
          chainWord.slice(0, j) + currentComparison[j] + chainWord.slice(j + 1);
          if (chainWord === currentComparison) {
            currentChain.push(currentComparison);
          }
        }
      }
      }
    }
    result.push(currentChain);
    currentChain = [];
    index++;
    innerHelper(index);
  };
  innerHelper(index);
  let longest = 1;
  for (var k = 0; k < result.length; k++) {
    if (result[k].length > longest) {
      longest = result[k].lenght;
    }
  }
  return longest;
  };

var longestStrChain = function(words) {
  words.sort((a, b) => a.length > b.length ? 1 : -1)
  const memo = new Map()
  for (let j = 0; j < words.length; j++) {
      memo.set(words[j], 1)
      for (let i = 0; i < words[j].length; i++) {
          const x = words[j].slice(0, i) + words[j].slice(i+1)
          if (memo.has(x)) {
              memo.set(words[j], Math.max(memo.get(words[j]), memo.get(x) + 1))
          }
      }
  }
  return Math.max(...memo.values());
}

Fixing Header Issue - (Added mobile view as well)

Edrick Ee — Wed, 01 Sep 2021 22:16:28 +0000

Challenge
My current header is not dynamic. Image is also working weirdly so I needed to update image, navbar & logo.
Navbar specifically because it wasn't sharing same line with logo.
Logo was also called in CSS which i did not like. Relocated so js file can call logo along with navbar.

Action
Created whole new functionality for Navbar and logo. It looks same, but now Logo is align with Navbar and in same flex line.

Background image was keep moving, resulting same issue as my last post. Figured out why and implemented these lines of code in css.

  background-position: center;
  background-size: cover;
  background-attachment: fixed;

and now it works great. Image stays in correct size and not showing blank background.

Another issue was within a mobile view. Mobile view had empty blank line on the right side. Added this meta and it fixed the issue.

<meta name="viewport" content="width=device-width, initial-scale=0.5" />

Implemented navbar feature where it can hide menu if user clicks on the bar icon.

reference links:
dynamic navbar: https://0ver-grow.tistory.com/933

Result
New header works great for both web and mobile!

Creating Header & Footer (fear-no-more project front-end)

Edrick Ee — Tue, 31 Aug 2021 23:55:34 +0000

Challenge
Our team decided to us material-UI library for css. But I wasn't able to find features that I wanted to use design-wise. So I had to use pure css to build my header & footer.

Challenge came when I was trying to implement mobile view & carousel. My background image was re-sizing as the size of browser changed. I also saw plain background color because I set it as set height.

Action
I'm looking for carousel libraries that I can use in Next.js. Also going to see how I can use media query to implement mobile view as well.

This is how our website looks like on computer

---Header---

---Footer---

--------Current Problem---
On computer - when size shrinks

Mobile

Result
There is no solution yet, but I am going to invest my time into researching what I can use to make this look profesisonal.

Lead of Architect and UI for 'FearNoMore' project

Edrick Ee — Sat, 28 Aug 2021 18:03:35 +0000

Challenge

Coming up with basic ideas of how our web is going to look like based on our client's need
Coming up with all the needed data to create our web app

Action
Created demo logo first!

Created some demo web designs and started building up Architect & UI

Went over our designs step by step and added necessary features and went in depth of what data are going to be needed for each pages.

Result
Completed our Front-end architect and now we are starting on backend-architect

easy project set-up steps (react js)

Edrick Ee — Fri, 27 Aug 2021 23:18:43 +0000

Basic Project Setup

npm init -y (this will create a package.json file with some default info)
npm i react react-dom express
npm install @babel /core @babel /preset-env @babel /preset-react babel-loader --save-dev
npm install webpack webpack-cli --save-dev
npm install webpack-dev-server --save-dev
git init
Add node_modules dir to .gitignore
Create project directory structure
6.1 Words in bold are directories
6.2 client
6.2.1 dist
6.2.1.1 index.html
6.2.1.1 style.css
6.2.2 src
6.2.2.1 Components
6.2.2.1.1 ComponentOne.js
6.2.2.2 index.jsx
6.3 server
6.3.1 server.js
6.4 database (if necessary)
6.4.1 db.js
6.5 webpack.config.js
6.6 .eslintrc (if necessary)

Testing loader.io after installing NGINX (how to install loader.io & NGINX)

Edrick Ee — Thu, 19 Aug 2021 23:39:33 +0000

Challenge
I had to connect my current servers to the NGINX and implement horizontal scaling.
Figuring out NINGX and its loadbalancers
Also testing it using loader.io

Action
How I installed nginx

SSH into your NGINX instance: ssh -i *.pem ubuntu@
Install NGINX after update & upgrade: sudo apt install nginx
Run NGINX: sudo systemctl start nginx
get into file: sudo vim /etc/nginx/sites-enabled/default
delete everything and replace it with this:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g
                 inactive=60m use_temp_path=off;

upstream sdcgroup {
  least_conn;
  keepalive 500;
  server 18.191.246.18:3000;
  server 3.22.221.100:3000;
  server 18.221.27.16:3000;
}

server {
  listen 80 backlog=4096;
  gzip on;

  location /products {
    proxy_cache_valid any 10m;
    proxy_cache_valid any 10m;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    proxy_pass http://sdcgroup;

    proxy_cache my_cache;
    add_header X-Cache-Status $upstream_cache_status;
  }

  location /loaderio-ab8120fd9cc113d34d4a5b9796fb3c65 {
    return 200 'loaderio-ab8120fd9cc113d34d4a5b9796fb3c65';
  }
}

restart NGINX: sudo systemctl restart nginx

How to use loader.io: After sign up, you'll see verification page

In server repo, set up

  app.get(`/${LOADERIO_KEY}`, (req, res) => {
    res.send(LOADERIO_KEY);
  })

Time to test using loader.io

First Attempt (5k/sec for 1 minutes using products/%{*:1-1000000})

Second Attempt (2k/sec for 1 minutes using products/%{*:1-500})

I added ip_hash above least_conn
Third Attempt (10k/sec for 1 minutes using products/%{*:1-500})

ip_has with least_conn works!!!

Fourth Attempt (10k/sec for 1 minutes using products/%{*:1-1000000})
It failed

Fifth Attempt (5k/sec for 1 minutes using products/%{*:90000-1000000})

too high error rate

Sixth Attempt (1k/sec for 1 minutes using products/%{*:1-1000000})

Result
Now server can handle 1k request per second with 0% error rate and it can go up to 10k request per second with 0% error rate if we are only using 500 products

My first back end deployment & stress testings without NGINX

Edrick Ee — Wed, 18 Aug 2021 03:27:14 +0000

Challenge
Deploying database and server on AWS.
Using loader.io to do stress testings.

Action
I have completed deploying my backend server along with another instance of database on AWS

I have stress tested using loader.io and here are my first testing results

1000 users per second for 1 minute (for complex query request) (first try)

1000 user per second for 1 minute (for complex query request) (second try)

1000 user per second for 1 minute (for less complex query request)

So I started increasing number of clients.
I tried 5000 clients per second for 1 minutes for less complex query

I also tried same 5000/1 test for complex query

but test was aborted.

Then I tried 2500/1 for complex query

Here is 5000/1 for less complex query

1500/1 for complex query

It seems like failures are happening when it goes over 1000/1 request.

Result
Everything works. But would still need to implement NGINX for higher performance for higher request per second

How to install PostgreSQL in AWL EC2 instance, import data and seed data

Edrick Ee — Tue, 17 Aug 2021 17:58:34 +0000

when EC2 has been created and you are inside of the instance

Access into instance: ssh -i *.pem ubuntu@YOURIPADDRESS

Update instance: sudo apt-get update

Upgrade instance: sudo apt-get -y upgrade

download PostgreSQL: sudo apt-get install postgresql postgresql-contrib
a. in case of error message:

Reading package lists... Done
Building dependency tree       
Reading state information... Done
E: Unable to locate package postgresql-contrib

b. do this

sudo apt-get install wget ca-certificates
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
sudo apt-get update
sudo apt-get install postgresql postgresql-contrib

change your password: sudo -u postgres psql

postgres=#\password

Update configuration for remote access for clients

sudo vim /etc/postgresql/13/main/pg_hba.conf

13 is version of postgresql and it will change once it has new version.

b. Near bottom of file after local rules, add rule (allows remote access):

host all all 0.0.0.0/0 md5

c. save & exit out from config

Edit config in vim

sudo vim /etc/postgresql/13/main/postgresql.conf

b. Change line 59 to listen to external requests
- listen_address='*'
- save & exit out from config

Restart the Postgresql server

sudo /etc/init.d/postgresql restart

Now you may connect to the EC2 postgresql using the public DNS provided and port 5432.

Create database

$sudo su postgres
$psql
postgres=# CREATE DATABASE <database_name>;
postgres=# CREATE USER <user> with encrypted password '<password>';
postgres=# GRANT ALL PRIVILEGES ON DATABASE <database_name> TO <user>;

How to import data into EC2 instance

scp -i *.pem -r {foldername} ubuntu@ipaddress:~/yourfolderinUbuntu/

How to import csvs into table

productdb=# \copy products from ‘/home/ubuntu/foldername/filename.csv’ delimiter ‘,’ csv header;
/products/csvs/product.csv: No such file or directory

//if you have null as 'null' or different name you can write
NULL 'null_name' after delimiter

If you are wanting to get repo from github instead of making db, after update and upgrade:

installation:

curl -sL [https://deb.nodesource.com/setup_14.x](https://deb.nodesource.com/setup_14.x) | sudo -E bash
sudo apt-get install -y nodejs
sudo apt-get install git

port-forwarding:

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

git clone your repo into it

install npm modules, run build scripts, run node

Link for detail instrusction: https://www.shubhamdipt.com/blog/postgresql-on-ec2-ubuntu-in-aws/
Link for error message fix: https://stackoverflow.com/questions/53434849/cannot-install-postgres-on-ubuntu-e-unable-to-locate-package-postgresql
Link for AWS EC2 creation: https://fern-kettle-978.notion.site/Daily-Reflection-8-4-f7bb9770bf70451abfc0dceb171a4b88
Link for seeding data: https://www.enterprisedb.com/postgres-tutorials/how-import-and-export-data-using-csv-files-postgresql

Adding cluster in my index.js

Edrick Ee — Mon, 16 Aug 2021 23:22:08 +0000

Adding cluster inside index is easy

Cluster is already in implemented in your system
const cluster = require('cluster');
const totalCPUs = require('os').cpu().length;
don't write app = express() until we hit else statement

if (cluster.isMaster) {
  console.log(`Number of CPUs is ${totalCPUs}`);
  console.log(`Master ${process.pid} is running`);

  // Fork workers.
  for (let i = 0; i < totalCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`worker ${worker.process.pid} died`);
    console.log("Let's fork another worker!");
    cluster.fork();
  });

} else {
  const app = express();
  console.log(`Worker ${process.pid} started`);

}

We can now write all the necessary get request & app.listen inside of else statement to run it under cluster

Here is useful link: https://blog.appsignal.com/2021/02/03/improving-node-application-performance-with-clustering.html

Multiple layers of nested json Join tables without using join method for faster retrieval time (PostgreSQL)

Edrick Ee — Mon, 16 Aug 2021 17:33:26 +0000

Instead of using JOIN method, write your nested query directly inside of nested query using () !!!
It is much faster than JOIN method query !!!

Mind blowing

SELECT product_id, json_agg(json_build_object(
      'style_id', id,
      'name', name,
      'original_price', original_price,
      'sale_price', sale_price,
      'default?', default_style,
      'photos',

// use your json_agg inside of another json_agg with parentheses!

      (SELECT json_agg(json_build_object(
          'thumbnail_url', thumbnail_id,
          'url', url
        )) FROM photos WHERE style_id = styles.id),
    'skus',

// Object in object can be also used using parentheses!!

      (SELECT
          json_object_agg(id,
              json_build_object(
            'size', size,
            'quantity', quantity
              )
          ) as skus
        FROM skus
        WHERE style_id = styles.id
            GROUP by style_id)
    )) as results FROM styles
        WHERE styles.product_id = 1
          GROUP BY product_id

'default?', (default_style::int::bool) can be used if type is integer instead of boolean

PostgreSQL query with nested Object in Array & Object in Object together (merging 3 tables)

Edrick Ee — Sun, 15 Aug 2021 23:24:17 +0000

How to create a query that has both Object in Object & Object in Array!

It wasn't easy because I wasn't able to use json_agg inside of json_agg.
So I needed to create table that only has nested array & object to place it inside of first json_agg

How I did it

SELECT 
// my main table that has product id & result
  styles.product_id,
    json_agg(
      json_build_object(
        'style_id', styles.id,
        'name', styles.name,
        'original_price', styles.original_price,
        'sale_price', styles.sale_price,
        'default?', styles.default_style,
// Here, I used my pre-made photosId.photos and skusId.skus so I can avoid using json_agg inside of json_agg
    'photos', photosId.photos,
    'skus', skusId.skus
      )
    ) AS results
  FROM styles
// Here, I created my first pre-made objects in Array
  INNER JOIN(
// There are two lines in select which is style_id and photos. I'm going going to call photos to the main table. style_id only exist because I am going to need to group this by style_id & call only style_id that I need after ON.
    SELECT photos.style_id,
// creating my photos (obj in arr)
      json_agg(
        json_build_object(
          'thumbnail_url', photos.thumbnail_id,
          'url', photos.url
        )
      ) AS photos
    FROM photos
// group it by style_id
    GROUP BY photos.style_id
// only find rows that matches my style_id with styles.id and name my whole table photosId so I can call it in main table
    ) AS photosId ON photosId.style_id = styles.id
  INNER JOIN(
// creating my obj in obj table. I am also going to write two elements which is style_id and obj in obj called skus
    SELECT skus.style_id,
      json_object_agg(
        skus.id,
        json_build_object(
          'quantity', skus.quantity,
          'size', skus.size
        )
      ) AS skus
      FROM skus
// group it by style_id
      GROUP BY skus.style_id
// name whole table as skusId and only allow rows that matchs style_id with styles.id
  ) AS skusId ON skusId.style_id = styles.id
// only find rows that matches product_id
  WHERE styles.product_id = ${product_id}
// Group whole table by styles.product_id so I only have 1 table with all the matching product_id
  GROUP BY styles.product_id

How it's going to look like

{
    "product_id": "1",
    "results": [
    {
            "style_id": 1,
            "name": "Forest Green & Black",
            "original_price": "140",
            "sale_price": "0",
            "default?": true,
            "photos": [
            {
                    "thumbnail_url": "urlplaceholder/style_1_photo_number_thumbnail.jpg",
                    "url": "urlplaceholder/style_1_photo_number.jpg"
                },
            {
                    "thumbnail_url": "urlplaceholder/style_1_photo_number_thumbnail.jpg",
                    "url": "urlplaceholder/style_1_photo_number.jpg"
                }
            // ...
            ],
        "skus": {
                    "37": {
                            "quantity": 8,
                            "size": "XS"
                    },
                    "38": {
                            "quantity": 16,
                            "size": "S"
                    },
                    "39": {
                            "quantity": 17,
                            "size": "M"
                    },
            //...
                }
    },
  {
        "style_id": 2,
        "name": "Desert Brown & Tan",
        "original_price": "140",
        "sale_price": "0",
        "default?": false,
        "photos": [
            {
                    "thumbnail_url": "urlplaceholder/style_2_photo_number_thumbnail.jpg",
                    "url": "urlplaceholder/style_2_photo_number.jpg"
        }
      // ...
            ],
        "skus": {
                    "37": {
                            "quantity": 8,
                            "size": "XS"
                    },
                    "38": {
                            "quantity": 16,
                            "size": "S"
                    },
                    "39": {
                            "quantity": 17,
                            "size": "M"
                    },
            //...
                }
    },
  // ...
}

Here are helpful links:

All right, previous example is just one way of doing

Quick react setup with Hook

Edrick Ee — Sun, 15 Aug 2021 03:43:49 +0000

Import react
If I am using hook, set up hook when I am calling react.
If I am also using context, set up context when I am calling react.
In case if I want to use lazy <-- which makes load more efficiently, I can also load it in React

import React, { useContext, useState, useEffect lazy, Suspense} from 'react';

If I am using Context, load context file

import { ContextFile } from '../Context.jsx';

If there is a component that needs lazy, import it using lazy

const TestComponent = lazy(() => import('./testComponent.jsx'));

Create component function that can be export
declare functions that I am going to use from context
create hook if I need it

function App() {
  //context
  const { functionOne, functionTwo } = useContext(ContextFile);
  //hook
  const [testHook, setTestHook] = useState(initialValue);

  //update state function
  const ifStateNeedsUpdate = () => {
    setTestHook(whateverNewData);
  }

  const GetRequest = async () => {
   await getRequest here
  }

  //if I want to update hook only in certain situation, I can use useEffect to update hook for ex.
  useEffect(() => {
    setTestHook(whateverUpdate);
  }
}, [itWillonlyUpdateIfThisValueChanges]);

  return (
    <div> Hello, World </div>
  )
}

export default App;