3 examples to build CSS Grid patterns

An HTML and CSS only tree.
The final CSS-snippet is also available at the end.

It uses only <ul>, <li>,

Mdash is a new kind of UI library. It's 100% standards-based and it's tiny.

Mdash components are comprised of standard HTML, custom HTML, and Custom Elements. As such, Mdash works with any framework (or no framework) and works with all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.

Only 6.8kB. It uses a minimal appearance but adds components that are used everywhere such as switch buttons-

Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.

All in one resource that includes dozens of tools and utilities useful for web developers and programmers.

It seems well designed :)

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