juan ferreras

@juanf.is

586 Followers 412 Following

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

"This is fine" meme
cloudflare's status page shows a warning alert that reads "minor service outage"
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
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
Histogram showing the distribution of users' typing speeds in words per minute (WPM). My top speed was 153wpm and at the "100th percentile".
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.
A widget that would let users see how one or more tested pages loaded in a video (which is actually a canvas). That means it can be customized (e.g. colors inherit from the CSS and prefers-color-scheme, labels can be changed, etc). If you click record, it creates a very small video blob which you can download and share
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."
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.
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.
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
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
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.
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.