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"
  }
}

const currentSection = ref()
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if(entry.intersectionRatio > 0) {
          currentSection.value = entry.target.getAttribute('id')
        }
      })
     document.querySelectorAll('article h2').forEach((section) => {
        observer.observe(section)
     })
})

then add a class to the active currentSection.

PCjs uses JavaScript to recreate the IBM PC experience, using original ROMs, CPUs running at their original speeds, and early IBM video cards and monitors, including the classic green monochrome MDA monitor and the venerable “flickery” CGA monitor.

Over time, PCjs emulations have expanded to include selected PC Compatibles and more classic machines, such as Minicomputers, Programmable Calculators, Terminals, and Arcade Games. To learn more, visit the PCjs open-source project on GitHub.

• trigonometric functions
• new viewport unites
• :focus-visible
• scroll-behavior can be smooth :)
• lazyloading images by default with an attribute
• html element to get a modal with all the accessibility stuff baked right in ([demo](https://codepen.io/una/pen/dyJRwvG))
• array.prototype.at supports negative integers

Authentication middleware framework

Minimal web framework based on XML syntax

Ready to use 3D background effects

Partytown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.

An introduction and how it works:
https://www.smashingmagazine.com/2022/04/partytown-eliminates-website-bloat-third-party-apps/

A library that seems good to parse CSV

13[isOdd] returns true. Funny.

How to do it ?

1. Use Symbols to create unique keys
2. Object.defineProperty() with the symbol
3. Passing parameters with a function :)

Metho simplifies this process with a simple method.
Metho project: https://github.com/jonrandy/metho

I find Vite to be a good compromise between having the benefits of TS and the slow build step. Use es-build to transpile and does not do type checking since it passes that responsibility onto the IDE.

Totally agree with this comment !
It is still possible to run the type checker all in once if needed.

Only supported by chrome for now

1. A Save-Data header is sent on each HTTP request. This allows dynamic backends to change the HTML returned.
2. The NetworkInformation.saveData JavaScript API. This allows client-side JavaScript to check this and act accordingly.
3. The upcoming prefers-reduced-data media query, which allows CSS to set different options depending on this setting. This is available behind a flag in Chrome, but not yet on by default while it finishes standardization.

Display an item on scroll.