Utiliser WebP:

• png : 477,8 KiB
• jpg : 103,9 KiB
• webp : 51,0 KiB
• webp : 40,3 KiB (avec flou gaussien appliqué de 0,5px)

Les services en lignes permettent de gagner quelques pourcentages grâces à des presets plus aggressifs.

• png : 171,1 KiB (-61%) via https://tinypng.com/
• jpg : 97,5 KiB ( -6%) via https://tinyjpg.com/
• webp : 49,5 KiB ( -3%) via https://ezgif.com/optiwebp
• webp : 38,8 KiB ( -4%) (avec flou gaussien appliqué de 0,5px)

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-

It provides examples: https://siimple.xyz/examples

Also available on NPM for a 7.8kB minified and gzipped package.

This system makes it easy to build digital services that meet the needs of Californians.

Stylo is an open source WYSIWYG interactive editor for JavaScript. Its goal is to bring great user experience and interactivity to the web, for everyone, with no dependencies. Stylo is a Papyrs project.

Source code: https://github.com/papyrs/stylo

Make a wrapper for Vue 3?

Metallic look to HML elements.

Source code: https://github.com/MikaeI/metallicss (available as npm package)

A bootstrap similar library

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.

A collection of UI components made with HTML and CSS

A collection of Tailwind components

Oh surprise

Great articles and content for frontend programmers

Our tools are the best, with features that impress

🎶

We build relationships, with developers we meet
And together, we make the product complete

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

It uses only <ul>, <li>,

Seamlessly visualize your JSON data instantly into graphs.

100 buttons that feature styles and hover effects you may not have seen elsewhere.

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.

From the https://design.wonderflow.ai/, here are the Stories of each component.

Alternative to google fonts, if we must avoid to host the fonts...

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

Manual-writing styled forms with a CSS only file.

The font Short Stack should also be used. It is available as NPM package.

Unstyled, accessible components for building high‑quality design systems and web apps in React.

We need this in other frameworks!

Using finite-state machines seems to be a good idea!

A collection of framework-agnostic UI components patterns like an accordion, menu, and dialog that can be used to build design systems for React, Vue, and Solid.js

Using CSS to get a fingerprint of the browser. Here is a all-in-one resource.

A tool to make better README and the easy way.

It is especially useful for GitHub.

« Les services de la CNIL ont constaté que sous l’ancienne version 14.6 de système d’exploitation de l’iPhone, lorsqu’un utilisateur se rendait sur l’App Store, des identifiants poursuivant plusieurs finalités, dont des finalités de personnalisation des annonces publicitaires diffusées sur l’App Store, étaient par défaut automatiquement lus sur le terminal sans recueil du consentement »

1. Le nombre de vente
2. La dernière vente
3. L'avis des clients
4. Le nombre de visiteurs sur la page de vente
5. La quantité limitée
6. La durée limitée

Cela repose sur deux principes:

• créer une forte valeur au produit ou service
• donner l'impression que le produit or l'offre associée va bientôt disparaître

Pour aller plus loin, le code en lui-même n’est peut-être pas si critique, mais ce que l’on a appris en le concevant et l’utilisant l’est bien davantage. C’est cette transmission qu’il est important de rendre possible au sein de l’équipe.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Source code: https://github.com/htmlstreamofficial/preline

One status code, one http code.
Similar to Htto Status Cats... for dogs.

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

It seems well designed :)

Generate beautiful mesh gradients

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Paper Prototype CSS is CSS framework that mimics paper prototyping, sort of like a handdrawn look but a little more ransom-note-ish, with the help of two informal-looking free fonts.

And the blog post related: https://shkspr.mobi/blog/2022/06/paper-prototype-css/

The design system of Goldman Sachs.

It uses WebGL for it.

Engage with your customer with voice or messaging with a single easy-to-use platform.

Might be useful

A website collecting online utility tools.
Categories: Image, Pdf, Social Media, Text & Lists, Encryption, Web, Others

Another drop-in css stylesheet which make a website beautiful :)

Demo: https://alvaromontoro.github.io/almond.css/demo/

On aura sûrement ce genre d'abus de la technologie au J.O. puisque le gouvernement a annoncé les utiliser...