Smashing Daily #52: Animation, Deminification, Vectorization

In this edition of The Smashing Daily you will find some very handy tools: one for converting bitmap images to vector graphics, one for deminifying minified JavaScript, and a tool for generating PDFs from HTML and CSS. We have a great example that shows the difference between two types of animation APIs for JavaScript, there’s a great tutorial for using Git on the command line, wonderful articles about replacing text in the DOM, about powerful font features and about device-pixel-ratio. Enjoy!

RequestAnimationFrame API

The classic way to animate things with JavaScript is by using 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.

The Best Way to Animate Things with JavaScript

WeasyPrint Converts HTML/CSS Documents To PDF

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… Solved?

Replacing text in the DOM seems easy. Just use innerHTML or innerText, and there you go. James Padolsey explains why those solutions are not good enough and comes up with something that works.

Code School—Try Git

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.

A Great Tool That Helps You to Use Git

Make Your Webpages More Legible With CSS3 Ligatures And Kerning Pairs

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.

How to Optimize the Legibility of Your Text

Online JavaScript Beautifier

We all know the tools that help us minify, obfuscate or pack our JavaScript code. But every once in a while you need to do exactly the opposite. Here’s the tool you’re looking for.

Should Device-Pixel-Ratio Respond To Browser Zooming? Cream Of Tag Soup

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).

Mozilla Hacks Weekly, July 5th, 2012

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.

Last Click

Convert Your Pixel Art Bitmap Online To A Vector File

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.

Turn Your Bitmaps Into Vectors

Previous Issues

For previous Smashing Daily issues, check out the Smashing Daily Archive.

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top