Posts Tagged: javascript

FitVids.JS

I’m very, very late to the party on this one, but this is a great jQuery plugin from CSS guru Chris Coyier and the web design shop Paravel. If you dig fluid width video embeds – something becoming fairly essential with modern responsive design – it’s worth giving this plugin a look. I recently incorporated FitVids.js into an experimental Tumblr theme I’m working on as a side project. Worked great and implementation was straightforward.

Mousetrap

I love keyboard shortcuts but adding them to web sites and web apps can be painful. Different browsers handle slightly different syntax, and the process of looking up key codes can require some trial and error. Enter Mousetrap, a tiny (3kb minified) Javascript library where you invoke natural syntax (e.g. ‘4’,’command+k’) for keyboard bindings. No external library dependencies either.

jQuery 2.0 dropping support for IE 6-8

Dave Methvin:

jQuery was conceived specifically to address the differences in browsers, so we’re not going to abandon the essence of our philosophy and simply disregard the millions of active Internet users who (for whatever reasons) still use oldIE. Yet we also want to move ahead and take advantage of modern browsers, especially the growing mobile market.

This is huge news. Great move by the jQuery team here.

picturefill.js

I’ve done a lot of research into various responsive imagery solutions. We’re in a clearly changing browser landscape, so picking just one option can be hard. Yet I currently lean on Scott Jehl’s Picturefill the most. The code is straightforward, well refined, and updated frequently (at the time of this writing, the Github was updated five days prior.)

Reveal.js

This is a really cool, CSS3 and Javascript based slide presentation library. If you’re looking for a web based alternative to the usual Keynote and Powerpoint styles, check this out.

jQuery Transit

Looks like a very slick, compact plugin to generate CSS3 transitions with jQuery calls. Part of me naturally questions why to not just write the CSS3 transitions directly, but this could work well with some sort of Modernizr-esque graceful browser degradation. Browsers that have CSS3 animations rely on jQuery Transit while legacy browsers get more traditional jQuery-based animation methods.

Fixie.js

Fixie is a helper JS file that interprets HTML5 tags and automatically adds the right kind of content – paragraphs, images, links and so on – in the right place. As someone who spends a lot of their day job adding in sample or filler content, this looks really helpful.

Rickshaw: a Javascript graphing toolkit

Javascript based graphing libraries have been done before, but I’ve rarely seen graphing code this clean, straightforward or well documented. Worth a look.

Why I’m learning node

As a mostly front end web developer that dabbles heavily in design, I’ve stayed away from node.js. It’s just been something that’s I’ve associated as too server side and back end intensive; I roll with it myself to check my Javascript via JSHint, but little else. That opinion may be changing though with programmer Randall Degges essay here.

A baseline for front end developers

JavaScript engineer Rebecca Murphey:

Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. We measured our mettle based on our ability to wrangle IE6 into submission or achieve pixel perfection across browsers. Many members of the community – myself included – lacked traditional programming experience. HTML, CSS, and JavaScript – usually in the form of jQuery – were self-taught skills.

Something has changed in the last couple of years. Maybe it’s the result of people starting to take front-end dev seriously, maybe it’s browser vendors mostly getting their shit together, or maybe it’s front-end devs – again, myself included – coming to see some well-established light about the process of software development.

Whatever it is, I think we’re seeing the emphasis shift from valuing trivia to valuing tools.

Impressive compilation of JavaScript tools, tutorials and more. Complete newbies should make a beeline for the in-browser developer tools section. If you aren’t debugging in the Chrome Developer Tools or Firebug, as far as I’m concerned, you’re not breathing as a front end developer.