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…