CSS is fun and cool and I like it.
Link

Algorithmic Layouts

Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and grid help avoid the need to constantly intervene with media queries in order to affect responsive layouts.… Read article

user avatar
Shared by
Chris Coyier
Article

Recent Videos!

I've recorded a decent number of videos lately, most of which are pairing with someone and digging into a topic as I glean as much information as I can! Several of these are sponsored, in that they are a part of an advertising package. Hopefully, you know me well enough that I don't work with companies I don't like or that sell something I don't think you'd be good buying, but hey, heads up. … Read article

Article

Responsive Knockout Text With Looping Video

Here’s an idea! Let’s make an an HTML <video></video> play inside the shape of some letters. Like "Knockout Text" except instead of an image behind, it’s video. … Read article

Article

Screen Recording Utilities for macOS

I record quite a few short little videos. Sometimes for use demonstrating bugs or weirdnesses. Sometimes right here for the blog. A lot of times for Instagram or other social media.

Allow me to get SUPER NITPICKY about what I like.… Read article

Article

Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img /> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? "20x faster and decode 7x faster than the GIF equivalent," says Colin Bendell.… Read article

Link

Full Page Background Video Styles

Making a full page background video is slightly trickier than a full page background image. Over on the Media Temple blog, I take a look at how that's done, but then also what the design patterns are once you've done it. You likely need text over top the video, so do you center it? Do you let the page scroll and cover the video? Do you get fancy and fade out the header as you scroll?… Read article

user avatar
Shared by
Chris Coyier
Link

Optimizing GIFs for the Web

Ire Aderinokun describes a frustrating problem that we’ve probably all noticed at one point or another:

Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

To solve

Read article
user avatar
Shared by
Robin Rendle
Link

The Art of Labeling

There's a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome's DevTools. A few notes:

  • Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings.
  • Wrapping an <input type="checkbox"> in a <label> gives the input a name of the text in the label, even without a for attribute.
  • The aria-labelledby attribute overrides the name
Read article
user avatar
Shared by
Robin Rendle
Link

New `video` Policies for iOS

This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:

It turns out that people these days really like GIFs. But the GIF format turns out to be a very expensive way to encode animated images when compared to a modern video codec like H.264. We’ve found that GIFs can

Read article
user avatar
Shared by
Robin Rendle
Link

Resilience

Jeremy Keith’s talk from last year’s ColdFront conference is all about the fragility of the modern web. Jeremy talks about languages, such as Javascript, that have a “fragile error handling model” and why simple markup is much more resilient and error prone in comparison.

He has three principles for being a good citizen of the web:

  1. Identify core functionality of your website.
  2. Make that available using the simplest technology.
  3. Enhance!

Bonus conference talk! Our own Sarah Drasner at ForwardJS Summit … Read article

user avatar
Shared by
Robin Rendle
icon-link icon-logo-star icon-search icon-star