Skip to main content

Chris Coyier

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

Video

#173: Ooooops I guess we’re full-stack developers now.

And by "we're", I mean us, front-end developers ;)

Here's the website that goes with this talk.

This is a talk I put together where I postulate that, over time, the breadth of what front-end developers are able to do and are being asked to do has widened to the point that it's become full-stack development. Not that we've replaced back-end developers, because they are as important as ever too, it's just there is more overlap and more possibility.

Also, … Read article

Article

Quick Gulp Cache Busting

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser "hang on to this file basically forever." That way, when navigating from page to page on a site — or revisiting it, or refreshing the page — the browser doesn't have to download it again which produces way faster page loads. It's massively important for web performance, so do it!

But how do … Read article

Video

#172: Hand SVGing a Curved Line

I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG code. Hey, I've even got a book about all that.

But once in a while, it's appropriate, and maybe even a little bit fun. In this case, I wanted to draw a pretty specific line with a couple of … Read article

Article

SSCCE

You know what a "reduced test case" is, right? We've talked about it here. I imagine the concept is useful in many walks of life, but in the world of front-end development, you can think of it like:

A reduced test case is a demo/example page you create which reproduces the problem you are having with the least amount of code possible. Only the HTML needed to show the problem content. Only CSS that is related to that reduced

Read article
Article

Can you nest @media and @support queries?

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

This works:

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

And so does this, the reverse nesting of the above:

@media (min-width: 1px) {
  @supports(--a: b) {
    body {
      background: green;
    }
  }
}
Read article
Article

Branching Out from the Great Divide

I like the term Front-End Developer. It's encapsulates the nature of your job if your concerns are:

  • Building UIs for web browsers
  • The spectrum of devices and platforms those web browsers run on
  • The people who use those web browsers and related assistive technology

The breadth of knowledge for all-things front-end development has gotten super deep. I've found that front-end developers that have stretched themselves to the point they are thinking of themselves as full-stack developers more and … Read article

Link

A More Accessible Portals Demo

Article

How much specificity do @rules have, like @keyframes and @media?

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

To prove that, we can use the same selector inside and outside of an at-rule and see if it seems to affect specificity.… Read article

Link

Intrinsically Responsive CSS Grid with minmax() and min()

icon-link icon-logo-star icon-search icon-star