Issue 13 of Web Design Readings – .htaccess repo, CSS object-fit, CSS-only sprite sheet animation

Hi my reader,

This is issue 13 of web design readings which I share the web design skills and resources I found last week. This week, I share a .htaccess repo, a demo on the CSS object-fit property, a good example of 404 page and the CSS only sprite sheet animation via step.

.htaccess resources repo

https://github.com/phanan/htaccess

This .htaccess snippets list is a great resource.

I never write my own .htaccess from scratch. I always start from a template. And this resource provides everything I need for my .htaccess setup.

Object Fit

http://codepen.io/makzan/full/pvKeOb

I created a demo on the new CSS object-fit property. It’s like background-size cover or contain. But object-fit works on the media instead of the background. The demo works in Safari, Chrome, Firefox and mobile Safari, mobile Chrome.

Make your 404 page useful

Basecamp’s 404

I came across the 404 page of Basecamp last week, and find it useful for both reader and site admin.

This is a nicely crafted 404 file not found page. The page encourages their reader to report on links error so they can correct it. There are also reference links on what Basecamp does below the error messages. So the reader get lost, and the team try to save this reader, they also try to prevent future readers to going into same miss-linked page.

Twitter’s animated fav icon

Twitter’s new fav icon animation uses static image and the sprite sheet technique. This is the technique we use a lot in game design.

twitters new fav animation is a static image pic.twitter.com/06PhjePrTR

— devin (@devindoty) January 6, 2015

The CSSAnimation.rocks shows how we can archive the Twitter’s fav sprite sheet animation with CSS-only steps function.

I’ve introduced this technique in my book HTML5 Game Development Hotshot.

my book

Mozilla’s easter egg in console

Mozilla’s console has a Firefox

This is not the first time I saw a hiring message hidden in the console. But this mozilla one is attractive with ascii art and nice description and even an opt-out command.

Thanks and Best Regards,
Thomas Seng Hin Mak