Frontend path: HTML + CSS

- How to make a horizontal scroll flex box

12 hours freeCodeCamp React course

Basic React Course

• React course link: https://scrimba.com/learn/learnreact 
• React doc: https://reactjs.org/docs/components-and-props.html 
• Roadmap: Frontend Developer 
• Roadmap: Backend Developer 
• Roadmap: React Developer 

Note

July 28, 2022

• ReactJS How to display image from an URL 
• CSS Margin vs. Padding: What's the Difference? 
• CSS Flexbox: Basic_Concepts_of_Flexbox 

Aug 9, 2022

• CSS Inline vs Inline-Block vs Block 

Aug 19, 2022

• Javscript async/await (Video)
• CSS selectors 
• use localStorage in React/Javascript 
  

Aug 31, 2022

• How to Center a Div Within a Div

Advance React Course

    Module 13 of Frontend couse : https://scrimba.com/learn/frontend#

Note

Sep 3, 2022

• Javascript Class scrimba course 
  
• What are Component Lifecycle Methods in React JS?? 

Sep 5, 2022

• Composition over Inheritance on Youtube 
• Composition vs Inheritance explained 

Sep 7, 2022

• usage of React.createContext() 
• React Context and Re-Renders: React Take the Wheel 

Roadmap from freecodecamp: How to Learn React — A roadmap from beginner to advanced 

Oct 24, 2022

• Youtube: Responsive Design Tutorial - Tips for making web sites look great on any device 
• React Router: React Router tutorial by Paul Sherman 
• React router complete guide  
• 
  

Oct 25, 2022

• React.js CRUD App with React Router & Axios 
• A FULLSTACK Web Application built using MERN Stack (MongoDB, Express, React, Nodejs) (from reactjsexample)
• A networked multiplayer tetris game built using react and redux (from reactjsexample)

2 Nov, 2022

• React Tutorial: Build a Calculator App from Scratch  (my react calc app here)

8 Nov, 2022

• How to Build a Hacker News Clone Using React (my homework here)
  

10 Nov, 2022

• Pagination Virtual and Infinite Scrolling in React (my homework here same as above)

14 Nov, 2022

• New features added to my hacker news clone homework 
  • added pages to avoid reload for visited page
  • added sticky navbar effect (refer to Sticky nav bar on scroll with React hooks ) and gained knowledge of React.useRef() hook

Setting Nginx Rate Limiting

Two-Stage Rate Limiting

limit_req_zone $binary_remote_addr zone=ip:10m rate=5r/s;

server {
    listen 80;
    location / {
        limit_req zone=ip burst=12 delay=8;
        proxy_pass http://website;
    }
}

Refer to Rate Limiting with NGINX and NGINX Plus 

Distributed Load Testing Using Kubernetes

Load testing website using GKE.

Please refer to qwiklabs Distributed Load Testing Using Kubernetes 

Nginx whitelist specific IP

Code example, whitelist keywords in URI for specific IP

server {
#...
    
    location / { 
        set $deny_access off;
        if ($remote_addr != "specific-ip-here") {
            set $deny_access on;
        }
        if ($uri ~ "^/(keyword1|keyword2)/" ) {
            set $deny_access on$deny_access;
        }
        # add_header X-debug-message "deny_access: $deny_access" always; # debug
        if ($deny_access = onon) { return 404; }
        # ...
    }
#...
}

Reference:

• How to allow specific IP's to a URL in Nginx 
• How to output variable in nginx log for debugging (solution 1)