Skip to content
📐 🎨 🎮 💿 🧪 🎻 👾 🌍 🇬🇧 🇵🇹 🇧🇪
2026 © J Lopes
↺
Theme
  • Designing With Uncertainty: How AI Supercharges Probabilistic Thinking

    Smashing Magazine Smashing Magazine · Yesterday

    In a world where AI is informing more design choices, it’s easy to mistake predictions for certainties. This article introduces Probabilistic Design, a mindset that allows UX and product teams to acce...

  • Designing A Better Lou: Reducing Cognitive Load Through Design, Content, and Systems

    Codrops Codrops · Yesterday

    A look at the design, content, and development decisions behind A Better Lou, a healthcare platform built to reduce complexity and improve clarity.

  • Vibe Coder vs Software Engineer

    Sidebar Sidebar · Yesterday

    Vibe coding is useful for discovery, but software engineering starts when generated code has to be reviewed, owned, operated, and safely changed.

  • Words of Type

    Sidebar Sidebar · Yesterday

    Multilingual encyclopedia of typographic terms.

  • Lawful Design

    Sidebar Sidebar · Yesterday

    The least fun but most required part of our work.

  • World Cup Map 2026

    Sidebar Sidebar · Yesterday

    An interactive 3D globe showing every match of the 2026 FIFA World Cup — browse by date, group, team, or city.

  • How Japan’s railways stayed one while splitting apart

    Sidebar Sidebar · Yesterday

    When Japan broke up its national railway in 1987, the new companies agreed on one thing to keep the same.

  • Flow vs TypeScript in 2026

    Javascript Weekly Javascript Weekly · Yesterday

    #​790 — June 16, 2026 Read on the Web JavaScript Weekly Flow for TypeScript Users in 2026 — Flow is Meta's mature typed dialect of JavaScript, and over the years its syntax has...

  • What’s !important #13: @function, alpha(), CSS Wordle, and More

    CSS-Tricks CSS-Tricks · 26/06/15

    CSS functions, the alpha() function, Grid Lanes, some things about Dialog that you might not know, CSS Wordle, and more — this is What’s !important right now. What’s !important #13: @function, alpha(...

  • The Digital Renaissance: Why 2026 is the Most Exciting Year to be a Web Creator

    Web Designer Depot Web Designer Depot · 26/06/15

    The industry isn't dying—it’s undergoing a high-speed "Hard Reset" that is promoting developers from manual laborers to digital architects. While some are exiting the grind, the bold are becoming "Sol...

  • html.to.design — New Chrome extension feature

    Sidebar Sidebar · 26/06/15

    Capture entire webpages (or sections), copy to clipboard, Ctrl+V into Figma, start editing.

  • The flaw is the feature

    Sidebar Sidebar · 26/06/15

    What is polish actually worth?

  • Extend UI

    Sidebar Sidebar · 26/06/15

    Open source UI kit for modern document apps. React components for PDF, DOCX, XLSX, and CSV viewers, file upload, e-signing, and more.

  • Everyone got excited they can suddenly code, and completely missed the point

    Sidebar Sidebar · 26/06/15

    Coding agents made software cheap to build. That just exposed the bottleneck that was always there: deciding what to build.

  • Tech Influence Watch

    Sidebar Sidebar · 26/06/15

    Tracking cryptocurrency and artificial intelligence industry influence on 2026 elections in the United States.

  • The Index: Issue #186

    Picalilli Picalilli · 26/06/15

    It doesn’t matter if it works An extremely good and important read. LLMs and performative productivity A rather detailed post that links out to some really interesting studies too. When to use (and no...

  • Introducing the MDN MCP server

    MDN MDN · 26/06/15

    MDN's MCP server brings MDN's documentation and browser compatibility data directly into your editor or IDE, giving your LLM or coding agent access to accurate, up-to-date web platform information.

  • Why Isn’t My 3D View Transition Working?

    CSS-Tricks CSS-Tricks · 26/06/12

    Why isn't my 3D view transition working?! Sunkanmi tackles this frustration and offers an elegant fix for it. Why Isn’t My 3D View Transition Working? originally handwritten and published with...

  • The Impact Of Humanoid Robots On Humanity

    Smashing Magazine Smashing Magazine · 26/06/12

    We have officially moved past the era of humanoid robots as mere public relations stunts. As they become increasingly lifelike, society may soon face profound social, psychological, and ethical challe...

  • For most of my career I designed the cockpit

    Sidebar Sidebar · 26/06/12

    The functional alignment between AI capabilities and human intent.

  • Know your shortcuts

    Sidebar Sidebar · 26/06/12

    An interactive 3D keyboard for learning the keyboard shortcuts of the apps you use every day.

  • Single responsibility, the distorted principle

    Sidebar Sidebar · 26/06/12

    How the Single Responsibility Principle (SRP) is often misinterpreted and how to apply it correctly to avoid overengineering and underengineering.

  • Boneyard: skeleton screens for your UI

    Sidebar Sidebar · 26/06/12

    Pixel-perfect skeleton loading screens auto-extracted from your real DOM. Zero configuration, zero layout shift.

  • Exploring vs Exploiting

    Sidebar Sidebar · 26/06/12

    The two modes of product discovery.

  • Sketching the Impossible: A 3D Portfolio Built Without a Single 3D Model

    Codrops Codrops · 26/06/11

    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...

  • Discovery vs Delivery

    Sidebar Sidebar · 26/06/11

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

  • The website specification

    Sidebar Sidebar · 26/06/11

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

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

    Sidebar Sidebar · 26/06/11

    Notes from the 2026 WWDC keynote.

  • Building glass for the web

    Sidebar Sidebar · 26/06/11

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

  • UI skills for design engineers

    Sidebar Sidebar · 26/06/11

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

  • 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...

  • 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...

  • 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.

  • 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.

  • 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.

  • 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.

  • 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...

  • 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...

  • 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.

  • 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...

  • 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.

  • 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...

  • 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...

  • 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...

  • 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.

  • Astro Mart: Summer 2026 Collection

    Astro Astro · 26/06/04

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

  • 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...

  • @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.

  • @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...

  • 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...

  • 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.

  • 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.

  • 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.

  • ::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...

  • 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.

  • New in Chrome 149

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

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

  • 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...

  • 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...

  • 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.

  • 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.

  • 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...

  • 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!

  • 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...

  • 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...

  • 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...

  • 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...

  • 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...

  • 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.

  • 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...

  • 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...

  • 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...

  • 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...

  • 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.

  • 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....

  • 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...

  • 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...

  • 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...

  • 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...

  • 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!

  • 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.

  • 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.

  • 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.

  • 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’...

  • 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.

☰