Chris Coyier - CSS-Tricks

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

# June 20, 2018 By Chris Coyier

This isn't a comprehensive guide to centering things. We have that!

This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and horizontally and you don't know the width or height of what you are centering. Vertical centering being the extra tricky of the two.

(more…)

centering

Don’t just copy the @font-face out of Google Fonts URLs

# June 19, 2018 By Chris Coyier

I don't think this is an epidemic or anything, but I've seen it done a few times and even advocated for. This is what I mean...

(more…)

The Four Big Ways Jetpack Helps with Image Performance

# June 19, 2018 Sponsored

We've been working with Jetpack around here as a sponsor. It's a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here's one way to think about it: it brings the power of WordPress' own massive servers to you.

For now, let's just focus on one angle of what Jetpack can do for you: image performance. Jetpack does a ton for you in this regard, solving some non-trivial performance upgrades. Let's take a look at what I see as the four big boosts you get from Jetpack on your images.

(more…)

image optimization jetpack responsive images

Here’s the thing about “unused CSS” tools

# June 18, 2018 By Chris Coyier

There are a lot of tools that aim to help you remove "unused CSS" from your project. Never a week goes by that I don't see a tool for this being shared or promoted. It must strike some kind of perfect chord for some developers. I care about performance, and I know that reducing file sizes is good for performance. Indeed, it is. I bet we have CSS that is unused in our stylesheets, if we removed that, that's a performance win. Yep, it would be. We should automate that. Ehhhhhh, I'm not so sure.

(more…)

unused css

#161: Jetpack

# June 14, 2018 By Chris Coyier

Jetpack sponsored this video, which goes into what Jetpack is and can do for your site.

These are my words though! I'm a big Jetpack fan and I run Jetpack on all my self-hosted WordPress sites. It does a ton both feature-wise and performance-wise.

In this video, we look at a WordPress site I recently spun up where Jetpack was essentially the first plugin I installed. (more…)

jetpack WordPress

Your Brain on Front-End Development

# June 13, 2018 By Chris Coyier

Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I'm not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.

Let's take a look at what I mean.

(more…)

design

#160: The All-Powerful Front-End Developer

# June 6, 2018 By Chris Coyier

The internet is, without metaphor, just a bunch of servers tied together with wires. Without servers, we'd have no way to share our creations with the world. Yet, in a bit of a paradox, servers are less essential to our work than they've ever been. We can now do things on the front-end that used to require a back end. When we do need a backend, our front-end skills can be put to work, giving us some surprisingly powerful new abilities.

The site that goes along with this talk is: The Power of Serverless for Front-End Developers (thepowerofserverless.info).

Thanks to An Event Apart for sponsoring this! I originally created and gave this talk at An Event Apart in early 2018. It was part of a larger whole because the editorial team at AEA works closely with the speakers. At AEA, you’ll find that each presentation sheds light on the next—that the event is not merely a collection of disparate talks, but a curated, cutting-edge curriculum for the modern designer, coder, and strategist. A curriculum that continues after the conference ends, with slides, articles, videos and other resources shared freely on our website.

At An Event Apart, you won’t just learn what’s happening right now. You’ll also look ahead to what’s next.

serverless

HSL() / HSLa() is great for programmatic color control

# June 1, 2018 By Chris Coyier

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We've talked about it before but we can break it down a little more and do some interesting things with it.

(more…)

color hsl

Frustration

# May 31, 2018 By Chris Coyier

Jeremy Keith talks about a couple of recent frustrating moments in his life. One regarding a musical instrument, one involving a build process:

That feeling of frustration I get from having wiring issues with a musical instrument is the same feeling I get whenever something goes awry with my web server. I know just enough about servers to be dangerous. When something goes wrong, I feel very out of my depth, and again, I have no idea how long it will take the fix the problem: minutes, hours, days, or weeks.

I echo his later sentiment that moments like these become great writing opportunities.

I'd say that it's always OK to experience frustration. It doesn't make you a lesser developer, at any level. But at the same time, the more experienced of a developer you become, less things will trigger that frustration, because of the resources you've built up to deal with those situations. Notice Jeremy didn't give up and a co-worker came to the rescue.

opinion

Transmit Droplets

# May 30, 2018 By Chris Coyier

Ethan Marcotte documented his workflow for storing GIFs in a web directory. Sometimes just SFTPing files into a folder is as fancy a workflow as you need, and in fact, modern workflows don't have anything on it!

I've also used Transmit's fancy features for this kind of thing. I prefer saving the connection as a Droplet, which is basically a little application you can drop a file onto and have it upload to exactly where you want it...say a GIF in a specific server directory.

(more…)

ftp transmit