Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/hchiam/learning-js

Miscellaneous practice code in JavaScript.
https://github.com/hchiam/learning-js

a11y computer-science eslint javascript jest js minify node nodemon npm plato prettier service-worker

Last synced: 11 months ago
JSON representation

Miscellaneous practice code in JavaScript.

Awesome Lists containing this project

README 

          
# Learning JavaScript



Miscellaneous practice code in JS.



Just one of the things I'm learning. 



## Broaden JavaScript knowledge



e.g.:



- 

- 

- 



### ReqBin - test API endpoints by making API requests



 - also shows a bunch of example requests like GET with bearer token auth header, or Curl/JS/Python/PHP/REST/POST/JSON/POST/PATCH/PUT/DELETE



## How to Run .js Files Using Terminal/CommandLine



Make sure to include console.log("output text here");



    node filename.js



## Learn about Modern ES6 JS Features



ES6 (ECMAScript 2015) started in **2015**, with yearly additions after that: 



Also note the stuff around the default values for function arguments here: 



[Support Both Legacy JS and Modern JS Without Slowing All Browsers](https://codepen.io/hchiam/pen/mdWGLNE)



## Bonus



### Automatically format your code upon save



In VSCode: use the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension, and then in VSCode > Code > Preferences > Settings > search for "Format on save" > turn it on with the checkbox



Now it'll automatically format your code, just like the built-in stuff for [Golang](https://github.com/hchiam/learning-golang).



### Get immediate feedback on code errors and style



To automatically re-run a [.js file](https://github.com/hchiam/learning-js/tree/master/more-like-interview-questions) and the test cases in it whenever you edit that file, copy the .js code into [`index.js`](https://github.com/hchiam/learning-eslint-google/blob/master/index.js) in my [ESLint repo](https://github.com/hchiam/learning-eslint-google) and do the setup so you can run this command just once:



```bash

nodemon -x 'npm run lint; node index.js'

```



**_Or_** `nodemon -x 'npm run lint; npm run test; node index.js'`



**_Or_** `nodemon -x 'jest lowestIndexSameAsValue.test.js'` for example, to re-run the tests just for one file.



This works just like [`rerun` for Python](https://github.com/hchiam/learning-python/blob/master/README.md#run-code-linter).



**Alternatively:**



To set up [eslint and jest](https://github.com/hchiam/eslint-and-jest) locally inside this learning-js folder:



```bash

npm install jest --global

npm install # eslint is already listed in package.json for you

npm test # runs scripts test command listed in package.json

```



**_Or_** just run this: [`jest`](https://github.com/hchiam/learning-jest).



**_Or_** to run just a-specific.test.js, run this: `jest a-specific.test.js`.



You can also automatically include code style fixes in your commits with [`lint-staged`](https://github.com/hchiam/learning-lint-staged) set up with `husky`.



### Get code Maintainability Index (MI score)



The MI combines lines of code, cyclomatic complexity, and the Halstead volume metric (i.e. number of variables, operations, decision paths, and lines of code). After you [`npm install -g plato` or `yarn global add plato`](https://github.com/es-analysis/plato), you can get the MI score of your code:



```bash

plato -r -d report index.js

```



Similar to how I use [`radon`](https://github.com/hchiam/learning-python/#maintainability-index-mi-score) for Python code.



### Minify code



Install `minify`:



```bash

npm i minify -g # or: yarn global add minify

minify -v

```



Use `minify`:



```bash

minify minify-this-script.js > minified-script.js

```



### stuff you can do without JS-heavy web frameworks



### Using [`yarn`](https://github.com/hchiam/learning-yarn) instead of `npm`



```bash

yarn # instead of npm install or npm run install

yarn test # instead of npm test

```



Instead of `nodemon -x 'npm run test; node index.js'`, you can do:



```bash

nodemon -x 'yarn test; node index.js'

```



### Service Workers



Learning about them: 



### A list of useful one-liner utilities



### Interesting [a11y](https://github.com/hchiam/web-accessibility-course-notes)-related JS code



### More data structures/algorithms



### Chrome dev tools tricks for more productive debugging



and tips like this: 



`$_` = previous value



`$0`, `$1`, `$2`, `$3`, `$4` = the last 5 DOM elements you clicked on in the Elements tab



`$('some_selector')` = shortform for `document.querySelector('some_selector')`



`$$('some_selector')` = shortform for `document.querySelectorAll('some_selector')`



`$(`some_selector`, ancestorElement)` or `$('some_selector', $0)`



`$x('some_x_path')` = XPath



`inspect($('some_selector')[0]);` jumps to Elements panel (jQuery not required for that `$`). Works in Firefox too.



`queryObjects(YourConstructor)` = all objects created by `YourConstructor`



`getEventListeners($0)` = get event listeners on the element you last clicked on in Elements tab



- `getEventListeners(htmlElement)` in Chrome

- **Inspector tab** shows "`event`" buttons next to elements in Firefox - 



`monitorEvents(element, eventName)` = prints captured events



`unmonitorEvents(element)`



`monitor(functionName)` = prints function call with arguments, and also output



`unmonitor(functionName)`



`table()` (shortcut in Chrome) = `console.table()`



- ```js

  console.table([

    { a: 1, c: "hi" },

    { a: 3, b: 2 },

  ]);

  /**

   * (index)  a     c     b

   * 0        1     'hi'

   * 1        3           2

   */

  ```



`clear()` = `console.clear()`



`keys()` = `Object.keys()`



`values()` = `Object.values()`



`copy()` = copies to clipboard any value/object/element inside it.



More: 



### Edit any website (temporarily on the client side)



Enter this into the console log in dev tools: `document.designMode='on'`



### Read a file



In the browser:



-  or

- 



In the console terminal CLI:



- 



### Compare JSON files



- edited

- deleted

- added



### Get a lot of the functions and jQuery event listeners in a script string



### Support modern browsers and older browsers (like IE11) at the same time



```html



```



### Evergreen browsers



Conclusions:



- Chrome: was always evergreen (2008) = Chrome 1.

- Safari: quasi-evergreen (2013) = Safari 7 BUT you need to have your Mac settings set to automatically download and install updates.

- Firefox: rapid releases in 2011, silent updater in 2012 v15, but automated update feature in 2005 = Firefox 1.5 = effectively Firefox 1.

- Edge: the Chromium-based version of Edge (vs Edge Legacy) was released in 2020 = Edge 79 (some time after Edge Legacy 44).

- IE: seems like IE 11 but also Microsoft dropped support for IE, so you stop supporting IE = N/A now.

- detecting basic stuff like browser and major version in `navigator.userAgent` is currently (2024) still available

  - even in Chrome's user agent reduction: 

  - whereas Chrome's `navigator.userAgentData` is currently (2025) not adopted in other browsers: 

  - why migrate to User-Agent Client Hints: 

  - how migrate to User-Agent Client Hints: 



References:



- 

- 

- 

- 

- 

- 

- 

- 

- you can make Mac automatically download AND install updates: 

- 

- 

  - This superuser answer may be helpful for detecting pre-Chromium-based Edge Legacy.

- 

- 



### Bookmarklets



Only use them after you read and understand the contents of each bookmarklet!



### `this` keyword in old-school functions vs the newer arrow functions



`this` in `function()` = caller. Useful if you want `this` to change to whatever calls your one function.



`this` in `() => {}` = owner. Useful if you want `this` to always be the creator of the function. I think _nested_ arrow functions also pass along `this`, which you might like.



```js

// https://www.freecodecamp.org/news/the-difference-between-arrow-functions-and-normal-functions/

const obj = {

  a: () => {

    console.log(this);

    console.log(

      `"this" will be whatever "this" was before the function was created`

    );

  },

  f: function () {

    console.log(this);

    console.log(`"this" will be the current object that contains the function`);

  },

};

obj.a();

obj.f();

```



### CJS vs MJS/ESM/ES6M vs all the other types of JavaScript modules syntax



- ESM = `import` and `export`. Simplest, async, tree-shakeable, but not universally compatible.

  - more info, like `export default ...` and `import * from '...'` vs `import * as ... from '...'` and dynamic import in vanilla JS, and more: 

- UMD = works everywhere, is more of a pattern of fallbacks, usually the fallback when ESM fails.

- CJS = `require` and `module.exports`, sync, good for BE, commonly seen for node stuff.

- AMD = `define`, async, good for FE, confusing compared to CJS.



Read later:



### [Priority queue](https://github.com/datastructures-js/priority-queue) which can be used as a min heap or max heap



```js

// in CJS syntax:

const {

  MinPriorityQueue,

  MaxPriorityQueue,

} = require("@datastructures-js/priority-queue");

```



or



```js

// in ESM syntax:

import {

  MinPriorityQueue,

  MaxPriorityQueue,

  PriorityQueueOptions, // queue options interface

  PriorityQueueItem, // queue item interface

} from "@datastructures-js/priority-queue";

```



API usage example:



```js

const pqAsHeap = new MinPriorityQueue();

pqAsHeap.enqueue(num);

pqAsHeap.dequeue().element;

pqAsHeap.size();

pqAsHeap.front().element;

```



### add [type checking even in JS files](https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript), no config necessary (in VSCode)



Just add this comment to the top of your JS file:



```js

// @ts-check

```



### Scope console log scripts in DevTools to an iframe or other environment



Chrome:



![scope_dev_tools_chrome.png](scope_dev_tools_chrome.png)



Firefox:



![scope_dev_tools_firefox.png](scope_dev_tools_firefox.png)



### Regex and ReDoS security



- avoid evil RegEx, avoid exponential backtracking, avoid ReDoS: 



### Regex cheatsheet



- `x(?=y)` = lookahead _(AKA **positive** lookahead, in contrast to negative lookahead)_ = "match x if followed by y"

- `x(?!y)` = **negative** lookahead = "match x if NOT followed by y"

- `(?<=y)x` = lookbehind _(AKA **positive** lookbehind, in contrast to negative lookbehind)_ = "match x if preceded by y"

- `(?x)` = capture group with name `Name`

- `\n` = reference to the nth capture group match (count the left brackets)

- `\k` = reference to the capture group with name `Name` (note: `\k` is not some variable, it's literally like replacing the "`?`")

- `^` = start

- `$` = end

- `x*` = 0 or more times (mnemonic: `*` looks more like a 0 than `+` does, and `*0` changes a number, while `*1` doesn't)

- `x+` = 1 or more times (mnemonic: `+` looks more like a 1 than `*` does, and `+1` changes a number, while `+0` doesn't)

- `x?` = 0 or 1 time = "optionally exists"

- `x{n}` = n times

- `x{n,}` = n or more times

- `x{n,m}` = n to m times, inclusive

- `x*?`, `x+?`, `x??`, `x{n}?`, `x{n,}?`, `x{n,m}?` = match non-greedily = "match minimally", e.g. `/<.*?>/` only matches `` instead of `` entirely.

- `\b` = "word boundary" (note: `/\w\b\w/` can't ever matche anything, but `/\w\b\W\w/` can)

  - likely useful as: `/\bword\b/g` (replace `word` with your word or word pattern)

- `[\b]` = backspace

- `\xhh` = character with 2 hexadecimal digits

- `\uhhhh` = UTF-16 character with 4 hexadecimal digits

- `\u{hhhh}`, `\u{hhhhh}` (with `u` flag) = Unicode character with 4/5 hexadecimal digits

  - `'\u{2713}' === '\u2713'` but can include other symbols than numbers in brackets



My applied example: regex to automatically group digits with spaces in input boxes:



-  (4 digits from left to right, or from right to left)

- `.split(/(\d{4})/g)` --> `.replace(/\D/g,'').split(/(\d{4})/g).filter(x=>x).join(' ')`

  - `1234567890` --> `1234 5678 90`



### Web Locks



```js

// multiple browser tabs can try to access a lock named my_resource, but only one will be processed at a time (queued)

// also scoped to origins (https://example.com is different from https://example.org:8080)

navigator.locks.request("my_resource", async (lock) => {

  // lock acquired



  // do stuff

  await do_something();

  await do_something_else();



  // lock released

});

```



Note: deadlocks can still happen if, say, multiple locks are requested out-of-order.



More details/options: 



### `import` vs `import()`



[Static `import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import):



```js

import { something as aliasedName } from "some-module.js";

```



[Dynamic `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import):



```js

import("/some-module.js").then((aliasedName) => {});

// or:

const { default: myDefault, foo, bar } = await import("/some-module.js");

// or just:

await import("/some-module.js"); // like if you just want its side-effects

```



### D3 ``/svg `.click()` note



```js

/** Because simply using d3Element.click() or jQuery $(d3Element).click() doesn't work: https://stackoverflow.com/questions/9063383/how-to-invoke-click-event-programmatically-in-d3 */

function triggerD3PathClick(d3Element) {

  const event = new MouseEvent("click");

  d3Element.dispatchEvent(event);

}

```



### xpath



Here's an xpath to get only the English entry part of a Wiktionary page:



```js

$x(

  "//h2[span[text()='English']] | //h2[span[text()='English']]/following-sibling::*[preceding-sibling::h2[1][span[text()='English']] and not(self::h2)]"

);

// use | so you can include the English h2 in the selection

// you need the [1] so you stop selecting elements after the next h2

// you need self:: in not(self::h2) to avoid including the next h2

```



Building on that, here's an xpath to get just the etymology and definition(s) (`
` or `
    `) of the English part of a Wiktionary page:
    


    ```js

    $x(

      "//h2[span[text()='English']]/following-sibling::*[self::p or self::ol][preceding-sibling::h2[1][span[text()='English']]]"

    );

    ```
    


    ### Event listener `event.target` vs `event.currentTarget` vs `event.relatedTarget`
    


    - `currentTarget` = listening element (e.g. the individual button that has the click event listener fired on it)

    - `target` = triggering element (i.e. maybe the button, or maybe the i or span you actually clicked on inside of the button)

    - my own mnemonic: "C" is for "catcher", "T" is for "trigger". also, the longer name is more specific to the "catcher" element(s), as opposed to the many more possible "trigger" elements/sources.
    


    - `relatedTarget` = element focused _to_ for `blur`, focused _from_ for `focus`; similar idea for `focusin` and `focusout` and `mouse`(...)/`drag`(...) events, but note that `relatedTarget` may be `null` for non-focusable elements or for security reasons like tabbing out of a page.
    


    ### operator precedence reference
    


    for example, `&` is evaluated before `&&` before `||`: 
    


    ### example of debugging with chrome dev tools and fixing code base
    


    "Optimizing INP: A deep dive": 
    


    ### weird timing behaviour with `try` `catch` `finally`
    


    The `finally` console log prints `'two'` "before" the `return 'three'`:
    


    ```js

    // this code prints out 'one', 'two', 'three', 'four':
    


    function finallyTest() {

      try {

        console.log("one");

        return "three";

      } catch (err) {

        console.log("error");

      } finally {

        console.log("two");

      }

    }
    


    console.log(finallyTest());

    console.log("four");

    ```
    


    This might cause unexpected timing issues if you're not aware of this. (Also, `​.finally` behaves differently for `Promise`s.)
    


    More notes on `Promise`s and `async`/`await`: 
    


    ### Example use of JS animation `ScrollTimeline` that goes dynamically beyond what CSS can do
    


    ### tag function of template literals string, raw
    


    ```js

    var thisisTrue =

      String.raw`C:\folder\path\file.js` === `C:\\folder\\path\\file.js`;

    ```
    


    ```js

    // using new RegExp with String.raw and variable:

    var x = "Street";
    


    console.log(new RegExp(`(\\d+) ${x}`).exec("123 Street")[1]);

    // '123'

    console.log(new RegExp(String.raw`(\d+) ${x}`).exec("123 Street")[1]);

    // '123'

    ```
    


    so:
    


    ```js

    new RegExp("d"); // doesN'T work, requires double back slash

    new RegExp("\\d"); // works, requires double back slash

    new RegExp(String.raw`\d`); // works

    ```
    


    ### space characters
    


    You might know about `' '` and ` `, but did you know about `&puncsp;` (`'\u2008'`) which takes up space but is able to wrap? there's even more Unicode characters:  You can also do this in JS: - `'\u{2713}' === '\u2713'` but can include other symbols than numbers in brackets
    


    ```js

    "a".padEnd(10, "\u2008"); // U+2008 is Unicode for &puncsp;

    ```
    


    ### using JS to set CSS styles
    


    ```js

    element.style.color = "red"; // this does something

    element.style.color = "red !important"; // WARNING: this won't do anything! it won't even change the color!

    element.style.setProperty("color", "red", "important"); // this works if you want to include !important

    ```
    


    ### width and height of HTML elements in CSS/JS
    


    - offsetWidth, offsetHeight (includes padding and border)

      - clientWidth, clientHeight (like offsetWidth and offsetHeight but without the padding or border)

    - CSS width, CSS height

    - scrollWidth, scrollHeight (doesn't include padding or border, but does include overflow content)
    


    ### remove initial "1." text node without replacing children HTML
    


    ```js

    // if first child (likely textNode) starts with "#.", then remove that child:

    if (/^\d+\.$/.test(element.childNodes[0].nodeValue)) {

      element.childNodes[0].remove();

    }

    ```
    


    ### `Set` methods
    


    - 

      - `aSet.intersection(bSet)`

      - `aSet.union(bSet)`

      - `firstSet.difference(notInSecondSet)`

      - `inAXorB = aSet.symmetricDifference(bSet)`

      - `fours.isSubsetOf(events)`

      - `evens.isSupersetOf(fours)`

      - `haveNothingInCommon = primes.isDisjointFrom(squares)`
    


    ## `document.implementation.createHTMLDocument()`
    


    - 

    - 
    


    ```js

    output.innerHTML = "";

    const doc = document.implementation.createHTMLDocument(); // <-- a key part

    doc.write("
    list:
    

      

    • ");

      output.append(doc.body.firstChild); // <-- a key part

      // then to keep appending:

      let previousLength = 0; // until browser stream chunk implementation detail changes

      for await (const chunk of stream) {

        const newContent = sanitized(chunk.slice(previousLength)) + "
      • 

    • ";

        previousLength = chunk.length;

        doc.write(newContent); // <-- a key part for streaming instead of replacing all

      }

      doc.write("
      • 

    ");

    ```
    


    which can more performant/streamable than this:
    


    ```js

    output.innerHTML = "
    completely replacing everything every time
    ";

    ```
    


    You can see the difference in Chrome DevTools with Ctrl+Shift+P > Rendering > Paint flashing.
    


    ## communicate data between tabs and calling functions on the other tab
    


    - requires the first tab opening the second tab in js code
    


    first tab: (opens second tab in js code)
    


    ```js

    var child_window = window.open("http://localhost:5173", "_blank");

    var var_from_child = child_window.some_var;

    child_window.someFunction("with", "these", "params");

    ```
    


    second tab: (opened by first tab in js code)
    


    ```js

    var parent_window = window.opener;

    var var_from_parent = parent_window.some_var;

    parent_window.someFunction("with", "these", "params");

    ```
    


     (google meet `` --> 2nd window ``)
    


    ## save SVG in the `` as a .PNG file
    


    ## `unicode-range` can be used to mix fonts or target letters to use different fonts
    


    - CSS+JS mixed font `unicode-range` "animation": 
    


    ## why you would use `setTimeout` of `0` seconds
    


    ```js

    setTimeout(() => {

      //doSomething();

    }, 0);

    ```
    


    - (but also Ctrl+F for `queueMicrotask` in these notes)
    


    - QUICK EXPLANATION: use setTimeout with 0 seconds because event loop queue will be emptied after function call stack is clear
    


    ## installable PWA (Progressive Web App) template (uses a service worker)
    


    ## call stack string
    


    ```js

    // note: not a recommended/standardized string - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack

    const callStack = new Error().stack;

    ```
    


    ## locally play video with speed control
    


    ## Clipboard API (WIDELY AVAILABLE)
    


        ```js

        navigator.clipboard.read

        navigator.clipboard.write

        navigator.clipboard.writeText(text);

        navigator.clipboard.readText();

        ```
    


    ## Resize Observer API (WIDELY AVAILABLE)
    


        ```js

        const resizeObserver = new ResizeObserver(entries => {

          for (const entry of entries) {

            entry.target;

          }

        });

        resizeObserver.observe(element);

        ```
    


    ## Broadcast Channel API - if same origin (WIDELY AVAILABLE)
    


        ```js

        const bc = new BroadcastChannel(name);

        bc.postMessage(message);

        const bc = new BroadcastChannel(name);

        bc.addEventListener('message', event => {

          event.data;

        });

        ```
    


    ## Performance Interface API
    


        ```js

        performance.getEntriesByType('navigation'); // (WIDELY AVAILABLE)

        performance.navigation; // (NOT IN DENO OR NODE.JS)

        performance.memory; // (NOT IN FIREFOX OR SAFARI)

        performance.timing; // (NOT IN DENO)

        ```
    


    ## Channel Messaging API (WIDELY AVAILABLE): (more 1-to-1 than Broadcast Channel API)
    


    (available in web workers)
    


    ## Notifications API
    


        ```js

        Notification?.requestPermission().then(permission => {

          if (permission === 'granted') {

            new Notification('hi');

          }

        });

        ```
    


    ## Geolocation API
    


        ```js

        navigator.geolocation.getCurrentPosition(position => {

          position.coords.latitude;

          position.coords.longitude;

        });

        ```
    


    ## detect when all images have loaded
    


    `img` has a `.complete` property, so you can check if all ``s in an HTML container are done loading, and you can do something like the following jQuery code:
    


    ```js

    container.find("img").on("load", () => {

      if (allImagesLoadingComplete(container)) {

        callback();

      }

    });
    


    function allImagesLoadingComplete(container) {

      const images = container.is("img") ? container : container.find("img");

      return images.toArray().every((img) => img.complete);

    }

    ```
    


    ## tasks vs microtasks
    


    There is a slight difference between `setTimeout` of 0 ms and `queueMicrotask`, but `queueMicrotask` seems more expressive/explicit/intentional in terms of waiting for a task complete to avoid a timing bug -  = a shorter explanation than the following further reading:
    


    - 

    - 

    - For other related methods and details:  (see the [TL;DR](https://macarthur.me/posts/navigating-the-event-loop/#the-tldr) first):

      - setTimeout(() => {}, 0)

      - queueMicrotask(() => {}

      - requestAnimationFrame(() => {})

      - requestIdleCallback(() => {})

    - 

      - these 3 queues behave slightly differently: 

      - 1: tasks queue: process one at a time.

      - 2: animation callbacks queue: process all until completion, except for additional items that were queued during processing, until the next frame.

      - 3: and microtasks queue: process all until completion, including any additional items that were queued during processing.
    


    compare with 
    


    ## a list of bunch of quick helpful JS functions
    


    - generator

    - time to execute

    - array functions

    - number functions

    - string functions

    - date and object functions

    - promise-related functions

    - random hex colour

    - convert px to rem

    - **get selected text**
    


    ## take screenshot / screen capture of window and ideally just the viewport
    


    - using `getDisplayMedia` to take an actual screenshot, instead of using html2canvas to try to recreate things:
    


      - Claude artifact: 
    


      - Claude conversation leading up to that artifact: