As a front end developer I find myself tweaking easing functions a lot, especially when I’m fine tuning web UI before launch. There’s no substitution for testing the final product but this easing function cheat sheet gives you a nice starting point. Besides, it’s virtually impossible to remember the animation details between many easing functions like easeOutBounce and easeInOutBounce.
With my current job I’m on a very small web team, with little delineation between developer, designer and QA. When you’re banging out code for an impending web release, it’s an environment that can be ripe for regression errors if you’re not careful.
Traditionally one of the best ways to combat regressions are with unit tests (ask any Rails developer.) But for front end developers and designers, there’s often limitations. Sure, you might get valid data from the back end, but how does it actually look and feel? That’s why so many of us rely on lots of repetitive, by hand testing.
Enter CasperJS, a framework perfect for front end unit testing. With a single Unix command running in the background a “headless” Webkit browser that runs through several core actions on my web app, taking screenshots along the way. As long as it stays updated, it’s a great way to check the basics before making any big commit. Great syntax and documentation too. If you’re a front end developer or QA, take a look.
The combination of PhantomJS and CasperJS make for a fairly straightforward yet vigorous form of unit testing. The only problem I’ve had from before is just knowing exactly where to start; Google searches and YouTube tutorials can pull you in many directions. That’s why developer Danny Croft’s little mini tutorial (far from comprehensive, it just starts you off) was helpful – as long as you can install from Homebrew you should be in good shape.
Developer Will Vaughn:
Yeoman isn’t about taking plays from someone else’s playbook, its about designing your own offensive scheme, and executing it.
I really enjoyed reading Will’s experience sitting down with Yeoman for the first time and feeling…completely overwhelved. Been there, done that. But there’s some great advice here on how to start with Yeoman in small but effective steps. He leads with Grunt, something I’m already a huge fan of. It’s enough for me to get back on the Yeoman bandwagon and give it a try.
Chardin is a smartly thought out jQuery plugin that draws overlays on existing web elements, accompanied by optional instructions. It looks especially useful for interactive help within web apps.
Very slick jQuery based plugin that adds drag and drop based image uploads, along with built in image previews. As author Matias Meno points out, there are other options, but there is a bit of spin and compactness here that is really interesting.
Author David Bushell’s work tutorial here for Smashing Magazine is notable, not for hitting the usual responsive design notes but his restraint. There’s a legitimate smaller scope with his example: the emphasis is on progressive enhancement and heavy lifting on CSS3 where possible, not flashy jQuery plugins. That’s a good thing.
Can’t wait to dig through these releases and give them a try.
I’m late in noticing this one, but hooray, the API docs for jQuery got a big design refresh! Responsive! Better color palette! I approve.
Foggy is an interesting jQuery plugin for blurring page elements. Yet I can’t help but be concerned about the performance implications for browsers that don’t support the native CSS3 blur (-webkit-filter: blur) attribute. Making several copies of an HTML element to be reinserted in the DOM is often costly.