Issue 13 of Web Design Readings – .htaccess repo, CSS object-fit, CSS-only sprite sheet animation
|Thomas Seng Hin Mak||Feb 27, 2015|
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
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.
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
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
I’ve introduced this technique in my book HTML5 Game Development Hotshot.
Mozilla’s easter egg in console
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