When business-owners and designers think front-end, they think design implementation. When I think of front-end, I think of everything that does not include server-side interaction (other than AJAX). Front-end developers are not “just” concerned with looks, they’re concerned with performance, compatibility, degradation and so much more. Well, I’ve been scouring the ‘net and found really cool javascript code that will help you leverage some performance and modern-style coding into your website.

Note: These are not sliders, they’re not “backbone.js”, these pieces of code are not application-specific, they’re general javascript plugins or code compilations that help performance and cross-browser compatibility

Respond.js

Respond.js is a polyfill of sorts that lets you use media queries in internet explorer and older browsers. It currently just supports min/max-width but honestly, that’s all you’re going to need for IE6-8.

Why use it? Well, if someone uses IE6 or 7, you can bet your ass that they won’t have a 1960px-wide monitor to view your site. Let’s guess it’s going to be 1280px or LESS. If your site is made with a 960px grid or above, there’s a chance you’ll encounter users whose monitors won’t be able to view your site. This is where media queries are very useful.

Another reason to use these is if you’re very concerned with cross-browser compatibility and at 4kbs for the file, there is no reason not to include in your <if IE> statements.

Head.js

Head.js is the one stop fix for everything. It truly is pretty damn amazing. It does everything in the background that you can ever need or think of (okay, maybe not EVERYTHING but a lot of stuff). Here’s what it does:

  • loads javascript files in parallel and loads it separately from the page rendering process. What does this mean? The page won’t wait for the js files to load before loading the rest of the site. It’ll all be done at the same time.
  • modernizr-like capability. You’ve heard of modernizr, and it’s included with Head. Now you can style elements according to how advanced a browser is. Does it not allow box-shadow? Add a border instead. Fixed, done. And it helps you create graceful degradation
  • Shiv away! Yep, it includes HTML5 enabler so that older browsers can run HTML5 :) No need for a separate solution
  • Screen size detector! This is like creating media queries without the media queries. Head.js adds a class according to the screen-size so that you can style the site accordingly. Immensely useful for non-modern browsers that don’t use media queries
  • Add back-end to your front-end – honestly, this is stuff I’d expect from the back-end to do or for a middle-end person to do but you can sniff out authentication tokens and cookies so you can change out your CSS according to if someone is logged in. You can also user page-specific CSS according to if you are on home page or elsewhere. You also get browser detection and browser-specific classes for not only internet explorer but other browsers also show up.
  • Enable Caching

Honestly, it’s a great javascript to do a lot through. My suggestion is to use it as an interface for a lot of features. I’ll probably start loading javascript files through it, use it for shiv and modernizr-like capabilities. I also like the browser detector, it lets me use “IE CSS hacks” without having to go directly into my html file to do an <if IE> or by using non-compliant CSS (*display: inline) and so on.

And at 17kbs before compression, it’s not very heavy!

Require JS

If you’re using a lot of javascript files, require lets you load those quickly and painlessly. Just point it at the folder where all your js files are and all those files will get automatically loaded so that you don’t have to mess with your html or header files (in the case of WordPress) to add more javascript files. RequireJS lets you load any and all modules.

Require also has an optimizer that minifies and combines your javascript files for better performance. It can either use Node or Java. You can also specify dependencies to load files in a certain order.

jQuery Tools

jQuery tools, with their really cool and inspirational logo ;), is a UI toolkit that works on top of jQuery. Think jQuery UI that’s focused on different aspects of UI. or just a collection of plugins. The toolkit includes some of the following things:

  • Tabs – Tabs, the basics of internet haha. jQuery Tools includes basic tab setup for all your needs.
  • Tooltips – recently gone into mainstream via WordPress, tooltips add important accessible information
  • Basic Overlay – Think lightbox. Click on an element and another element shows up over everything.
  • Scrollable – a carousel competitor. Line up elements, and scroll through them
  • Form Validation and Input styling – use range input and date input html5 components backed by javascript
  • Some extra stuff - jQuery tools also has some random other cool features that are useful like “expose” (click on an object, everything around it dims), flash embedding

Overall, it’s a neat little library to use and it’s only 4kbs in size. :)

What to do with all of these

When I see javascript libraries like these, I immediately think: I WANT TO USE ALL OF THEM! But that’s a bad idea actually. I’ve a workflow and it’s efficient. Trying to mess with it to add some flair (that may not even be necessary) may not be the best thing. That said, I am excited about trying some of the features above. I’ve already started including RespondJS as a fallback for older browsers. It didn’t take much, I add it to my js folder and link it in my <ie only> tag.

I’m pretty excited about HeadJS, that’s pretty much the one I’m the most excited about. The javascript loading (especially this) , shiv inclusion, browser detection and caching is pretty awesome and the other features may come into my workflow as time goes on. I currently use html5shiv for html5 support on older browsers so this would be a great replacement if nothing else.

Do you have any javascript libraries or pieces of code you suggest?