Vanilla JavaScript vs. Framework Functions


Had a quick conversation at work today about whether or not it was good to use built-in framework functions for tasks that are simple to write in vanilla JavaScript. For example:

angular.isFunction(fn) 

vs

typeof fn === 'function'

I’ve tended to do the vanilla JavaScript, but while checking if something is a function is almost identical in complexity/length, while others can be (slightly) more complex:

angular.isObject(yourVariable) 

vs. 

yourVariable !== null && typeof yourVariable === 'object'

Still, either way is pretty readable, and fairly clear what it is doing. I wonder if this is what leads to people bashing frameworks like Angular for teaching people the “framework” rather than vanilla JavaScript, as newer coders who may not have ever had to check variable types who are learning Angular may use the framework checks without knowing how to do a similar thing in vanilla JavaScript.

I like to collect snippets that will help me, and reuse them where appropriate. This probably tends to skew me towards vanilla JavaScript, because I want my snippets to work no matter what project I am working on. For example, the following snippet gets the class (or type) of a JavaScript variable.

/**
 * getClass - get real type of JavaScript object 
 * @param object
 * @returns {string}
 */
function getClass(object) {
    return Object.prototype.toString.call(object).slice(8, -1).toLowerCase();
}

/*
getClass({}) // "object"
getClass([]) // "array"
getClass(function(){}) // "function"
getClass('') // "string"
getClass(1) // "number"
*/

I came away from the conversation thinking there was not one right way. If you are writing an app with the help of of a framework, there is nothing wrong with using the tools the framework provides. At the same time, it shouldn’t become a crutch where a framework is needed because a developer isn’t comfortable doing the same thing in vanilla JavaScript.

Getting the number of Facebook shares and/or likes of a URL


So…you want to display the number of times your url has been shared/liked on Facebook, but you don’t want to just use the Like Button with the count?  I don’t blame you, while I use the Like button when appropriate (and that IS the easiest way to get that number, it doesn’t help you at all when you want to do something a bit cool with the information, or display it in a unique format.

So, there are 2 ways currently to get an URL’s Facebook Shares.  You can make a query against the Facebook REST API and use the links.getStats method, or you can use the Graph API to make an FQL (Facebook Query Language) call.

The REST API is really easy to use, but unfortunately, it is deprecated, so Facebook could shut it off tomorrow if they wanted to.  Personally, I doubt it gets shut off, but don’t come crying back here if you use it and something stops working because they do.

To make a call using the REST API, using one of my more popular posts as an example, you can make a query to the following URL like so:

http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog

That will return a block of XML (yes, XML) that looks like this:

<links_getStats_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd" list="true">

    <link_stat>
        <url>
            http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog
        </url>

        <normalized_url>
            http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog
        </normalized_url>

        <share_count>22</share_count>
        <like_count>51</like_count>
        <comment_count>0</comment_count>
        <total_count>73</total_count>
        <click_count>0</click_count>
        <comments_fbid>468455836580018</comments_fbid>
        <commentsbox_count>0</commentsbox_count>

    </link_stat>

</links_getStats_response>

Then you’d just need to parse that returned XML into a usable format and grab the values that you want.  Generally you are going to want the total_count element, but sometimes you may want to differentiate between Shares and Likes.

Unfortunately, as mentioned, the REST API is deprecated, so if that concerns you, you can use FQL to query Facebook using the Graph API.

You can query the link_stat table with something like the following query:

SELECT 
    url, 
    normalized_url, 
    share_count, 
    like_count, 
    comment_count, 
    total_count, 
    commentsbox_count, 
    comments_fbid, 
    click_count 
FROM 
    link_stat 
WHERE 
    url="http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog"

You can make a GET request to the Graph API and the Graph API will give you back a JSON response listing the fields you requested.

https://graph.facebook.com/fql?q=[QUERY]
https://graph.facebook.com/fql?q=SELECT url, normalized_url, share_count, like_count, comment_count, total_count, commentsbox_count, comments_fbid, click_count FROM link_stat WHERE url="http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog"

The returned JSON should look like this, and is very easy to parse for the data you want.

{
   "data": [
      {
         "url": "http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog",
         "normalized_url": "http://www.local-pc-guy.com/web-dev/facebook-feed-dialog-vs-share-link-dialog",
         "share_count": 22,
         "like_count": 51,
         "comment_count": 0,
         "total_count": 73,
         "commentsbox_count": 0,
         "comments_fbid": 468455836580018,
         "click_count": 0
      }
   ]
}

 

My recommendation is to go ahead and get comfortable with, and use, the FQL query syntax and the Graph API.  That way you are protected against the REST API going away and you get JSON, which is slightly easier to work with than XML.

Enjoy querying against Facebook, FQL is quite powerful and there is quite a bit of information you can get with a bit of digging through the docs.

Removing (Google) CDN version of jQuery from Html5 Boilerplate?


I recently added a pull request to Html5 Boilerplate to remove the use of the Google CDN for loading jQuery.  Little did I know that it would stir up some great debate about whether using a CDN, specifically the Google CDN, was the best practice or if concatenating and minifying your code into a single file is better.

The pull request was based on 2 things, 1 was a conversation Karen Ford (my co-worker) and I had with Alex Sexton at the jQueryTO conference in Toronto. The second was a very data-driven blog post Alex referenced by Steve Webster posted in late 2011 about Caching and the Google AJAX Libraries.  In that post, Steve points out that there is generally very little performance benefit from loading jQuery from the CDN due to the amount of fragmentation that exists in what versions of jQuery are being used in the wild.

Read more

Kalypto – jQuery plugin for customizing checkbox and radio button form elements


I’m happy to announce the first public version of Kalypto (former working name, replaceRCInputs) through GitHub:

Demo page here: http://localpcguy.github.com/Kalypto/

Code here: https://github.com/localpcguy/Kalypto

Description: Kalypto is a basic plugin to use a simple sprite and CSS in place of a checkbox or radio button. Styles for the checked/non-checked state should be defined in a stylesheet, and the plugin changes the class and maintains the state of the checkbox or radio button.

Read more

JavaScript Resources


There are a ton of free or low cost resources for learning or improving JavaScript skills, and since I had recently gathered some together, I wanted to post them here for anyone to benefit from them.  So without further ado:

jQuery (definitely learn JavaScript first, don’t make the mistake of jumping straight into jQuery)

Read more