19 Sep

Buddy on CSS-Tricks

Here's a little direct product endorsement for ya: I literally use Buddy for deployment on all my projects.

Buddy isn't just a deployment tool, we'll get to that, but it's something that Buddy does very well and definitely a reason you might look at picking it up yourself if you're looking around for a reliable, high-quality deployment service.

Here's my current setup:

CSS-Tricks is WordPress site. The whole wp-content folder is a private repository on GitHub. The hosting is

Read article

The post Buddy on CSS-Tricks appeared first on CSS-Tricks.

19 Sep

Automatically compress images on Pull Requests

Sarah introduced us to GitHub Actions right after it dropped about a year ago. Now they have improved the feature and are touting its CI/CD abilities. Run tests, do deployment, do whatever stuff computers do! It's essentially a YAML file that says run this, then this, then this, etc., with configuration.

GitLab kinda paved the way on this particular feature, although you don't get the machines for free on GitLab, nor does it seems like there is an … Read article

The post Automatically compress images on Pull Requests appeared first on CSS-Tricks.

18 Sep

Web Developer Search History

Sophie Koonin blogged "Everything I googled in a week as a professional software engineer," which was a fascinating look into the mind of a web developer and what they need to look up during day-to-day work. We all joke that we just Google stuff (or StackOverflow stuff) we don't know off the bat and copy and paste, but this is more to the heart of it.

A few just from one day:

react-apollo release notes jest silence warnings

Read article

The post Web Developer Search History appeared first on CSS-Tricks.

18 Sep

Two Browsers Walked Into a Scrollbar

Surprise: scrollbars are complicated, especially cross-browser and cross-platform.

Sometimes they take up space and sometimes they don't. Sometimes that is affected by a setting and sometimes it isn't. Sometimes you can see them and sometimes you can't unless you're actually scrolling. Styling them is handled in all sorts of different ways, including some very recent developments.

Follow Zach's journey toward thinner, native, user-preference-respecting, more aesthetic scrollbars, particularly for element-level scrollbars that ends up here.

Direct Link to ArticlePermalinkRead article

The post Two Browsers Walked Into a Scrollbar appeared first on CSS-Tricks.

18 Sep

Two Browsers Walked Into a Scrollbar

Surprise: scrollbars are complicated, especially cross-browser and cross-platform.

Sometimes they take up space and sometimes they don't. Sometimes that is affected by a setting and sometimes it isn't. Sometimes you can see them and sometimes you can't unless you're actually scrolling. Styling them is handled in all sorts of different ways, including some very recent developments.

Follow Zach's journey toward thinner, native, user-preference-respecting, more aesthetic scrollbars, particularly for element-level scrollbars that ends up here.

Direct Link to ArticlePermalinkRead article

The post Two Browsers Walked Into a Scrollbar appeared first on CSS-Tricks.

17 Sep

A Color Picker for Product Images

Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the <img src="product-red.jpg" alt="red product"> with <img src="product-blue.jpg" alt="blue product">. Nor do we typically have products in a vector format such that we can apply SVG fills to them and such.

There is a clever way to do it though, even when your product shots are bitmap graphic files, like JPG or PNG. … Read article

The post A Color Picker for Product Images appeared first on CSS-Tricks.

17 Sep

Overflow And Data Loss In CSS

"Data Loss" is a funny term. My brain thinks of like packet loss on the way from the server to your browser, resulting in missing content in files. Perhaps it is that on some level, but in CSS parlance, it has to do with the overflow property. Too much content for sized container + hidden overflow = data loss.

But it isn't only overflow that can cause this "data loss." Alignment can cause data loss too. Imagine flexbox or grid … Read article

The post Overflow And Data Loss In CSS appeared first on CSS-Tricks.

16 Sep

CSS-Tricks Chronicle XXXVI

This is one of these little roundups of things going on with myself, this site, and the other sites that are part of the CSS-Tricks family.

I was recently in Zürich for Front Conference. It was my first time there and I very much enjoyed the city and the lovely staff of the conference. I was terribly jetlagged for my opener talk so I feel like I didn't quite nail it how I wanted to, but whattyagonnado.

It's named … Read article

The post CSS-Tricks Chronicle XXXVI appeared first on CSS-Tricks.

18 Apr

Faking env() to Use it Now

There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with "The Notch" but it has made it's way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta.

That spec doesn't seem to suggest how we'll actually set those env() values just yet. If you want them now, the easiest way to … Read article

The post Faking env() to Use it Now appeared first on CSS-Tricks.