Articles by
Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Essential Image Optimization

Addy Osmani's ebook makes the case the image optimization is too important to be left to manual processes. All images need optimization and it's the perfect job for automation.

I agree, of course. At the moment I've got a WordPress plugin + Cloudinary one-two punch helping out around here. Optimized images, served with a responsive images syntax, from a CDN that also handles sending the best format according to the browser, is quite a performance improvement.

Get instant feedback from visitors

Now you can get instant visual feedback for your website or app. Incoming Feedback from Hotjar is an easy and quick way to collect instant feedback directly from your website visitors.

Measure your performance and see the impact your team’s changes have on your website or app over time. Celebrate your wins and tackle your team’s next challenge.

It only takes your visitors two clicks to share their feedback on your website or app. They can even highlight specific elements, so you get a better idea of what you should work on next.

Get your free account today!


Vue.js Style Guide

"Style guide" as in, if you're writing JavaScript using the Vue framework, these are some guidelines they suggest you follow. Not to be confused with a pattern or component library, which happens.

Things like using multi-word PascalCase components and abstracting complex logic away from templates. There are a couple dozen of them nicely documented with good and bad examples. This isn't entirely uncommon. I know WordPress has guidelines for this kind of thing.

These are in an unusual category of style guide, where it's not like this is how you should structure, format, and name code, it's this is how you should structure, format, and name code in this framework. The rabbit hole could get deep here. This is how we write code at WidgetCorp. This is how we write JavaScript at WidgetCorp. This is how we write JavaScript when using Vue at WidgetCorp during full moons.

I also have a theory.

REST versus GraphQL

I think the jury is in: GraphQL is a winner for developers consuming APIs. We format a request for the exact data we want, and the endpoint coughs it up. What might have been multiple API requests and manually stitching together data, is now one in just the format we want.

I've heard less about whether GraphQL is ideal for the providers of those APIs. I imagine it's far easier to cache the results at specific URL's with a REST structure, as opposed to a single URL in charge of any request. But I'm no server guru.

This tool is pretty fascinating in that is allows you to build your own little GraphQL backend and then run queries against it and see the results.

A Boilerform Idea

This is just a random idea, but I can't stop it from swirling around in my head.

Whenever I need to style a form on a fresh project where the CSS and style guide stuff is just settling in, the temptation to reach for a mini form framework is strong. Form elements are finicky, have little cross-browser issues, and are sometimes downright hard to wrassle away styling control.

This idea, which I'm just now managing to write about, but haven't actually done any work toward, would be this mini-form framework. Maybe something like "Boilerform", as Dave jokingly suggested on an episode of ShopTalk.


A Five Minutes Guide to Better Typography

Pierrick Calvez with, just maybe, a bunch of typographic advice that you've heard before. But this is presented very lovingly and humorously.

Repeating the basics with typography feels important in the same way repeating the basics of performance does. Gzip your stuff. Make your line length readable. Set far expires headers. Make sure you have hierarchy. Optimize your images. Align left.

Let's repeat this stuff until people actually do it.

Template Literals are Strictly Better Strings

Nicolás Bevacqua wrote this a year ago, and I'd say with a year behind us he's even more right. Template literals are always better. You don't have to screw around with concatenation. You don't have to screw around with escaping other quotes. You don't have to screw around with multiline. We should use them all the time, and adjust our linting to help us develop that muscle memory.

Besides the few things you can't use them for (e.g. JSON), there is also the matter of browser support. It's good, but no IE 11 for example. You're very likely preprocessing your JavaScript with Babel anyway, and if you're really smart, making two bundles.

Turning Text into a Tweetstorm

With tongue firmly in cheek, I created this script to take a chunk of text and break it up into a tweetstorm, for "readability". Sort of like the opposite of something like Mercury Reader. If the irony is lost on you, it's a gentle ribbing of people who chose Twitter to publish long-form content, instead of, you know, readable paragraphs.