John has written articles for professional web developer publications on a variety of topics.
- Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
Feb 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.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
Jan 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.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
Nov 29, 2021 | Log Rocket 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.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
Sep 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 <zombie-profile> element from the previous articles—but requires a few differences.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 <zombie-profile> element from the previous articles—but requires a few differences. - Using Web Components in WordPress is Easier Than You Think
Aug 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.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
Mar 25, 2021 | CSSTricks
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!
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.