The Collective #904: CSS Gap Decorations, AI Blindspots, Vibe Coding Put to the Test

Olá, frontend friends! 👋

Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!

Happy exploring! 💙

^{From our sponsor}

Start learning AI in 2025

Keeping up with AI is hard – we get it!

That’s why over 1M professionals read Superhuman AI to stay ahead.

• Get daily AI news, tools, and tutorials

• Learn new AI skills you can use at work in 3 mins a day

• Become 10X more productive

Sign up and start mastering AI

📝 Minding the gaps: A new way to draw separators in CSS

An article by the Microsoft team on techniques for drawing separators in CSS, and a new proposal called "CSS gap decorations".

^{article / css}

🔍 AI Blindspots

Edward Z. Yang shares "blindspots" in LLMs he has noticed while AI coding.

^{ai / article}

🌅 daylight

A command-line program for tracking sunrise and sunset times (Mac/Linux).

^{terminal / tool}

💻 Does vibe coding work?

David Lindkvist tests building a UI with only AI-generated code—fast, but messy. Cursor + Claude sped things up, but control and polish suffered.

^{ai / opinion / productivity / software-engineering}

🖼️ Cascii

A web-based ASCII and Unicode diagram builder written in vanilla Javascript

^{ascii / tool / unicode}

🌘 Matching drop shadows across CSS, Android, iOS, Figma, and Sketch

A quick explanation of why drop shadows look different across platforms—and how to fix it.

^{article / css}

🎙️ OpenAI.fm

OpenAI.fm is an interactive demo for testing the new text-to-speech voices in the OpenAI API

^{ai / tool}

📦 Announcing WordPress Export to Markdown v3

WordPress Export to Markdown v3 adds a smoother wizard, draft post support, and CLI options for static site migrations. Source code here.

^{markdown / wordpress}

🔄 Carousels with CSS

CSS-only carousels are now possible with Chrome 135 and the CSS Overflow 5 spec. Adam Argyle showcases scroll buttons, markers, snapping, and more—no JS required.

^{css / tutorial}

💦 Splash

The latest step in Matsuoka’s WebGPU fluid sim work—now with smoother surfaces, raymarched shadows, and more interactivity. Source code here.

^webgpu

🔧 Real-world uses of TypeScript’s utility types

Sam Rose shares real-world examples of TypeScript utility types like Partial, Omit, and ReturnType.

^{article / typescript}

💫 CSS Animation with offset-path

Chuan demonstrates how to recreate motion patterns using offset-path in CSS, showcasing polygon-based paths and animated sequences.

^{animation / css / tutorial}

🧠 LLM Agents are simply Graph — Tutorial For Dummies

A beginner-friendly tutorial demystifying LLM agents, explaining them as simple graphs with decision loops, using PocketFlow for clear, hands-on learning.

^{ai / tutorial}

✨ CSS view-timeline shine effect

Ryan Mulligan’s demo showcases a CSS view-timeline shine effect using animation-timeline: view(), animating elements based on scroll position.

^css

📐 Self Gap

Ahmad Shadeed explores ways to control spacing between flex and grid items, discussing current CSS solutions and proposing a new gap-self property.

^{article / css}

🖼️ Cascii v1.0.1 (beta)

A web-based ASCII and Unicode diagram builder written in vanilla JavaScript with zero dependencies. Repo here

^{ascii / tool}

🎨 Oscura

A VS Code theme by Fey, inspired by hacker terminals and designed for a sleek, minimal coding experience with curated colors and balanced contrast.

^code-editors

🌊 A fluid CSS methodology

Willy Brauner explores a fluid CSS methodology using viewport-based calculations for responsive, scalable, and maintainable layouts.

^{article / css}

Got something you’d like to share? Just reply to this email and let us know!