demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Death of Marat
Jacques-Louis David
Liberty Leading The People
Eugène Delacroix
Louis XVI, King of France and Navarre
Antoine-François Callet

Sorting Page Content With JavaScript

javascript / galleries

Estimated reading time: 4 minutes, 36 seconds

Some of my , especially those that show items arranged with flexbox or CSS columns, have generated questions about the possibilities of reordering content. While flexbox does have the capability to reorder items, the flexbox module is generally intended for changes to UI, rather than reordering based on arbitrary criteria.

In this article, I’ll show how you can easily arrange items alphabetically and chronologically on a page; in turn, you could use the same principles to order items using any kind of criteria.

The Circle Is (Almost) Complete: SVG Presentation at CSSConf

conferences

Estimated reading time: 18 minutes

During CSSConf 2014 I was encouraged to give a B-track presentation following Sara Soueidan’s talk on SVG earlier that day. Together with the video above, I’ve added a full linked transcript (since YouTube the auto-caption algorithim apparently renders my hybrid accent as Martian) and resource list (which will eventually make it into a for SVG). The presentation is divided roughly into thirds:

  • setting up drawings in Adobe Illustrator and exporting them
  • cleanup of SVG code
  • rare or unappreciated uses for SVG

The talk was very last minute – I had been ask to do it just the night before – so please excuse the poor quality of the slides; I’ve also added small corrections and clarifications in the transcript.

Photograph of the Coachella main stage at night, taken in 2014

Preflight Your Video For Delivery in HTML5

html / multimedia

Estimated reading time: 5 minutes

Since my fullscreen video web page background article was published, some readers have commented that video content does not appear on their pages when they use the code in their own projects. When I’ve had the opportunity to test the pages, the issues have been due to poor encoding or delivery of the video, not the CSS code.

To address this, I thought it might be useful to have a list to test video content during site production. Think of this as a web video quality control process, one that attempts to guarantee that HTML5 video will be delivered smoothly to modern browsers.

I’d suggest the following steps:

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.