Full Stack Panic
February 1st, 2020
A new podcast from Sean Fioritto inspired by Joel Califa’s term “Full Stack Anxiety”. … the little voice in your head says … “I should know all of this. Do I even know what I’m doing?” Why do web developers the world over feel like this? There is an episode with Joel talking about it…
Woodworking SVG (and Other Real Life Encounters)
January 27th, 2020
Eric Meyer does his woodworking math in SVG. I’ve been hand-coding SVG schematics to figure out how things should go together, and as a by-product, guide me in both material buying and woodcutting. This might sound hugely bespoke and artisanally overdone, but they’re not that complicated, and as a major benefit, the process has helped…
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…