sole/tween.js →
Very simple, smart Javascript based tweening engine. Looks useful for extremely details animations where traditional CSS3 won’t cut it.
Very simple, smart Javascript based tweening engine. Looks useful for extremely details animations where traditional CSS3 won’t cut it.
CSS Tricks’ Chris Coyier writes the definitive guide on when it is ok to add the “target=_blank” attribute to links. It’s a controversial subject with a wide range of opinion, but I agree almost entirely with his stance: when in doubt, *don’t use target*. Especially don’t use it as a sneaky way to keep users from leaving your page.
Front end developer and author Nicholas Zakas:
The things I look for in a front-end engineer have little to do with traditional computer science concepts. I’ve written before about what makes a good front-end engineer and how to interview front-end engineers, and generally I still agree with everything I wrote in those articles. I want enthusiasm and passion for the web, and understanding of HTML, CSS, and JavaScript, and more importantly, how to use them together to create a solution to a problem.
Responsive image solutions are still clearly a work in progress. The BBC News throws out their suggestion. Not fully crazy about their syntax given how different it is from srcset and src-n but I’m curious to see how it works in action.
We’ve all been there: you’ve been adding to your CSS but iterations later there’s plenty of unused selectors junking up your files. You need grunt-uncss, a Grunt task to strip unused CSS from your projects. It’s arguably best for smaller projects, because if you’re not careful with keeping your Gruntfile with proper source html files you could have a mess on your hands.
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.
I’m already a big fan of Chris Coyer over at CSS Tricks, but I think he outdid himself with his work on this article over at 24 Ways. It’s possibly the best completely from scratch introduction to the Grunt task manager (which is essential to my daily workflow) that I’ve seen. Now when I’ve got coworkers or friends that ask what the hell Grunt is, I point them to this article first.
I’m already a big fan of the Node based task manager Grunt for my day job; it makes minifying, and linting my code for errors a breeze. But this post by Google developer Addy Osmani caught me onto a new really cool Grunt task called grunt-responsive-images. It batch produces multiple, final resolution images for web deployment based on a list of original source images. Great for responsive web design and serving up basic HDPI imagery.
I put a lot of stock in work by the Filament group with their past work on the Picturefill polyfill; this small extension they recently created looks especially cool. It’s basically a super quick, jQuery based method to kill off the annoying delay you get by default when tapping links on a mobile device. Faster interactions make for a better user experience.
Nice talk at the Fronteers web developer conference all about the flexbox module by developer Zoe Gillenwater. Some of the talk got a bit too deep into coding syntax that was a bit difficult to follow in a single slide based presentation. But stick around to the end where Zoe talks about the practical benefits of using flexbox today. It’s the first time I’ve been encouraged to dip my toe into flexbox with production level work.