Smashing Daily #52: Animation, Deminification, Vectorization
setTimeout. But alas,
setTimeout isn’t particularly efficient (which is a typical problem for battery-powered devices). There’s a new API for animations that works in modern browsers, called
requestAnimationFrame which is as power efficient as can be. Here’s a page that visualizes what that efficiency means.
This can be pretty handy: a tool that converts HTML and CSS to PDF! I haven’t tried it myself, but it passes the Acid2 test which means it’s much better at rendering things than many browsers you see in your stats. Good to see a serious open source tool that does this (the alternatives are incredible, but also pretty expensive).
Replacing text in the DOM seems easy. Just use
innerText, and there you go. James Padolsey explains why those solutions are not good enough and comes up with something that works.
GitHub not only knows how to create an incredible tool around the concept of version control (a concept that used to be incredibly unsexy a while ago) but they also know what people don’t understand about it. The tools they created makes it easy for n00bs to just start using it. Here’s a nice tutorial that teaches you how to use Git on the terminal.
Good fonts have some features built in that optimize the legibility of the text (like kerning pairs and ligatures). You have to turn these features on—or in some cases, turn them off. Dudley Storey explains how and when to use these features.
A while ago, Peter-Paul Koch wrote a lengthy article/rant about
devicePixelRatio. Jake Archibald wonders if the way Opera thinks it should work is the right way (it depends on the zoom level the user sets in their system preferences).
Do you need more to read? Here’s the weekly selection of links by Mozilla’s Developer Engagement team. It’s the last one for a while because of the summer/winter break they’re taking.
One of the advices you hear in all the discussions about responsive images and images for retina displays is to use vector graphics whenever possible. Arjan Westerdiep created this incredible tool that converts bitmap images to SVG or AI files. This belongs in your toolbox.
- 1 https://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/
- 2 https://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/
- 3 http://weasyprint.org/
- 5 http://try.github.com/levels/1/challenges/1
- 6 http://try.github.com/levels/1/challenges/1
- 7 http://demosthenes.info/blog/547/Make-Your-Web-Pages-More-Legible-With-CSS3-Ligatures-and-Kerning-Pairs
- 8 http://demosthenes.info/blog/547/Make-Your-Web-Pages-More-Legible-With-CSS3-Ligatures-and-Kerning-Pairs
- 9 http://jsbeautifier.org/
- 10 https://jaffathecake.posterous.com/should-device-pixel-ratio-respond-to-browser
- 11 https://hacks.mozilla.org/2012/07/mozilla-hacks-weekly-july-5th-2012/
- 12 http://www.drububu.com/tutorial/bitmaptovector.html
- 13 http://www.drububu.com/tutorial/bitmaptovector.html
- 14 www.smashingmagazine.com/the-smashing-daily-archive/
- 15 www.smashingmagazine.com/the-smashing-daily-archive/