OTP fields (one character per field) from a single input? Yes it seems great because it has all features builtin: copy/paste, typing in the previous or next fields...

A language that compiles to bash

[Following https://shaarli.lyokolux.space/shaare/pkpvPQ]
Ok ok another use case for container queries:

Notice that the horizontal style became too condensed, this is because we used a media query. When using a media query, the browser doesn’t care about what will happen to the components if the available space isn’t enough. [...] As you’ve seen using a media query to change the card style isn’t logical in this case. The number of cards can increase or decrease and that will affect the card’s content.

new CSS features limitations are our brain:

• feature fatigue
• browser support (well is 90% for the container queries enough?)
• invisible improvements: a big chunk of the new features today are “invisible” though - they focus more on code composition and architecture.
• I don't know where I would even use the feature
• break the habit
• keep one step at a time
• find inspiration

The part on re-thinking established patterns is awesome to understand how to use the cascade, @layer and @container ! https://mxb.dev/blog/old-dogs-new-css-tricks/#h-re-thinking-established-patterns

Why we should avoid it? Because it can go wrong in so many way. The post describes different cases.

Country flag code to unicode emoji flag

function getFlagEmoji(countryCode) {
  const codePoints = countryCode
    .toUpperCase()
    .split('')
    .map(char =>  127397 + char.charCodeAt());
  return String.fromCodePoint(...codePoints);
}

A HTML validator aiming to be better than the current W3C HTML validator.

There is a descriptive page: https://validator.w3.org/nu/about.html

A great serie of post! Short, simple and clear.

Key takeaways:

• if someone wants high-contrast on some websites, does it mean for every websites?
• go for the accessible version first: high-contrast except for @media (prefers-contrast: less)
• why not fixing color contrast by default?

Some browsers implements customization such as Arc https://resources.arc.net/hc/en-us/articles/19212718608151-Boosts-Customize-Any-Website

It opens new ways to build one-page website too.

I way to style external links in comparison to internal ones.

I would go for the simple css selector a[href^=<domain>]

The mansory layouts is broken for tabbing and keyboard accessibility

Nice example

Simple projects that are handy to learn HTML, CSS and Javascript

Simple explanations of this data structure

but it is still relevant

Insert a code snippet in one line as a bookmark:

javascript: (() => {
// Code here
})();

For example:

• Find a "Jobs", "Careers" or "Hiring" link in the page, and click it.
• Find all email addresses on the current page, and display them in an alert.

These are not limited with permissions, so we should only execute code we checked.

#idea #project a collection of bookmarklet