References the web APIs, where a lot of answers of stackoverflow can be found

I agree with many folks here on HN in that null and undefined have important differences. undefined appears when you access an invalid field, while null appears when you access a valid, but empty field.

What does which operators in javascript?

Nano ID is nano-sized unique string ID generator for JavaScript. It’s truly small (130 bytes minified), URL-friendly, and it has no dependencies. Plus, it’s safe, secure, and fast.

Project link: https://github.com/ai/nanoid
A small library to generate unique ids. It is implemented in a lot of other languages too.

Limitations and workarounds about the number input.

From the UK government:

#idea #project: reimplement it with right tests (vite) and useful helper functions.

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

const { length, 0: first, [length - 1]: last } = arr;

I was also struggling with it:
const multilineStrings = 'This is a\n' + 'multiline\n' + 'strings';
or
const multilineStrings = ['This is a', 'multiline', 'strings'].join('\n');
or
``const multilineStrings =This is a
multiline
strings`;

Create Beautiful Fullscreen Scrolling Websites

fullPage.js is designed to be easy to use and customize. It includes tens of examples, great documentation, and both community and personal support.

The project is useful websites similar to slides or demos.

Find unused dependencies: npx depcheck

Or install the package and run the command.

There is also npm-check that checks for outdated, incorrect, and unused dependencies.

Coverage of ECMAScript is testable on current project implementation: https://boa-dev.github.io/boa/test262/

An image compression library in javascript based on the Squoosh tool

The demo rocks

Creational

Singleton

Type of object that can be instantiated once

In Typescript, just use a global object, so you don't have the boilerplate.

Prototype

Object.getPrototypeOf

Builder

Build object step by step through different methods instead of using many parameters

Factory

Determine which object to instantiate

Structural

Facade

Simplified to hide low-level details of a system

Proxy

Reactivity system of Vue :D

Replace an original object and do some side effects

Advantage: allow user to work with the proxy just like the original object but it can trigger side effects behind the scene.

Proxy are also used when there is a large object that would be expensive to duplicate in memory.

Behavioral

Iterator

Traverse through a collection of objects.

A pull based system.

An object with a next() method in javascript that returns a { done: boolean; value: T }.

Observer

Allow many objects to subscribe to events that are broadcast by another object.

A Subject where other objects subscribe to it and triggers their method when the subject notify

Mediator

In case of many to many relationships, one object is a coordinator between them.

Middlewares are an example of mediator.

State

What is the difference between state and strategy pattern?

Documentation that generates code that is then used in the project :)

An alternative to Deno and NodeJS. It seems promising, but too soon to be used yet

The tricky part is to make sure that requests made with JavaScript work the same as with HTML.

• Implement features in HTML first
• then add javascript

Conveniently, if the HTML is done properly we can derive all the information we need.

document.querySelector('form').addEventListener('submit', (event) => {
  const form = event.target;
  const url = new URL(form.action || window.location.href);
  const formData = new FormData(form);
  const searchParameters = new URLSearchParams(formData);

  const options = {
    method: form.method,
  };

  if (options.method === 'post') {
    // Modify request body to include form data
    options.body =
      form.enctype === 'multipart/form-data' ? formData : searchParameters;
  } else {
    // Modify URL to include form data
    url.search = searchParameters;
  }

  fetch(url, options);
  event.preventDefault();
}

For POST requests, we’ll send the data in the request body.

• If the form explicitly sets the enctype to 'multipart/form-data', it’s safe to use FormData in the body.
• Otherwise, we can fall back to URLSearchParams.
  For GET requests, we’ll send the data in the request URL with the URLSearchParams object.

For the response: the header Accept: 'application/json' tells the server that json is awaited by the client else return HTML or a redirect :)
if we want to support HTML forms, we are though limited to GET and POST. But there is a nice workaround too:

• The GET and POST routes don’t change.
• The PATCH and DELETE routes become POST.
• We append the “methods” /update and /delete to their respective routes.

Also: to include extra data in your request, you can use and input with the name, value, and the type of “hidden”.

It is also important that not all progressive enhancement is a zero sum game.

Example of usage of degit with a postinstall hook:

{
  "scripts": {
    "build": "eleventy",
    "postinstall": "degit tryGhost/Ghost/core/frontend/src/cards/css node_modules/ghost-cards"
  },
  "dependencies": {
    "@11ty/eleventy": "^1.0.0",
    "degit": "^2.8.4"
  }
}