SVG Title vs. HTML Title Attribute

July 30th, 2020

You know the title attribute? I can do this: <div title=”The Title”> I’m a div with a `title` </div> And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get… Which, uh, I guess is something. I sometimes use it for things like putting an expanded…

A Bit on Web Component Libraries

July 28th, 2020

To my mind, one of the best use cases for Web Components is pattern libraries. Instead of doing, say, <ul class=”nav nav-tabs”> like you would do in Bootstrap or <div class=”tabs”> like you would in Bulma, you would use a custom element, like <designsystem-tabs>. The new Shoelace library uses the sl namespace for their components….

Bold on Hover… Without the Layout Shift

July 27th, 2020

When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because the bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of links where the wider/bolder text doesn’t push anything anyway. Sometimes it does matter, like…

Using Flexbox and text ellipsis together

July 21st, 2020

You can truncate a single line of text with an ellipsis (…) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want to truncate content in the middle? Leonardo Faria details good use cases for this, like…

Levels of Fix

July 20th, 2020

On the web, we have the opportunity to do work that fixes things for people. It’s fascinating to me how different the scope of those fixes can be. Consider the media query prefers-reduced-motion. Eric wrote: I think it’s also worth pointing out the true value prefers-reduced-motion represents: Not attracting buzzword-hungry recruiters on LinkedIn, but improving the quality…

Displaying the Current Step with CSS Counters

July 7th, 2020

Say you have five buttons. Each button is a step. If you click on the fourth button, you’re on step 4 of 5, and you want to display that. This kind of counting and displaying could be hard-coded, but that’s no fun. JavaScript could do this job as well. But CSS? Hmmmm. Can it? CSS…

Hide Scrollbars During an Animation

June 24th, 2020

CSS still can’t animate to auto dimensions. .dropdown { transition: 0.2s; height: 0; } { /* the height will change, but it won’t animate. */ height: auto; } There is JavaScript trickery you can try. Brandon Smith outlined several techniques here a little while back. My mind always goes to this solution just because…

Where Do You Learn HTML & CSS in 2020?

June 19th, 2020

The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have,…

Building a hexagonal grid using CSS grid

June 18th, 2020

I think of grids as arrangements of rectangles with vertical and horizontal lines running through. And they are, but that doesn’t mean we can’t still do clever things in how we place things on those grids and what we do with the elements afterward. In this demo by Jesse Breneman, a grid of hexagons is…

What is Developer Experience (DX)?

June 15th, 2020

Developer Experience¹ is a term² that has one somewhat obvious meaning — the experience of developers — but it eludes definition in the sense that people invoke it at different times for different reasons referring to different things. For instance, our own Sarah Drasner’s current job title is “VP of Developer Experience” at Netlify. But…