Transition a CSS grid row from 0 to 1fr to get an accordion working :D
An Advantage is the text is already rendered for screen readers.

A guide on how to write a custom HTML parser. There is a lot of stuff at stake.

A nice explanation of vite

I totally agree with it: I find composition a killer feature as it keeps the API of the component open.

Wow I didn't think about it. It seems practical!

With a list with data-index attributes such as <li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
and the snippet:

<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
  if (!this.value) {
    searchStyle.innerHTML = "";
    return;
  }
  // look ma, no indexOf!
  searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
  // beware of css injections!
});
</script>

How complex can an URL be, and malicious URL formats that are still valid.

A simple CSS code to check bot messages on social media (mastodon).

Simple JSON files can be used to generate a functional website :D

Basique mais efficace: le if qui vérifie que la donnée est correct

Une guard clause est un retour prématuré (ou early return) placé en haut de votre méthode, qui empêche votre code d’être exécuté si ce n'est pas nécessaire, en fonction de conditions que vous spécifiez. La plupart du temps ces conditions servent à vérifier le type de donnée reçu dans la méthode.

Another detailed article about it: https://anthonygharvey.com/guard-clauses-vs-nested-conditionals

A collection of rust libraries:

• Dioxus for react-like interface architecture
• Tauri to build desktop apps
• Xilem is a data-first UI architecture
• Sycamore is a reactive library for creating web apps in Rust and WebAssembly. It uses bind/signal semantics. TThere is also Perseus on top of it that adds State and template concepts.

And so much more!

A case study for #Storyblok

const only ensures that the reference is not modified. The data referenced can be modified though.
Also, primitive data types are immutable. So a const a = 5 can not be updated as 5 as Number can not change.

When we use const, we create an indestructible link between a variable name and a piece of data. We're still allowed to modify the data itself though!

How to create a web worker?

1. Create a script that imports another one with const worker = new Worker('worker.js'
2. Bind events emitted by the worker with worker.onmessage = function(event) { ... }
3. Do the same in the web worker with self.onmessage = function(event) { ... }
4. Exchange messages with worker.postMessage(payload) or self.postMessage(payload)

One key difference between Web Workers and the main thread is that Web Workers have no access to the DOM or the UI. This means that they cannot directly manipulate the HTML elements on the page or interact with the user.

When you use satisfies, the value BEATS the type.

The value of the variables is taken into account instead of the type declared in semicolon.

Also colon annotations and satisfies are equally safe.
Also unlike satisfies and colon annotations, using ‘as’ annotations lets you lie to TypeScript.

To recap, we’ve got FOUR ways of assigning a type to a variable:

• colon annotations
• satisfies
• as annotations
• not annotating and letting TS infer it

The rule of thumb is that you should only use satisfies in two specific situations:

• You want the EXACT type of the variable, not the WIDER type.
• The type is complex enough that you want to make sure you didn’t mess it up

An image map is a normal image on a website which has different clickable regions which take you to different pages. Image map functionality allowed polygons of an image to be defined as independent hyperlinks.

<!-- References an image map -->
<img src="image.png" usemap="#map1" />

<map id="map1" name="Map 1">
  <!-- An example of a rectangular area over an image -->
  <area shape="rect" coords="10,10,100,100"
        href="/foo"
        alt="Go to the Foo page"/>

  <!-- An example of a circular area over an image -->
  <area shape="circle" coords="50,50,200"
        href="/bar"
        alt="Go to the Bar page"/>

  <!-- An example of an arbitrary polygon over an image -->
  <area shape="poly" coords="10,10,100,10,100,100,10,100"
        href="/baz"
        alt="Go to the Baz page"/>

  <!-- Fallback if no other area matches -->
  <area shape="default"
        href="/default"
        alt="Go to the Default page"/>
</map>

An example of layout top to bottom with different width 👍

A color picker with the oklch format

oklch is based on human perception instead of the RGB for LCH.

Manage your dotfiles across multiple diverse machines, securely.

I will test it sometime