Menu

How Do You Remove Unused CSS From a Site?

November 19th, 2019

Here’s what I’d like you to know upfront: this is a hard problem. If you’ve landed here because you’re hoping to be pointed at a tool you can run that tells you exactly what CSS you can delete from your project, well… there are tools out there, but I’m warning you to be very careful…

Six Months Using Firebase Web Performance Monitoring

November 19th, 2019

I don’t really think of Firebase as a performance monitoring tool (all I ever think about is auth and real-time data storage), but nevertheless, it totally has that feature. Justin Ribeiro… [A] tool to track what real users in the wild are experiencing with easy setup? Yes, please. […] I’ve been using Firebase web perf…

Serpstack

November 19th, 2019

Is it your job to keep an eye on your company’s search engine placement? Or your clients? Or are you building a tool to do just that? Manually Googling stuff isn’t going to scale particularly well there. Wouldn’t it be nice if you could hit an API and it would return you nicely formatted data…

Finally, it Will Be Easy to Change the Color of List Bullets

November 14th, 2019

In my germinating years, the general advice was this: <ul> <li><span>List item</span></li> <!– … –> </ul> li { color: red; } /* bullet */ li span (color: black; } /* text */ Not terrible, but not great. You’re “resetting” everything at the span level, so it gets more complicated the more you do. Things are…

Oh Hey, Padding Percentage is Based on the Parent Element’s Width

November 13th, 2019

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the element itself. So if an element is 1,000 pixels wide with padding-top: 50%, that padding is 500 pixels. It’s weird having top padding based on width, but that’s how…

Thoughts After Looking at the Web Almanac’s Chapter on CSS

November 13th, 2019

Woah, I didn’t see this coming! The HTTP Archive dropped this big “state of the web” report called Web Almanac with guest writers exploring data from 5.8 million websites. Una Kravetz and Adam Argyle wrote the CSS chapter. The point is to squeeze a digestible amount of insight out of a mountain’s worth of data….

When to Use SVG vs. When to Use Canvas

November 12th, 2019

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear. A little flat-color icon? That’s clearly SVG territory. An interactive…

scrapestack: An API for Scraping Sites

November 12th, 2019

Not every site has an API to access data from it. Most don’t, in fact. If you need to pull that data, one approach is to “scrape” it. That is, load the page in the web browser (that you automate), find what you are looking for in the DOM, and take it. You can do…

A Super Weird CSS Bug That Affects Text Selection

November 11th, 2019

You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug. If you: Leave that selector empty Link it from an external stylesheet (rather than <style> block) Selecting text will have no style at all. 😳😬😕   In other words, if you…

Two-Value Display Syntax (and Sometimes Three)

November 8th, 2019

You know the single-value syntax: .thing { display: block; }. The value “block” being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better…