OR 

(An Interview About) imgix Page Weight

Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that is pretty interesting. We know web performance is a big deal. We know that images are perhaps the largest offender in ballooning page weights across the web. We know we have tools for looking at page performance as a whole. It seems fairly new to m

favicon of http://css-tricks.com

A Poll About Pattern Libraries and Hiring

I was asked (by this fella on Twitter) a question about design patterns. It has an interesting twist though, related to hiring, which I hope makes for a good poll. Note: There is a poll embedded within this post, please visit the site to participate in this post‘s poll. I‘ll let this run for a week or two. Then (probably) instead of writing a new post with the results, I‘ll update this one with the results. Feel free to comment

favicon of http://css-tricks.com

Long Distance

A podcast (turns out to be a 2-parter) from Reply All in which Alex Goldman gets a scam phone call about his iCloud account being compromised. He goes pretty far into investigating it, speaking regularly with the people who run these scams. Especially resonant for me, as someone who also spoke directly with a hacker who‘s goal was doing me harm. I‘ve long struggled with thinking rationally about stuff like this. Direct Link to Article

favicon of http://css-tricks.com

Using ES2017 Async Functions

ES2017 was finalized in June, and with it came wide support for my new favorite JavaScript feature: async functions! If you‘ve ever struggled with reasoning about asynchronous JavaScript, this is for you. If you haven‘t, then, well, you‘re probably a super-genius. Async functions more or less let you write sequenced JavaScript code, without wrapping all your logic in callbacks, generators, or promises. Consider this: function l

favicon of http://css-tricks.com

Pattern Library Workflow

Jon Gunnison documents some things that have made pattern libraries successful at Allstate. Tidbits I found interesting: There are specific jobs (part of what he calls "governance") for maintaining the library. I love that they are called librarians. A "designer librarian" and a "UI dev librarian". Acknowledgment that there are "snowflakes", or single instances that don‘t fit into a pattern (at least right now). The pattern library is fed

favicon of http://css-tricks.com

Using Custom Properties to Modify Components

Instead of using custom properties to style whole portions of a website‘s interface I think we should use them to customize and modify tiny components. Here‘s why. Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website‘s interface in one fell swoop. For example, if you‘re working at somewhere like a big news org then we might want to specify a distinct visual design for the Fina

favicon of http://css-tricks.com

Saving SVG with Space Around It from Illustrator

There are a number of ways to export graphics from Illustrator. Some of them aren‘t particulary useful (Save As), some of them don‘t support SVG (Export for Web), some of them produce good output but have limited options that don‘t allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an option under the Export for Screens ar

favicon of http://css-tricks.com

How do you start a sentence with ‘npm‘?

This npm. Asking this question was a fun little journey. Right on the npm website, the very first sentence starts with "npm", and they do not capitalize it. That‘s a pretty good precedent for not capitalizing it. It certainly looks awkward though, which is why I asked the question to begin with. It doesn‘t feel right to me to start a sentence that way, and I‘m sure other some other people would look at it and see a mistake. H

favicon of http://css-tricks.com

Visual Email Builder Apps

I bet y‘all know that apps like Campaign Monitor and MailChimp have visual email builders built right into them. You drag and drop different types of content right into a layout. You edit text right within the email. It‘s nice. It‘s a lot nicer than editing the quagmire of HTML underneath, anyway! But not everybody needs all the rest of the features that those apps bring, like list management and the actual sending of the email.

favicon of http://css-tricks.com

Oxygen The WordPress Visual Site Builder for Real Designers?

WordPress page builders are generally shunned by those who know how to code. They are generally bloated and slow. And you are offered very limited customization options. But what if there was a visual site builder meant for advanced, professional website designers? It turns out there is! It‘s called Oxygen, and it‘s quickly becoming the tool of choice for WordPress web designers. Notice that with Oxygen, you design your entire site -

favicon of http://css-tricks.com

Improving Conversations using the Perspective API

I recently came across an article by Rory Cellan-Jones about a new technology from Jigsaw, a development group at Google focused on making people safer online through technology. At the time they‘d just released the first alpha version of what they call The Perspective API. It‘s a machine learning tool that is designed to rate a string of text (i.e. a comment) and provide you with a Toxicity Score, a number representing how toxic the

favicon of http://css-tricks.com

CSS Utility Classes and ‘Separation of Concerns‘

Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where he ends up. Here‘s a particularly interesting bit where he specifically calls out "separation of concerns" as being a straw man: You either have separation of concerns (good!), or you don‘t (bad!).This is not the right way to think about

favicon of http://css-tricks.com

More CSS Charts, with Grid & Custom Properties

I loved Robin‘s recent post, experimenting with CSS Grid for bar-charts. I‘ve actually been using a similar approach on a client project, building a day-planner with CSS Grid. It‘s a different use-case, but the same basic technique: using grid layouts to visualize data. (I recommend reading Robin‘s article first, since I‘m building on top of his chart.) Robin‘s approach relies on a large Sass loop to generate 1

favicon of http://css-tricks.com

Using the Paint Timing API

It‘s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting. If you haven‘t experimented with any of the various performance APIs, it ma

favicon of http://css-tricks.com

‘Combine the transparency of a PNG with the compression of a JPG‘

JPG doesn‘t support alpha transparency. PNGs that do support alpha transparency don‘t compress nearly as well as JPG. SVG has masks and clipping paths, which we can use to our advantage here. Drag and drop tool by Shaw to help do the trick. It produces an SVG containing a mask (for the transparency) and the raster graphic put together. It‘s like ZorroSVG with more features. There is also some prior art here. You can see how the

favicon of http://css-tricks.com