JavaScript Pocket Reference by David Flanagan; O'Reilly

JavaScript Pocket Reference isn't really a dictionary styled reference that I imagined it to be. This book reads more like a O’Reilly book in the Nutshell series than a Reference. It should have been called JavaScript in a Nutshell for this is a distilled & condensed version of the author's immensely popular JavaScript: The Definitive Guide. It is however a well-written book that covers the important parts of JavaScript and the essentials of ECMAScript 5 in less than 300 pages.

This book is like a quick tour of the modern-day JavaScript landscape by an expert guide. The author fills the discourse with interesting facts:

Division by zero is not an error in JavaScript: it simply returns infinity or negative infinity.

...and explains relevant details concisely:

"use strict" does not involve any JavaScript keywords: it is simply a JavaScript string literal expression, and is ignored by ECMAScript 3 interpreters. When placed at the beginning of a script or of a function body, however, it has special meaning to an ECMAScript 5 interpreter.

This is a book that serious JavaScript developers should have handy so that they don't have to be distracted jumping off to look up things in online references.

This review is based on the ebook I received through the O'Reilly Blogger Review Program.

Related:

• JavaScript: The Good Parts - photo gag
• Free JavaScript & jQuery learning resources

Read More

Things to consider before settling on a JavaScript Library or jQuery plugin for your project

In the article, Which JavaScript Library Should I Pick?, Pamela Fox has listed some practical points to consider before you settle on a JavaScript Library (or a jQuery plugin) for your project. Here is a summary check-list based on her article:

* Will it be a good developer experience?
* Well documented
* Flexible
* Responsive community
+ Number of forks
+ Number of issues
+ Vibe on issues
+ External community
* Actively maintained
* Future thinking
* Tested
* Clean code
* Will it be a good user experience?
* File size
* Performance
* Browser support
* Accessibility
* Responsive

To me, good documentation (including samples) and visibility on StackOverflow are the most important factors.

Read More

HOW TO show local time for a location based on its latitude and longitude

Here is a GitHub Gist snippet that shows how to get local time for a location based on its latitude and longitude using World Weather Online's Time Zone API & jQuery -

This can be useful in scenarios where you have to display time for a location relative to another.

Read More

HOW TO display book titles in Amazon ads dynamically based on context or custom keywords

The Recommended Product Links Amazon widget can be adapted to display book titles in Amazon ads dynamically based on context or custom keywords.

Here is a GitHub Gist snippet that illustrates this -

I have used this in our app to search for free eBooks from the Google Books collection. It improves the app by showing results from an additional info source and helps surface free Kindle eBooks that may be available for a specified keyword.

Read More

Search for free eBooks from the Google Books collection

I & my wife have a fascination for Web APIs that return results in JSON or JSONP format. We noticed that Google Books doesn't readily show if a out of copyright book is available for free download in PDF or EPUB format. You have to go through multiple steps using Advanced Search to find this.

Luckily, Google provides a Google Books API that exposes this information and it returns the results in JSON format. We wrote a web app that searches for free eBooks from the Google Books collection.

It uses a responsive HTML5 Boilerplate template generated using Initializr.

The H5BP template's view for Mobile

Some other interesting things we discovered while building this app:

• Results returned by Google Books API may vary by country. When a programmatic request is made to their book search API via the app, the same code will return different results for different countries. 
• Project Gutenberg doesn't have an API but they provide one huge file that contains the RDF data for all books. 
• Open Library has a RESTful API that provides useful information about books.
• Calibre is free and open source e-book software that can convert ebooks into many formats 
• Flipkart lets you download over 9000+ ebooks for free but you will need their app to view. 
• Programmable Web maintains a directory of Web APIs & tracks news about mashups built using those APIs. The site is a treat for developers who like Web APIs & creating mashups.

Read More

Firebug simplifies programming with JSON

The Developer Tools (F12 keyboard shortcut) of popular browsers show the JSON output returned by an API, like this -

Firefox add-on Firebug's JSON tab within the Net tab, presents it neatly like this -

This makes it easy to extract the specific details that you are after. 

The above view helps to visualize how to get to a flickr photo's id on making a call using the jQuery getJSON method to one of the flickr API services - data.photos.photo[i].id

Read More

HOW TO handle a API's JSONP response that uses a static or fixed or named callback function

Script and JSONP requests are not subject to the same origin policy restrictions. Most APIs that return JSONP data will generate a dynamic callback function name and they typically have a parameter like jsoncallback=?.

However some API's like flickr, Facebook require that you use the callback function name that they specify.

Here are a couple of ways that you can tackle that scenario -

window.fixed_callback = function(data){
  alert(data.title);
};

$(function() {
  $.getScript("http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&tagmode=any&format=json&jsoncallback=fixed_callback", function(data) {
  alert('done'); } );
});

click to enlarge code snippet

Read More

Interesting stats on JavaScript libraries

PPK, a JS guru, published a public poll to know the popularity of JavaScript libraries. Among 3200+ votes cast, 91% said yes to the question "Do you use any JavaScript library in more than 50% of your projects"  and the same percentage of people who participated in the poll said they have used jQuery in the last year.

Popular JavaScript libraries can be accessed from Google's & Microsoft's CDNs. CloudFlare's CDN offers 158 JavaScript libraries that you can include in your code (for improved performance) instead of having a local copy. For JS enthusiasts, their library list with links to their respective home pages, is something worth exploring.

Read More

Get fresh news fast from Twitter and Google News JSONP feeds using jQuery

Twitter is a good source for raw local news. Google News aggregates content from publishers around the world. Both of these services provide JSONP feeds.

Try out my search application written in JavaScript that gets the latest tweets and news from these JSONP feeds. As it is all in JavaScript, you can view the HTML source to see how it works.

Resources you may need if you want to adapt it for your requirement -

• Infinite scrolling with JQuery, AJAX & Twitter
• Google News Search JSON API Developer's Guide
• Twitter Search API Reference
• Using JSON to Exchange Data

Read More

Developer resources for JavaScript based Windows 8/Metro apps

MSDN documentation is a great reference but for learners getting started with Windows 8 app development using JavaScript, the maze of links within the articles can be distracting. Here is a collection of end-to-end, free technical resources that I've found so far:

1. Jeff Brand has written a nice article series on building a Metro-style HTML/JavaScript app on Windows 8. The articles are short, simple & well-written. The content is also available in video format. 
2. The PDF version of the Apress book Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript by Adam Freeman is available as a free download from Microsoft
3. 12 of the 17 chapters of the free ebook Programming Windows 8 Apps with HTML, CSS, and JavaScriptfrom MS Press are available for previewing. The complete book will be released on 26th Oct, 2012

Also see:

• Free 42 episode video series on HTML5, CSS3, JavaScript for Beginners
• Get Microsoft certified in HTML5 with exam 70-480

Read More

Paul Irish chats up with the Bangalore JS community

Chrome Dev Relations guy & Web Standards champion, Paul Irish chatted up with the Bangalore JS community on Twitter a few days ago. He shared tips & revealed interesting facts about Chrome Dev Tools. Excerpts (paraphrased at some places to provide context):

• My favorite hidden feature in Chrome Dev Tools is shift-esc which reveals the console in slow-mo.
• You can now emulate User Agents, and screen size of a lot of devices...& emulate touch events. Soon geolocation spoofing.
• ..a more recent addition is "Force Element State" where you can force an elem into :hover mode. 
• new: in the console $_ now refers to the most recent returned value in the console.
• $0 refers to the element inspected. so, click on a tag in the elements panel, and $0 in the console refers to it.
• ..if anyone has any feature requests or trouble areas the DevTools could help with, Holler at me. I'm your man.
• the other complement to $0 is inspect(elem) inside console will switch over to Elements panel to inspect that one
• Offline (mobile apps) is still a tough nut to crack. http://www.html5rocks.com/en/tutorials/#technology:offline is a great guide to what you can do....some apps like gmail and google docs have gone offline beautifully...Workflowy's offline mode is strong too and a feature called prefer-online was added to appcache in the HTML spec  http://html5.org/tools/web-apps-tracker?from=7135&to=7136 which may help some but there is still work to be done. 
• you can explore new upcoming devtools stuff: go to about:flags, flip the devtools one, then see Experiments in settings
• beautify JS: in Sources panel hit the {} icon at the bottom. Boom. beautified. We're looking at making it happen for CSS
• Q: Which is the most useful feature of chrome-dev-tools, that supposedly most people don't know? A: Definitely best feature: "Disable Cache" that's in Settings. And that you need devtools to be visible for it to work. :)
• Q: ..seems Console api which comes with chrome/firefox aren't standardized? any efforts happening to standardize? A: the console API is standardized unofficially, never in the W3C, but all tool vendors agree.. in fact! now $ will be a shortcut to document.querySelector, which is more of what people expect, thanks to jQuery.
• Q: is id based selector better than class based? (when there are many of them)  A: webkit doesnt actually have a fastpath for #id selectors, unlike jQuery.. class selectors are more maintainable IMHO
• Q:  Can we get chrome dev tools to inspect my web app and tell me all the memory leaks places including line number and file name? A: the Heap Profiler in devtools helps a lot. There is a 3 snapshot technique Gmail pioneered that we'll share soon that helps...you won't get as accurate as "HERE ARE YOUR LEAKS" but the usability of the heap tool is getting stronger all the time

Read complete conversation

Related:

• Chrome Developer Tools: Videos
• Introduction to the Chrome Developer Tools
• A Re-introduction to the Chrome Developer Tools

Read More

HOW TO make Google skip redirection step on clicking search result

There have been times when I wanted to just copy the URL of a site mentioned in a Google search result without having to go to the website & then copying it from the address bar.

However when I right click & copy the URL, this is how the address typically looks -
http://www.google.com/url?sa=t&rct=j&q=menu_elements_selector
&source=web&cd=5&cad=rja&ved=0CEIQFjAE
&url=http%3A%2F%2Fapi.jquery.com%2Fattribute-ends-with-selector%2F
&ei=LdQ8UKOkJYPTrQfn0IHIDA
&usg=AFQjCNFmICOvDtxuImTTeXY3pCDQNW6yVQ

(URL broken with new lines for readability & to preserve formatting)

Digging into the source code reveals that there is a mousedown event that fires up when the link is accessed & re-creates the HREF of that anchor tag so that you have to pass through a quick additional Google step before you can reach the search result site

I wished there was a bookmarklet that could stop Google from mangling the URL and skip the redirection step. Guess what, there is bookmarklet Zap Events that can remove all JavaScript events assigned to elements in a web page.

It only zaps the following 4 events - "mouseover","mouseout","unload","resize". I tweaked the code a bit to include the "mousedown" event as well -

javascript:(function(){var%20H=^
["mouseover","mouseout","unload","resize","mousedown"],^
o=window.opera;%20if(document.addEventListener/*MOZ*/&&!o)^
%20for(j%20in%20H)^
{document.addEventListener(H[j],function(e)^
{e.stopPropagation();},true);}^
%20else%20^
if(window.captureEvents/*NS4*/&&!o)%20{%20^
document.captureEvents(-1/*ALL*/);^
for(j%20in%20H)^
{window["on"+H[j]]=null;}}%20else/*IE*/%20{function%20R(N)^
{var%20i,x;for(j%20in%20H)^
if(N["on"+H[j]]/*NOT%20TEXTNODE*/)N["on"+H[j]]=null;^
for(i=0;x=N.childNodes[i];++i)R(x);}R(document);}})()

(remove  ^ & newline character when you're using this code)

With this modified bookmarklet, I can now copy the actual URL in a Google Search result.

Update 5/Sept/12: Found that this redirection feature bugs a lot of people. This thread on the StackExchange WebApps forum has simpler bookmarklet code to address this issue:

javascript:function rwt(a,f,g,l,m,h,c,n,i){return a};

Related:

• JavaScript Bookmarklet Builder
• Google Mobilizer Bookmarklet - view just text of web pages
• Is there a no-javascript version of search?

Read More

Free 42 episode video series on HTML5, CSS3, JavaScript for Absolute Beginners

Microsoft's Channel9 website has published a two-part video series with 42 episodes on HTML5, CSS3 and JavaScript by a great tutor.

The course is delivered by Bob Tabor who runs LearnVisualStudio.net, a video tutorial site. In the first episode  in the HTML5 & CSS3 series, Bob clearly outlines what it will NOT cover and sets the right expectations.

The videos can be downloaded (recommended) or viewed online on a Silverlight-supported browser. I was pleasantly suprised to see that some of the online videos on Channel9 now let you jump to a specific point in the video without having to start from the beginning in case you've already watched a portion of a long video earlier.

Unlike earlier, the duration of the video & the file sizes of the video in the multiple formats that it is available for download, are also shown.


If you're on a lean-bandwidth connection, you can try downloading the video in the format that has the smallest size (however on download link to see tooltip showing file-size). I noticed that their mid-quality WMV files and in some cases the MP4 format videos have relatively smaller sizes.





Also see:
HOW TO compare HTML5 features supported by versions 8, 9 & 10 of IE
Who is using HTML5?

Read More

HOW TO work with a JSON/JSONP feed locally

When you're working with a JSONP feed  like the one returned by Twitter Search API or Google News, the different results that show up each time may distract you from the functionality that you're building. You can instead work with a copy of the JSON resultset locally and hook up the code to the actual JSONP feed when you're done.

A JSONP feed is just JSON-formatted response wrapped in a function call. You can grab the JSONP content generated by an API by going to the Network Tab within Developer Tools (F12 keyboard shortcut) of Chrome or IE or Firebug within Firefox.

When a JSONP feed is called through jQuery, it will look something like this -
jQuery17109422175763174891_1337695981767({json})

To work with the dynamically generated JSON, we need the content within the brackets - {json}

Save that content within a text file & give it some name & a ".js" extension. To use the JSON content locally, specify the file name as the first parameter to the $.getJSON method -

$(document).ready(function(){
    $.getJSON('tsearch.js', function(response){
      for(var i=0;i<response.results.length; i++){
      $('#tweets').append("<li>" + response.results[i].text + "</li>");
    }});
});

The above example refers to  JSON returned by Twitter Search API.

Also see:

HOW TO show expanded form of shortened URL within a tweet using Twitter API 
HOW TO convert a RSS feeed to a JSONP feed on the fly

Read More

Google Mobilizer Bookmarklet - view just text of web pages

You can use Google Mobilizer application, when you need a mobile-friendly version of webpage. If you are on a low-bandwith Internet connection, Google Mobilizer can be used on a PC or laptop to view just the text (and optionally images).

When I'm on Twitter, I don't have a good feeling about clicking URL shortened links as they don't reveal the domain name and can lead you to spam. Ocassionally, I'm directed to web pages that have more ads than content. I also learnt the creepy fact that any site can find out if you are logged into social web sites.

http://datatransparency.wsj.com/

Considering these privacy, security & readability issues I faced, I wished there was a way to open all links in a web page with Mobilizer so that I can view a minimalist, text-only version of a web page. I wrote the Google Mobilizer Bookmarklet to scratch this itch.

The "prettified" code looks like this -
javascript:(function() {
    a = document.getElementsByTagName('a');
    for (i = 0; i < a.length; i++) {
        a[i].href = 'http://www.google.com/gwt/x?noimg=1&btnGo=Go&source=wax&ie=UTF-8&oe=UTF-8&u=' + encodeURIComponent(a[i].href);
        a[i].style.backgroundColor = '#f0f0f0';
    }
}())

To use the bookmarklet, drag & drop the following link to you Bookmarklet/Favorites bar - Mobilizer

Once you're on a page that has a lot of links (like Twitter), click on the Mobilizer bookmarklet & it will then set a light grey background color to all hyperlinks on that page & prepend the Google Mobilizer URL to them.

As the Google Mobilizer application works by taking a querystring as an input, it can be adapted to work like a search provider in Chrome & Opera, to simplify its use.  The string to use for configuring it is -
http://www.google.com/gwt/x?noimg=1&btnGo=Go&source=wax&ie=UTF-8&oe=UTF-8&u=%s

If you assign a letter like M to this app, you can type M in the Chrome address bar/omnibox & then the type the URL you would like to see via Google Mobilizer.

Related:
The Joy of Bookmarklets
View clutter-free web pages with TidyRead, Safari Reader
HOW TO block images/image ads originating from a specific domain in Firefox 4 & above
HOW TO block IFRAME based ads

Read More

JavaScript Performance tips

Excerpted from "Chapter 7: Writing Efficient JavaScript" of the book "Even Faster Websites":

• Performance .. is not just about how long it takes for the page to load, but also about how it responds as it’s being used.
• Out-of-scope variables take longer to access than local variables.
• A very common mistake that leads to performance issues is to omit the var keyword when assigning a variable’s value for the first time. 
• If an array item or object property is used more than once, store it in a local variable to speed up access to the value.
• Generally speaking, interacting with DOM objects is always more expensive than interacting with non-DOM objects.
• The if statement is best used with a small number of discrete values or a range of values; the switch statement is best used when there are between 3 and 10 discrete values to test for; array lookup is most efficient for a larger number of discrete values.
• To make a loop the most efficient, reverse the order in which you process the items so that the control condition compares the iterator to zero.
• Trimming strings may be expensive, depending on the size of the string. 
• Steven Levithan's optimized string trimming function:
  function trim(text){
  text = text.replace(/^\s+/, "");
  for (var i = text.length - 1; i >= 0; i--) {
  if (/\S/.test(text.charAt(i))) {
  text = text.substring(0, i + 1);
  break;
  }
  }
  return text;
  }
• Array processing is one of the most frequent causes of long-running scripts.
• Generally speaking, no single continuous script execution should take longer than 100 milliseconds...
• Because JavaScript is a single-threaded language, only one script can be run at a time per window or tab.
• Exactly what causes the browser to display the long-running script dialog varies depending on the vendor:
  • Internet Explorer displays it when 5 million (by default) statements have been executed. 
  • Firefox shows it when a script takes longer than 10 seconds (default).
  • Safari displays it when the execution time exceeds default timeout of five seconds
  • Chrome (as of version 1.0) has no set limit on how long JavaScript is allowed to run. The process will crash when it has run out of memory.
  • Opera is the only browser that doesn’t protect against long-running scripts. Scripts are allowed to continue until execution is complete

Read More

Brace matching for JavaScript/jQuery in Visual Studio 2010

With jQuery you will need to write lesser code than you would with JavaScript but it will probably use more braces, brackets & parentheses. While programming with jQuery, it's easy to miss an ending brace, bracket or parenthesis.

Although Automatic Delimiter Highlighting is available with  C# code, it's sorely missed while you're working with JavaScript or jQuery. Thankfully there is a time-saving open-source VS Extension in the Visual Studio Gallery that bridges this gap - JScript Editor Extension. Besides other features, this nifty add-on automatically highlights the matching opening or closing brace to the one currently at the cursor. It supports matching parenthesis: (), square brackets: [], and curly braces: {}

I like Notepad2's Ctrl+Shft+B keyboard shortcut that highlights the entire area between matching brace, bracket or parenthesis.Ctrl+B is an easy to remember shortcut to find matching brace in that editor.

Read More

Beware of breaking changes in jQuery library versions

I often re-use old code because it's mostly bug free and has withstood the test of time.

I recently copied a jQuery snippet from a perfectly working old project and was shocked to find that a particular piece of AJAX functionality wasn't working anymore. It turned out that there was a breaking change in the jQuery.ajax() method  in jQuery library version 1.5 and the code was failing because the original sample ran an older version of jQuery (1.4.2)!

The jQuery Blog appears to be the official place where breaking changes are announced along with the news of new releases.

Some jQuery plugins too will only work with a specific version of the jQuery library.

Related:
jQuery videos for ASP.NET developers
Free JavaScript & jQuery learning resources

Read More

Explore console.log if you use JavaScript alert extensively for debugging

The JavaScript alert method is something that most web developers use to debug their code. However, now with all popular browsers incorporating Developer tools within them, there are easier ways to debug client-side code. Firebug is an optional add-on for Firefox that adds richer features to those natively available & probably the motivator for browsers to develop their own Developer tools. I guess, it was IE that started using F12 as keyboard shortcut to start up Developer tools and now that's synonymous with Developer tools on almost all browsers.

Within the Developer tools, a Console panel exists for executing script statements on-the-fly. You can make use of Console methods to expose information that is flowing through your scripts. The console.log method can be used as an alternative to the obtrusive JavaScript alert method to track what's going on within your code without having to click OK for every dialog box that alert throws up. This will work only if you have the Console opened though.


So to remove your debugging code when you deploy to production, use this:
if ( window.console ) {
  // console is available
}


While console.log is one of the more common methods supported in popular browsers(IE, Firefox Firebug, Chrome, Safari), there are other methods as well for which support may vary -

• console.info
• console.warn
• console.error
• console.assert

Ctrl+Shift+J shortcut lets you jump to the Console panel in Chrome.

Read More

Free JavaScript & jQuery learning resources

There is a nice compilation of JavaScript & jQuery learning resources in this community wiki on StackOverflow.com. I picked those which are publicly available online along with my own favorites. Here's the list -

Videos:

• appendTo video tutorials 
• JavaScript from Null: Video Series
• Ontwik JavaScript videos 
• Crockford on JavaScript  

eBooks, Articles, Tutorials -

• Eloquent JavaScript by Marijn Haverbeke 
• Learn JavaScript - Mozilla Developer Network
• W3Schools.com/jQuery 
• W3Schools.com/JS
• Stephen Walther's JavaScript Reference
• jQuery Fundamentals (online book by Rebecca Murphey with contributions by James Padolsey, Paul Irish, and others.)

(work in progress...)

Also see:
Popular JavaScript apps dissected 
Free Online University Courseware & Video Lectures 
JavaScript: The Good Parts - photo gag
Stanford's CS101 course now taught with Javascript (thanks @tkadlec)

Read More