Next.js on Netlify
If you want to put Next.js on Netlify, here's a 5 minute tutorial¹. One of the many strengths of Next.js is that it can do server-side rendering (SSR) with a
The Things I Add to Tailwind CSS Right Out of the Box
In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. I’ll share these with you, but
Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
In this week's roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to
Hiding Content Responsibly
We've covered the idea of hiding things in CSS many times here, the most recent post being Marko Ilic's "Comparing Various Ways to Hide Things in CSS" which
React Component Tests for Humans
React component tests should be interesting, straightforward, and easy for a human to build and maintain.
What's the Backup Plan for Your WordPress Site?
Of all the reasons we love and use Jetpack for CSS-Tricks—a poster child WordPress site—is that we can sleep easy at night knowing we have real-time backups
Getting Deep Into Shadows
Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add
Clipping Scrollable Areas On The inline-start Side
On a default left-to-right web page, "hanging" an element off the right side of the page (e.g. position: absolute; right: -100px;) triggers a horizontal
Three Ways to Blob with CSS and SVG
Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background
Mistakes I've Made as an Engineering Manager
I’ve been a manager for many years at companies of different scale. Through these experiences, I’ve done my share of learning, and made some mistakes along
Barebones CSS for Fluid Images
Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I'd say, is what you'd expect, but things get weird when srcset
Let’s Create a Custom Audio Player
HTML has a built-in native audio player interface that we get simply using the <audio> element. Point it to a sound file and that’s all there is to it.
Use CSS Clamp to create a more flexible wrapper utility
I like Andy's idea here:
How to Create a Shrinking Header on Scroll Without JavaScript
Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself,
Beautiful accessibility with Floating Focus
Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element.
Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos
In this week's roundup, WebKit's prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to
Don’t put pointer-events: none on form labels
Bruce Lawson with the tip of the day, warning against the use of pointer-events: none on forms labels. We know that pointer-events is used to change how
WordPress 5.7: Big ol' jQuery Update
WordPress core is making the jump from jQuery 1.12.4 to jQuery 3.5.1! This is a big deal for lots of reasons — like modern features, better DX, and security
Progressive Web Apps in 2021
Maximiliano Firtman has a look at PWAs this year, including trying to get a bead on how widespread they are:
How to Build a GraphQL API for Text Analytics with Python, Flask and Fauna
GraphQL is a query language and server-side runtime environment for building APIs. It can also be considered as the syntax that you write in order to
iframe feedback
What if an <iframe> had within it another <iframe> of the exact same source? Inception, as they say. Baptise Crespy does this all-important
:focus-visible Support Comes to Firefox
Look at that! The :focus-visible pseudo-selector is now supported in Firefox, as of version 85 which shipped yesterday. I had to rush over to the MDN Docs
HTML Video Sources Should Be Responsive
Scott Jehl doesn't mince words here:
A table with both a sticky header and a sticky first column
We've covered that individual <table> cells, <th> and <td> can be position: sticky. It's pretty easy to make the header of a table stick to
Nested Media Queries
We don't have "regular" nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn't mention
(Jay Freestone's) Front-end predictions for 2021
React framework maturity, early container queries, WASM adoption, and monoliths. I'll take all four, please. Not feeling like a particularly front-end-y? Jay
Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support
Hey, we're back with weekly updates about the browser landscape from Šime Vidas.
Lazy Load Routes in Vue with webpack Dynamic Comments
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want
Open Web Docs
Robert Nyman:
"Cancelable" Smooth Scrolling
Here's the situation: Your site offers a "scroll back to top" button, and you've implemented smooth scrolling. As the page scrolls back to the top, users see
Figma Crash Course
Totally free course from Pablo Stanley. Can't beat that.
No-Jank CSS Stripes
My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe by using the same
Bulletproof flag components
A clever use of CSS grid from Jay Freestone to accomplish a particular variation of the media object design pattern (where the image is centered with the
Embedding an Interactive Analytics Component with Cumul.io and Any Web Framework
In this article, we explain how to build an integrated and interactive data visualization layer into an application with Cumul.io. To do so, we’ve built a
GreenSock ScrollTrigger
High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions,
A Whole Website in a Single HTML File
I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except
The Holy Grail Layout with CSS Grid
How to build a very common layout with CSS grid. Header on the top, footer on the bottom. Two columns, sidebar and main content. This one has navigation above the main content but within that same column.
Re-Creating the Porky Pig Animation from Looney Tunes in CSS
You know, Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. We’ll get there, but first we need to cover some CSS concepts.
Monorepo
I'm not exactly a large-scale DevOps guy, but I can tell ya we've been moving back toward a monorepo at CodePen and it's rife with advantages over a system
Tech Stacks and Website Longevity
Steren Giannini in "My stack will outlive yours":
New in Chrome 88: aspect-ratio
And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of
Life with ESM
ESM, meaning ES Modules, meaning JavaScript Modules. Like, import and friends.
Netlify Edge Handlers
Netlify Edge Handlers are in Early Access (you can request it), but they are super cool and I think they are worth wrapping your brain around now. I think
AnimXYZ
There are quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like "bounce" or "slide-right" and it'll...
State of JavaScript 2020
We rounded up a bunch of published 2020 annual reports right before the year ended and compiled them into a big ol' list. The end of the list called out a
On Auto-Generated Atomic CSS
Robin Weser's "The Shorthand-Longhand Problem in Atomic CSS" in an interesting journey through a tricky problem. The point is that when you take on the job of
3 Approaches to Integrate React with Custom Elements
In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense:
Proper Tabbing to Interactive Elements in Firefox on macOS
I just had to debug an issue with focusable elements in Firefox. Someone reported to me that when tabbing to a certain element within a CodePen embed, it shot
Building an Ethereum app using Redwood.js and Fauna
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
How to Make GraphQL and DynamoDB Play Nicely Together
Serverless, GraphQL, and DynamoDB are a powerful combination for building websites. The first two are well-loved, but DynamoDB is often misunderstood or
Dynamic, Conditional Imports
With ES Modules, you can natively import other JavaScript. Like confetti, duh:
Fixing Smooth Scrolling with Find-on-Page
Back when we released the v17 design (we're on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like
Painters Tape and Fault Tolerance
One of my favorite things in the world is painters tape (also called masking tape). It seems like something silly: some tape you put on a wall when you’re painting to avoid getting paint on the wall. The tape doesn’t have a strong adhesive, so it can be pulled back off the wall without damaging it.
`aspect-ratio` is going to deprecate FitVids
Jen was just tweetin' about how the latest Safari Technical Preview has aspect-ratio. Looks like Chrome and Firefox both have it behind a flag, so with Safari
Svelte and Spring Animations
Spring animations are a wonderful way to make UI interactions come to life. Rather than merely changing a property at a constant rate over a period of time,
Creating CSS APIs without JavaScript With the datasette-css-properties plugin
Simon Willison has a project called Datasette, an open source multi-tool for exploring and publishing data. I'm not sure I'm qualified to explain it, but it's
Win a Copy of Zell Liew's Learn JavaScript Course
Zell Liew is giving away 10 free copies of his Learn JavaScript course, and entering the giveaway is pretty easy: sign up for his newsletter. I've personally
Styling Code In and Out of Blocks
There is a <code> tag in HTML. I literally just used it to wrap that tag in the previous sentence — so meta. It is an inline-by-default element that
Whack-a-Mole: The CSS Edition
We’ve seen the checkbox hack and how it can be used to build a complete state machine in CSS. Today, we’ll take that line of thought a step further and build
Some Recent Videos About Websites That Are Pretty Good
Here's a little hodgepodge of videos I've recently bookmarked (and watched). I couldn't decide if each one of them should be a separate blog post or if I