A organization about useful vite projects. It does not seems very maintained though.

A ready to go starter project with ... everything. A lite version exist for a smaller scope.

• using transform-style: preserve-3d; on all elements
• make cubes
• add animations
• one source of light and 3 shades:
  • Light: Direct light
  • Medium: Indirect light
  • Dark: No light

#idea #project we could build a library for this with SCSS. One to build objects, another that is a collection of items.

@media (prefers-color-scheme: dark) {
    html body {filter: invert(1);}
    /* the following really should be managed by a cascade layer */
    .some-container-items-or-images {
      box-shadow: 0.25em 0.25em 0.67em #FFF8;
    }
}

From Lary Hudson

you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.

Numbers:
const formatter = Intl.NumberFormat(LOCALE, { notation: 'compact' })

Currency:

Intl.NumberFormat(LOCALE, {
  notation: 'compact',
  style: 'currency',
  currency: 'ZWD'
})

• Confetti canon
• Bookmark Button: transitions between SVGs. The MorphSVG plugin comes in to allow different amount of points. It does the heavy lifting so you can smoothly transition between any SVG Shapes.

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.