Delicious

Dropdowns, menus, tooltips, comboboxes, toasts — the popover attribute will make building a large variety of UI components easier. The popover attribute can be used on any HTML element, so you have…

Fetching the latest YouTube videos for your website doesn't require a backend server or even API keys. Fetch the latest videos statically with Astro.

Combine scroll-driven animations and style queries to trigger an animation sequence powered only by CSS.

Test sites on multiple devices in one tab. Improve development, UI/UX, & QA with live previews.

Tired of juggling Git and YAML to update your Next.js, Astro, Hugo or Nuxt website? Make it easy on you and your team, get a user-friendly CMS running straight on top of GitHub.

What is the average size of JavaScript code downloaded per website? Fuck around and find out!

🌀 Restore scroll position of elements on page navigation - epicweb-dev/restore-scroll

Build emails with a delightful DX

What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has. Example of a Quantity Query Situation Imagine…

I just wrote about the dialog element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, conn…

The functional :has() CSS pseudo class is available in all evergreen browsers.

Tips and tricks to get the transition you want

A landing page that covers current trends in design for 2024

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples of where they could come in handy. I will create a mini-series out of this and for the first part, let’s start off with relative length units based on font.

A headless custom element library.

Comparing two identically designed websites, their weight, amount of HTML and CSS, rendering speed, and best practices.

A solution! For many months I have been trying to find a decent solution to rounded gradient borders that allow a semi-transparent or blurred main background. Finally, I came across this: https://forum.freecodecamp.org/t/how-to-make-a-css-border-gradient-with-transparent-background/571903/2 My pen https://codepen.io/benfrain/pen/KKEemKd is a fork of Lasse’s original from that post. I’ve not seen this approach before, and I can take no...

CSSformalize is a groundbreaking CSS framework designed to simplify and speed up the customization of your system HTML forms. Create unique form styles in a few clicks and enhance your design efficiency.

Build an off-canvas menu using web components and HTML’s element to enhance user experience and accessibility.

Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties.

Towards better tools for user-facing customizations

Reusable components, tech demos, and a wealth of in depth information on Astro's view transitions

I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see …