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.

Photograph of two overlapping semi-transparent leaves against a blue-green background

Web Developer Reading List: CSS For Forms and Tables

reading lists / css

Estimated reading time: 1 minute

Forms and tables are some of the most information-dense sources of site content, making their clarity and accessibility of paramount importance to users and developers. Unfortunately, the complexity of tables and forms can also make them extremely difficult to style and present well, especially when modern is taken into account.

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.

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.