303 private links
A feedback about handling errors properly instead of a one big error enum.
Some CSS variables are computed in JS, and the rest is made by CSS and the browser. Each item is a <div>:
<div class="wall" style="
--start-x: 2560;
--start-y: -2112;
--end-x: 2560;
--end-y: -2496;
--floor-z: 32;
--ceiling-z: 88;
">All the geometry calculation is made in the browser.
JavaScript passes raw DOOM data in. CSS does the trigonometry.
JavaScript runs the game loop. CSS does the rendering.
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine
As the time of writing, the browser support is 66%
It works in <svg> tags:
<style>
.bg {
fill: #ffffff;
@media (prefers-color-scheme: dark) {
fill: #000000;
}
}
</style>wrappers, pgrx, pgdog, ParadeDB, Neon (Postgres in S3)
It's a cheap version for liquid glass with backdrop-filter: blur(10px) brightness(120%); :D
I didn't read it but look after the strategies: sequences with serial IDs, for update skip locked
So, it's a matter of your requirements. If you need massive scale and throughput (> 100k messages/sec), Kafka will be hard to beat. But if you're not operating at that scale, Postgres is hard to beat.
So, it's a matter of your requirements. If you need massive scale and throughput (> 100k messages/sec), Kafka will be hard to beat. But if you're not operating at that scale, Postgres is hard to beat.
No event listeners. No state tracking. No ARIA updates handled in JavaScript. I focused the button, and the tooltip appeared. I pressed the Esc key, and it disappeared.
popovertargetconnects the button to a popover elementpopovertargetactionspecifies what should happen (show, hide, toggle as default)popoverdeclares an HTML element can be targeted bypopovertarget(ou.showPopover())
Note Floating UI already solves many of these issues. CSS anchor positioning should solve most of the layout stuff
ul.notes li {
list-style-type: "Note: ";
list-style-position: inside;
}The ::marker pseudo-selector can be used to customize the rest. Generating content for markers is supported by Chromium and Firefox, but not by WebKit.
A list of symbols can be used with symbols(). The browser support is not great though. @counter-style can be used instead. It's Baseline Newly Available since 2023.
There is also the old ::before trick to set custom contents.
As summary:
| CSS | Use Case |
|---|---|
| list-style | Changing the basic bullet styles or numbering system. Using a Unicode symbol, emoji or text in place of a bullet. Using images for bullets. |
| li::marker | Colouring the numbering or bullets differently to the list text. Changing the font- properties of the numbering (but not its size unless the difference is subtle). |
| symbols() | Only supported by Firefox, use @counter-style instead. |
| @counter-style | For defining your own sequence of bullet symbols (not images) or a completely customised numbering system. |
| extends | Used within @counter-style to modify existing numbering systems, for example to change or remove the default ”.” suffix. |
| li::before | For complete control over marker positioning, especially if your bullets or numbering are much larger than the list text. |
Passer les PNG/JPEG qualité 90 à AVIF qualité 50 permet d'économiser au moins 75% de bande passante.
L'idée plus innovante est de compresser au préalable les ressources avant qu'elles soient utilisées.
[Précompresser avant de déployer] veut dire qu’on peut les compresser une seule fois, avec le niveau maximum, et demander à nginx de servir directement les fichiers pré-compressés. Zéro CPU à chaque requête, mais surtout un meilleur ratio au final, car on peut compresser plus fort.
En outre, Zopfli permet de compresser en .zip avec 3 à 8% d'efficacité en plus.
# Serve pre-compressed files generated at build time
gzip_static on;
brotli_static on; # nécessite libnginx-mod-http-brotli-static
# Fallback pour les contenus non pré-compressés
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript
application/javascript application/json
application/xml image/svg+xml;La compression Brotli permet de compresser à hauteur de 81% le HTML. La score des Web Core Vitals est passé de 70-85 à 99%.
The reset:
legend {
padding: 0;
display: table;
}
fieldset {
border: 0;
padding: 0.01em 0 0 0;
margin: 0;
min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
display: table-cell;
}Great utils
- A simple queue.json
- Batching with group commit
- Use a brokered group commit to eliminate contention over the queue object
- HA brokered group commit to handle unfinished job or broker machine die
Similarly to the job system we built at work, it guarantees at-least-once delivery.
I don't know if the pattern becomes too complex to be viable.
A deep dive into ASCII rendering.
It seems great but I don't have time for it.
Mots-clés lié à display: flex
- auto : L'ancien roi. Contextuel, imprévisible parfois, il laisse le navigateur calculer la taille selon le modèle de boîte standard (display).
- min-content : "Je veux être aussi petit que possible." Le navigateur va essayer de réduire la boîte jusqu'à ce que le mot le plus long ou l'élément le plus large force la largeur minimale. C'est le "soft wrapping" ultime.
- max-content : "Je prends toute la place dont j'ai besoin." La boîte s'élargit pour contenir tout le texte sans aucun retour à la ligne, quitte à provoquer un scroll horizontal (à utiliser avec prudence !).
- fit-content : Le compromis parfait. C'est mathématiquement équivalent à min(max-content, available-space). La boîte s'adapte au contenu, mais s'arrête poliment si elle touche le bord du conteneur parent.
- stretch : L'élément s'étire pour remplir l'axe disponible. C'est souvent le comportement par défaut des flex-items ou des grid-items.
Math functions such as clamp(), min(), max().
Le pattern Repeat Auto Minmax (RAM) est usuellement donné aux snippets qui génère une grille responsive sans aucun breakpoint grid-template-columns: minmax(300px, 1fr)