Menu

HTML

@supports selector()

October 19th, 2021

I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() function, we can test for selector support as well. It looks like this: @supports selector(:nth-child(1 of .foo)) { } You just drop the…

Jekyll doesn’t do components? Liar!

October 8th, 2021

I like the pushback from Katie Kodes here. I’ve said in the past that I don’t think server-side languages haven’t quite nailed “building in components” as well as JavaScript has, but hey, this is a good point: 1. Any basic fragment-of-HTML “component” you can define with JSX in a file and then cross-reference as <MyComponent key=”value”…

Zero-Width Space

July 2nd, 2021

The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually but not have any physical space around the slash: That’s an image. WordPress was being weird about it and not escaping it even when in…

HTML Boilerplates

May 14th, 2021

Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about how opinionated this kind of thing can be. Dang near every line! Not the DOCTYPE,…

A Whole Website in a Single HTML File

January 28th, 2021

I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that… the whole website is contained within a single HTML file. What about clicking the navigation links, you ask? Each link merely shows and hides certain parts of…

Styling Code In and Out of Blocks

January 6th, 2021

We’ll get to that, but first, a long-winded introduction. I’m still not in a confident place knowing a good time to use native web components. The templating isn’t particularly robust, so that doesn’t draw me in. There is no state management, and I like having standard ways of handling that. If I’m using another library…

What’s Old is New

December 17th, 2020

This year, I learned a lot about how “old” tricks can solve a lot of modern problems if you use the right tools. Following the growth of Jamstack-style development has been both a learning experience, while also a nostalgic one. It’s been amazing to see how you can power plain ol’ HTML, CSS, and JavaScript…

Learning to Simplify

December 16th, 2020

When I first got this writing prompt, my mind immediately started thinking stuff like, “What tech have I learned this year?” But this post isn’t really about tech, because I think what I’ve learned the most about building websites this past year is a simplification. This year, I’ve learned that keeping it simple is almost…

Overlaying Video With Transparency While Wrangling Cross-Browser Support

December 8th, 2020

As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a <video> since they can be rather…

How to Add Text in Borders Using Basic HTML Elements

December 1st, 2020

Some HTML elements come with preset designs, like the inconveniently small squares of <input type=”checkbox”> elements, the limited-color bars of <meter> elements, and the “something about them bothers me” arrows of the <details> elements. We can style them to match the modern aesthetics of our websites while making use of their functionalities. There are also…