John has written articles for professional web developer publications on a variety of topics.
-
ray() A CSS Tricks Almanac Article
November 4, 2025 |
Like Ray, your old buddy from the neighborhood, the CSS ray() function points you toward anime treasures… well… animated treasures… well… offset treasures… Okay, maybe it’s not like your friend Ray after all.
The ray() function is used in combination with the offset-path property and creates a line segment, a ray. It lets you move or place an element using polar coordinates, i.e. coordinates based on a distance and an angle instead of Cartesian coordinates, where the X coordinate is on the horizontal axis and the Y coordinate is on the vertical axis.
-
Replace Your Animated GIFs with SVGs
September 15, 2025 | Frontend Masters Blog
No one loves dancing hamster GIFs more than I do. But all those animated frames can add up to files so large you don’t even see the dancing hamster. Your other tab has already loaded and you’ve followed the dopamine hits down another social media rabbit hole.
There’s an alternative for those giant animated GIFs: animated SVGs.
-
polygon() A CSS Tricks Almanac Article
July 24, 2025 | CSS Tricks
The CSS polygon() function allows you to create any type of polygon to use in the shape-outside, clip-path, and offset-path properties.
-
inset() A CSS Tricks Almanac Article
July 15, 2025 | CSS Tricks
The CSS inset() function allows you to create rectangles to use with the shape-outside, clip-path, and offset-path properties.
-
circle() A CSS Tricks Almanac Article
July 15, 2025 | CSS Tricks
The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path properties.
-
xywh() A CSS Tricks Almanac Article
July 15, 2025 | CSS Tricks
The CSS xywh() function allows you to create rectangles by setting the upper-left corner point and the width and height for use in the shape-outside, clip-path, and offset-path properties.
-
ellipse() A CSS Tricks Almanac Article
July 15, 2025 | CSS Tricks
The CSS ellipse() function allows you to create ellipses when used with the shape-outside, clip-path, and offset-path properties.
-
path() A CSS Tricks Almanac Article
June 18, 2025 | CSS Tricks
The CSS path() function enables us to create complex paths, polygons and other shapes using SVG path command syntax.
-
shape() A CSS Tricks Almanac Article
June 10, 2025 | CSS Tricks
The CSS shape() function enables us to more easily create complex paths, polygons and other shapes using a more human readable syntax using lines, arcs, and curves. It also allows much greater flexibility and responsiveness in the use of units than the CSS path() function.
-
This Isn’t Supposed to Happen: Troubleshooting the Impossible
May 14, 2025 | CSS Tricks
I recently rebuilt my portfolio. After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all…
-
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)
May 8, 2025 | CSS Tricks
What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
-
Lesser Known Uses Of Better Known Attributes
January 8, 2025 | Smashing Magazine
HTML attributes are like little instructions that we add to the markup of elements to make them do certain things or behave in certain ways. For example, most of us know that the target attribute with a value of _blank opens the link in a new tab or window. But did you know that you can use it on the form element, too? John Rhea presents several lesser-known uses for common HTML attributes.
-
Pop(over) the Balloons
July 25, 2024 | CSS Tricks
I’ve always been fascinated with how much we can do with just HTML and CSS. The new interactive features of the Popover API are yet another example of just how far we can get with those two languages alone. You may have seen other tutorials out there showing off what the Popover API can do, but this is more of a beating-it-mercilessly-into-submission kind of article. We’ll add a little more pop music to the mix, like with balloons… some literal “pop” if you will. What I’ve done is make a game — using only HTML and CSS, of course — leaning on the Popover API.
-
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
February 28, 2022 | CSS Tricks
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 pseudo-classes that, like good friends, willingly smell your possibly halitotic breath before you go talk to that potential love interest.
-
Context-Aware Web Components Are Easier Than You Think
January 21, 2022 | CSS Tricks
Another aspect of web components that we haven’t talked about yet is that a JavaScript function is called whenever a web component is added or removed from a page. These lifecycle callbacks can be used for many things, including making an element aware of its context.
-
Credit card form web component tutorial
November 29, 2021 | LogRocket Blog
As developers, we so often need to build forms that take credit card information, constantly repeating that code on each website, modifying it to fit into a PHP site here, a React site there, and into the strange custom-built content management system that can’t go down for a second. Well, there’s a way to wrap all the separate credit card separate fields into one single field, add its own error correction, and use it seamlessly across every site in your portfolio, no modifications needed. We can build it using web components.
-
Supercharging Built-In Elements With Web Components “is” Easier Than You Think
September 3, 2021 | CSS Tricks
We’ve already discussed how creating web components is easier than you think, but there’s another aspect of the specification that we haven’t discussed yet and it’s a way to customize (nay, supercharge) a built-in element. It’s similar to creating fully custom or “autonomous” elements — like the element from the previous articles—but requires a few differences.
-
Using Web Components in WordPress is Easier Than You Think
August 12, 2021 | CSS Tricks
Now that we’ve seen that web components and interactive web components are both easier than you think, let’s take a look at adding them to a content management system, namely WordPress.
-
Interactive Web Components Are Easier Than You Think
March 25, 2021 | CSS Tricks
Add animations and interactivity to web components and make them even more useful.
-
Web Components Are Easier Than You Think
March 8, 2021 | CSS Tricks
When I’d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I’m from 1950), but it always seemed complicated and excessive. A thousand lines of JavaScript to save four lines of HTML. The speaker would inevitably either gloss over the oodles of JavaScript to get it working or they’d go into excruciating detail and my eyes would glaze over as I thought about whether my per diem covered snacks. But I’ve learned recently: web components are a lot easier than I remember.
-
Copyediting with Semantic HTML
November 18, 2020 | CSS Tricks
Tracking changes is a quintessential copyediting feature for comparing versions of content. While we’re used to tracking changes in a word processing document, we actually have HTML elements capable of that. There are a lot of elements that we can use for this process. The main ones we’ll look at are <del>, <ins>and <mark>. But, as we’ll see, pairing them with other elements — including <u>, <aside> and custom markup — we can get the same sort of visual tracking changes features as something like Word, Google Docs, or even WordPress.
-
How Film School Helped Me Make Better User Experiences
November 12, 2020 | CSS Tricks
Recently, I finished a sixty-day sprint where I posted hand-coded zombie themed CSS animation every day. I learned a lot, but it also took me back to film school and reminded me of so many things I learned about storytelling, cinematography, and art.
-
Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS
September 16, 2020 | CSS Tricks
I started this project to end on August 1st, 2020, coinciding with the publication of a book I wrote featuring CSS animation, humor, and zombies — because, obviously, zombies will destroy the world if you don’t brandish your web skills and stop the apocalypse. Nothing puts the hurt on the horde like a HTML element on the move!
-
Quoting in HTML: Quotations, Citations, and Blockquotes
December 10, 2019 | CSS Tricks
It’s all too common to see the incorrect HTML used for quotes in markup. In this article, let’s dig into all this, looking at different situations and different HTML tags to handle those situations.
-
Great Expectations: Using Story Principles to Anticipate What Your User Expects
October 21, 2019 | Smashing Magazine
When someone reads a story, they have certain expectations about how that story will unfold whether they know how to articulate them or not. The same is true about users coming to our websites. We can pull principles from storytelling to help us meet and, hopefully, exceed those user expectations.
-
It’s a trap-ezoid: CSS Shapes aren’t what you’d expect. They’re better!
October 21, 2019 | LogRocket Blog
When I first heard of CSS Shapes, I fell into the trap of expecting a drawing API. I thought it’d be a CSS version of SVG for doing crazy, single div, CSS-only drawings, but that’s not what CSS Shapes are — and I think we’re better for it.
-
The User’s Perspective: Using Story Structure To Stand In Your User’s Shoes
April 16, 2019 | Smashing Magazine
Story structure can be the lens through which we view websites. It helps us step into the user’s shoes and understand where and how users interact with our websites. We, web professionals and site owners, are characters in their story and it’s about time we acted like it.
-
Splicing HTML’s DNA With CSS Attribute Selectors
October 23, 2018 | Smashing Magazine
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize.
-
Once Upon A Time: Using Story Structure For Better Engagement
June 11, 2018 | Smashing Magazine
From campfires to books to advertisements to film, stories have a power over us that no other human invention can wield. They calm us, thrill us, enthrall us and send us running back to the box office for another hit.
