alljavascript

[alljavascript]

Mixed Content

When host is https but resources fetched are from http (non secure).

2 types => Passive vs Active Passive: video, audio, font files Active: script files

How to control it? CSP

[alljavascript]

Web vitals

Largest Contentful Paint => Should be within 2.5 seconds (Images + SVG + whatever else is visible in viewport)

First Input Delay When user first interacts to when a event handler is called for that event

Cumulative Layout Shift

This tells about page stability how many times the components on the page move or “shift” around while the page is loading. Fewer shifts are better

TTI (Time to Interact)

=> After First contentful paint is done => event handlers are registered

Total Blocking time Time between FCP and TTI

First Contentful Paint Time at which first image or text is painted

Sentry uses PerformanceObserver for all this

[alljavascript]

Web accessibility

WCAG guidelines: 

Perceivable (can consume the info)

Operable (usable)

Understandable

Robust => can be consumed by wide variety of browsers

=============================================

Focus

Work with native elements and DOM order matters

Tax Index

tab-index="0": Inserts an element into the natural tab order.

-1 => removes it

Higher tabIndex => comes in front

Inside a Modal => get reference to first and last focusable element inside the modal

and keep focus inside the modal

==============================================

Screen readers

role and other aria attributes will tell what this is used for

label + for for input/radio

Using alt for images

HTML5 semantic elements also help search engines to read the page and find the required information faster

aria-hidden => to remove tree from aria readability functionality

axe chrome extension - extension used for accessibility review

=============================================

[alljavascript]

Router - under the hood

window.onpopstate = function (event) {   // do stuff here }

onpopstate gets called on back action

window.history.pushState

pushState gets called on forward action

Note: None of them actually sends a request to the server.

[alljavascript]

// Using callbacks const memoize = (fn) => {    const resultMap = {};    const separator = "$$";    return function () {        const params = [...arguments];        const callback = params.pop();        const key = params.join(separator);

       if (Array.isArray(resultMap[key])) {            // Adding it to the queue            resultMap[key].push(callback);        } else if (resultMap[key]) {            // I have the value, just call the callback            callback(resultMap[key]);        } else {            fn(...params, (result) => {                resultMap[key].forEach(c => c && c(result));                resultMap[key] = result;            });            // Initialize            resultMap[key] = [];        }    }; };

// Using promises const memoize = (fn) => {    const resultMap = {};    const separator = "$$";    return function () {        const params = [...arguments];        const callback = params.pop();        const key = params.join(separator);        if (!resultMap[key]) {            resultMap[key] = new Promise((resolve) => {                fn(...params, (result) => {                    resolve(result);                });            });        }        resultMap[key].then(v => callback(v));    }; };

const getSomeData = (...args) => {    console.log("Computing the result");    const callback = args.pop();    setTimeout(() => {        callback(args.reduce((acc, v) => acc + v, 0));    }, 500); };

const getSomeDataMemoized = memoize(getSomeData);

getSomeDataMemoized(3, 4, [1, 2], console.log); getSomeDataMemoized(3, 4, [1, 2], console.log);

[alljavascript]

Possible memory leaks in JS

setTimeout/setInterval

referenced DOM elements => Say I fetch a DOM element using querySelected and store it’s reference in a variable

Closure

Global variables

addEventListeners

[alljavascript]

Mark and sweep

Mark:

Periodically, the garbage collector will start from the roots (global variables), find all objects that are referenced from these roots.

Sweep:

Collection of non-marked values and freeing the memory.

[alljavascript]

Shadow DOM usage

class MyRootElement extends HTMLElement {  constructor() {    super();    this.innerHTML = `      <div>Welcome to ${this.innerHTML}'s Page!</div>    `;  } }

customElements.define("junk-node", MyRootElement);

Now to use it, just do

<junk-node>Whatever</junk-node>

Note: Shadow DOM elements are not visible to querySelector

[alljavascript]

Promise class polyfill

class Promise {  constructor(callback) {    const resolve = (v) => {      if(this.state) return;      this.state = "resolved";      this.resolvedValue = v;    };    const reject = (v) => {      if(this.state) return;      this.state = "rejected";      this.rejectedValue = v;    };    callback(resolve, reject);  }  then = (resolver, rejector) => {    return new Promise((resolve, reject) => {      if(this.state === "rejected") {        if(rejector) {          try {            resolve(rejector(this.rejectedValue));          } catch (e) {            reject(e);          }        }      } else {        try {          resolve(resolver(this.resolvedValue));        } catch(e) {          reject(e);        }      }    });  }  catch = (rejector) => {    return new Promise((resolve, reject) => {      try {        resolve(rejector(this.rejectedValue));      } catch(e) {        reject(e);      }    });  } }

Promise.resolve = function(v) {  return new Promise(resolve => resolve(v)); }

const p = new Promise((resolve, reject) => {  reject(1); }).then((v) => {  console.log("FIRST THEN: ", v);  return 100; }, (error) => {  console.error(error); });

[alljavascript]

Recursive currying

function add (...args) {    const result = args.reduce((acc, v) => acc + v);    const output = add.bind(this, result);    output.get = () => result;    return output; }

console.log(add(1,2,3)(4,5,6)(7,8,9).get());

[alljavascript]

compose with async [Interview]

const compose = (...apis) => async (data) => apis.reduceRight(  async (acc, api) => api(await acc),  data );

Simple Compose: function compose(...args) {    const defaultValue = args.pop();    return args.reduce((acc, curr) => {        return curr(acc);    }, defaultValue); }

[alljavascript]

pipe (using reduce) [Interview]

const pipe = (...apis) => (data) => apis.reduce(   (acc, api) => api(acc),   data );

Using reduce makes sense here as it reduces the entire array to one value.

[alljavascript]

Making Triangles

See what this renders on UI. Make sides transparent and remove the opposite one and you got yourself a triangle. Cheers!

#triangle-left {  width: 0;  height: 0;  border-left: 20px solid green;  border-right: 20px solid yellow;  border-top: 20px solid blue;  border-bottom: 20px solid black; }

[alljavascript]

CSP + Inline scripts

https://content-security-policy.com/nonce/

Use nonce on scripts and a nonce generator to enable these scripts.

[alljavascript]

Debugging code

Trying to find which code is making changes to DOM? Right click on any DOM element and use break on to figure out the same. 

[alljavascript]

Customize console.log

console.log("%cSomething here is going on", "font-size: 12px; color: red;");

Adding %c at the beginning of the console message and next parameter being the css part. My views: not that useful though.

[alljavascript]

WeakMap

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

There is always a time in every JS developer’s life when he/she wants to create a map using an object as a key instead of a string or a number.

Now, we can create one using WeakMap. Only issue with this is that we can’t iterate the WeakMap.

PS: Will add my implementation soon