Netlify Background Functions
As quickly as I can:
How to Detect When a Sticky Element Gets Pinned
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.
Little Things on My Personal Site
I updated my personal website the other day. Always a fun project since it's one of the few where it's 100% just me. It's my own personal playground with no
WordPress and Jamstack
I recently moderated a panel at Netlify's virtual Jamstack Conf that included Netlify CEO Matt Biilman and Automattic founder Matt Mullenweg. The whole thing
"Durable"
Looks like the word "durable" is an emerging term in the world of serverless. As I understand it, it's like allowing for state in places you wouldn't normally
Comparing Styling Methods in 2020
Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It's in the context of Next.js, which is somewhat important as Next.js has some
The failed promise of Web Components
Lea has some words:
Our Best Posts on Web Components
A grouping of hand-selected posts from our site about Web Components. We've published a very useful article series from Caleb Williams, so that's here, but also sprinkled in some other informational and link posts on the subject.
The :focus-visible Trick
Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.
Looking at AWS Amplify
AWS Amplify is a collection of tools from AWS to help you build applications.
On the Web Share API
I think the Web Share API is very cool (here's our coverage). In a nutshell, it taps into the native sharing features on whatever platform you're on, if that
Parsel: A tiny, permissive CSS selector parser
If you've ever thought to yourself, gosh, self, I wish I could have an Abstract Syntax Tree (AST) of this CSS selector, Lea has your back.
There's a good reason why experienced devs say "it depends" so often
I feel like Jerod Santo really understood what I was trying to say in Weaved Webs, when I was trying to cover the emerging WordPress ("versus") Jamstack
Some Industry Podcasts
It's called The Clearleft Podcast if you can believe that. It gets into new (at least to me) concepts like Design Ops and Design Sprints, which are loaded
Make Your Own Dev Tool
Amber Wilson on making bookmarklets to help yo-self. She shows off one that injects an accessibility script — I like this approach, as it means you don't have
Some New Icon Sets
I've bookmarked some icon sets lately, partly because I can never find a nice set when I need to. I figured I'd even go the extra mile here and blog them so I
ooooops I guess we’re* full-stack developers now
This is a written version of my talk from Jamstack Conf London 2019.
Web Technologies and Syntax
JavaScript has a (newish) feature called optional chaining. Say I have code like:
Jamstack Conf
Here's an important detail here: It's free!
ztext.js
Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It's reminiscent of
Optimizing CSS for faster page loads
A straightforward post with some perf data from Tomas Pustelnik. It's a good reminder that CSS is a crucial part of thinking web performance, and for a huge
Weaved Webs
There is a bit of an irony with Jamstack.
What is the Value of Browser Diversity?
In 2018, Rachel Nabors made the point that browser diversity is similar to biological ecosystem diversity. There are literal advantages to more diversity.
Form design
A very digestable guide from Geri Reid on building forms. Not the code, but the design and UX principles that should guide the code.
Defining "View Source"
Last time there was a little flurry of activity around the concept of "View Source," I did get the sense that not everyone was on the same page about what
AVIF has landed
Everybody is talking about AVIF today because of Jake's blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web
One Action, Multiple Terminal Windows Running Stuff
Many development environments require running things in a terminal window. npm run start, or whatever. I know my biggest project requires me to be running a
All the Ways to Make a Web Component
This is a neat page that compares a ton of different libraries with web components. One of the things I learned after posting "A Bit on Web Components
Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS
We're living through a weird era where there are tons of JavaScript libraries that were meant to be used as <script> tags that expose available globals.
Using max() for an inner-element max-width
I go into all this in The "Inside" Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is
Stroke Text CSS: The Definitive Guide
Whenever I think of stroked text on the web I think: nope.
Deeper DX
Shawn Wang thinks there are deeper, perhaps more uncomfortable, places to go with developer experience (DX) beyond the surface-level stuff that we recently
A Bit on CI/CD
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Doom Damage Flash on Scroll
The video game Doom famously would flash the screen red when you were hit. Chris Johnson not only took that idea, but incorporated a bunch of the UI from Doom
Comparing Data in Google and Netlify Analytics
Jim Nielsen:
Optimize Images with a GitHub Action
I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and
To grid or not to grid
Sarah Higley does accessibility work and finds that "tables and grids are over-represented in accessibility bugs."
Plyr: CSS Styleable Video Player
I just stumbled across Plyr from Sam Potts, a JavaScript library for styled video players. What struck me about it is that you can list YouTube videos as the
The New CSS-Tricks Video Intro by dina Amin
You know we do video screencasts, right? It's not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing
CSS-Tricks Chronicle XXXIX
Hey gang! I've been fortunate enough to be a guest in a variety of different here, so I thought it was time for another Chronicle post. You know, those
That's Just How I Scroll
How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that's a pretty good indication. You might still have to scrapple
zerodivs.com
Pretty neat little website from Joan Perals, inspired by stuff like Lynn's A Single Div. With multiple hard-stop background-image gradients, you don't need
More Control Over CSS Borders With background-image
You can make a typical CSS border dashed or dotted. For example:
font-weight: 300 considered harmful
Tomáš Janoušek:
HTML for Subheadings and Headings
Let's say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I'd say. What HTML do
JavaScript Fatigue
From Nicholas Zakas' newsletter, on how he avoids JavaScript fatigue:
Warp SVG Online
The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as
Jetpack CRM
About a year ago, Automattic bought up Zero BS CRM. The thinking at the time was that it could be rebranded into the Jetpack suite and, well, that happened.
The Cicada Principle, revisited with CSS variables
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
Friction Logs
I first heard the term "Friction Log" from Suz Hinton back in April on ShopTalk. The idea makes an extreme amount of sense: Use a thing, and write down
The GitHub Profile Trick
Monica Powell shared a really cool trick the other day:
CSS Vocabulary
This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are "selector,"
Bold on Hover... Without the Layout Shift
When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That's because bold text is often larger and takes up more
Apple declined to implement 16 Web APIs in Safari due to privacy concerns
Why? Fingerprinting. Rather than these APIs being used for what they are meant for, they end up being used for gross ad tech. As in, "hey, we don't know
Pausing a GIF with details/summary
Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a
Levels of Fix
On the web, we have the opportunity to do work that fixes things for people. It's fascinating to me how different the scope of those fixes can be.
How to Italicize Text
HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.
Develop, Preview, Test
Guillermo:
On dependency
Rob Weychert:
Irregular-shaped Links with Subgrid
Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That