Tag Archives: Javascript

Unlearning jQuery

jq-logo

Now that you have already learned jQuery, let’s unlearn it and get back to the basics. In this article, we will quickly go over the most common things that jQuery is currently used for and convert them to pure javascript.

jQuery is a great tool and contains polyfills that are beneficial. However, more often than not, I see it being abused and used for everything just for the sake of code simplicity. For example a webpage that is only using some basic javascript might not need jQuery at all, but a better understanding of javascript. Let’s take some of the basic things I have seen and convert them directly to javascript, in order to unlearn jQuery.

Stephen Dunn
Stephen Dunn

Latest posts by Stephen Dunn (see all)

Continue reading

My Top 4 Takeaways from NFJS 2013

**Android Development**
Google is working on Android Studio, which is built on the community edition of Intellij IDEA.  You can learn more and download the early access preview at http://android-developers.blogspot.com/2013/05/android-studio-ide-built-for-android.html.
A great book for Android development is “The Busy Coders Guide to Android Development” by Mark Murphy.  He uses an annual subscription model for the book and updates it regularly. He adds new material each month.  This way your book is never out of date. You can learn more at http://commonsware.com/Android/
It is possible to seed up the Android emulator!  Intel has developed the Hardware Accelerated Execution Manager (HAXM).  Selecting this as the emulator will drastically reduce the amount of time it takes to start the emulator.  You can learn more and download the HAXM at http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager.
Would you like to view your physical Android device on your computer?  Well now you can using a program called Droid@Screen by Jens Riboe.  You can learn more at http://droid-at-screen.ribomation.com/.
**HTML5 Offline Applications**
The HTML5 specification supports client side storage so that applications can work in an offline mode.  All of the latest desktop and mobile browsers support HTML5 client side storage. To tell the browser that you application supports client side storage you have to add the “manifest” attribute to the html tag at the top of the document.  You can learn more at http://www.ibm.com/developerworks/library/wa-offlinehtml/.
**CoffeeScript**
After seeing CoffeeScript, I don’t think I will ever write JavaScript again.  CoffeeScript is to JavaScript what Groovy is to Java.  It provides a much simpler syntax than JavaScript by incorporating language features from Ruby and Python.  CoffeeScript compiles into pure JavaScript and is compatible with all JavaScript engines.  You can learn more at http://coffeescript.org/.
**Server Side JavaScript**
There is a JavaScript runtime engine called Node.js.  The authors designed it for building fast, scalable network applications.  Node.js allows you to try JavaScript without needing a browser, by running the Read-Evaluate-Print-Loop (REPL).
Node.js has a large ecosystem.  For example, there is NodeUnit and Buster.js for testing, Jade for tempting, Express for web applications, and Connect for middleware.  Even CoffeeScript will run inside Node.js.  This ecosystem is managed using the Node Packaged Modules (NPM) registry.
NodeUnit and Buster.js provide new ways to test JavaScript, either within a browser or Node.js.  This is important since jsUnit is not longer actively maintained.

One of the best software development conferences you can attend is the No Fluff Just Stuff (NFJS) conference. The conference  is small and the speakers are mostly consultants working in the field.  I attended my 9th NFJS conference this year, and as always, came away with some great information that I can use right away.  So here are my top 4 takeaways from NFJS 2013:

Continue reading

Greasemonkey

Greasemonkey is an extension for Firefox that leverages javascript to modify the look and functionality of a page. At first glance this tool looks like a neat toy. However, this tool came in quite handy at one of our clients recently.

Our client was tracking their daily status on a whiteboard in a conference room. A corporate memo was sent out banning the exclusive use of whiteboards for teams. As a result we turned to our web-based tracking tool. Unfortunately their whiteboard equivalent was clunky and inadequate. I spent a few hours putting together a Greasemonkey script that altered the look of this page to mimic our old whiteboard. These changes helped ease this transition.
Continue reading

YUI3 Lets You Call Webservices With No Server Required

I like YUI3, mostly because I can use it to fill in the gaps between HTML4 and HTML5, and also because a single line of code can make a button zoom around the page:

  var myAnim = new YAHOO.util.Anim('testButton', 
                      { width: { to: 400 }  }, 
                      1, 
                      YAHOO.util.Easing.easeOut);

Also, I can define data sources and polling intervals completely client side, without having to wait for everyone to finish implementing the event-source tag. YUI3 defines 3 useful objects: DataSource, DataSchema, and DataType. DataSource defines a generic source of data. It could be a function, a file, or a web service. Once the DataSource has been configured, you can pull from and publish to the specified location. Here’s a simple example:

YUI().use("datasource-function", function(Y) {
   var getDate = function() {
     return new Date();
   },
   dateDataSource = new Y.DataSource.Function({source:getDate}),
   callback = {
      success: function(e){
                  alert("Current Time is: " + e.response.results[0]);
               },
      failure: function(e){
                  alert("Error!: " + e.error.message);
               }
    };
 
    dateDataSource.request(null, callback);
}

Above, we’ve got some basic YUI steps. The first line defines a block of YUI code that depends on the datasource-function component. In the block, we define a method to get the current date and time, and a DataSource the pulls its information from that function. Next up, we define a callback to handle the possible return situations when the data source requests information. The last line requests data from the function.

YUI will call the getDate function, take the output from that function and pass it as an event to the callback. If there was no problem, the browser will pop up a window telling you what time it is.

Enough of that, let’s turn it up to 11. We will change up the data source to pull from a webservice first:

   stockDataSource = 
            new Y.DataSource.Get({source:"http://www.stocks.com/NASDAQ"},

The Get data source knows to look for a URL. We’ll pretend this one will give us the NASDAQ index number. We will also pretend that the response looks like this:

<stocks>
  <stock>
     <name>NASDAQ</name>
     <value>189.14</value>
  </stock>
</stocks>

So, now we need to define the schema for the data source. Simple enough, we just need to plug in a schema definition:

  stockDataSource.plug({fn: Y.Plugin.DataSourceXMLSchema, cfg: {
     schema: {
          resultListLocator: "stocks",
          resultFields: [{key:"value"}]
     });

Above, we’ve defined the resultListLocator to the be xpath to a list of results, in this case stock nodes. Then we specify the fields of that we’re interested in, namely the value node. The DataSchema will be applied to all data coming into the data source. Now, we just modify the callback handler to deal with the new information, like so:

   callback = {
      success: 
        function(e) {
          alert("The NASDAQ Index is currently: " + e.response.results[0].value);
        },
      ...
   };

The response contains an array results, which is a list of objects exposing the resultFields as properties. And now when stockDataSource.sendRequest(null, callback); is executed, the DataSource will consume the webservice, format the XML into an array of objects, attach them to the response event and pass it on to the callback function. No server handling required.