@avi/plangs

# Web Frontend

5 min read, 922 words frontendwebmozilla
what is the output of browser?

Rendering the website with refresh rate of 60fps or at least 30fps. 60 Hertz is the gold standard

  • Browser has multiple queues to support asynchronous operations
  • Rendering Queue for rendering operations
  • Event/Job Queue to place callback functions

# Web Technologies

  • Browser has Extensions
  • HTTP follows stateless, Typical client server architecture model
  • Http cache, http/2, cache, cookies, headers, request methods, CSP directives, status code

js main thread

  • Main thread executed the instruction on callstack or stack.
  • It is blocking during the time stack is getting executed. Cause of the jank
  • Hence its advised to put all long running shitty code in callbacks and on event loop queue

# HTML (opens new window)

Most basic building block of the Web, generates the DOM tree

  • Semantic HTML, logical page sections
  • HTML Forms
  • Multimedia/graphics embedding
  • Preloading content with rel=preload or defer loading
  • CORS in image urls

# CSS (opens new window)

Style the DOM nodes

  • CSS selectors
  • CSS Layouts, Box Model, grids, flexbox
  • Pseudo Elements/Selectors
  • CSS transiions and Animations
  • CSS Events
  • CSS Browser Compatibility
  • CSS Media Queries
  • CSS Clamp(), reduce responsive code, min, maxm clamp
  • CSS calc(100vw - 80px) use different units
  • CSS maintains internal states, heading counters counter-increment: headings

# SVG

Describe graphics in XML like notation

  • viewbox vs viewport

# MathML

dialect of XML

# Web APIs

100+ 's of ready to use APIs provided by browser (opens new window)

Document web API Interface (opens new window)

# Security

# JavaScript (opens new window)

What the hell is javascript?

Main thread is responsible for

  • executing stack memory instructions
  • rendering frames
  • Garbage Collection

Concurrency and asynchronous nature is added to blocking js via Event Queues implemented using libuv C++ library. Concurrency model via Event Loop mechanism

why do we have react, vue and other frontend libraries?

The most important and fundamental reason why modern frameworks are used is that, with Vanilla JS, keeping the UI in sync with the state is hard.

MVC Architecture (opens new window) proposed by Trygve Reenskaug in 1970 when he was workign on smalltalk

As with most frameworks, you usually shouldn't use it until you find that your other tools are failing you somehow.

# Javascript DOM API Events (opens new window)

# Others

Amazon famously found that every 100ms of delay in the load time of amazon.com (opens new window) cost them 1% in sales. So loading an 80KB JQuery is a big problem, a problem we can avoid if we can find lighter alternatives.

  • Web accessibility and ARIA tags
  • Add internationalization and localization to the website? JS Objects
  • How to detect user locale?
var en_us = {
  welcome: "Welcome!",
};

var fr_ca = {
  welcome: "Salut!",
};

var lang = en_us;
document.getElementById("welcome").innerHTML = lang.welcome;

# Coding Challenges

100DaysOfCode

why CSS need to be checked for cross browser support?

CSS has been acound since netscape navigator and various browsers have implemented it in various wasys. No common consensus until specification arrived later

# Multiple ways to submit Forms and form data

There are multiple ways to submit a form from the browser:

  1. HTML form, submit button, user presses submit button, no Javascript involved.
  2. HTML form in the page, Javascript gets DOM element for the form and calls .submit() method on the form object.
  3. Ajax call using the XMLHttpRequest interface with the POST method and manually sending appropriate form data.
  4. Ajax Fetch call with the POST method and manually sending appropriate form data.

# How to identify what to decouple?

  • Single Responsibility Principle

# Common Operations

How to remove a block of elements from DOM?

Subscribe to our Newsletter

If you like my work and think it was helpful kindly support my work


Buy Me A Coffee

← Web Socket →