Tech Tips, Tricks & Trivia

Stack Exchange is the family of Q&A websites all based on the Stack Exchange engine. The Stack Exchange API allows developers to use quite a lot of data from websites on the Stack Exchange network. The Stack Exchange API is based on HTTP and URLs. The responses are all in JSON. There is a "Hello World" introduction but  no tutorial for the API other than the documentation The API enforces a daily limit of 10,000 requests for those with a Key & 300 requests for anonymous calls from a single IP address with no Key. The API will cut you off if you make more than 30 requests over 5 seconds to any single endpoint. To discuss about the Stack Exchange API, applications that use the Stack Exchange API, or scripts that work on the Stack Exchange network of websites use the StackApps website or post programming related questions by tagging them with the  stackexchange-api tag on StackOverflow . If you are learning to program with JavaScript & JSON,...

The data in a Google Spreadsheet can be accessed in JSON and JSONP format through a URL .  The trick is to extract the key from a spreadsheet's URL (the key looks something like this - 0AtMEoZDi5-pedElCS1lrVnp0Yk1vbFdPaUlOc3F3a2c ) and place it in the position indicated in the below URL: https://spreadsheets.google.com/feeds/list/ KEY /od6/public/values?alt=json-in-script&callback=  This approach can be useful when a limited number of people manage a database but when it has to be publicly viewed by users of a website. You can even use Google Spreadsheet formulas (like ImportXML()) to create dynamic values for a column. So if you have data in a Google Spreadsheet whose schema is defined by the names in the first row, it is possible to get that data as a JSON feed and use it to programmatically display the list on a web page Retrieving a feed without authentication is only supported for published spreadsheets. On a related note - Microsoft too has an API tha...

Firebug, the Firefox add-on offers the best view among commonly used browser developer tools to visualize the JSON feed provided by an API. reviewing JSON in Firebug However, all native browser Developer Tools show JSONP data as a blob of plain text that is hard to make sense of.  JSON with Padding or JSONP's purpose is to circumvent the same-source policy limitations of XMLHttpRequest . JSON Viewer is a free tool that can present JSONP data in a tree view thereby enabling easy analysis. There is a small additional step though before you can view. JSON Viewer - Text tab After you paste JSONP into the textarea in the Text tab, click on the Strip to {} option in the toolbar Now when you click on the Viewer tab, the JSONP will be better readable JSON Viewer - Viewer tab

jQuery 2.x is a new improved version of the most popular JavaScript library.  Specifically, 2.x does not support legacy browsers such as IE6-8 but works with all modern browsers and in Node, browser extensions (Google Chrome add-ons, Mozilla XUL apps and Firefox extensions), and other non-browser environments (Firefox OS apps, Chrome OS apps, Windows 8 Store apps, BlackBerry 10 WebWorks apps, PhoneGap/Cordova apps, Apple UIWebView class, Microsoft WebBrowser control). jQuery 2.0 took 10 months in the making. The 2.0.0 file is 12 percent smaller than the 1.9.1 file. An app that only uses JSONP for $.ajax() and does not need to calculate offsets or positions of elements can exclude the offset and ajax/xhr modules . Considering all these new features in jQuery 2.x and my interest in the cookbook style of books that usually present key areas of a topic through practical examples or recipes, I was excited when I received a copy of ebook of  jQuery 2.0 Development Cookbook by Le...

There are many free Weather APIs that can fetch your weather details for a location but if you had to fetch it based on WOEID , you can turn to  YQL or the Yahoo! Query Language & Yahoo! Weather API . Interestingly, unlike other free Weather APIs, YQL can also return JSONP results over HTTPS. Here's the code (from  my first GitHub Gist ) - The default unit of measurement of the temperature in the results returned by the API, is Fahrenheit. You can specify "c" or "f" for the unit parameter to get results in Centigrade and Fahrenheit respectively. Note that lower-case "c" or "f" has to be used. Also see: Screen scrape with jQuery, AJAX, JSONP & YQL How can I bulk query the Yahoo Weather API for more than one location at a time? StackOverflow Yahoo Weather API, YQL Q & A

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

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

If you are receiving data through a JSONP API call from a third party service in your SharePoint 2013 NAPA app and you get an error of this pattern - " The page at https://*.sharepoint.com/* ran insecure content from http://{3rdparty_json_api_call} " ... make the JSONP API call from its equivalent HTTPS URL i.e. replace http with https. This fix will work provided the third party API supports HTTPS.

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

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...

When websites provide Feeds of their content, they not only allow that content to be read through Feed readers like Google Reader but also let other sites consume that content programmatically. These feeds can be in various formats like RSS, Atom, JSON, JSONP. Instead of scraping content from sites they don't own, developers can use RSS, Atom & JSON feeds with server-side programming languages to display that content on their own sites. JSON stands for JavaScript Object Notation. The advantage with JSON for developers is that it can be directly translated into a JavaScript object. No parsing is necessary to get at the data. A client-side programming language like JavaScript can however not be used to load a feed if the domain from which the feed is originating is not the same as the site where it is going to be consumed programmatically. That's were JSONP comes in. The P in JSONP stands for "padding". A JSONP feed is same as a JSON feed except that the fe...

Since reading this excellent article about scraping content from a Wikipedia page using Yahoo! Query Language (YQL) as a proxy for cross-domain Ajax , I'm hooked to YQL . YQL helps in circumventing the same-origin policy that prevents a script loaded from one domain from getting or manipulating properties of a document from another domain.  YQL has been around for about 2 years now & last year Yahoo introduced the capability to execute the tables of data built through YQL using JavaScript. Ajax, jQuery, JSONP (JSON with Padding) & YQL make a heady combination - check Christian Heilmann's code samples . Some facts about YQL from around the Web (work in progress) - * YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you. * It only returns the body content of the HTML - so no styling (other than inline styles) will get through. * .. .it treats the info on the web as a virtual table that developers ...