Revisiting Video Encoding: MP4 and WebM

Introduction When HTML first introduced the video tag I was pumping my fist in joy. No more plugins to play video content. It was as simple as creating marlup like the one below to play and video in an MP4/ACC container with Egnlish and Swedish subtitles that can be changed as needed. <!– Video with subtitles –> <video src=”foo.mp4″ poster=”foo-poster.png” width=”640″ height=”480″ controls> <track kind=”subtitles” src=”foo.en.vtt” srclang=”en” label=”English”> <track kind=”subtitles” src=”” srclang=”sv” label=”Svenska”> </video> But it wass never as simple as it looked. Because there was no standard video format for HTML5 video, different browsers supported different container formats and

Creating printable content from the web

Creating printable content from the web All the stylesheets are written in SCSS and converted to CSS through the build process. In early 2015 I played with the idea of creating a custom XML vocabulary and the associated style sheets (XSLT, CSS and CSS Paged Media) to convert it to HTML, EPUB and PDF. It worked, the files were fairly easy to work with (at least for me who created them) and it was a good way to learn how to write XML schemas, XSLT style sheets and hone my skills with CSS. The repository is available While it works

What does it take to develop a WordPress site?

I had a very interesting conversation at my coffee shop the other day. It revolved around WordPress and how easy it is (or isn’t) to modify and customize. In the 10+ years I’ve been using it things have gotten to the point where you don’t really need to know PHP as much as you used to. In this post we’ll cover the following aspects of customizing a WordPress theme and associated tools and functionality: CSS customizations Local changes using filters and actions Creating child themes Customizing templates Using WordPress REST API to create a completely different front end When it’s

Looking at animations again… GSAP

Green Sock Animation Platform (GSAP) is an animation powerhouse. It’s a Javascript based library designed to animate most CSS and SVG properties. GSAP components are (Taken from Getting Started with GSAP): TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.) TweenMax: TweenLite’s beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay,

Looking at animations again… WAAPI

The Web Animation API seeks to unify CSS transitions and animations with SMIL-based SVG animations under one API making it easier to implement on the browser side and easier to learn for designers and developers. The first thing to notice, this is a Javascript API that manipulates animations’ timings and controls. As such we need to make sure that the browser has scripting enabled and the browser supports WAAPI. If it doesn’t there’s a good polyfill maintained by Google that will bring older browser up to part with supporting browsers. For this example we’ll brake the code into three sections,