Fullstack

 How internet works

  • Internet flows thru optical fiber cable (not thru satellites)
  • cables are layed across seas
  • In India most of cables are layed by TATA
  • Why optical fiber
    • cost is cheap
  • what happens when you hit any site like www.scaler.com
    • Browser contacts isp for DNS lookup to get ip address
      • types of cache for lookup
        • browser
        • os
        • router
        • isp -> arranged as tree
      • Look for DNS
        • Do recursive search for website
          • .com
            • scaler.com
              • www.scaler.com
      • Resolution of DNS & get ip address(Name server is the server that has the ip address value for the website)
      • nslookup scaler.com
      • named server returns the ipaddress for the sitename
    • Browser will do tcp/ip connection with server
      • 3 way handshake
        • client sends SYN packet to server
        • SYN/ACK packet back to client
        • send back ACK to server
    • named server returns the ipaddress for the sitename
    • When you register on Amazon route53, it provides a set of named servers. Those 4 named servers that you register across your domain. 
    • Flow
      • Domain(scaler.com) is mapped to 4 named servers 
      • Those Named servers are mapped to load balancers 
      • Load balancers are balancing between multiple servers.
    • Request -> DNS resolution -> check for cache -> DNS -> go to named server -> closest CDN server -> Load balancer->app server tcp/ip connection -> dataflow
      • Nameservers are the physical phone book itself.
      • DNS records are the individual entries in the phone book.
    • CDN is CloudFront
      • reduce the latency between server and client
      • request is served from closest server
    •  Internet error codes
      • 1XX - information message(not encountered in our regular working)
      • 2XX - successful
      • 3XX - redirection
      • 4XX - Client error-> bad request
      • 5XX - server error
    • Html, css, js
      • https://miro.medium.com/max/564/1*KRq7jQOUdQsHNsZa72XcDw.jpeg
      • Add css at start of html and JS as the end.
      • It will show the page and js will be downloaded after rendering
  • Loosely/dynamic type language. It automativally decides type of variable based on value assigned.
  • Every thing is an object in JS(Similar to Python)
  • when variable is just declared -> value will be undefined
  • Null means NO Value. Undefined means -> value not assigned
  • Tppe of Undefine is 
  • Equality with ==  vs ===
    • == implicit type casting form string to int will happen and compares only Value and not type
    • === checks both Value and Type of variables
  • add + to explicitly convert string to number
Java Script -2
  • prototype
  • __proto__
  • call, apply, bind
  • https://www.scaler.com/topics/javascript/online-javascript-compiler/
  • constuctors
  • map
  • Arrow functions cannot be used as Constructor 
  • Event Loop

  • Call Stack
    • Maintains all the functions to be executed and executes one by one
    • When async function like setTimeout is encountered then it is moved to Browser API for delay purpose
  • Browser API
    • Timeout is counted in browser api
    • Once timeout is complete it will move Event Queue
  • Event QueueGives events one by one to Call Stack when ever call stack is Empt
  • <!DOCTYPE html>
    • latest version of html(html5 now)
    • html5 has 110 tags vs html has 18 tags
  • <meta>
    • Used for telling the BOTs 
    • Pass additional information to Browser on how to render the content
  • <link rel="" href="">
    • icon in browser title. rel says type of document & href shows the url of the document
  • <span>
    • inline elements. Continues on same line/next to prior element
  • <aside> 
    • placeholder for ads
  • <article>
    • independent section with header, and main content
  • Cascading Style Sheets
  • Specicity
    • id is 100 
    • class is 10
    • tag is 1
    • !important -> gives highest priority
  • display: inline/block/inline-block
  • Different Units
    • rem
      • relative to root(html)
      • if rem is 2 then the font-size of element will be 2*html font-size
      • Purpose: same font-size would work in different display sizes
    • em
      • relative to parent element
    • px - pixel

    • %age
      • % of parent
      • if no parent value then it takes viewport width
    • vw/vh(view port)
      • % of viewport size
    • BoxModel
      • Margin
        • border
          • padding
            • text
      • box-sizing
        • content-box -> adds margin, border, padding to width 
        • border-box -> reduces the size of element to fit margin, border, padding 
  • Float-left
    • to specify that the div elements should be floated left
  • float-right
  • position:
    • relative - relative to itself either top, bottom, left or right from its original position
    • absolute - relative to last positioned parent element
    • sticky - stuck on screen on scroll up/down
    • fixed - 
  • https://flexboxfroggy.com/
  • https://cssgridgarden.com/
Implementation of HTML and CSS
  • overflow
    • hidden -> not scrollable
    • scroll -> 
    • auto -> 
  • word-break : break-all
  • align center
    • margin: 0 auto  -> top and bottom is 0 and auto(equiv distance) for left & right
    • text-align: center
  • Transform
    • translateY(-50%)
  • flex-container
    • flex-direction
      • column-reverse
      • row-reverse
    • flex-wrap
      • wrap
    • justify-content
      • center
    • align-items
    • style=flex-grow: 1
    • flex-basis
  • Media Queries
    • Fluid Layout
      • @Media(min-width: 320px){    -> if screen width is 320px use the css
            body{
                 background-color:blue;
               }
    • Adaptive Layout
React - 1:
  • jquery
  • Angular1
    • 2-way binding
    • made development easy and faster
    • Package size became bigger, bindings were unnecessary & made website slower
  • React
    • heavy weight
    • backed by facebook, huge community support, vast packages
    • unidirectional flow
    • provides components
    • It is a library for building a front-end application
    • create reach app
      • npm/npx create-react-app <name>   -> npn is a registry/package manager
      • package.json -> to list the dependencies required
      • npm install -> 
    • writing html in java script is jsx
    • component in react
      • function that returns jsx.
    • webpack
      • Builds java script file and injects into html

    • Framework vs library(helper)
  • hooks -> to maintain state variable
  • useState(<variable>,<function to populate variable>)

  • mounting, updation, unmounting
  • useEffect(<function to be called>,<dependency array>)
    • Side effect that happens in REACT component should happen here
    • Empty dependency array -> function will be called only ONCE during mounting
    • Depenency array not passed -> function will be called when mounting happens and updation/rerender happens
    • When dependency array passed - function will be called when either of the dependency array value is changed.
  • Promises
    • Executor Function with arguments (resolve, reject)
    • resolve for successful execution and reject to catch exception
    • promise chaining is supported
    • finally() - to be executed after promise is complete in either success or failure
  • Virtual DOM
  •  

Comments

Post a Comment

Popular posts from this blog

Low Level Designs

Introduction to OOP & LLD High level Design HLD Deals with different infrastructure layers that are going to work together for efficient working of a system. Load balancer, appln servers, DB, Cache Low Level Design(Object oriented design) Deals with details/implementation of software/code that is running A research says that an software engineer only spends 12% of time doing coding. Other 88% goes in other productive things like meetings, reviews, testing, automation. LLD helps make better use of 88% of time LLD includes Readable & understandable Requirement gathering Extensible system -> easy to add new features Maintainable system -> Easy to keep current system(w/o new requirements) working. Bugs/updates/3rd party library changes, Programmatic Paradigm Procedural -> C Set of instructions(Function),  Action is performed on Entities(in real world Entities perform action) Any procedure can play around with entity attributes Object Oriented -> Java, Python, JS, c#...
Read more

System Design

Load balancer Does only routing and no computing. Hence, it can handle higher traffic.  To avoid single point of failure, have a standby routing server. Standby comes into picture only when main server goes down. Assign the same static IP to passive Standby server. Modern systems can route 1M requests per sec Managing large datasets Vertical scaling - Increasing capacity of server Functional Scaling -  Split data logically like users, purchasing..  Microservices share data to other apis Implemented at Application layer Horizontal scaling Also called as Sharding Split and store single logical database over multiple servers called data nodes Can be implemented at Application layer or DB layer Consistent Hashing Distribution scheme that doesn’t directly depend on number of servers, so that, the number of keys to be redistributed is minimised. Consistent Hashing ring Say 2 hash functions Hs & Hc Hs - Marks servers on consistent hashing ring Hc is used to mark partition ke...
Read more

CS Fundamentals

 Operating Systems - 1 Resource Manager API for apps developers(It gives set of methods(system calls) that can be made by applications to get work done from the resources   UniProgramming :  Only one program can run at a time - ATM Embedded systems Multi Programming More than one program at a time Multi-tasking systems is same as multi program systems Unix: MacOS, Linux(programs) Windows: Tasks 2 types of multi program categorization non-preemtive supports mutli-programming but only one program runs at a time you cannot switch to another program until the current one completes Preemptive - where a task can be paused/stopped in the middle of execution CPU vs GPU CPU is one intelligent person with speed in GHz GPU is 100 not so intelligent persons with speed 600 MHz Program - set of instructions to run. It is stored on disk Process - Program that is running. It is stored on RAM and run by CPU Process Control Block (PCB) Info about all the process running id resources used(m...
Read more