Posts by: Chris Coyier, Author at The Media Temple Blog

The All-Powerful Sketch

Looking back on the last decade of screen UI design tooling, it sort of feels like this is how it went: Adobe rules over this kingdom with Photoshop…

Using DevTools to Sidestep Obnoxious Websites

Modern browser DevTools, besides being gosh-darned amazing for doing our jobs as front end web developers, can be used to strong arm our way through problems we encounter…

Options for Live Streaming Video

Live video is a big thing these days. You can go live on YouTube. Twitter bought Periscope a few years ago to get in on live video. Facebook…

The Browser Statistics That Matter

Have you ever had a web development related conversation discussion where someone brought up global browser usage statistics? I might be a little weird, but I’d say I…

Five Huge CSS Milestones

This past December, CSS turned 20 years old. That’s straight from the horses mouth, and Alec rounded up a few highlights here, as well.

I figured I could weigh in as well, focusing on around the last decade, which, coincidentally, is how old CSS-Tricks is. That just about matches up with my experience in the industry.

Full Page Background Video Styles

I bet you’ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, “background”), which is an interesting…

The Different Logical Ways to Group CSS Properties

I’ll admit, I traditionally haven’t had much of an opinion about the ordering of CSS properties. I just add what I need. I think they end up largely “grouped” by related things, because that’s just how my brain spits them out.

Interesting Takes on Log in / Sign Up Forms

Log in forms are often just two fields: username and password. Sign up forms are often scarcely much more, perhaps asking for an email address as well and…

Randomizing SVG Shapes

Say we wanted to continuously randomize the radius of a circle. We could kinda fake a random look with just CSS, but let’s go for full-on pseudo random…

Map Rollovers

Let’s say you have a map of the world and you want to be able to highlight the country (or state, or county, etc.) as the cursor hovers…

Exporting Images in Multiple Resolutions Simultaneously

It’s always nice to see design tooling evolve to accommodate modern needs. Let’s look at an example of that: image exporting. Designers and developers spend loads of time exporting images. The design work often happens in software designed for designing, and assets from that design are exported for use when building out that design elsewhere.

An SVG That Isn’t All… SVG

When you think of SVG, what do you think of? Vector graphics, right? Maybe some stuff like this? That’s good. SVG absolutely excels at graphics like that. It’s…

Carousels Don’t Have to be Complicated

Every time a carousel is mentioned in a blog post, it’s a requirement to mention that… say it with me now: You probably shouldn’t use a carousel.

SVG Charting Libraries

There is no shortage of options with charting libraries on the web. That’s good! Competition is good for consumers. It keeps the quality high. That’s certainly true here. The landscape of charting libraries is pretty impressive, ranging from the good-and-free to the excellent-and-paid.

From WordPress to Apple News, Instant Articles, and AMP

Apple: Send us your content in our special format and we’ll make it available in Apple News and more people read it and be happy with your brand… wink wink.

Google: Link up this JavaScript library and format your content in this special way, and we’ll hook you up in search results… wink wink.

Facebook: Format your content in our special way and send it over and it will load super fast and people will love it and be happy with your brand… wink wink.

A Quick Look at the React and Redux DevTools

If you haven’t dug into React yet, I’d encourage it. There are lots of very satisfying feelings that come along with it. Building components that you piece together to assemble a complete working page is very satisfying, for example. The tooling is also quite satisfying. Working with Webpack and having it hot-reload just the components you’ve touched is awesome.