As a general rule, we should give the user as much control as possible, and we should never disable or block their settings from working. For this reason, it's very important to use a relative unit like rem for typography.

Then we should use rem everywhere ?

Do I actually want everything to scale with font size?
When we use rem values for horizontal padding, though we amplify the effect "larger the text is, the fewer characters can fit on each line".

So the final question is:

“Should this value scale up as the user increases their browser's default font size?”

I've come to realize, however, that we usually do want to use rems for media queries.

We're so used to thinking of media queries in terms of mobile/tablet/desktop, but I think it's more helpful to think in terms of available space. [Why in the post]

Other example is the space between paragraphs: it has a "functional" purpose so that we can quickly tell where one paragraph ends and the next one begins. For this reason, it does make sense to scale these margins with the user's chosen root font size.

Example of use of em instead of rem

• rem

h1 {
  font-size: 3rem
  margin-top: 6rem;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: 2rem
  margin-top: 4rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

• em

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h1, h2, h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

Another example is the width of a button: we can think about it alone yet.

Finally, it is better to forge an intuition as opposed to a set of rules about using rem/px as there are always edge cases.

A framework for building a web app in Rust 🤔
May be useful someday.

It's true that the Rust ecosystem is growing and tools are coming. But we lack the knowledge of how we can put things together. Here it fills the gap.

Drawing a cube in css and webgl... it turns out it is easier in CSS

Python support also unicode caracters, so you can write a 𝝨(...args) function :D

Some smooth checkboxes :)

I am using this trick to animate checkboxes, but I have to check it out for master it !

As Vue 3 classes are contained in attrs, we sometimes want to pass every prop attribute to the child, except the class attribute:
v-bind="{ ...attrs, class: undefined }"

calc is useless in min(), max() and clamp() functions

Comparing common concepts of web frameworks daily usage.

For each concept, an example in the framework is provided.

Make it also available for Pinia ? #project #idea

Doing data analysis by storing the data in an SQLite database.

The documentation can be found on datasette.io

A description of a modern website architecture. It uses a bunch of modern technologies, and the author explains why they are useful in its case.

So much !

The way it is written is smart 👍‍

.hover-1 {
  --h: 1.2em;   

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  --_t: var(--h);
}

The more I follow the Deno project and its community, the more I think it would be easier to use Typescript and the environment of Deno to write scripts.

Python is not so much robust without types. The amount of time my script logic was correct, but I miss the type of some variable, causing a xx minute time of debugging. The type annotations are currently complex to use and overkill for scripts, where typescript shines.

Example of usage of degit with a postinstall hook:

{
  "scripts": {
    "build": "eleventy",
    "postinstall": "degit tryGhost/Ghost/core/frontend/src/cards/css node_modules/ghost-cards"
  },
  "dependencies": {
    "@11ty/eleventy": "^1.0.0",
    "degit": "^2.8.4"
  }
}

I’m saying: consider the options, weigh them up against the norm and test them out. As long as you have a good reason behind the implementation, it kind of doesn’t matter what others think.

Does the same effect as slot/template in Svelte and Vue.

it looks like a callback in javascript, but for react component :D

Styles are based on the HTML tag. This library is small and can be reused very fast.

It seems better for small projects than TailwindCSS.