Focused Image Cropping with smartcrop.js
Images tend to make any page more engaging, especially when done right. The problem is that automating image creation and sizing can be a very difficult task, especially when the image is uploaded by a user -- who knows what format, size, and resolution the image will be. Hell, who knows if they're actually sending you an image for that matter (though validating that they've uploaded an image isn't too difficult).
I recently found out about smartcrop.js, a brilliant JavaScript utility which analyzes the contents of an image and finds the focal point (a face, for example) of any image. It's easy to use and does an outstanding job picking up on the important part of an image.
Check out a few images I put through the smartcrop.js testbed:
I wont bother showing the super simple code sample -- you can view that on the smartcrop.js repo. And be sure to play around on the testbed. I love recognizing developers for their feats and this is some incredible work by Jonas Wagner!
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![Translate Content with the Google Translate API and JavaScript]()
Note: For this tutorial, I'm using version1 of the Google Translate API. A newer REST-based version is available.
In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...
![Unicode CSS Classes]()
CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores. One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.
Excellent find, thank you.