How to link webmentions.io messages, likeCount, replyCount and reportCount to a personal blog with a few JS lines.

A great media query for example disabling custom fonts!

Project Wallace is a set of CSS analyzers that check your complexity, specificity, performance, Design Tokens and much more. And all of that in a single web app.

Because of modularity

A list of triangle shapes that can be reused

background-repeat: space makes the background kind of responsive.

If you implemented this, and then you deleted all but one of the call sites, would you be tempted to inline the abstraction? If yes, you shouldn’t do it.

More techniques than Resource: The Complete Guide to Centering in CSS | Modern CSS Solutions.

It covers a lot of cases:

• when the element size is known or unknown
• depending of the layout algorithm currently used

As I write this in early 2024, browser vendors are in the process of implementing align-content in Flow layout, so that it controls the “block” direction alignment of content.

🤯 so we will be able to stick to the default layout.

So, for many years, I treated CSS like a collection of patterns. I had a bunch of memorized snippets that would paste from my brain, to solve whatever problem I was currently facing.

When to use which method

A JS-Logger library

An example of API testing in Cypress

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.