303 private links
For MacOS only
-webkit-font-smoothing: antialiased;
A great CSS reset
A work to use rust build as PHP extension
It's not available in Firefox yet.
Note: "The key insight is that loading massive files into memory all at once is rarely a good idea, even when technically possible."
- Read the whole file and call it a day with
fs.readFile - Read by byte chunks with file handles and buffers
- (preferred) Use stream
The streams handle the bytes and UTF-8 encoding automatically. Each state can be defined with a callback: error, data, end.
Use appropriate buffer sizes for streams. Default is 64kB. The highWaterMark can adjust it though.
When to use streams: large files, real time data processing, memory is limited, composability, unknown file sizes.
When to use file handles: precise control.
When to use fs/promises: known small files. readFileSync() and writeFileSync() are acceptable for cli tools and scripts, but forbidden for web servers and concurrent apps.
Prefer Promise.all or Promise.allSettled to leverage concurrency.
Handle specific errors. Always. await handle.close() or stream.on('error', () => stream.destroy()). Another solution is await pipeline(source, transform, destinationl)
It marks the function as never returning.
In comparison, the unit type () returns at least a value.
The content is similar to The HTML Output Element from Matthias Ott or HTML’s Best Kept Secret: The .
They advocate for better usage of <output> instead of aria attributes. Let's use native instead of ARIA!
Under accessibility, but this tag should be the norm
The author creates an extension for 3 uuid functions in Rust.
Tradeoffs: big extension size (330KB for simple uuids)
About using SQLite:
As mentioned in an earlier post the two biggest pain points are the "slow" schema changes on 10M+ rows tables locking the entire database for 10+ seconds, and the difficulty to implement automated failover. But it rocks for services that don't need 99.999 % of availability.
hsl & rgb had an update:
- hsla is replaced by hsl
- units are now optional when we’re using the space separated syntax
Relative colours
They can be created by mixing colors: rgb( from [#ff0000](https://shaarli.lyokolux.space/./add-tag/ff0000) r g b / 0.5) tells the browser to create an rgb color, from#ff0000 where each hexadecimal is assigned to the variables r, g, b with 50% transparency. Note h s l can be used as notation.
So here is how to plug transparency to a color: rgb(from var(--color-primary) h s l / 0.75);.
Quickwins:
- add transparency
- use lighter and darker versions of a base color in hsl:
--base-light: hsl(from var(--base) h s 75%);. See a one color toast notification: https://codepen.io/piccalilli/pen/XJXMgEB/64c4f56702893dc64d9cd4dc564f5e0e - using
calc(a later post)
Light and dark mode handling
light-dark() allow to define two variants of the color for the dark and light theme, if color-scheme: light dark; is activated. color-scheme can also deactivate it.
Colour spaces
They can be defined, so the browser does a good job of filling in those in-between colours, and sometimes, it falls flat a little. The trick was to add one or two colors in-between. Using the oklch as colour space is better though. The color spaces have to be tried manually though: lch and oklch, lab and oklab, hwb, xyz.
To have rainbow, one can use longer hue as for example linear-gradient(in hsl longer hue 90deg, var(--color-1), var(--color-2));. increasing or decreasing exists too.
As a quick aside, the range of colours in a given space is called its (wide or narrow) gamut.
display-p3 is one reference of a colour space. The chrome color picker also show the limitations of sRGB in display-p3 :)
assert!() use in const expression are a great way to ensure safe type casting
Even if you don’t use yt-dlp, the idea still applies: when you find yourself copy-pasting configuration and options, turn it into a standalone tool. It keeps your projects cleaner and more consistent, and your future self will thank you for it
Alexwlchan also made a resize image tool https://alexwlchan.net/2024/create-thumbnail/
HTMX filled me with so much joy when I started using it. But I haven’t felt like I lost anything since switching to Datastar. In fact, I feel like I’ve gained so much more.
If you’ve ever felt the joy of using HTMX, I bet you’ll feel the same leap again with Datastar. It’s like discovering what the web was meant to do all along.
<output> is currently underused in so many SPAs and apps, because it announces
Usages:
- Circular menus or item lists
- Wavy layouts (DNA strands, wave)
Fancy animations
Some clock display. See https://time.r0b.io/
ImageGallery - PhotoSwipe-powered image gallery with lightbox
AcademicReference - Academic citation system with tooltips
AnchorHeading - Linkable headings with clipboard functionality
Backlinks - Content relationship system
LinkPeek - Link preview system
SocialShare - Social sharing with clipboard
StructuredData - SEO schema generation
Image - Shared image pipeline (Astro assets + Unpic)