Skip to content
📐 🎨 🎮 🕹️ 💿 🧪 🎻 👾 🌍 🇬🇧 🇵🇹 🇧🇪
2026 © J Lopes
↺
Theme
  • Sketching the Impossible: A 3D Portfolio Built Without a Single 3D Model

    Codrops Codrops · Yesterday

    How a complete lack of Blender skills accidentally led to an award-winning 3D universe. Here’s what happens when you ignore the "correct" way to code and build an infinite corridor out of flat geometr...

    ↗ Open
  • Discovery vs Delivery

    Sidebar Sidebar · Yesterday

    A personal perspective on AI, product quality and the growing divide between deciding what should exist and efficiently building it.

    ↗ Open
  • The website specification

    Sidebar Sidebar · Yesterday

    A platform-agnostic, full specification of the technical features a good website should have. Built in the open under an MIT license.

    ↗ Open
  • Liquid Glass: who gets to decide how an interface looks?

    Sidebar Sidebar · Yesterday

    Notes from the 2026 WWDC keynote.

    ↗ Open
  • Building glass for the web

    Sidebar Sidebar · Yesterday

    How we built a cross-browser glass effect for the web, and how it shapes a family of components.

    ↗ Open
  • UI skills for design engineers

    Sidebar Sidebar · Yesterday

    Discover curated UI Skills for design engineers, including accessibility, motion, frontend craft, and interface quality guides.

    ↗ Open
  • Creating Memorable Web Experiences: A Modern CSS Toolkit

    CSS-Tricks CSS-Tricks · 26/06/10

    There are many ways to create memorable experiences. Sometimes it's as simple as a form that completes smoothly. But here I'm interested in sharing techniques I reach for when I want a site to feel al...

    ↗ Open
  • The “Vibe Coding” Crisis: Is Web Design Becoming a Commodity?

    Web Designer Depot Web Designer Depot · 26/06/10

    We are entering the era of "Vibe Coding," where AI generates the average of everything we’ve ever built, leaving the web beautiful but soulless. To survive, designers must stop being pixel-pushers and...

    ↗ Open
  • Building Horeca: Advanced Motion Design in Webflow Without the Performance Trade-Offs

    Codrops Codrops · 26/06/10

    An inside look at how we built Horeca’s motion system in Webflow, from scroll-triggered animations and sticky layouts to performance tuning, mobile optimization, and production-ready architecture.

    ↗ Open
  • The Benefits Of Cognitive Inclusion In UX Research

    Smashing Magazine Smashing Magazine · 26/06/10

    Findings from an exploratory user research study highlighting the unique insights and practical UX recommendations shared by participants with cognitive disabilities.

    ↗ Open
  • How I validated design decisions before writing production code

    Sidebar Sidebar · 26/06/10

    We can finally generate evidence before committing to anything.

    ↗ Open
  • fonts.xyz

    Sidebar Sidebar · 26/06/10

    A little internet village for independent type foundries and designers.

    ↗ Open
  • The old typography is new again

    Sidebar Sidebar · 26/06/10

    How variable fonts utilize optical sizing axes to automate legibility across varying viewports and scales.

    ↗ Open
  • performative-ui

    Sidebar Sidebar · 26/06/10

    Components that signal how oversubscribed your funding round is.

    ↗ Open
  • The four design jobs AI created (so far)

    Sidebar Sidebar · 26/06/10

    “AI design” is one label but has forked into four different types of work.

    ↗ Open
  • Building an Interactive Digital Stamp Collection with Shaders, Postcards, and Playful Inspection

    Codrops Codrops · 26/06/09

    How we turned a small archive of stamp illustrations into a tactile web experience with draggable stamps, a shader-based loupe, and a postcard feedback dialog.

    ↗ Open
  • Falling in love with the build

    Sidebar Sidebar · 26/06/09

    Write-first design prevents falling in love with the wrong thing by prioritizing reasoning over implementation.

    ↗ Open
  • How to center an element horizontally and vertically

    Sidebar Sidebar · 26/06/09

    100 different ways to center a single element horizontally and vertically inside a container.

    ↗ Open
  • Building a general-purpose accessibility agent

    Sidebar Sidebar · 26/06/09

    The experimental general-purpose accessibility agent that GitHub is piloting.

    ↗ Open
  • Enshittifier: replace AI with 💩

    Sidebar Sidebar · 26/06/09

    The web is drowning in AI. We replace it with 💩. In your browser. In your fonts.

    ↗ Open
  • Loop engineering

    Sidebar Sidebar · 26/06/09

    You don’t really need to be good at prompting anymore. The thing to get good at is the loop that does the prompting for you.

    ↗ Open
  • Join the WebMCP origin trial

    Chrome for Developers Chrome for Developers · 26/06/09

    Build structured tools for your website, so agents can complete tasks accurately.

    ↗ Open
  • VoidZero → Cloudflare, and Angular 22 lands

    Javascript Weekly Javascript Weekly · 26/06/09

    #​789 — June 9, 2026 Read on the Web JavaScript Weekly VoidZero is Joining Cloudflare — One of the year’s big moves in JS tooling, as told by Evan himself. The company he found...

    ↗ Open
  • Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions

    CSS-Tricks CSS-Tricks · 26/06/08

    I've said one and mean another, and I've used one when I needed another. Comparing scroll-driven animations, scroll-triggered animations, container query scroll states, and view transitions for my fut...

    ↗ Open
  • No Two Paths Alike: Inside San Rita’s Approach to Digital Experiences

    Codrops Codrops · 26/06/08

    Exploring the philosophy, projects, and process behind a studio that treats every brief as a new path to uncover.

    ↗ Open
  • Prototyping gamified e-commerce apps [Live Demo]

    Sidebar Sidebar · 26/06/08

    Countdowns. Limited drops. Game-style hunts. Build real-world gamification patterns that keep users coming back.

    ↗ Open
  • A sharp tool can still ruin the cut

    Sidebar Sidebar · 26/06/08

    Some ideas only show up when you take the long way around, when you don’t quite know what you’re looking for yet.

    ↗ Open
  • Beyond the prompt: Claude Code

    Sidebar Sidebar · 26/06/08

    A deep dive into Claude Code for daily users, including the .claude directory, CLAUDE.md the way Boris writes it, CLAUDE.local.md, and more.

    ↗ Open
  • Daily Designer

    Sidebar Sidebar · 26/06/08

    Every day, a thought-provoking quote from a designer.

    ↗ Open
  • When AI builds itself

    Sidebar Sidebar · 26/06/08

    Anthropic's progress toward recursive self-improvement, and its implications.

    ↗ Open
  • From open source hits to OpenAI

    The Changelog The Changelog · 26/06/05

    This week I'm talking with Max Stoiber, currently working on ChatGPT's plugin directory and app platform at OpenAI. We discuss the hundreds of open source projects nobody remembers alongside the big o...

    ↗ Open
  • The Making of the New Lesse Studio Website: Clarity, Performance, and Intentionality

    Codrops Codrops · 26/06/05

    What rebuilding the Lesse Studio website taught us about self-hosting, performance, and choosing tools with intention.

    ↗ Open
  • The Index: Issue #185

    Picalilli Picalilli · 26/06/05

    eyeball Incredibly addictive game. Best to use a mouse/trackpad than a touch device to give yourself a chance too! Dollar Slice Surf Report, New York City A cool project by Scott Jehl as, using pen, p...

    ↗ Open
  • Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!

    CSS-Tricks CSS-Tricks · 26/06/04

    We dive again into CSS Pie Charts! This time, Author Antoine Villepreux delivers semantic and flexible charts without a single line of JS. Another Stab at the Perfect CSS Pie Chart… Sans JavaSc...

    ↗ Open
  • A Front-end developer’s guide to the hybrid mobile app development landscape

    Picalilli Picalilli · 26/06/04

    Just as with every aspect of my life, I find it hard to identify my software development skills. At my heart, I am a developer, though I spent way too much time as a high school senior fretting about...

    ↗ Open
  • Creating a Thumbnail Flow Animation with GSAP MotionPath

    Codrops Codrops · 26/06/04

    A creative exploration of GSAP MotionPath, where stacked thumbnails unfold into a flowing image strip through curved trajectories.

    ↗ Open
  • Astro Mart: Summer 2026 Collection

    Astro Astro · 26/06/04

    Get ready for a summer of sport with our new personalizable merch.

    ↗ Open
  • offset-path

    CSS-Tricks CSS-Tricks · 26/06/03

    The offset-path property in CSS defines a movement path for an element to follow during animation. This property began life as motion-path. This, and all other related motion-* properties, are being r...

    ↗ Open
  • @custom-media

    CSS-Tricks CSS-Tricks · 26/06/03

    The CSS @custom-media at-rule allows creating aliases for media queries. @custom-media originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

    ↗ Open
  • @function

    CSS-Tricks CSS-Tricks · 26/06/03

    The @function at-rule defines CSS custom functions. These custom functions are reusable blocks of CSS that can accept arguments, contain complex logic, and return values based on that logic. @functi...

    ↗ Open
  • How To Make Your Design System AI-Ready

    Smashing Magazine Smashing Magazine · 26/06/03

    Practical guide on how to reduce drifts, minimize mistakes, maintain context, and improve the quality of AI-generated prototypes. Brought to you by Design Patterns For AI Interfaces, **friendly video...

    ↗ Open
  • Forging Her Own Path: Houmahani Kane’s Journey in Creative Development

    Codrops Codrops · 26/06/03

    From self-taught beginnings to real client work, I share my journey, key projects, and the challenges that shaped my approach to building interactive experiences.

    ↗ Open
  • Seamless PWA origin migration: Change domains without losing users

    Chrome for Developers Chrome for Developers · 26/06/03

    From Chrome 150 you can seamlessly transition a PWA to a new same-site origin.

    ↗ Open
  • Chrome 150 beta

    Chrome for Developers Chrome for Developers · 26/06/03

    Get a preview of the next Chrome release with this post detailing the features in the current beta.

    ↗ Open
  • ::search-text

    CSS-Tricks CSS-Tricks · 26/06/02

    The CSS ::search-text pseudo-element selects the matching text from your browser's "find in page" feature. ::search-text originally handwritten and published with love on CSS-Tricks. You should real...

    ↗ Open
  • What's new in DevTools (Chrome 149)

    Chrome for Developers Chrome for Developers · 26/06/02

    DevTools for agents is stable, AI assistance gets major upgrade with Lighthouse and widgets, new WebMCP debugging tools.

    ↗ Open
  • New in Chrome 149

    Chrome for Developers Chrome for Developers · 26/06/02

    CSS gap decorations, disconnecting WebSockets for bfcache, and Intl.Locale variants.

    ↗ Open
  • How to vet an npm package in 2026

    Javascript Weekly Javascript Weekly · 26/06/02

    #​788 — June 2, 2026 Read on the Web JavaScript Weekly Hocuspocus 4: Add Real-Time Collaboration to Any App — A plug-and-play real-time collaboration backend based on Yjs so yo...

    ↗ Open
  • Astro Markdown Component Utility for Any Framework

    CSS-Tricks CSS-Tricks · 26/06/01

    In the previous article, I spoke about the why and how to use a Markdown component in Astro. Here, we’re going to expand on that and help you use Markdown everywhere — regardless of the framework you...

    ↗ Open
  • UX Hierarchy: How Users Actually Scan Pages in 2026

    Web Designer Depot Web Designer Depot · 26/06/01

    The F-pattern is officially dead: in 2026, users don’t just read your page—they "sift" it through AI overlays and interact with "liquid glass" interfaces that respond to their gaze in real-time.

    ↗ Open
  • Beaucoup and the Pursuit of Memorable Experiences

    Codrops Codrops · 26/06/01

    Through branding, immersive web experiences, and 3D design, Beaucoup explores new ways to make brands feel memorable.

    ↗ Open
  • June Is For Exploring (2026 Wallpapers Edition)

    Smashing Magazine Smashing Magazine · 26/05/31

    Let’s kick off June — and the beginning of summer — with some fresh inspiration! Artists and designers from across the globe once again tickled their creativity to welcome the new month with a new col...

    ↗ Open
  • What's new in Astro - May 2026

    Astro Astro · 26/05/31

    May 2026 - A new Astro jobs board, TinaCMS makes Astro their default template, experimental advanced routing, and more!

    ↗ Open
  • The Future of Emotional Technology: Comfort Websites for Growth and Self-Awareness

    Codrops Codrops · 26/05/30

    Personalized digital spaces designed with care and emotional intention may offer a new way to support self-awareness, emotional growth, and the processing of difficult experiences in an increasingly A...

    ↗ Open
  • What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More

    CSS-Tricks CSS-Tricks · 26/05/29

    The old (testing in Safari when you don’t have Safari), the new (::checkmark), the in-between (anchor positioning but with HTML), and more. What’s !important #12: Safari Testing, ::checkmark, HTML An...

    ↗ Open
  • The Index: Issue #184

    Picalilli Picalilli · 26/05/29

    musiq Some web components that render piano keys and guitar fretboards in various configurations. Handy for educators! Aphera This is looking like a genuine challenger for Adobe Lightroom. Media queri...

    ↗ Open
  • The Never Ending Story: Building a Seamless Infinite Scroll Experience with GSAP & Lenis

    Codrops Codrops · 26/05/28

    Most pages end when you stop scrolling. This one doesn’t. Learn how to build a seamless infinite scroll with a layered parallax depth effect.

    ↗ Open
  • Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()`

    Smashing Magazine Smashing Magazine · 26/05/28

    Seventy percent of websites still fail basic WCAG contrast checks in 2025. After years of design system tooling, accessibility linters, and JavaScript libraries, nothing moved the needle. We didn’t ne...

    ↗ Open
  • Navigating the age-old problem of checkmarks in UI with progressive enhancement

    Picalilli Picalilli · 26/05/28

    The ::checkmark pseudo-element was introduced in CSS Form Control Styling Module Level 1 and it’s a powerful CSS feature to say the least. I even wrote about it as an almanac entry for CSS-Tricks in 2...

    ↗ Open
  • Astro 6.4

    Astro Astro · 26/05/28

    Astro 6.4 introduces a new pluggable Markdown processor API, a Rust-based Markdown processor for faster builds, and helpers to wire up experimental advanced routing with Cloudflare.

    ↗ Open
  • Revealing Text With CSS letter-spacing

    CSS-Tricks CSS-Tricks · 26/05/27

    Until we get something like ::nth-letter, there are still some really cool text effects we can make from existing CSS features, like letter-spacing, ::first-word and ::first-line. Revealing Text With...

    ↗ Open
  • Technical Writing in the AI Age

    CSS-Tricks CSS-Tricks · 26/05/26

    This isn’t totally about AI. It’s about technical writing in the age of AI. I have some thoughts on this and I hope it’s helpful to you humans reading. Technical Writing in the AI Age originally hand...

    ↗ Open
  • CSS vs. JavaScript

    Josh Comeau Josh Comeau · 26/05/26

    There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this b...

    ↗ Open
  • Why Ghost Buttons are the Ultimate Conversion Killer

    Web Designer Depot Web Designer Depot · 26/05/26

    The era of the "ghost button" was a massive mistake that prioritized minimalist purity over actual usability, effectively hiding the most important part of your site from your customers. In 2026, the...

    ↗ Open
  • Build new features using built-in AI in Chrome

    Chrome for Developers Chrome for Developers · 26/05/26

    Learn more about the talk given at Google I/O 2026 by Thomas Steiner.

    ↗ Open
  • npm and pnpm introduce staged publishing

    Javascript Weekly Javascript Weekly · 26/05/26

    #​787 — May 26, 2026 Read on the Web JavaScript Weekly JS Crossword: All the Answers are JavaScript — This hand-crafted puzzle will seriously stretch your JavaScript knowledge....

    ↗ Open
  • Cross-Document View Transitions: Scaling Across Hundreds of Elements

    CSS-Tricks CSS-Tricks · 26/05/25

    Every view-transition-name on a page must be unique. The problem is that every pseudo-element selector in your CSS targets a specific name, so your animation styles explode into an unmanageable wall o...

    ↗ Open
  • Your Prototype Is Not Being Honest With Your Users (And Here’s How To Fix It)

    Smashing Magazine Smashing Magazine · 26/05/25

    There’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sig...

    ↗ Open
  • The State of CSS Centering in 2026

    CSS-Tricks CSS-Tricks · 26/05/22

    Despite the countless number of online resources, it’s easy to get confused when trying to center an element. There are documented solutions, but do you really understand why the code you picked works...

    ↗ Open
  • Four Levels Of Customer Understanding

    Smashing Magazine Smashing Magazine · 26/05/22

    What people say, feel, think, and do are often very different things. To understand the underlying reasons for user behavior, it helps to look beyond the surface and explore hidden motivations, root c...

    ↗ Open
  • The Index: Issue #183

    Picalilli Picalilli · 26/05/22

    On Google declaring war on the Web The time to fight back against Google is right now or we end up with AOL, slop edition. Mechanical Pencil Beautifully illustrated guides on how stuff works, by mecha...

    ↗ Open
  • What's new in web extensions: I/O 2026 recap

    Chrome for Developers Chrome for Developers · 26/05/22

    Another Google I/O is behind us and we have covered all the exciting extensions updates!

    ↗ Open
  • Advanced Tree Counting: Mathematical Layouts With `sibling-index()` And `sibling-count()`

    Smashing Magazine Smashing Magazine · 26/05/21

    Meet `sibling-index()` and `sibling-count()`. Staggered cascade effect in one line of CSS without `:nth-child()` rules or JS workarounds. Works for 5 items or 5,000.

    ↗ Open
  • New in Chrome at Google I/O 2026

    Chrome for Developers Chrome for Developers · 26/05/21

    All the talks from Google I/O 2026 are now available on demand.

    ↗ Open
  • Modernize authentication with passkeys, digital credentials, and more

    Chrome for Developers Chrome for Developers · 26/05/21

    Recap of how to modernize authentication with passkeys, digital credentials, and more, based on the Google I/O 2026 session.

    ↗ Open
  • Stack Overflow: When We Stop Asking

    CSS-Tricks CSS-Tricks · 26/05/20

    It still hits like a ton of bricks to see the steep decline in Stack Overflow questions. What does that mean about learning in our industry? Stack Overflow: When We Stop Asking originally handwritten...

    ↗ Open
  • The Great Replatforming: WordPress Is Training Its Own Replacement

    Web Designer Depot Web Designer Depot · 26/05/20

    WordPress didn’t kill web design—it exposed how much of it was never that valuable to begin with. Now that anyone can generate a “good enough” site in minutes, the real game isn’t building anymore—it’...

    ↗ Open
  • 15 updates from Google I/O 2026: Powering the agentic web with new capabilities, tools, and features in Chrome

    Chrome for Developers Chrome for Developers · 26/05/19

    Learn about the key announcements from Google I/O 2026.

    ↗ Open
  • Dr. Axel's blog is gone (for now)

    Javascript Weekly Javascript Weekly · 26/05/19

    #​786 — May 19, 2026 Read on the Web JavaScript Weekly RFC: It’s Time for npm to Make Install Scripts Opt-In — npm is the only major package manager that runs dependency instal...

    ↗ Open
  • Cross-Document View Transitions: The Gotchas Nobody Mentions

    CSS-Tricks CSS-Tricks · 26/05/18

    This is Part 1 of a two-part series about cross-document view transitions, going over all the gotchas, from ditching the deprecated way to opt into them to a little-known 4-second timeout. Cross-Docu...

    ↗ Open
  • MCP on Code Mode

    The Changelog The Changelog · 26/05/15

    This week I'm talking with Matt Carey about Code Mode and how most of us have been thinking about MCP all wrong. Matt works on the Agents SDK and MCP at Cloudflare — we discuss how server-side Code Mo...

    ↗ Open
  • Ten Data-Backed Truths Of User Experience ROI

    Smashing Magazine Smashing Magazine · 26/05/15

    Every extra second of friction has a measurable business cost. Carrie Webster shares ten data-backed UX facts that link user experience directly to revenue, retention, and long-term growth.

    ↗ Open
  • Automation at the speed of Swamp

    The Changelog The Changelog · 26/05/13

    This week I'm talking with Adam Jacob, founder of System Initiative and creator of Swamp, about what happens when AI agents change the entire shape of software development. We discuss how he went from...

    ↗ Open
  • Practical Interface Patterns For AI Transparency (Part 2)

    Smashing Magazine Smashing Magazine · 26/05/13

    Why traditional loading patterns like spinners fail in agentic AI experiences, and how interface patterns that reveal the system’s process, status, and decision-making can improve transparency and bui...

    ↗ Open