Here’s a seven minute video from Caleb Porzio that focuses on some of Emmet‘s HTML editing features. You might think of Emmet as that thing that expands abbreviations like
table.stats>tr*3>td*3 into glorious, expanded, and perfect HTML. But Emmet has other HTML editing trickery up its sleeve. My favorite is “wrap with abbreviation” (which happens to be
A on CodePen), but there are more, like expanding your selection inward and outward and tag changing. … Read article “Editing HTML Like A Boss In VS Code”
The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing.
But here we are.
The video UI was actually lovely, but it was the progress bar that really caught my attention – or rather the
[progress].value. It was a simple gradient going from green to blue that grew as the video continued playing.
I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it.
With it in place, like this:
<video src="..." controls playsinline</video
Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.… Read article “What Does `playsinline` Mean in Web Video?”
IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5
<video tag. You might be using YouTube, Vimeo, or some other video provider that provides
<iframe code to display videos. Let’s cover how to make them all fluid width while maintaining an … Read article “Fluid Width Video”
Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop a video out into a small floating window that stays above all others, so that they can keep watching while doing other things. It’s an idea that came from TV, where, for example, you might want to keep watching your Popular Sporting Event even as you browse the guide or even … Read article “An Introduction to the Picture-in-Picture Web API”
In this week’s roundup: fighting shifty layouts, some videos might be a bit stalled, and a new way to take screenshots in Firefox.… Read article “Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox”
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee
Accessibility is an important element of web development, and with the ever-growing prevalence of video content, the necessity for captioned content is growing as well. WebVTT is a technology that solves helps with captioned content as a subtitle format that integrates easily with already-existing web APIs.
That’s what we’re going to look at here in this article. … Read article “Improving Video Accessibility with WebVTT”
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 “Native Video on the Web”