DEV Community: Chris Coyier

I'm Chris Coyier from CodePen, CSS-Tricks, and ShopTalk Show. Ask Me Anything!

Chris Coyier — Fri, 15 Nov 2019 15:14:32 +0000

Hello! Like the title says, I am the co-founder of CodePen (I have two fellow co-founders: Tim and Alex), I am the (owner? creator? CEO? lol it's just a blog ok) of CSS-Tricks, and co-host of ShopTalk Show with Dave.

I think websites are great. I have a personal one in addition to the other sites I help run. I probably like yours.

Nothing has been more fun and helpful over the years than writing stuff publicly. It helps me think. It starts conversations. It gets me invited to stuff. Heck, a sizeable chunk of my income comes from sponsorship and advertising which is largely in and around that writing.

Every time I tweet I think, aw snap, that would have been more useful as a blog post.

I think of myself as a front-end developer because I mostly write code that is meant for the browser. I feel like I have a decent perspective on the trade, as I work on (and have worked on) lots of projects across lots of different stacks and at lots of different scales. There are good and bad ideas everywhere.

Ask me anything!

(Other) Projects you can do to Become a Front-End Master in 2020

Chris Coyier — Fri, 11 Oct 2019 16:09:44 +0000

I love this post by Simon Holdorf. He's got some ideas for you to level up your skills as a front-end developer next year. Here they are:

Build a movie search app using React
Build a chat app with Vue
Build a weather app with Angular
Build a to-do app with Svelte

... and 5 more like that.

All good ideas. All extremely JavaScript framework focused.

I like the idea of thinking of being a front-end developer as being someone who is a browser person. You deal with people who use some kind of client to use the web on some kind of device. That's the job.

I love JavaScript frameworks, but knowing them isn't what makes you a good front-end developer. Being performance-focused and accessibility-focused, and thus user-focused is what makes you a front-end master, beyond executing the skills required to get the website built.

In that vein, here's some more ideas.

Go find a Dribbble shot that appeals to you. Re-build it in HTML and CSS in the cleanest and most accessible way you can.
Find a component you can abstract in your codebase, and abstract it so you can re-use it efficiently. Consider accessibility as you do it. Could you make it more accessible while doing it such that the entire site benefits?
Install the Axe accessibility plugin for DevTools and run it on an important site you control. Make changes to improve the accessibility as it suggests.
Spin up a copy of Fractal. Check out how it can help you think about building front ends as components, even at the HTML/CSS level.
Build a beautiful form in HTML/CSS that does something useful for you, like receive leads for freelance work. Learn all about form validation and see how much you can do in just HTML, then HTML plus some CSS, then with some vanilla JavaScript. Make the form work by using a small dedicated service.
Read a bit about Serverless and how it can extend your front-end developer skillset.
Figure out how to implement an SVG icon system. So many sites these days need an icon set. Inlining SVG is a great simple solution, but how you can abstract that to be easy to work with for your workflow? How can it work with the framework you use?

Learn About CSS Custom Properties Through Clever Uses of Them

Chris Coyier — Wed, 30 Jan 2019 21:29:42 +0000

One of the biggest use-cases for CSS custom properties is theming. Let's consider that for a second. Perhaps you'd set some variables at the highest level you can:

html {
  --column-bg: #ae0001;
  --menu-bg-hover: #680001;
  --active-item: #D3A625;
}

/* Anywhere else in the CSS, you use the variables */
.menu:hover, .menu:focus {
  background: var(--menu-bg-hover);
}

Then if you want to change the theme, you have the opportunity to do that in one isolated place, which makes things tremendously easier to reason about. Here we'll allow a class change on that root element to change the variables. Anywhere those variables are used will instantly update.

html {
  --column-bg: #ae0001;
  --menu-bg-hover: #680001;
  --active-item: #D3A625;
}
html.alternate-theme {
  --column-bg: #680001;
  --menu-bg-hover: #BE0002;
  --active-item: #00FFBA;
}

/* Anywhere else in the CSS, you use the variables */
.menu:hover, .menu:focus {
  background: var(--menu-bg-hover);
}

Here's a wonderful use of theming by Stephanie Liu. It's a recreation of the Slack interface's theming capabilities

Above, I showed how you might alter the values of CSS custom properties by changing a class, but JavaScript is capable of changing those variable values directly by selecting the element and passing a new value to it, like el.style.setProperty("--custom-property", "new-value");, which is how Stephanie is doing it in this demo.

Like any good theming, a user's choice should persist. Stephanie handles this in this demo by plopping the selections into localStorage, so check out her JavaScript to see how she's doing that.

Adjusting Theme Colors

Another consideration with CSS custom properties being in control of color themes is that sometimes you want a variation of a color, rather than having to pick a whole new second color. Like a button with the chosen color as a border, but a faded version for a background.

In a post by Ben Szabo, Theming with CSS variables in RGBA, he mentions you could use RGBa or HSLa to make those adjustments with opacity.

If the original color is in RGB or HSL to begin with, the opacity adjustment is easy:

:root {
  --my-color-rgb: 255, 0, 0; 
}

.btn {
  border: 1px solid var(--my-color-rgb);
  background: rgba(var(--my-color-rgb), 0.5);
}

I did a demo once where I laid a transparent black gradient over top the color to darken it, so it's not just lightening you can do but darkening as well:

Ana Tudor showed us we can make drastic changes to styling with the flip of a CSS custom property toggle.

She called it DRY switching.

The trick is rooted in math and the power of 0 and 1. With calc(), we can multiple values by zero and one and either get nothing or the original value. We can use that base trick for colors, positions, transforms... all kinds of stuff to get hugely different results when that flip is switched.

Interesting SVG hovers from Marius Niveri

I like this concept in which normal colored SVG has it's color temporarily removed with CSS, moved to a custom property, and then re-applied on hover. Like progressive enhancement coloring!

Keith Clark combined them with conic gradients to make pie charts

Pass the percentage in right from the markup:

<div class="pie pie--value" style="--percent:65;"></div>

Then use that value in a conic-gradient to draw the pie chart.

.pie {
  background-image: conic-gradient(
    rgba(0,0,0,0) calc(3.6deg  var(--percent)),
    rgba(0,0,0,1) calc(3.6deg  var(--percent))
  );
  background-blend-mode: overlay;
  background-position: 50% 50%;
  background-size: 150%; /* oversize bg image to prevent "underdraw" */
  width: 3.75em;
  height: 3.75em;
  border-radius: 50%;
}

Keith's demo is fancied up:

He's even got a bonus trick in there of using CSS counters to display the percentage value.

Sérgio Gomes aspect ratio trick with custom properties

What if you could tell an HTML element directly what aspect ratio you wanted it to be? That's documented here. You pass in a ratio directly from the a custom property on the element:

<div style="--aspect-ratio:16/9;">
</div>

Then use that value to apply a perfectly sized psuedo element inside that pushes it to that size.

[style="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style="--aspect-ratio"] > img {   height: auto;
} 
@supports (--custom:property) {
  [style="--aspect-ratio"] {
    position: relative;
  }
  [style="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

Clever stuff.

Some Incredibly Clever Layout Pens from CodePen (with bonus twists)

Chris Coyier — Thu, 10 Jan 2019 18:51:27 +0000

Nicolás J Engler's Bullet Journal

CSS grid makes this calendar, a perfect simple use case! But the transforms giving different elements tilt really give it life.

Love that markered-off cell look. Check it out, it's all CSS with a repeating gradient:



.cell.x {
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      transparent, transparent 3px, 
      #e53a40 3px, #e53a40 6px
    );
}

Erin E. Sullivan's Book Layout

You might think you'd have to manually cut content into two different elements to make a side-by-side layout like this that maintains content flow. But nope! Erin is using CSS columns here so the browser does that splitting and flowing naturally.

You might wanna pop over to Full Page View to see this one:

There is even more clever bits here with all the handwriting-inspired underlining, highlighting, and stet. It's a background data URL SVG that makes that underline happen!



.open-book a {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…gsNDMuOCw0MzIuNCw0Ni41LDQzMC45LDQ5LjJ6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L3N2Zz4=) bottom repeat-x;
}

Luke Jacksonn's Flexbox Masonry

Beyond being flexible, flexbox can be set in multiple directions and can wrap. Smashing all those ideas together can yield interesting flexible layouts like this:

The cool trick in this one is that those otherwise empty flex elements keep their aspect ratio sizes by having SVG elements inside where their viewBox dictates that ratio:



<div><svg width="320px" viewBox="0 0 2 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>

Usually Masonry deals with what look like staggered vertical columns, but the content goes generally left-to-right in the source order still. The Masonry library still does a great job of that:

Olivia's Makeup Palettes

You know flexbox and grid can play together nicely right? Any grid cell could become a flex container. But it works the other way around too, a flex item could become a grid container! That's exactly what's happening here:

The overall layout here is flexbox, but the individual colored sections (which cleverly open up with 3D transforms) have a grid layout underneath them. Plus, each one has a slightly different grid setup, which is a wonderful touch.

Look around!

I've messed around with trying to replicate magazine layouts myself just for fun. There is lots to explore!