TLDR WEB DEV 2025-06-26

LIQUID GLASS, BUT IN CSS

This article explains how to recreate Apple's new “Liquid Glass” design language from WWDC25 using CSS and SVG filters. The effect can be broken down into layers with box-shadows, backdrop-filter blur, color adjustments, and complex SVG displacement maps for refraction simulation. However, the implementation shown only works in Chrome, requires a lot of GPU resources, and is only practical for hero elements rather than full UI due to performance constraints.

A GUIDE TO SCROLL-DRIVEN ANIMATIONS WITH JUST CSS

Scroll-driven animations can be implemented in CSS, allowing animations to be controlled by user scrolling instead of time. There are three key components: the target element, the keyframes defining the animation, and the timeline (either `scroll()` or `view()`) that links the animation to scrolling. The `scroll()` timeline triggers animations based on scrolling, while `view()` activates them when an element enters the viewport.

OPENTELEMETRY FOR GO: MEASURING THE OVERHEAD

Everything comes at a cost, even logging. This article benchmarks logging overhead in a Go HTTP server that handles over 10k requests/second. It finds that enabling OpenTelemetry increased CPU usage by 35% (from 2 to 2.7 cores), memory by 50% (10MB to 15-18MB), and p99 latency from 10ms to 15ms while adding 4MB/second of network traffic for telemetry export.

START ALONE, THEN TOGETHER: WHY SOFTWARE MODELLING NEEDS SOLITARY BRAINSTORMING

Software modeling sessions often suffer from the "CTO effect," where dominant voices override other useful perspectives. To counter this, it's better to start modeling sessions with 10-15 minutes of silent, solitary brainstorming to encourage everyone to generate ideas independently first.

PREPARING FOR GOOGLE ZERO

Google is declining as a reliable traffic source due to AI-powered search. Its new approach uses creators' work to compete against them without compensation, breaking the traditional SEO model that rewards valuable content with traffic. To adapt, businesses needing distribution need to start looking into niche communities, referral programs, conferences, audio content, and word-of-mouth marketing.

GEMINI CLI: YOUR OPEN-SOURCE AI AGENT

Gemini CLI is an open-source AI agent that brings Gemini directly to your terminal. It has generous free usage limits, with access to Gemini 2.5 Pro and up to 60 free model requests per minute. It also has Google Search integration and Model Context Protocol support.

BUILD AND HOST AI-POWERED APPS WITH CLAUDE - NO DEPLOYMENT NEEDED

The Claude app now allows users to build, host, and share interactive AI-powered apps directly within the platform. These apps are built using artifacts that interact with Claude through an API. When users access these shared apps, their usage is charged to their own Claude subscription, removing scaling costs and API key management for the developer.

PLJS

PLJS is a lightweight and fast JavaScript language extension for PostgreSQL 14+ powered by QuickJS. It has integrations, type conversions, and configurable functions with documentation available.

OPENAI CHARGES BY THE MINUTE, SO MAKE THE MINUTES SHORTER

To reduce the cost and time of OpenAI transcriptions, speed up your audio using ffmpeg before uploading it. Transcribing 2x or 3x sped-up audio reduces the number of audio tokens charged by OpenAI with barely any impact on transcription quality. In the example shown in this article, there was a 33% cost reduction with 3x speed compared to the original audio duration using the gpt-4o-transcribe model.

THE PROBABILITY OF A HASH COLLISION

This post explains the math behind hash collisions, which occur when a hash function assigns the same value to different inputs. It not only shows the exact formula to predict a collision, but also has a few simpler approximations that can be used for large datasets.

A SHORT HISTORY OF WEB BOTS AND BOT DETECTION TECHNIQUES

Simple bots are easily identified. Nowadays, there are more sophisticated bot detection methods like IP reputation checks, TCP/TLS fingerprinting, and JavaScript analysis. As headless browsers have evolved and the use of orchestration frameworks has grown, so have advanced detection techniques like behavioral analysis and latency checks to detect bots attempting to mimic human behavior.

WHAT PROBLEMS TO SOLVE - BY RICHARD FEYNMAN

Richard Feynman advises a former student to find satisfaction and value in tackling solvable, even humble, problems where they can make a meaningful contribution, rather than pursuing grand, unattainable goals.

CLAUDE CODE ROUTER

Claude Code Router is a tool that allows users to route Claude Code requests to different models, customize requests with plugins, and integrate with GitHub Actions.

BRINGING REACT'S `VIEWTRANSITION` TO VANILLA JS

2000 LINES OF CODE

In 1982, a developer protested his team's management's decision to measure software progress by lines of code by reporting that his optimization of an application resulted in -2000 lines of code.