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.
Trailing Slashes on URLs: Contentious or Settled?
A fun deep dive from Zach. Do you have an opinion on which you should use?
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
(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
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.
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
Developers Speculating About the Long-Distant Future: 2022
This is a wonderful roundup from Jeremy, who I picture circling January 1, 2022, in red marker on a giant paper calendar back in 2008 and patiently counting
A Chrome Extension for Cloudinary That Helps You Pluck Out Useful Media URLs From Your Library Quickly |
Cloudinary is a host for your digital assets like images and video. If you don't already know them, you should, because you can build it into the asset
SVGcode for Live Tracing Raster Images
A free online tool called SVGcode by Thomas Steiner is capable of an effect called "Live Trace" that converts a raster image into a vector image.
Color Spaces for More Interesting Gradients
Think of color spaces as a physical map where individual colors are points on the map. Gradients walk from one point on the map to the next.
Building a newbie-friendly codebase
Pedro Santos suggests:
Building a Scrollable and Draggable Timeline with GSAP
Here's a super classy demo from Michelle Barker over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It's an interesting
The Optional Chaining Operator, “Modern” Browsers, and My Mom
Jim Nielsen's mom couldn't open a website. Jim worked on confirming the issue and documented how he got to the bottom of it:
Switching Unstaged Changes to a New Branch
Say you're on the wrong Git branch with unstaged changes. There are a few to go about switching unstaged changes to a new branch.
Component Spacing in a Design System
How do you handle component spacing in a design system? Do you add margin directly to the components, or outsource it to another component?
Using the CSS Me Not Bookmarklet
The CSS Me Not bookmarklet lets you see all of the CSS files on a site, notably unused files you might want to prevent from loading.
Mondrian Art in CSS From 5 Coders
I saw some Mondrian Art in CSS going around the other day and figured I'd go looking for others I've seen over the years and round them up.
8 Helpful Accessibility Links for January 2022
Every so often, I accumulated a bunch of links about various things I find interesting. Accessibility is one of them! Here are 8 helpful accessibility links.
A Practical Tip For Using Sass Default Parameters
Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don't provide
Open Source & Sustainability
I don't feel confident operating or maintaining open source. That makes me scared of it, and my fear makes me avoid doing it at all.
Netlify Identity for Jamstack Aiuthentication
Netlify Identity is a robust offering that provides authentication on a Jamstack site. It’s super easy to enable and opens up a bunch of possibilities.
A New Container Query Polyfill That Just Works
There is an easy-to-use CSS container query polyfill now. You essentially conditionally load it and forget about it. Then write spec-compliant container queries code.
Notes on Josh Comeau's Custom CSS Reset
We recently talked with Elad Shechter on his new CSS reset, and shortly after that Josh Comeau blogged his.
Jetpack Features We Love and Use at CSS-Tricks
We use and love Jetpack around here. It's a WordPress plugin that brings a whole suite of functionality to your site ranging from security to marketing with
Should CSS Override Default Browser Styles?
Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults?
CSS-Based Fingerprinting
Fingerprinting is bad. It's a term that refers to building up enough metadata about a user that you can essentially figure out who they are. JavaScript has
Thank You (2021 Edition)
The year has come to a close and it's time again for our end-of-year wrapup. The most important message is this: thank you. (thankyouthankyou)
On Yak Shaving and md-block, a new HTML element for Markdown
Lea Verou made a Web Component for processing Markdown. Looks like there were a couple of others out there already, but I agree with Lea in that this is a
A visual introduction to machine learning
Just the first sentence alone here from Stepanie Yee and Tony Chu is solid:
The surprising behavior of !important in CSS custom property values
Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide
Topological sort
Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you
HTML Sanitizer API
Three cheers for (draft stage) progress on a Sanitizer API! It's gospel that you can't trust user input. And indeed, any app I've ever worked on has dealt
Maybe there kinda is background-opacity?
I was reading Jake's "Cross-fading any two DOM elements is currently impossible" which is a wonderfully nerdy deep dive into how there is no real way to
Faulty logic
Ain't this the truth:
CSS-Tricks Chronicle XLI
Ya know, I used to do one of these posts after making a few podcast appearances I hadn't had a chance to link up yet, so I could share them. As fate would
File Scaffolding With Hygen
I read a recent Smashing Magazine post that included a recommendation for Hygen. I just happen to be doing quite a bit of new UI work in a Next.js app and the
Ship a Full-Stack App in Days with AWS Amplify Studio
Amazon has a vision with AWS Amplify. First, a premise:
Shadow Palette Generator
Josh's Shadow Palette Generator is a fantastic tool. The premise is that box-shadow pretty much always looks better when there are multiple layered shadows
The Invisible JavaScript Backdoor
An interesting (scary) trick of an nearly undetectable exploit. Wolfgang Ettlinger:
Spicy Sections
What if HTML had "tabs"? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of "Tabvengers" from OpenUI, on
Low framerate in Safari on M1 Mac
John James Jacoby:
A Look at the Cloudinary WordPress Plugin
Cloudinary (the media hosting and optimization service) has a brand new version (v3) of its WordPress plugin that has really nailed it. First, a high-level
Diagonal Stripes Wipe Animation
I was playing this game on Apple Arcade the other day called wurdweb. It's a fun little game! Little touches like the little shape dudes that walk around the
When is it "Right" to Reach for contain and will-change in CSS?
I've got some blind spots in CSS-related performance things. One example is the will-change property. It's a good name. You're telling the browser some
Which SVG technique performs best for way too many icons?
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge
Coding Font Game
A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way
The Gap (Design Engineering)
Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey)
Jamstack TV
That's the name of Netlify's YouTube Channel. Love that. I linked up Rich's talk the other day, which was a part of this past JamstackConf, but now all the
Other Looks at the Conditional Border Radius Trick
Remember when Ahmad Shadeed wrote about that border-radius "toggle" he found in Facebook's CSS? It was interesting! I covered it. A few weeks after that surge
Semantic menu context
Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a
Don't Snore on CORS
Whatever, I just needed a title. Everyone's favorite web security feature has crossed my desk a bunch of times lately and I always feel like that is a sign I
Detecting Specific Text Input with HTML and CSS
Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
Introducing Svelte, and Comparing Svelte with React and Vue
Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it's here to crown Svelte the winner all the way
Fixing the Drift in Shape Rotations
Steve Ruiz calls this post an "extra-obscure edition of design tool micro-UX," but I find it fascinating! If you select a bunch of elements in a design tool,
Responsible JavaScript
High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a
Proxying Third-Party JavaScript as First-Party JavaScript (and the Potential Effect on Analytics)
First, check out how incredibly easy it is to write a Cloudflare Worker to proxy another URL: