JavaScript Trends (Presentation Resource)

As long as I continue to participate in the in-house Kiandra IT Friday presentations, I’ll endeavor to open source and post my material online where it makes sense.



Friday just gone, I gave a quick talk on the advances made to JavaScript in the last 12-24 months, and what changes are on the horizon. It tied in nicely with the release of a high-level roadmap from jQuery regarding versions 1.8, 1.9, 1.9.x and 2.0.

Topics included:

  • jQuery Majors - 1.8 release notes, 1.9 vs. 2.0 and the oldIE debacle
  • ECMAScript 6
  • Patterns & Best Practices - MVVM/MVC, AMD, Compilation & Linting

I decided not to cover any of the hardware and browser based innovations as they’re more about exposing new device properties, inputs and outputs. I wanted to focus on how we’re writing our code, not WHAT we’re writing. I also forgot to add unit testing to the slides, but we covered it loosely.

 

I’ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I’ve added new content and improved old. I’ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out. I’ve added some sections on: The importance of understanding the box model (CSS) Knowing when to float, and when to position (CSS) Generating unique IDs without timestamps (JS) Preserving middle mouse click functionality (UX) I also: Made the website work without JavaScript enabled Cleaned up the overall design and interaction (Bootstrapped!) Re-wrote some content here and there Added pretty graphics to explanations Added some resources to the list Basically, we’ve gone from this: To this:  
Pop-upView Separately

I’ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I’ve added new content and improved old. I’ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out.

I’ve added some sections on:

I also:

  • Made the website work without JavaScript enabled
  • Cleaned up the overall design and interaction (Bootstrapped!)
  • Re-wrote some content here and there
  • Added pretty graphics to explanations
  • Added some resources to the list

Basically, we’ve gone from this:

To this:

 

Front End Development Guidelines - Update

Well that was a wild ride indeed! Since release, the front-end development guidelines I posted have gone bananas. Tens of thousands of page views, plenty of GitHub forks and followers, and even a kind word or two. Many thanks to Paul Irish and other figureheads for tweeting about the resource I put together. It really helped spread the word about what I was trying to do, and in turn pulled in some great comments and suggestions logged through the GitHub issues interface.

As we stand, there are currently 8 open issues and I’ve managed to close 20 others.

Some of the most recent changes I’ve made include:

  • Rewriting the section on commenting your JavaScript. My team leader at my previous employer put this one together when he was proofing my work, and slipped it in. A lot of people have flagged it as a massive WTF and it has seen been replaced.
  • I’ve merged in a range of spelling and grammatical changes. What can I say? Me dun speak english good-like.
  • Added the new “micro clearfix” to the section on clearing floats.
  • Added a section on commenting CSS blocks (handy!).
  • Further discussed whether remapping “this” to “self” is a good idea.
  • Added section IDs for deep linking (but no way to easily do so, as yet).
  • Removed the Gotham web font, which I embarrassingly left in, ignoring my own advice.

Thanks for reading and contributing, be sure to send through any further suggestions using the issues interface or via my email address listed on the right.