Building Interactive Figma Widgets
Figma has always encouraged collaboration between developers and designers. It strives on an endless treasury of community-made plugins.
Overlapping Bar Charts
As the name suggests, overlapping charts visualize two different sets of data in a single diagram. The idea is that the overlapping bars allow us to compare
Hacking CSS Animation State and Playback Time
In a nutshell, my project is nothing but a carefully scripted long CSS animation. Plus a few instances of the checkbox hack.
Flutter For Front-End Web Developers
I started as a front-end web developer and then became a Flutter developer. I think there were some concepts that helped me adopt Flutter easier. There were
iShadeed's Container Queries Lab
Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns.
Interpolating Numeric CSS Variables
We can make variables in CSS pretty easily:
Removing jQuery from GOV.UK
The GOV.UK team recently published "How and why we removed jQuery from GOV.UK". This was an insightful look at how an organization can assess its tooling and
When Do You Use CSS Columns?
That ain't rhetorical: I'm really interested in finding great use cases for CSS multi-column layouts.
Zooming Images in a Grid Layout
Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.
How I Added Scroll Snapping To My Twitter Timeline
CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation.
Actually, the San Francisco Typeface Does Ship as a Variable Font
Apple unveiled an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font's variations, explaining
Implicit Grids, Repeatable Layout Patterns, and Danglers
Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content
Scroll Shadows? Pure CSS Parallax? Game Back On.
Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with
Recreating MDN's Truncated Text Effect
It's no secret that MDN rolled out a new design back in March. It's gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those
Roundup of Recent Document Outline Chatter
It’s not everyday that HTML headings are the topic de jour, but my folder of saved links is accumulating articles about the recently merged removal of the
Logical Properties for Useful Shorthands
Michelle Barker with my favorite sorta blog post: short, practical, and leaves you with a valuable nugget for your time. Here, she gets into logical property
How stroke-dasharray Patterns Work
Say you have a line in SVG:
In Praise of Shadows
Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and
Technical Writing for Developers
HTML, CSS, JavaScript, Python, PHP, C++, Dart — there are so many programming languages out there and you may even be totally fluent in several of them! But
Collective Nouns for the Web
Melanie Sumner has this super-specific collection of web-related nouns for describing a group or set of something. You know how there's a school or fish or a
Help Shape the Future of CSS-Tricks!
Head's up! The survey closed on July 12, 2022. We got tons of responses — thanks to everyone for helping us out!
Conditionally Styling Selected Elements in a Grid Container
Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square
De-Mystifying IndieWeb on a WordPress Site
Well, sheesh. I opened a little can of worms when sharing Miriam's "Am I on the IndieWeb yet?" with a short post bemoaning my own trouble getting on the
Useful Tools for Visualizing Databases on a Budget
A diagram is a graphical representation of information that depicts the structure, relationship, or operation of anything. Diagrams enable your audience to
Am I on the IndieWeb yet?
Can't smash the Like button hard enough for what Miriam Suzanne has to say on the challenging technical hurdles of implementing Webmentions:
How to Create Block Theme Patterns in WordPress 6.0
Block patterns, also frequently referred to as sections, were introduced in WordPress 5.5 to allow users to build and share predefined block layouts in the
SPAs, Shared Element Transitions, and Re-Evaluating Technology
Nolan Lawson sparked some discussion when he described a noticeable shift away from single-page applications (SPAs):
Just How Long Should Alt Text Be?
I teach a class over at the local college here in Long Beach and a majority of the content is hosted on the Canvas LMS so students can access it online. And,
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background
Mastering SVG's stroke-miterlimit Attribute
So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find
First Look At The CSS object-view-box Property
Ahmad Shadeed — doing what he always does so well — provides an early look at the object-view-box property, something he describes as a native way to crop an
Verevolf
Zeldman:
An Interactive Starry Backdrop for Content
I was fortunate last year to get approached by Shawn Wang (swyx) about doing some work for Temporal. The idea was to cast my creative eye over what was on the
Syntax Highlighting (and More!) With Prism on a Static Site
This post will show you how to implement syntax highlighting on a Next.js blog with the popular Prism.js library.
Cool Hover Effects That Use Background Properties
A while ago, Geoff wrote an article about a cool hover effect. The effect relies on a combination of CSS pseudo-elements, transforms, and transitions. A lot
Maximize Your Front-End Test Locators
Front-end testing is awesome. We can write code, click on things like a user would, then make assertions. In this post, we'll go over strong tests.
Adding Tailwind CSS to New and Existing WordPress Themes
Nothing has had more of an impact on my productivity than adding Tailwind CSS to my workflow. It isn't even close. Here is how to set that up.
Making Mermaid Diagrams in Markdown
While Mermaid diagrams are not Markdown-exclusive, they is Markdown-inspired. using the same markup abstractions.
Add a CSS Lens Flare to Photos for a Bright Touch
But what if we wanted to apply the same lens flare look without the use of photo editing tools? We can create a CSS lens flare to add a cinematic touch to our
Adding CDN Caching to a Vite Build
Content delivery networks, or CDNs, allow you to improve the delivery of your website’s static resources, most notably, with CDN caching. They do this by
Tricks to Cut Corners Using CSS Mask and Clip-Path Properties
We recently covered creating fancy borders with CSS, and now we are going to cut the corners with gradients and CSS masks!
6 Useful Bookmarklets to Boost Web Development
I’d like to show you some hacks to aid your web development workflow and how to convert those hacks into time-saving bookmarklets.
Write HTML, the HTML Way (Not the XHTML Way)
You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way.
Build Membership Businesses with Memberful
What would your business be like if you sold memberships? It might be more than fun to think about, in fact, it might just be transformative. With membership,
7 Fresh Links on Performance For March 2022
I have a handful of good links to articles about performance that are burning a hole in my bookmarks folder, and wanna drop them here to share.
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
We’ve discussed a lot about the internals of using CSS in this ongoing series on web components, but there are a few special pseudo-elements and
Trailing Slashes on URLs: Contentious or Settled?
A fun deep dive from Zach. Do you have an opinion on which you should use?
When to Avoid the text-decoration Shorthand Property
In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and
Manuel Matuzovic's CSS Specificity Demo
If you're looking for a primer on CSS specificity, we've got that. And if you're trying to get ahead of the game, you should be aware of CSS Cascade Layers as
My white whale: A use case for will-change
The will-change property landed in major browsers in August 2015, and I've been on the lookout for when to use it ever since.
Before I go: When it comes to complaining about web browsers
That's a damn one-two punch from Dave. He goes for the ultimate clickbait title¹, then follows up with a pile of epic advice for us all. If you want web
Reliably Send an HTTP Request as a User Leaves a Page
On several occasions, I’ve needed to send off an HTTP request with some data to log when a user does something like navigate to a different page or submit a
(Jay Freestone’s) Front-End Predictions for 2022
I linked to Jay's front-end predictions last year and I think they panned out pretty well.
Top Things You Didn’t Know You Could Do With Netlify CLI
First things first, if you didn't know Netlify had a CLI, they do. One of my favorite things about it running the command netlify dev on nearly any
Subsetting Font Awesome to Improve Performance
By subsetting Font Awesome, we can remove any unused glyphs from the font files that it provides to reduce the overall file size.
Add-to-Calendar Button UI Widget
A useful little UI widget. Click the add-to-calendar button, get a list of calendar apps, the user selects which one, and they get a download.
An Auto-Filling CSS Grid With Max Columns of a Minimum Size
Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world.
Why are hyperlinks blue?
The decision to make hyperlinks blue in Mosaic, and the reason why we see it happening in Cello at the same time, is that by 1993, blue was becoming the
Getting Started With the File System Access API
The File System Access API is a web API that allows read and write access to a user's local files. It unlocks new capabilities to build powerful web
Neat Optional Custom Property Values Trick
Imagine a multi-value CSS property like transform and you don't want every value applied. You might think of CSS optional custom property values.
