Skip to main content
CSS is fun and cool and I like it.
Link

Native Video on the Web

TIL about the HLS video format:

HLS stands for HTTP Live Streaming. It’s an adaptive bitrate streaming protocol developed by Apple. One of those sentences to casually drop at any party. Äh. Back on track: HLS allows you to specify a playlist with multiple video sources in different resolutions. Based on available bandwidth these video sources can be switched and allow adaptive playback.

This is an interesting journey where the engineering team behind Kitchen Stories wanted to switch away from … Read article

Link

Algorithmic Layouts

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

Link

Optimizing GIFs for the Web

Link

The Art of Labeling

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