A Complete Guide to Data Attributes
February 17th, 2020
Table of Contents Introduction Syntax Styling with data attributes Accessing data attributes in JavaScript Introduction HTML elements can have attributes on them that are used for anything from accessibility information to stylistic control. <!– We can use the `class` for styling in CSS, and we’ve also make this into a landmark region –> <div class=”names”…
Creating a Details Element That Opens But Never Closes
February 14th, 2020
The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element. But let’s say you want to be able to click…
The Three Types of Code
February 3rd, 2020
Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to any codebase, any language, any technology or open-source project. Whether I’m writing HTML or CSS or building a React component, thinking about these different…
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…