Articles by
Chris Coyier

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

Opera Neon

Hot takes!

  • I wanted to give it at least a few days of full-time use, but you can't use extensions (yet?). The web is too hard for me to use without 1Password and Ghostery.
  • The UI feels fresh and interesting. UI polish seems like an excellent direction for Opera to go. Since moving to Blink they aren't spending (as many) resources on under the hood browser stuff, they might as well polish up the hood itself. It's neat how it uses your desktop background as its background. It's not transparent, though, it's just a duplicate image.
  • The pop-out videos are pretty sweet. Safari can do it (awkwardly), but the tray of media in Neon is an upgrade. I don't understand why Chrome and Firefox can't do this... isn't it a macOS level thing?
  • Weird bug: doesn't seem like you can ⌘V paste into the address bar?

WebSlides

Looks like a nicely done little system, by José Luis Antúnez for creating presentation slides.

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

An alternative to reveal.js. I like how it utilizes other open source projects.

I always feel like I should be using things like this for my presentations, as someone who normally very much likes working in HTML and CSS. But for some reason, I always reach for Keynote or Slides.com. I think it's a brain-modes thing. When I'm in "I need to work on what I'm going to say at this presentation" brain-mode, I don't want to be messing with markup, I just want to write and maybe pluck at some UI controls.

Modernizing our Progressive Enhancement Delivery

Scott Jehl, explaining one of the performance improvements he made to the Filament Group site:

Inlining is a measurably-worthwhile workaround, but it's still a workaround. Fortunately, HTTP/2's Server Push feature brings the performance benefits of inlining without sacrificing cacheability for each file. With Server Push, we can respond to requests for a particular file by immediately sending additional files we know that file depends upon. In other words, the server can respond to a request for `index.html` with `index.html`, `css/site.css`, and `js/site.js`!

Server push seems like one of those big-win things that really incentivize the switch to H2. We have an article about being extra careful about caching and server push.

Sponsored: Analytics for Lazy Developers

Here's an incomplete list of analytics tools I've personally used: Google Analytics, Alexa, Gauges, FullStory, NewRelic, and Woopra.

Perhaps you've used some others? Mixpanel, Heap, KISSmetrics, Rollbar?

They are all different and do interesting and valuable things for our businesses. Integrating them means integrating their third-party JavaScript into your site. What if you want to add one or remove one? You're back in the code making all those adjustments. And heaven forbid one of them updates its API...you're on the hook for integration maintenance indefinitely.

Enter Segment.

Segment is the data hub that routes your data directly to these analytics tools (and hundreds of others, for advertising, data warehousing, CRM and others). You're still using your favorite tools, but you only have to integrate Segment into your site or apps. Segment then sends all the appropriate data to the other tools.

Lebab

Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.

David Walsh has a post on it. I'm interested, as I'm still working on my muscle memory for ES6. Even the simple stuff. So blasting some old code through this as a kick start seems appealing.

The Road to SVG and Custom Elements in Clarity Icons

Another day, another design system deciding an SVG icon system is the way to go.

Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element (<clr-icon>, which is inline <svg> under the hood), just like Etsy.

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag