Great and awesome! Small search engines can be useful indeed.

Some tricks the author uses and explains:

1. using <link rel="preload" as="ROLE" href="URL">` to download
2. lazy-loading the search index (and this feature) as it is not used widely, and costs bandwidth (1.8MB)
3. Reducing the cost of webfonts: shrinking the typeset of the font (especially for titles) + combining css files

The author reduced the page load from 11 seconds to 4 seconds with these.

There’s a standard way to make part of a page not visible until the user requests it: the

tag. You may have seen this on big code examples in some of my other posts.

export type Result<T, E> = { ok: true, result?: T } | { ok: false, err: E }

Advantages: everything.
Disadvantages: it creates an object for it.

It is a quick way to test it before using a small library https://shaarli.lyokolux.space/?NJ9Efg

• aspect-ratio
• object-fit
• margin-inline
• text-underline-offset
• outline-offset
• scroll-margin-top / bottom
• color-scheme
• accent-color
• width: fit-content
• overscroll-behavior: it will isolate the scrolling to the contained region
• text-wrap: balance
• text-wrap: pretty but https://caniuse.com/?search=pretty

Use emojis as html tags.

A simple layout for nav with negative margins

The post covers the JSON format with different topics.

Shared data are used while generating a website: some can be shared accross different pages.

Carousel are still complicated, but better

It states that every method should either be a command that performs an action, or a query that returns data to the caller, but not both.

More formally, methods should return a value only if they are referentially transparent and hence possess no side effects.

Even in single-threaded programs, it is sometimes arguably significantly more convenient to have a method that is a combined query and command. Martin Fowler cites the pop() method of a stack as an example.

The lh unit is even more useful [for icon sizes] though because it is relative to the computed line height.

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

Use SVGs instead of icon fonts for the reasons explained in the articles.

Source of markup ghosts:

1. proprietary markup introduced by browser vendors
2. specs which didn*t see uptake like HTML3
3. use case specific markup on devices like WebTV or early smartphones

Some old tags:

• <audioscope> to display the sound over time. A demo https://www.youtube.com/watch?v=tM7YVhar2Dg
• <au> for authors
• <blackface> for double-weight boldface... in HTML 🤡
• <center> oh shit
• <font> and color attributes
• dingbat attribute to embed emojis, extended unicode entities, icon fonts and custom things. Now it is used as < for example and does not rely on the attribute anymore.
• <multicols> ....
• <person> in HTML 3, but it opens the door for so many other tags. Now instead we can rely on <a rel="author"> or with me

and more

They're nice and useful tools :)

They can be extended to browser extensions if they need to.