John has written articles for professional web developer publications on a variety of topics.
- 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!
May 10, 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
Apr 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
Oct 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
Jun 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.