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.

→ Remember: if your user is supposed to go somewhere, use an <a> element. If something with JavaScript needs to happen, use a <button> element.

I agree with that: link for navigation and button to trigger actions.

mask can hide part of the element is applied to.

It is a shorthand for all mask properties. I didn't find real example yet.

const currentSection = ref()
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if(entry.intersectionRatio > 0) {
          currentSection.value = entry.target.getAttribute('id')
        }
      })
     document.querySelectorAll('article h2').forEach((section) => {
        observer.observe(section)
     })
})

then add a class to the active currentSection.

About the onclick attribute and the event variable: onclick="submit(event)" works. But why ?

The spec shows that the string passed to a handler is combined like this:

function $name (event) { $body }

I'm not sure what $name is but $body is the string passed to the handler attribute in HTML. event is an argument. This string becomes a function through the Function constructor I'm assuming.

To test he new "this probably should be an f string" checker, they generated a list of the most popular python repositories on Github by using Github's topic search API [with this script].

With the rule:

GIVEN a string does not have an f prefix
WHEN the string contains {foo}
AND foo is in scope
THEN it’s probably missing an f prefix

And minimizing the false positive such as

• The string is later used in an str.format(…) call or str.format_map(…)
• The string is used in behave style test `@when('{user} accesses {url}.')