Skip to main content

JavaScript

Recently I was faced with a situation where I needed to get the value of an HTML5 date input field when it was changed by the user.  My first reaction was to setup a JavaScript listener that listens for a change or a click on the input element and then grab the value of the date accordingly.  So I setup my listener with jQuery and with vanilla JavaScript but I was unsuccessful in getting consistent result values no matter how I setup the listener.

Over the last month I have been tearing a lot of jQuery out of a pretty large JavaScript application and noticed that to completely removed jQuery from my application I am going to need to come up with a clever way to reproduce jQuery Validate. This decision made me pause for a moment because jQuery Validate is a pretty nice library for validating HTML forms and trying to reproduce this functionality seemed like a waste of time.

To illustrate the ease of using vanilla JavaScript over jQuery I decided to create a list of five examples that would demonstrate parallel behavior between JavaScript and jQuery.  The examples in this list are intended to be real world examples, but if you have any other examples I would love to hear about them too!

Another great resource to compare JavaScript and jQuery code samples is You Might Not Need jQuery.

 

In the last 6 months or so I have noticed that a lot of the JavaScript that I have been writing to perform DOM traversal, manipulation, and event handling has gone back to vanilla JavaScript.  Outside of writing Drupal themes I find myself not wanting to use jQuery at all.  So, what is happening here?  How did I go from a web developer that primary uses jQuery as his library of choice to completely removing it from my arsenal for everything that is outside of Drupal themes?  

React JS is a semi-new open source JavaScript rendering library that came out of a collaboration between the Instagram and Facebook engineering teams.  React was created as better a way to approach complex user interfaces where the traditional MVC approach was just not sustainable anymore.  Implementing React components and Flux style data patterns attempts to solves these complex issue by providing modularity between user interface components and a one-way flow of data on the client side instead of always interacting with the server, as is done in an MVC approach.

Looking for new ways to level up in the web development world I am always looking to do things more efficiently.  Along my quest for efficiency I recently ran into Gulp, a building tool that uses node js under the hood and is powered by npm, Node Package Manager.   npm is a great tool to manage node packages and dependencies, kind of like rpm and yum are to Red Hat, or pacman is to Arch.

Back at the beginning of March jQuery announced that the second beta release for jQuery 2.0 was available for developers to download and test out in their development environments. After looking over the release notes listed on the jQuery blog I found a few things very interesting for the next generation of jQuery.

Web animation just became a whole lot easier using the GreenSock Animation Platform. The GreenSock JavaScript libraries give you a vast array of options when selecting the necessary tools to make any animation on your site come alive.

In this tutorial, I’m going to demonstrate how to animate a series of potential background images using the GreenSock library TimelineMax.

TimelineMax lets you setup a series of animation events called “Tweens” that act as a waypoint in your timeline to execute a designed animation at a certain time or label. Lets jump right in.