Front-end developer and writer, writing about web development, including CSS, accessibility, JavaScript, and WordPress.
When you are creating a web component, you may want to expose certain properties to outside styling. For this, custom properties are a great tool. For example, you could set a background color inside of the web component itself, but open it up to outside customization. Additionally, custom properties provide a fallback method, which is a great way to set your own defaults. In the custom elements…
See how I tried not to say Tailwind? Oh wait—oops, did it anyway. A subset of CSS Why would I use a tool that limits the features available to me? I know all of CSS, and I’d like to use it, please. It’s the same reason why I don’t use Bootstrap on every website, it just simply doesn’t fill every use case, nor should it. Tailwind is always going to trail behind CSS. Tailwind is always going to have…
One of my favorite things about web components is the possibilities they open up for styling. Through the shadow DOM, we can have finer control than usual over how an element fits in to a project’s ecosystem. With this, it does require learning how everything works first! We haven’t had anything like this in the web platform before, so it takes a while to get used to. Here’s some things that I…
When I’m using CSS Grid, I’ll often set a grid-template-columns for each breakpoint. Usually, I’m going for something like two columns on mobile, three on tablet, and four on desktop. However, with auto-fit and minmax() , this can happen with a single declaration. I’m always forgetting that this is a possibility! grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); This approach uses…
As I’ve recently gotten into web components, I was surprised to learn about what makes a good web component and what doesn’t. As most of us do, I went into it with a lot of experience with JavaScript frameworks, but web components are fundamentally different and have their own specific purpose. How much should a web component do? Web components ( MDN Docs ) is a term that encompasses a group of…
In the Astro docs, the demo code for adding pagination links is not very accessible. Instead of a list of anchor tags, we should use the nav element and add some structure around the links to communicate what they are. Here’s (approximately) what I’m using on my site instead: <nav class="post-list-pagination" aria-labelledby="post-list-pagination-heading"> <h2 id="post-list-pagination-heading"…
Astro comes with support for paginated collections out of the box, and it’s easy to get it set up. It’s all powered by paginate() . The Astro docs on Routing cover pagination in detail. As I was setting up the template to drive the /posts section of my site, a few questions came up. First page route without number On my site, I wanted to take the index page at /posts and use it as the first page.…
I have a confession: I’ve been getting really into RSS. I’ve been using NetNewsWire, and really like it. It’s so easy to add a new feed, and it syncs my read/unread status across devices. I also like the way that the app looks, it feels like just enough structure to be helpful. Reverse chron One of the best features of RSS is that it’s reverse chron. This is so inconsistently presented across…
I’ve worked on many a project with an existing Stylelint config, and have worked to maintain consistency with the rules of the specific project. That is certainly familiar territory. What I haven’t done is a real deep dive into how I would set up Stylelint from the start, and an exploration of some of the questions that come up when you’re starting fresh. I first started by installing the…
When I migrated my site from Eleventy to Astro, I had a bunch of posts that were still using a filename structure from when my site was on Jekyll. All of my posts were stored in markdown with the date first, then the title slug (like YYYY-MM-DD-title-slug.md ). This kept the files in date order and made it easy to reference when I wrote something. Out of the box with Astro, those dates were being…
As I migrated my site to Astro, one issue that came up was how to handle the flow of metadata when there are multiple types of file formats. Mainly, markdown stores data in a different way from .astro files. It’s really nice to be able to mix and match these, but the pages that are generated are visually similar. So, separating them based on file type seemed wasteful. I tried a couple of…
I enjoy being annoyed, which is why I subscribe to Apple Music. Apple seems to enjoy annoying people, by moving things around and generally not fixing the most confusing parts of the app. A match made in heaven. CarPlay I know, starting this list with CarPlay. We’re already in the weeds. I don’t have an unlimited data plan. Apple Music just does not care. It will start up the radio station I was…
In Astro, you can create your meta tags in whatever way you’d like. It’s really freeform, so getting things set up exactly the way you’d like is rather manual. The difficulty can come from making customizations based on the page that is displaying. In the most basic case, let’s say that you want the site title to be the name of the homepage, and then on every other page you want the page title, a…
My site is now running on the Astro framework. I’ve had my eye on Astro for a long time, and was looking for an excuse to use it. I finally realized that I could just use it for my own site! I assumed that I’d need to be in migration for a little while, and created a branch to handle the switch. However, it went so smoothly, I’m already done. From Eleventy My site previously ran on Eleventy, which…
One of the worst user experience offenses caused by the JavaScript-ification of the web is a broken back button. In this environment, it’s not the browser that fails to take the user back, it’s that developers have taken over control of what “back” means and how it behaves. When it fails, it’s often that either the history state gets messed up, or the previous state wasn't ever entered into the…
I just released the first version of a new package, Scroll Snap Controls . It’s fairly simple, adding next and previous buttons to a container that uses CSS scroll snap. This allows us to provide a neat and tidy layout, shared between mobile and desktop, and still reach users without a way to horizontally scroll. The package is designed for use with elements that horizontally scroll. In order to…
I last wrote about this topic in 2019 , and, well, not a lot has changed since then. However, I left a list of questions at the end of that post, and never returned to answer them. Let’s take a look in a wholistic way, answering those questions along the way. Add block attributes In the block.json file, we want to add at least one new attribute for storing the media file’s ID. Previously, I was…
In WordPress, you can set your homepage to either display a list of the latest posts or a static page. When the static page option is used, you can additionally select a second page on which to display the list of the latest posts. Of course, to select this page, you’ll need to have created a page that you’d like to use. This page will be overtaken by the list of the latest posts, so any content…
There are a lot of pieces that go into making a good website. The design, the content, the UX. Each of these need to come together in harmony to meet users where they are. The piece of this that I'm most interested in, naturally, is the front end development part. This is really where all of the other disciplines meet, and can really make or break a site. To this end, I think that it's a sense of…
Modularity is everywhere. It's React components. It's packages. It's WordPress blocks. The web has been fully modularized. I've done my fair share of adding to this, and while it's really good for organizing code and for project management, it can often be detrimental for users. Especially when used in places where it isn't really needed. External dependencies often make this problem even worse.…
A couple of weeks ago, I pushed out an update to my WordPress theme Halle . I hadn't updated it in a long time, so it was overdue. WordPress had added a banner on the listing, warning that it had been more than 2 years since an update. It was still running just fine, but you know, tech industry and all. I know that I'm "supposed" to test the theme with each major WordPress release and update the…
I have a GitHub repository that contains foundational styles and scripts that I use in other projects. In order to avoid copying and pasting the code, I wanted to include it as an npm dependency. Additionally, I wanted to see if I could avoid sending it to npm, and get it directly from GitHub. Fortunately, you can! From the NPM docs on npm install , GitHub repositories can be installed directly by…
wp-scripts is a great package for building WordPress blocks, as it takes care of the basic build tooling out of the box, getting block development going quickly. However, while using it, I quickly found myself needing to customize the default configuration. For a while, I used some custom commands in the scripts property of package.json, adding additional arguments, but eventually found that…
Of all the exciting things happening with CSS, I think container queries are at the top of the list for me. Browser support is really strong at this point, so while I'd still exercise a bit of caution based on project context, we're entering the phase where we can seriously consider them without fallbacks. What are they? At a high level, container queries make it possible to create totally…
I was on board with theme.json. I wrote a whole post about it last year. However, I think I was confused. I thought that it was the future, where all roads lead. I’ve realized that it’s primarily meant for block themes, even though it isn’t presented this way. The top of the dev page about it reads “WordPress 5.8 comes with a new mechanism to configure the editor.” I took it at its word, and it…
After Scott O’Hara’s suggestion to use the dialog element , I thought that it was time to try it out, see how it works, and what’s different or improved from the way I was approaching dialogs previously. To get yourself acquainted, here’s the MDN docs article about it . Additionally, if you’re looking for a quick, simplified demo, see this demo from Google . Styling My first reaction, naturally,…
If you’re here for the code, skip to Modifying the WordPress navigation markup . The issues Dropdowns are still ubiquitous across the web, and are still in various states of usability. One of the biggest possible issues is with the top level, or parent, menu item. Sometimes they are linked, and sometimes they act as a toggle. When linked, they can easily be missed, as the user is presented with…
When developing a custom WordPress theme for usage with the block editor, there can be an overwhelming amount of possibilities to account for. Countless settings, combinations, and layout conundrums can make it difficult to apply a consistent look and feel, whether it’s to match a brand, or just a casual blog. At its release, the block editor offered few ways of controlling these possibilities.…
When you’re wanting to make something happen after an image has completely loaded, you need an event to attach your script to. This can be a little tricky to get right, but with a combination of event listeners and the image complete attribute, it’s possible. Before I get carried away with this custom approach, I want to call out that a package exists to handle this called imagesLoaded . I haven’t…
Well, well, well, dear reader. I'm back. After leaving my last post on "It's exhausting," I've resumed digging into Eleventy. In fact, if you're reading this, it was generated by Eleventy! Here's what I did between my last post and now: Gave up on tags/categories. That'll fix it! Gave up on Siteleaf. I'll just add posts manually again. Discovered Cloudflare Pages. It allows for static sites to be…
Here we have an element that is using position: absolute , and is not visible when the page loads or by default. In this case, we can rely on visibility to control whether or not the element is visible. As the element is using position: absolute , it doesn't matter if it continues to take up space when its hidden, one of the gotchas of using visibility: hidden . Here, we transition opacity to give…
Update 11/22/21: I have published a follow-up post , where I finally bring this all together. Usually when I write something, it’s because I’ve figured something out, or done something for the first time. But, that’s like 1% of the things that happen. In this case, I thought I’d try out Eleventy, and see about converting my site from Jekyll. After getting stuck on all kinds of weird things, I gave…
I’ve long been interested in design systems, pattern libraries, front end frameworks, and the like. Naturally, for no good reason, I’ve wanted to create one of my own, putting my spin on it and filling it with all of my opinions. Despite a long list of reasons not to, I decided to wade into this project earlier this year. I began listing out all of the components I wanted to create, from buttons…
The time has finally come. I'm going to try and make accessible accordions. This, I know, has been solved by literally so many people. They are in every design system. They litter CodePen. It’s a bit of a goldilocks problem, though. Some of them are too simple, some of them are too complicated. Some of them are, rightly so, very specific. I've made quite a few of them myself, and each time I go to…
I've been intrigued by the role that the web played during the pandemic, so it's high time to reflect on the good and the bad. Naturally, this is my own perspective, and I have little to no hard data to go off of for much of this. The pandemic brought a lot of our lives into alignment, but also created stark contrasts. I am certainly aware of my privilege through this time. Also, I am looking…
I mean, who isn’t!? I wanted to pull at this string a little though, to see what’s there. I've been finding myself setting expectations that are sunnier than they should be for years now, and then I deal with the pain of attempting to deliver on a promise that stretches me too thin. First, people pleasing. I like to say yes, I like to agree, I like to give reassurance. It feels nice in the moment,…
In Gutenberg, several core blocks include the option to insert an inline image. This is not an image float, but rather an image, literally, inline. It works anywhere that RichText is used, so headings, paragraphs, lists, buttons, all include this ability. If used properly, this is fine. It's valid HTML. However, it is an aesthetic disaster. Confusingly, this inline image option is called a…
Measuring web traffic on the web. Yikes. Right now, it seems like we are in a precarious place, increasingly so. With privacy becoming more and more of a household topic, how should we think about collecting analytics in the coming years? (Spoiler alert: I do not have the answer. But, definitely thinking about it.) Previously, attaching Google Analytics to a site seemed like a fairly obvious…
As part of Google’s Lighthouse tool (which is very useful), it gives feedback on how well a site has implemented progressive web app (PWA) features. It’s one of five main measurements, alongside performance and accessibility. Google has championed progressive web apps more than anyone, so it isn’t surprising that the ranking gets this positioning in its own tool. However, how important are they?…
I’ve been making hosting recommendations to clients for a while now, and it’s honestly been a bit of a journey. With so many options, there are a lot of good paths, and some paths that you just have to go down for a while before you really know. It would probably be useful to list those paths, but I’m going to just focus on the path that has been the most sensible to me. Some caveats about this…
I’ve been interested in exploring the practice of product management, as it’s something that I think I do a bits and pieces of in my current role. I think that it’s worth digging in to this, to see if it would be a useful frame for me as I go about my current work, and if it’s something I would like to more intentionally lean into in the future. To start, Wikipedia gives us this definition :…
When I first started working with the block editor, my assumption was that I would need to define a separate set of styles just for the block editor. While this has never been the guidance from core, I was resistant to the idea that I could enqueue my existing editor stylesheet (from the classic editor) and everything would just work. However, now that I’ve revisited this, I may have been wrong!…
Alternate title: “Upgrade” Ubuntu from 14.04 to 18.04 by just starting over with a fresh droplet because that’s far far easier than actually upgrading. Gather ‘round kids, story time. We begin with my old droplet. There, I was running Certbot to enable HTTPS. It worked beautifully, was really easy to set up, handled renewals quietly, it was great… until a couple of weeks ago when I received an…
Why was this so complicated? So much of developing with Gutenberg is simply finding all of the necessary bits of information to bring it all together. The official documentation is a little sparse on the RadioControl front. It seems directed more towards the core developers. Which, is fine, but I think it’s really cool and want to use it too. The first question: how do we get this component added…
I definitely knew about Docker before this, but I’d never really started from the beginning. Fair warning, most of this is going to essentially be a stream of consciousness as I attempt to set up Docker for local WordPress development. There are better guides out there, but I wanted to capture some of the questions or uncertainty that I had throughout, possibly that others haven’t answered or…
The Contract for the Web that Tim Berners-Lee put forth last month has been bouncing around the web. Principle 7 of the contract states that citizens should “Be creators and collaborators on the Web.” It was the only principle that jumped out at me, I think because “creator” is just one of those words right now. What does it mean? It’s been heavily diluted, applied to just about everybody. Post…
About six months ago, I made the move from developer to developer/manager. It wasn’t the typical clean break, as the role is still actively involved in doing some development work. I’m on a smaller team, so this arrangement works well and makes sense. Plus, for me, I’m only about five and a half years into my career, so hanging up my developer hat completely seemed crazy. Anyway, the important…
I came across this article recently that speaks about dignity and the internet. I thought that it was an interesting take on the issue, and shows how complex this is. The Internet Can Make Us Feel Awful. It Doesn't Have to Be That Way (time.com) One issue that I have with the article is the use of “the internet” to really mean “popular social media.” When we look outside of these gamified…
Before I deep dive into this, a quick disclaimer to say that this is merely a thought exercise. Enjoy! I live in a city and I write software for a living, and so I spend quite a bit of time thinking about both. I think that there is a lot of overlap between the two, just looking at them at a high level as complex systems. I am frequently frustrated by the city, as just as much by software. The…
It’s pretty rare that you get to return to a project after six years, but that’s just what I’ve been up to! Even though I’d love to never tell anyone about the mistakes that I made, why not make them useful. Naturally, I’ve gotten much much better at my job since, but these were mistakes that I made when I was still very new. And there are new new people all the time! If you’re just starting out…