<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\758211560\46blogName\75Tech+Tips,+Tricks+%26+Trivia\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75BLUE\46layoutType\75CLASSIC\46searchRoot\75http://mvark.blogspot.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://mvark.blogspot.com/\46vt\75-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
A seasoned developer's little discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks

How my old technical books are helping me now

Thursday, October 23, 2014
I work (and surf the internet) standing up these days at home.
books can never go waste
I've found a good use for my old hard bound MS Press books for Microsoft Certification exams

Also see: JavaScript: The Good Parts - photo gag


Debugging Windows 8.1 Apps

Visual Studio 2013 has the ability to quickly debug a Windows 8.1 app even if it’s not your app.

Fiddler is a free tool for HTTP debugging of Windows 8.1 Apps
Notification after installing Fiddler on Windows 8.1
To enable traffic capture of even third party apps, the Win8 Config button has to be clicked.

Labels: ,

Notes from the MVA course Single Page Applications with jQuery or AngularJS

Wednesday, October 22, 2014
Dave Voyles and Stacey Mulcahy have delivered a 7-part roughly 5-hour video course on Single Page Applications with jQuery or AngularJS. Key points from that course:
- A single page application or SPA is a web application that fits on one page
- A SPA can redraw any part of the UI without refreshing the page
- They provide native-application like experience in the browser
- Data is seperated from the presentation
- Often includes templating, AJAX, routing
- Loads data & views on demand
- Examples - Twitter, email clients in the browser, Azure portal
- Challenges:
  ^ SEO considerations
  ^ Browser history
  ^ Requires JavaScript to be enabled
  ^ Potential memory leaks - must deal carefully with JavaScript
- Library vs Framework - A library has specific operations and it is usually organized into a class with specific functions (like image manipulation) while a framework defines the structural skeleton of an application - typically it is the abstract design with the base behavior in place.
- The simple code sample demonstrated in the course showing the same functionality built with jQuery and AngularJS separately, is available on Github
- The code sample makes calls to a quick-to-build Azure Mobile Services REST API to fetch and add information to a SQL Azure table without writing any server-side code.The endpoint can be restricted to be used by one or more specific domains (localhost allowed by default).

Labels: , , ,

JSONP Viewer

Tuesday, October 21, 2014
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

Labels: , , ,

HOW TO take a full page screenshot of a web page directly with Firefox

Monday, October 20, 2014
In Firefox (version 33), use the shortcut Shift-F2 or open Tools > Web Developer > Developer Toolbar.

At the command line that appears, type the command:
screenshot filename.png --fullpage

Unlike the full page screenshot option with the Responsive Design View that generates screenshots at different screen resolutions and with a predefined filename, the above Developer Toolbar Command line option lets you name the file as you like.

The screenshot command accepts multiple  arguments to customize the screenshot images -

screenshot [filename] [--clipboard] [--chrome] [--delay ...] [--fullpage] [--selector ...]

Save a PNG image of the entire visible window (optionally after a delay)


    [filename] (string, helpManOptional)
    The name of the file (should have a '.png' extension) to which we write the screenshot.
    [--clipboard] (boolean, required)
    True if you want to copy the screenshot instead of saving it to a file.
    [--chrome] (boolean, required)
    True if you want to take the screenshot of the Firefox window rather than the web page's content window.
    [--delay ...] (number, helpManOptional)
    The time to wait (in seconds) before the screenshot is taken
    [--fullpage] (boolean, required)
    True if the screenshot should also include parts of the webpage which are outside the current scrolled bounds.
    [--selector ...] (node, helpManOptional)
    A CSS selector for use with document.querySelector which identifies a single element

I extracted the above information by typing this at the command line -
help screenshot

I was able to take the screenshot of a specific part of a larger web page by using the selector command line parameter -
screenshot hyderabad-book-stores.png --selector #businesses-nearby-slot

The command line provides hints inline for each parameter. Pressing F1 gives me even more help about the current parameter.

Labels: , ,