Build HTML elements visually

Source code: https://github.com/components-ai/css.gui

Generate animations with the mouse :D

Github: https://github.com/panphora/animatize

Copy/Paste the most used media query

A react-style library (but only 4 kB!). It is so small and uses JSX.

A component created with Atomico can be used in Html, Vue, Preact, React, Svelte, Solid or any other library.

This seems relevant for small projects or one that needs little interaction without using bare JS. The Lit library needs for example a lot of boilerplates. Here we need a function.

Great articles and content for frontend programmers

In cypress.config.ts, property e2e.setupNodeEvents for a screen 1920x1080 :

on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
        args.push('--window-size=1920,1080')
        return args
    }
})

This goes for chrome, but there also a workaround for Electron: https://github.com/cypress-io/cypress/issues/2102#issuecomment-692585453

This is the best guide I have found so far.

A 4-days workshop to learn rust

Indeed:

<template>
  <div
    @mouseover="hover = true"
    @mouseleave="hover = false"
  />
</template>

And now we now when the mouse is hovering.
A warning though: it is not compatible with touch screens !

2022 is relevant for the stable release of Vue 3. The ecosystem catch up: Nuxt 3, Vuetify 3, Quasar, NaiveUI, Ionic Vue, PrimeVue, InkLine, ElementPlus, ...

A focus has been given to Volar (1.0) and Vite. Vue 2 remains compatible with the version 2.7 "Naruto".

2023 expectations:

• smaller and more frequent releases
• vapor mode
• conferences

Generates beautiful shadows

UnoCSS powered component library.

It looks promising with its 18 components!

Github: https://github.com/jd-solanki/anu

TL;DR; instead of

• padding-left: use padding-inline-start
• padding-right: use padding-inline-end
• padding-top and -bottom: use padding-block
• width: use inline-size
• height: block-size
• overflow-x or -y: use overflow-inline or overflow-block
• position: top: use inset-block-start

Here is the pattern:

• inline for the reading axis. For us, it is left to right.
• block for the other (thickness) axis. For us, it is top to bottom.

A good starting point for Vue experienced programmers with Tailwind

• Extraction: make the nested code a function or its own piece of logic.
• Inversion: use guards to remove nested code. These guards will stop the function before the end of the function body. They act as gates.

How to handle fetch API errors ?
It throws on API Network Error only...