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.

From brute-force to optimized algorithm

I bookmark this post especially for this code snippet:

body {
    margin: 0 auto;
    max-width: 40rem; // can be bigger but not too much ! (<= 80 I think)
    font-size: 1.2rem;
}

It makes a HTML website directly readable :)

Problems with deepcloning with JSON.stringify() / JSON.parse():

• Recursive data structures: JSON.stringify() will throw when you give it a recursive data structure. This can happen quite easily when working with linked lists or trees.
• Built-in types: JSON.stringify() will throw if the value contains other JS built-ins like Map, Set, Date, RegExp or ArrayBuffer.
• Functions: JSON.stringify() will quietly discard functions.

The solution: the function structuredClone.

Comment créer un simple Web Component ?