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!
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![CSS 3D Folding Animation]()
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
![Create a 3D Panorama Image with A-Frame]()
In the five years I've been at Mozilla I've seen some awesome projects. Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have.
A-Frame is a community project...
![Link Nudging Using Dojo]()
In the past we've tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other JavaScript frameworks, we're going to try to duplicate that effect with another awesome framework: Dojo.
The JavaScript: Attempt...
Excellent find, thank you.