Menu

Full Bleed

October 15th, 2020

We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques. Perhaps my favorite is this little utility class: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } That works…

Run Gulp as You Open a VS Code Project

October 12th, 2020

When I open my local project for this very site, there is a 100% chance that I need to run this command before anything else: gulp. I set that up fresh less than a year ago so I’m on the latest-and-greatest stuff and have my workflow just how I like it. I did a few…

Looking at AWS Amplify

October 6th, 2020

AWS Amplify is a collection of tools from AWS to help you build applications. Allow me to set the stage here to try to make that as clear as I know-how. I have a friend (true story) who wants to build an app centered around physical training. His wife is a physical trainer, and they…

On the Web Share API

October 5th, 2020

I think the Web Share API is very cool. In a nutshell, it taps into the native sharing features on whatever platform you’re on if that platform supports it. I like this: Web Share API activated on iOS A heck of a lot more than these things: This is just an image, don’t try to…

Styling Complex Labels

October 5th, 2020

Danielle Romo covers the HTML pattern you need when you have a wordy <label> with fancy styling for an <input type=”radio”>. The ol’ <span class=”hidden-visually”> that contains the label that you want to be read, and a <span aria-hidden=”true”> with the visual-only content. CodePen Embed Fallback I think it’s interesting how often people are landing…

Some Industry Podcasts

October 1st, 2020

Clearleft made a 6-episode Season One It’s called The Clearleft Podcast if you can believe that. It gets into new (at least to me) concepts like Design Ops and Design Sprints, which are loaded terms and need nuanced discussion. It’s really well-edited, pulling in clips from relevant talks and such. A cut above the hit-record-hit-stop…

Thinking About Power Usage and Websites

September 21st, 2020

Gerry McGovern asked if I had any insight into energy consumption and websites. He has a book, after all, about the digital costs on the planet. He was wondering about the specifics of web tech, like… <blockquote\>If you do this in HTML it will consume 3× energy but if you do it in JavaScript it…

Vue 3

September 18th, 2020

It’s out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well. I like it’s still a priority that Vue can be used with just a <script> tag with no build process at all. But it’s ready for build…

Optimizing CSS for faster page loads

September 17th, 2020

A straightforward post with some perf data from Tomas Pustelnik. It’s a good reminder that CSS is a crucial part of thinking web performance, and for a huge reason: Any time [the browser] encounters any external resource (CSS, JS, images, etc.) it will assign it a download priority and initiate its download. Priorities are important…

Editing HTML Like A Boss In VS Code

September 16th, 2020

Here’s a seven minute video from Caleb Porzio that focuses on some of Emmet‘s HTML editing features. You might think of Emmet as that thing that expands abbreviations like table.stats>tr*3>td*3 into glorious, expanded, and perfect HTML. But Emmet has other HTML editing trickery up its sleeve. My favorite is “wrap with abbreviation” (which happens to…