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
Custom Properties as State
Here's a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for "seasonal" colors (e.g. spring is
Cloudinary Tricks for Video
Creating video is time consuming. A well-made 5-minute video can take hours to plan, record, and edit — and that's before we start talking about
The Rules of Margin Collapse
Josh Comeau covers the concept of margin collapsing:
Simulating Drop Shadows with the CSS Paint API
Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers. Shadows are enduringly popular, and
Create a Tag Cloud with some Simple CSS and even Simpler JavaScript
I’ve always liked tag clouds. I like the UX of seeing what tags are most popular on a website by seeing the relative font size of the tags, popular tags being
A Utility Class for Covering Elements
Big ol' same to Michelle Barker here:
Integrating TypeScript with Svelte
Svelte is one of the newer JavaScript frameworks and it’s rapidly rising in popularity. It’s a template-based framework, but one which allows for arbitrary
Continuous Performance Analysis with Lighthouse CI and GitHub Actions
Lighthouse is a free and open-source tool for assessing your website’s performance, accessibility, progressive web app metrics, SEO, and more. The easiest way
"Yes or No?"
Sara Soueidan digs into this HTML/UX situation. "Yes" or "no" is a boolean situation. A checkbox represents this: it's either on or off (uh, mostly). But is a
Recognizing Constraints
There’s a “C” word in web development that we don’t give enough attention to. No, I’m not talking about “continuous integration”, or even “CSS”. The “C” word
Retrospective on Fela
I really appreciate a real-world walkthrough of a technology. Not only in what that technology does, but why it was chosen and how it worked for a team.
Optimizing Image Depth
Something I learned (or, I guess, re-learned) this year is how important it is to pay close attention to the bit depth of images. Way back in the day, we used
Change vs. Inertia
Recently, I've become more deeply aware of the inherent tension between change and inertia, as it applies to the evolution and use of web technologies. These
What Makes CSS Hard To Master
Tim Severien:
I learned to love the Same-Origin Policy
I spent a good chunk of my work life this year trying (in collaboration with the amazing Noam Rosenthal) to standardize a new web platform feature: a way to
What's Old is New
This year, I learned a lot about how "old" tricks can solve a lot of modern problems if you use the right tools. Following the growth of Jamstack-style
25 Years of JavaScript & 25 Free Courses
Pluralsight is giving away 25 courses on JavaScript for free to celebrate JavaScript's 25th birthday. It's no cheapie, either. The courses range from getting
Write Code, Get Confetti
This year I learned about the canvas-confetti npm package. It is a simple JavaScript package that injects a (virtual, <canvas>) confetti explosion into
Three Ways to Distinguish a Site From the Norm
In an age where so much web design is already neat, clean, and simple, I can think of three ways to distinguish your site from the norm:
Learning to Simplify
When I first got this writing prompt, my mind immediately started thinking stuff like, “What tech have I learned this year?” But this post isn’t really about
Slow Movement
There was a time when I felt overwhelmed by how fast the web developed. It seemed like not a single day passed without a new plugin, framework, technique, or
How to Use the Locomotive Scroll for all Kinds of Scrolling Effects
I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of
The Power of Lampshading
I enjoyed this blog post from Shawn. Lampshading is apparently the idea of a TV show calling attention to some weakness (like an implausible plot point) so
What’s New in WCAG 2.1: Label in Name
WCAG 2.1 Recommendations rolled out in 2018. It’s been a couple years now and there are some new Success Criterion. In this article, I will discuss Label in
Hell Yes! CSS!
Speaking of cool CSS stuff you can buy, Julia Evans' zine Hell Yes! CSS! is hot off the presses. A "zine" being 28 pages of "short, informative, and fun
Give Users Control: The Media Session API
Here’s a scenario. You start a banging Kendrick Lamar track in one of your many open browser tabs. You’re loving it, but someone walks into your space and you
HTTP Archive’s Annual State of the Web Report
The HTTP Archive looked at more than 7 million websites and compiled their annual report detailing how the sites were built. And there’s an enormous wealth of
Let’s Create a Lightweight Native Event Bus in JavaScript
An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify
Why I love Tailwind
Max Stoiber wrote some interesting notes about why he loves Tailwind. (Max created styled-components, so he has some skin in the styling methodology game.)
Unconventional Stock Image Sources
This year, I learned that there is a wide world of free stock imagery available beyond Unsplash and Pexels. You see, I’ve been working on designing WordPress
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode
Black isn’t always slimming.
2020 was not a good year for learning
There, I said it.