Les liens de la mer numérique
- 140 named colors
- RGB (the traditional notation)
- Note we can replace
rgba(255, 0, 0, 0.5)withrgb(255 0 0 / 0.5)
- Note we can replace
- Hex codes (the de-facto used unit)
- HSL (the human-readable format):
- hue: the pigment used (deg)
- saturation: how much pigment (%)
- lightness: how light? (%)
- display p3: only supported in Safari and Chrome but allow more colors than sRGB
- LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though.
oklchfixes some bugs of lch.
How to get right proportions for a rounded corner inside of a rounded container?
outerRadius - gap = innerRadius
Utility to get a mime type
It is very useful indeed!
A cli tool that handle the package manager used behind the hood. So the command will be behind ni translated into the corresponding one between yarn, npm, deno, pnpm, etc...
A lot of so useful projects for web development!
Check them here: https://unjs.io/
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.
Benchmarking javascript snippets :)
·
@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>, and` tags in the markup, which makes it very easy and simple.
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