ganapativs

Generated using ChatGPT with reference image from https://www.youtube.com/watch?v=cjPVlxmf_Vk

---

🔠 Abbreviations and Their Full Forms

• MUA – Mail User Agent (e.g., Outlook, Apple Mail)
• MSA – Mail Submission Agent
• MTA – Mail Transfer Agent

ganapativs

// Clean html - remove css, script, keep html tags, json and json schema only.
function cleanHtml(html) {
  // First remove HTML comments
  let cleaned = html.replace(/<!--[\s\S]*?-->/g, '');

  // Remove unwanted tags, but preserve script tags with type="application/json" or type="application/ld+json"
  cleaned = cleaned.replace(
    /<script(?![^>]*type="application\/(json|ld\+json)")[^>]*>[\s\S]*?<\/script>|<style[^>]*>[\s\S]*?<\/style>|<(link|svg|img|image)[^>]*?>[\s\S]*?<\/\1>|<(link|svg|img|image)([^>]*?)\/?>|<\/(link|svg|img|image)>/gi,
    ''
  );

ganapativs

import React, { useState } from "react";
import { Machine, assign } from "xstate";
import { useMachine } from "@xstate/react";

const signupUser = email =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve("You are signed up!");
      reject("Unable to sign you up :(");
    }, 1000);

ganapativs

/* globals importScripts, workbox */
// https://developers.google.com/web/fundamentals/primers/service-workers/
// https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading

// https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_workbox_sw_via_cdn
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
    console.log(`Yay! Workbox is loaded 🎉`);
} else {

ganapativs

# generate a new pgp key: (better to use gpg2 instead of gpg)
gpg --gen-key
# maybe you need some random work in your OS to generate a key. so run this command: `find ./* /home/username -type d | xargs grep some_random_string > /dev/null`

# check current keys:
gpg --list-secret-keys --keyid-format LONG

# export private key in gpg:
gpg --export-secret-key -a "your_username"

ganapativs

function logger(strings,...values) {
	var str = "";
	for (let i = 0; i < strings.length; i++) {
		if (i > 0) {
			if (values[i-1] && typeof values[i-1] == "object") {
				if (values[i-1] instanceof Error) {
					if (values[i-1].stack) {
						str += values[i-1].stack;
						continue;
					}

ganapativs

Time Travel Debugging

Time Travel refers to the ability to record a tab and later replay it ([WebReplay][wrr]). The technology is useful for local development, where you might want to:

• pause and step forwards or backwards
• pause and rewind to a prior state
• rewind to the time a console message was logged
• rewind to the time an element had a certain style or layout
• rewind to the time a network asset loaded

ganapativs

• Install iTerm2 from https://www.iterm2.com/
• Install oh-my-zsh from https://ohmyz.sh/ or https://github.com/robbyrussell/oh-my-zsh
• Set iTerm2 theme tab theme to Dark - Preferences | Appearance | Tabs | Theme > Dark
• Install Fira Code fonts from https://github.com/tonsky/FiraCode (Clone and navigate to dstr > ttf, install all font files by double clicking)
• Install Powerline fonts from https://github.com/powerline/fonts
• Set fonts for iTerm2 - Preferences | Profiles | Text
  • Change Font to 14pt Fira code regular and Check Use Ligatures checkbox
  • Change Non ASCII Font to 14pt Fira mono and Check Use Ligatures checkbox
• Install iTerm2 snazzy theme from https://github.com/sindresorhus/iterm2-snazzy
  • Navigate to Preferences | Profiles | Color Presets > Snazzy

ganapativs

git clone https://github.com/tj/n.git n --depth=1
cd n
make install
cd ..
rm -rf n
n latest
npm install --global yarn

ganapativs

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()