Upcoming Changes in jQuery 3

jQuery has been going strong and steady but is no longer as popular as it used to be. It’s still good for beginners to use but there are many alternatives nowadays. One major change in jQuery v2 was the removal of IE8 support and now we’re about to have version 3.0 Before 3.0, version 2.2 was released February 22, 2016 which had a big bug fix of the position() method which was causing a problem in Internet Explorer

At the time of this writing March, 2016, jQuery 3.0 is in Beta. Access the code now https://code.jquery.com/jquery-3.0.0-beta1.js or install via npm: npm install jquery@3.0.0-beta1

The performance has been improved of the show() and hide() methods by 100%, see benchmarks here http://jsperf.com/old-vs-new-show-hide/3

There was an issue with the data() method handling attributes with non-alpha characters. Something like this would fail
<div data-foo-42=”bar”></div>

The jquery.deferred object has been updated to be compatible with ES2015 Promises thus changing the then() method. An error callback turns in a rejection now.  Also callbacks are invoked asynchronously instead of on binding. The catch() is now an alias of then(null, func).

Precision has been added to width(), height(), css(‘width’), css(‘height’) so values can have decimal places since IE and Firefox tend to use them more.

These methods have been completely removed: load(), unload(), error()

jQuery animations have improved performance using requestAnimationFrame from the browser which are supported except in IE9 and Android 4.3.

jQuery custom selectors like :visible and :hidden are now up to 17 times faster! See the performance profiling https://github.com/jquery/jquery/issues/2042

Doesn’t seem like a lot but better web performance is always a good thing so even though the version is changing from 2.2 -> 3.0 the 3 indicates that as a new version, older usage of jQuery will break since some methods were removed. If thats the case for you, don’t forgot about adding jquery migrate to your code https://github.com/jquery/jquery-migrate/


Jabber Keyboard Shortcuts


If you’re using the instant messaging application Jabber by Cisco, it is likely that you are also working and need a quick way to switch between tasks without using your mouse. Here are the top keyboard shortcuts to increase your productivity, or at lease prevent you from moving the mouse.

CMD = means the command/apple key
Opt = means the option/alt key

CMD + / = set focus on main jabber window

CMD + Opt + / = set focus on your call or open chats window

CMD + Opt + [left or right arrow] = rotate through users in an open chat session if more than one is open

CMD + Opt + L = go to file transfers

CMD + , (comma) = go to preferences

Finally, if you are annoyed by the alerts or icon bounces in your dock when a chat member does anything you can change those notifications. Just go to the ‘preferences’ and look for events. Then select the event you want to adjust by modifying its corresponding alert behavior.

New Directives in AngularJS 1.3

In October 2013, AngularJS officially released version 1.3 and on top of that are discussions about significant changes in version 2,  which is a long way from production-ready so don’t even look into it.  I’m sure it will change several times considering that the feedback has been negative.  However 1.3 has a lot of positives which includes performance improvements, removed support for IE8, and new directives.  Here’s a basic summary:

  • One-time bindings
  • npm installer
  • ngModelOptions – tuning of model updates
  • ngMessages – form validity
  • ngARIA – Accessible Rich Internet Applications
  • No IE8 Support

Continue reading →

Express.js vs Sails.js Comparison

This is an overview comparing Node.JS frameworks including Express, Sails, HAPI and Lazo.js. Express is clearly the most popular currently version 4 at the time of this writing.   The next framework gaining popularity is Sails currently at version 0.10 with 124 code contributors since its inception in 2012.  Sails is not an independent framework on its own, because it uses Express for handling HTTP requests.  HAPI has 95 code contributors since 2011 but is mainly for building APIs on your server.   I am also mentioning Lazo.js because it was developed for SEO compliant websites and single-page applications are natively not SEO-friendly.

Express takes the most common tasks for a web server and makes them easier to use with less lines of code wrapping native Node.js functions.  Since there are cases where Express doesn’t abstract a needed function or doesn’t conform to some preferred convention, other frameworks take place.  Those other frameworks are not completely independent therefore you still have to use Express.  Since Express is already widely written about let’s focus on the other frameworks.  The possible main detractions of Express are the lack of  database abstraction and real-time socket communication.


This is where Sails comes in.  Sails follows the “Convention over Configuration” philosophy adding value to Express in several ways.  First it wraps socket.io for managing websockets whereas in Express you have different instances of HTTP and websocket servers.  Sails also includes a command line generator to quick start your projects using a scaffolding.  The folders generated will be:

/assets (for libraries)
/public (files rendered to client-side)
/config (settings, scripts before launch, translations, policies, and routes)
/view (templates in embedded javascript format)
/api (database adapters, models, controllers, and services)

Another great benefit of Sails is concatenating and minifying CSS and JS files using Grunt.  This will improve performance for the client-side because any additional files via GET calls increase page load times.  Routes in Sails use RESTful route conventions and are also similar to AngulaJS routes.  Here’s an examples:

module.exports = {
'/login': {
controller: 'auth',
action: 'login'

The typical url route may be /:controllers/:action/:id with automatic redirection if a parameter is omitted.

The views are for html templates using embedded js (ejs) and have four types:

  1. partial – html snippets
  2. layout – html that goes outside the body such as headers and footers
  3. server-side
  4. client-side

Models are defined by attributes and associations.  They follow object-role modeling Waterline.  The data adapters are pre-configured for memory, disk, and mysql. Here’s an example of a model:

var Model = {
attributes: {
title: {
type: 'STRING',
required: true

Controllers can be generated by command line with or without these included actions:
create, destroy, like, tag. Here’s a code examples:

var CommentController = {
create: function(req, res) {
module.exports = CommentController;

So now that you have something to compare to besides Express, let’s go over HAPI version 7, started in late 2013.


HAPI is a little more of the “Configuration over Convention” philosophy because it is designed for APIs but also includes features not available in Sails. These included features are:

  • input validation
  • caching
  • pre-fetching
  • auto documentation

The downside is the lack of community support, even though there are several modules available for download. Interestingly enough, HAPI cannot listen to localhost address. Here’s a code example:

var server = new hapi.Server('', 8080, config);
method: 'GET',
path: '/hello',
handler: function (request, reply) {
reply('hello world');


Finally another addition which is powered by HAPI is LAZO.js  This framework uses require.js, backbone, jquery and handlebars.  The reason LAZO is SEO compliant is because the routes are mapped to a URI for crawlers to index your site.

The anatomy is smaller so you only have:

/app (configuration code, css, and utilities)
/component (business logic encapsulation,
/models (data models and collections)



Developing Responsive Web Applications with AJAX and jQuery Review

book cover

Book available for puchase at PacktPub.com

You can develop web applications in so many ways and this book teaches you how with the most popular front-end library, jQuery and AJAX. Initially I was excited to find out if it’s possible to build a responsive web application only with jQuery and Ajax, but you still need a back-end. In this case, the author uses Tomcat to run a java server as the back-end. You might be surprised that all the source code files are in the txt extension along with one war file. Then I realized uncompressing the war file will output all the proper files to open the website without some java-based IDE. A non-java developer might not be able to figure that out right away, so the book is definitely targeted for java developers who want to learn the front-end.

Even though it’s possible to open the source code locally into a browser, it won’t be fully functional without running Tomcat. As a front-end developer I have read through all the examples and they are coded well, including comments, to demonstrate getting data from 3rd party APIs such as Twitter, Facebook, Google, YouTube, and Paypal. After having read through the book, it appears that more of the examples demonstrate usage of APIs rather than responsiveness. The early chapters do include details on responsive-making elements such as media queries, layouts, and the opera testing emulator, yet the author just uses Twitter Bootstrap for his app. I liked that the book includes good resources such as Draw.io and a few important CSS properties not seen in other books such as the text-overflow: ellipsis. Continue reading →

Building an Application with CoffeeScript Review

coffeescript course image

The intro of the video course states “familiarize yourself with CoffeeScript” and I did (course link http://bit.ly/1ix4XXb)  The other list items of learning in the description are also fairly accurate.  The “cake” built tool was demonstrated, using jQuery with coffeescript was demonstrated, built a simple framework was also demonstrated.  The inaccurate part of the description is the “Who is this video course for” which states “if you’re a beginner Javascript developer… this course is for you” …NOT!  Realistically it should be written as “if you’re a beginner coffeescript developer this course is for you”.  The usage of MVC concepts was great but it’s helpful if you’re already familiar with MVC.

After going through the course, I realized it is a good overview of coffeescript and how useful it could be, even though it’s not what I would call a “walkthrough” course.  It’s more of a class lecture where the professor describes the things you can do with coffeescript with a few examples then you get homework and have to figure it out on your own.

I was really excited at the beginning (section 1) watching the author use http://js2coffee.org to see the instant conversion of javascript.  It’s really fantastic how coffeescript applies good coding methods to develop your code.  This is also the part the author referred to the coffeescript’s documentation which is fine, but an actual demo would have been better.  I found the command line “cake” easy to understand but the author just types “cake -c filename” to show you the compiling but not telling you the “-c” option which I had look for in the documentation myself.

The template files are included so that’s helpful, but the coding speed in the video is too fast so don’t try to code along.  You will just have to open the corresponding chapter files when changing chapters.  The added benefit is some resources introduced in the video like the website where you can find any javascript library and a javascript library for generating PDF files.

To summarize this would have been an excellent course if it were double in length, walking you through the coding process, but instead it seems like a professor doing a typical lecture and expecting you to figure out the homework on your own. Get the course here!

1 Hour Crash Course in AngularJS

Have you thought about learning AngularJS, but find all the examples just too basic?

I did too!  I spent an entire week (full-time) during my vacation to break open AngularJS and see what’s possible.   What I came up with as a demo is a quiz where you can type in questions and answers, then play the questions one at a time to test yourself.  Here’s the curated content to spend 7 days learning AngularJS.

Continue reading →

Top 5 Sublime Text Shortcuts

Top 5 Shortcuts That Will Boost Your Coding Productivity

Are you new to the sublime text editor?  It’s really more powerful than it looks.   While it’s easy navigation with mouse and keyboard all the powerful tools are quickly accessible with a few shortcuts.  VIM users will likely stick to VIM after the steep learning curve of the abundance of keyboard navigation and non-existent mouse usage.  That’s great for speed and editing in SSH but take a look at the top 5 shortcuts that you can learn in Sublime Text 2.  You will go from novice to intermediate a lot faster in Sublime than VIM.

This top 5 list is coming from a non-VIM user, although I’ve tried VIM and appreciate what it has to offer.  In my brief opinion, VIM is for the hardcore coder while Sublime is for everyone who likes to code.  The following shortcuts are for Mac but you can substitute the CMD key for CTRL on Windows.  Also the ‘=’ sign does not include part of the shortcut.



This is not a shortcut itself, but allows you to include pre-defined text and function names for different languages.  You will find some pre-installed in Sublime Text 2, but you’ll have to download packages to your specific programming language.  It’s a bit annoying because you’ll need GIT and run terminal but it’s well worth it.

This is an example to do with GIT.  Clone the snippet repo into your User directory under Sublime Text.

~/Library/Application Support/Sublime Text 2/Packages/User/

Such as http://emmet.io/ for HTML and CSS and for https://github.com/kswedberg/jquery-tmbundle/tree/master/Snippets jquery/


Cmd + D or Double-click a word = highlight all instances of the word

This is great when you want to add quotes or parentheses around the selected text.  It’s a lot faster than typing quotes then pushing the arrow keys to close the quotes.


Cmd + R = Find symbols.

Symbols is defined by Sublime but in reality it means you can directly find functions in scripting languages or style directives in CSS.  The search works in conjunction with the @ symbol if you want to find something in a non-currently opened file.


Shift + Cmd + F = Search in all files

This is another great search feature which includes “search & replace” although it works in the current file as well as out of scope and searches all the files and directories in the root folder you have opened in Sublime Text 2.


Cmd + P = Find anything mainly files

You have your typical Ctrl+F for finding text, but Cmd+P will allow navigation to another file, package, directory, and menu options of the program itself.

Always remember “fuzzy” searching.

Make a Game with ImpactJS Tutorial

While doing research in game development using HTML5, ImpactJS is a framework that is mentioned as being the best to date for making HTML5 games.  The great thing is that you can port over HTML5 to mobile platforms using AppMobi, PhoneGap, or Ejecta.  You will also learn Node.js and Socket.io in the tutorials.

Here is an extended tutorial for beginners:

The entire playlist http://www.youtube.com/playlist?list=PLAD5A0C028DA09694

Responsive Web Design with jQuery Review


If you’re looking for a plethora of plugins, scripts, shims to add responsiveness this book is for you, but be prepared to figure out the differences yourself.  The book is written more like a reference book with short examples and brief explanation of many jQuery plugins.

I read the title several times after reading the content and can say that it is not the best fit.  My initial thinking led me to believe this would be more about coding with jQuery, however this is not the case.  The book is geared more for web designers that do not code with jQuery.  Most of the examples include jQuery with little explanation so you can get similar information available in the documentation of the individual plugins.  Possibly the worst part is that the author rarely distinguishes pros and cons of individual plugins doing nearly identical tasks.  There’s a lack of diagrams and screenshots so you have to implement the examples to see how they work.  On the other hand the author also lists many tools available via websites for wire-framing, placeholder creation, pixel conversions, and grid systems.

I would recommend this book for web designers that know html, css, jquery syntax and want to make their static designs responsive, elastic, or fluid with high browser compatibility.  Without knowledge of jQuery basics it’s difficult to customize the plugins made for responsive design.  Near the end of the book there is mention of performance and ideally you want the minimum amount of http GETS to load your scripts.  However with all the plugins available your design will easily accumulate 7+ js files.

You won’t become an expert in “responsive design” nor will you know how the plugins really work behind the scenes, but it’s a good place to start.

Continue reading →