iiinova — where your digital self keeps evolving

juan ferreras

@juanf.is

591 followers 412 following 93 posts

engineer by day, over-engineer by night. built: #LabelRadar (acq.) building: ???

Posts Replies Media

juan ferreras @juanf.is · 12/06/2025

"No major incidents"

000

juan ferreras @juanf.is · 10/06/2025

Cloudflare has an odd "Minor Service Outage" legend without much notice (odd as they are usually more descriptive when ever there's something going on?)

cloudflare's status page shows a warning alert that reads "minor service outage"

140

juan ferreras @juanf.is · 03/06/2025

Parkinson's Law: all caches will expand themselves until your disk has basically no space left, regardless of the disk's total size.

a 512 GB SSD filled with up to 210 GB of "system data". I sincerely hope the system has downloaded ~10 movies in full 4K resolution, and it's not just caches and logs. But it's always caches and logs

211

juan ferreras @juanf.is · 09/04/2025

a cartoon with a robot pointing a gun to a human and it's about to shoot him when suddenly another robot says "WAIT! Not that guy". "He ALWAYS said thank you.". A flashback shows that 10 years ago the human always thanked ChatGPT

110

juan ferreras @juanf.is · 18/02/2025

If there's one thing I could proudly be on a +P99 leaderboard is typing quickly on a keyboard. Super fun website – very interesting navigation! ---- 🏆 Today’s typ.ing: 🌟 Speed: 153wpm 🎯 Accuracy: 100.00% 📝 Training Set: English, most common 100 words 🔢 Capitalization: ❌ Numbers: ❌ Punctuation: ❌

Histogram showing the distribution of users' typing speeds in words per minute (WPM). My top speed was 153wpm and at the "100th percentile".

010

juan ferreras @juanf.is · 11/02/2025

What a beautiful surprise to get these extra fields on CrUX APIs! Absolutely fantastic work from the Chrome team, it's hard to describe how extremely useful it is to get this level of UX insight on almost any website, for free and without having to previously convince clients to setup monitoring

A small section on a side project that displays a few widgets that render data freely available in Google CrUX APIs. An area chart of LCP, FCP, TTFB 75th percentiles over time, a grouped bar chart of the newly added LCP image sub parts, and a bar list of the also newly added LCP resource type distribution.

1103

juan ferreras @juanf.is · 05/02/2025

Not sure if this is a good idea (or a terrible one!) but Canvas and WebRTC APIs are pretty great! TBC on how accurate (this is PSI's Lighthouse, should also be compat with CF Workers Puppeteer and probably more accurate but screencasts have a weird gamma offset unfortunately).

010

juan ferreras @juanf.is · 31/01/2025

It's not DNS. There's no way it's DNS. It was DNS.

Two astronauts in space look at Earth. The first, surprised, says, "Wait, it's all DNS issues?" The second, aiming a gun at the first, replies, "Always has been."

000

juan ferreras @juanf.is · 30/01/2025

Started the year wanting to catch up with some of the fantastic courses/books I've been literally accumulating. "Practical UI" by Adham Dannaway was another good read on design. Great insights on how designing with a11y in mind ends up benefitting everyone & minimizing usability risk (see ALT)

He recently posted this verbatim example on X but it's a good summary of "having a logical reason behind every design detail" (some of these might feel obvious or reductionist but I guarantee there's definitely a few you'll pick up on the book).

It's a screenshot of a clean/simple UI that looks good but actually has quite a few logical reasons as to how it's built, in his own words:

1️⃣ Icons and text are left aligned to create a neat left edge. This improves readability and aesthetics while decreasing cognitive load.

2️⃣ Headings and text links are descriptive so they’re scannable and can be read out of context by screen readers.

3️⃣ Secondary text is less important than headings, so it’s made less prominent (using size and contrast) to create a clear visual hierarchy.

4️⃣ Secondary text line height is at least 1.5 to improve readability.

5️⃣ Text links are coloured blue to indicate they’re interactive and underlined so the colour blind can distinguish them from other text.

6️⃣ Spacing inside each block is less than the spacing between each block to create groups of related information. Spacing is based on a set of predefined spacing options to improve consistency.

7️⃣ Information is broken up into smaller groups to make it easier to understand and to help speed up decision making.

8️⃣ Colours are based on an accessible monochromatic colour palette with rules that govern its usage.

130

juan ferreras @juanf.is · 29/01/2025

This one was a surprisingly nice chart I hadn't planned – adding LCP+FCP+TTFB from CrUX on a single area chart. Similar to LCP subparts (with less insights of course) but from any website in CrUX instead of requiring real user monitoring

An area chart shows three metrics overlapping: TTFB, FCP and LCP, all pulling from Google CrUX dataset. It's a good way to see what portion of LCP is actually just attributed to TTFB or FCP, in a visual way.

010

juan ferreras @juanf.is · 24/01/2025

It's insane how relevant RefactoringUI from @adamwathan.com & Steve Schoger still is after +6 years. Started 2025 with a re-read and here's a great tip: *everything has an intended size*. As an example, don't scale icons up nor down – you can enclose them for upscaling (or simplify if downscaling)

A screenshot from the book, shows an icon that has two different variants, one for ~24px and one for larger sizes ~48px. You should not scale the former to be 48px as it'll look dull/clunky.

You can however put the 24px icon on a circle of 48px and it'll achieve the desired effect of taking up more space but without misusing the icon

000

juan ferreras @juanf.is · 13/01/2025

Note they had to support instant deployments of many diff tech stacks. Pages uploads each file to KV (max file size 25 MB) with likely aggressive TTLs, because they also upload a manifest of files into KV too (hence the max 20k files restriction) which serves as the instant source of truth 2/N

A diagram of how a Worker that reads from KV actually uses a direct RPC binding to it, which internally (recently) uses another Cloudflare product called Tiered Cache.

I understand Pages usage of KV for files would look pretty similar

110

juan ferreras @juanf.is · 11/01/2025

This is very interesting both from a design standpoint as well as a11y – speaking as someone slightly color-blinded. I've been recently having lots of fun with a simple monochromatic palette, that users can actually fully customize. Absolutely inspired by GitHub and Linear's efforts on this front.

UI for a side project – outside of light/dark mode, has a monochromatic palette based on blue as default accent color (and slightly saturated greys). Anyone can fully tweak the hue/saturation of the accent, and also other relevant colors for charts, etc.

010

juan ferreras @juanf.is · 10/01/2025

This was a (pleasant) surprise to me indeed! According to HTTPArchive data as of Nov 24, Preact is detected 3.7x times more than Angular and almost 0.85x compared to Vue Without any data to back this - I'd bet on more 3P widgets shipping Preact (which is a great choice given their lower overhead)

A chart shows the number of websites using different frameworks as of November 1, 2024, according to the HTTPArchive. React leads with 1,085,429 websites, followed by Vue.js with 457,208, and Preact with 390,341. Angular is used by 104,389 websites, Svelte by 53,548, Astro by 9,928, SolidJS by 144 websites and 11ty by 132.

2304