Going Beyond Automatic SVG Compression With the “use” Element

January 27th, 2020

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only a few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact…

What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?

January 24th, 2020

Some HTML elements accept width and height as attributes. Some do not. For example: <!– valid, works, is a good idea –> <img width=”500″ height=”400″ src=”…” alt=”…”> <iframe width=”600″ height=”400″ src=”…”></iframe> <svg width=”20″ height=”20″></svg> <!– not valid, doesn’t work, not a good idea –> <div width=”40″ height=”40″></div> <span width=”100″ height=”10″></span> Those attributes are sometimes referred…

Timeless Web Dev Articles

January 18th, 2020

Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their perspective in some way. Fun! I’m gonna scour the thread and link up my favorites (that are actually articles, although not all of them are super directly related to web dev)….

NetNewsWire and Feedbin

January 16th, 2020

NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.) It’s super nice, is fast, and looks great. It has just the right features. But… I thought, at least at first,…

Thinking Through Styling Options for Web Components

January 16th, 2020

Where do you put styles in web components? I’m assuming that we’re using the Shadow DOM here as, to me, that’s one of the big draws of a web component: a platform thing that is a uniquely powerful thing the platform can do. So this is about defining styles for a web component in a…

The Deal with the Section Element

January 15th, 2020

Two articles published the exact same day: Bruce Lawson on Smashing Magazine: Why You Should Choose HTML5 <article> Over <section> Adam Laki on Pine: The Difference Between <section> and <div> Element They are comparing slightly different things, but they both involve the <section> element. I find it pretty clear when you reach for a <div>:…

CSS-Only Carousel

January 10th, 2020

It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow. Setting some boxes in a horizontal row with flexbox is easy. Showing only one box at a time with overflow and making it swipable with -webkit-overflow-scrolling is easy. You can make the “slides” line up nicely with scroll-snap-type. A…

The Auto-Flowing Powers of Grid’s Dense Keyword

January 8th, 2020

Let’s say we’re working on the homepage of a news website. You’re probably used to seeing some card-based content in a grid layout, right? Here’s a classic example, The New York Times: Yeah, something like that. There are going to be some cards/elements/boxes/whatever that need to take up more space than others. A featured article…

So Many Color Links

December 27th, 2019

There’s been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment. Curated colors in context Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That’s a nice way to do it, because…

Why do we use .html instead of .htm?

December 26th, 2019

Interesting question from Andy: Serious question. Why do we use .html instead of .htm? / @adactio @css — Andy Clarke (@Malarkey) December 12, 2019 The most likely answer from the thread: DOS was a massive operating system for PCs for a long time and it had a three-character limit on file extensions. Interesting that the…