Tech Tips, Tricks & Trivia

If you have to download files all files whose links are listed on a web page, this scripted method can accomplish the task faster (after some customization to the specific context) from the console tab of the Developer Tools feature of popular browsers - Array.prototype.forEach.call(     document.querySelectorAll("a.download[href*=x64]"),     function (a) {         console.log("wget " + a.href);     }); With jQuery, it's even more terser - $("a.download[href*=x64]").each(function () {     console.log("wget " + this.href); });

The beautiful infographic listing a key summary of Azure Services  is enabled by data from a JSON file Looking at that JSON file I wondered if that data could be presented as a HTML table with only specific info that I wanted. I found that there is a readymade service as well as  programmatic ways to parse the JSON & transform into an HTML table. I discovered that the JSON2HTML open source JavaScript library that uses JSON templates to convert JSON objects into HTML simplifies this task With a lot of help from StackOverflow , I put together a code sample  (view page source for the code) that can read multiple arrays within JSON -  [{items: [{ }], },{ items: [{ }],},...]   ....and present the values in a tabular format. View the output - an Azure Services quick reference

I recently ran into an article ( Azure Site Recovery deployment planner ) in the Azure official documentation that showed its estimated reading time as 40 minutes! Generally, for their other articles the suggest reading time mentioned doesn't work for me due to my reading habits - I may go down some rabbit hole through a link in the article or take time to ponder on some points or illustration. Nevertheless, I love this feature as it gives a rough idea of the length of the article and I feel such a time estimator should be a native browser feature. Till that time, I guess a bookmarklet would be a good way to show estimated time to complete a web pages that doesn't have this indicator. How do web pages that provide this estimated time to complete reading accomplish this feature ? Apparently, there are quite a few plugins which work differently that publishers can add to their pages like  ReadRemaining.js

Taking off from the single basic JavaScript sample on the newly minted  version 5 of Bing Search API, I put together a couple of samples of my own. You'll have to sign-up for a free key  from Microsoft Cognitive Services to replace in the code samples to try them & also experiment with all the other APIs that are available Bing Search API gets not just web search results but also image, news, & videos results for a given query and allows up to 1,000 free transactions per month across all Bing Search APIs Google Custom Search API has a few additional steps & provides 100 search queries per day for free This comparison of version 2 and 5 highlights the improvements - Category Feature v2 v5 Web Search REST API x x Related searches x x Ranked Answers (image, video, news, math, time) x Deep links (for first web page result) x Adult intent signal x Image Search REST API x x Enhanced filters: image size, license...

Compared to last year, Microsoft Virtual Academy is now buzzing with great new content especially on open source technologies. Here's a list of courses offered on open source tech: -  Introduction to Programming with Python -  Building Responsive UI with Bootstrap -  Building Apps with Node.js Jump Start -  Introduction to jQuery -  Single Page Applications with jQuery and AngularJS -  JavaScript Fundamentals for Absolute Beginners -  Open Source Questions Answered -  Mobile Web Application Development -  The Modern Web Platform Jump Start -  HTML5 & CSS3 Fundamentals: Development for Absolute Beginners I like that they now show the date on which a course was published. Due to the evolving nature of the products, the courses can go stale due to dramatic changes in newer versions and watching out for the date of publication helps in deciding if a particular course is right for you.  I wish the page...

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

FullCalendar is a promising jQuery-based event calendar plugin. It has comprehensive documentation , its own tag on StackOverflow forums , responsive UI, and its library is hosted by CDNJS  (so you don't have to host it on your own server, if you so desire) For navigating across days, months and years, you'd have to go in small increments; you can't jump across months and years with a few clicks. However, jQuery UI DatePicker can be integrated with FullCalendar. I put together a working sample from a snippet that I found online

MovieBuff is a fun web app that I built to delve deeper into movies, know more about film personalities and check if a movie you're interested in is available on YouTube - really fast! Of course, don't expect to find the latest blockbusters or mainstream movies on YouTube. With some luck however, you may be able to find some movies uploaded by the production houses themselves for free viewing. This app can help you uncover patterns in the movies you like. In the first tab,  Artists , type the name of any film personality including a cast or crew member. An autocompletion menu will guide you in closing in on the name of the artist without typing out the entire name. You can optionally use arrow keys to navigate and select a desired name from the list presented. Upon hitting the enter key, the list of movies that the cast or crew member was involved with, will be displayed. Click on a movie link from that list and that'll show you details of that movie in the...

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

The Financial Literacy Agenda For Mass Empowerment (FLAME) website has been publishing useful tips which they call "mantras for for financial success" through simple and colorful illustrations in the Indian print media. I ran into an image from their website but they were not all at once place. Their URL naming convention for the images makes it easy to loop through the entire collection. Having used jqPagination, an easy to use jQuery pagination plugin recently, I felt it would make it easy to navigate through all the images in that illustration series. Check it out and take a look at the code as well. Also see:  Client-side paging with jQuery

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.

Books in the PacktPub Instant series aim to provide "short, fast, focused guide delivering immediate results". I found the last two jQuery-related "Instant" books I read very useful as they covered the essentials in less than 50 pages. When I received a review copy of the book Instant jQuery UI Starter by Jesse Boyer , I expected it to be in the same league as the earlier books but it fell short. jQuery UI , built on top of the jQuery JavaScript Library, simplifies the life of web developers. The elements of the jQuery UI Library are divided into four sections - Interactions, Utilities, Widgets, Effects. This book provides a casual introduction to jQuery UI which is a vast, continuously evolving topic. Unlike the other two "Instant" mini-books, I found the content of this to be fluffy and too verbose. Call it nit-picking but the author's choice of words was a little odd at some places ("Let's unpackage the file","unminifie...

Instant jQuery 2.0 Table Manipulation How-to by Charlie Griefer is an excellent book that explains practical web development scenarios that are possible with the use of tables and jQuery, like the following: Table row striping  Sum columns  Show/hide rows  Highlighting cells  Pagination Column sorting  Filtering  Table-related jQuery Plugins (DataTables & Tablesorter) While you'll be able to find several code samples for the above scenarios online, what really sets this book apart is the detailed explanation of the code samples. The ideas from the book can be adapted to newer scenarios. Although it has jQuery 2.0 in the title, there is nothing specifically meant for jQuery 2.0. The book is suitable for a beginner to intermediate level web developer audience. Some basic prior knowledge of HTML, CSS & jQuery is required to follow the content in the book. This can be a good reference to keep handy. It is a slim book with just 56 page...

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.

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.

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

I have a fascination for public Web APIs that return results in JSON or JSONP format. I wrote a web app that simplifies the process of downloading ebooks from the Google Books collection that are free using the  Google Books API  after noticing that Google Books doesn't readily show if an 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 so that anyone can build an interface to access just filtered details. Though the books are free & old, they are invaluable, especially if you love books. You may not be able to get a physical copy of some of them even if you wanted to. Here is a list of books that I found and liked. The H5BP template's view for Mobile The app uses a responsive HTML5 Boilerplate template generated using  Initializr . Some...

The visualNav jQuery plugin simplifies the process of building a navigation menu in which you can highlight a title in the menu when the menu's target represented as a named anchor scrolls into view. The source code, documentation and demo are available on GitHub . Also see:  My favorite jQuery plugins

Wikipedia's API or more appropriately MediaWiki API ,  lets you programmatically fetch content & metadata related to thousands of its articles. I built a small custom Wikipedia search application - Q-Wikipedia , to get just the first paragraph of a Wikipedia article using jQuery with help from online resources. The REST-based Wikipedia API has many configurable options . It's easy to select the options you require  using the Wikipedia API Sandbox As I need only the first paragraph I set the value of the sections parameter to 0 (default is all ) http://en.wikipedia.org/w/api.php? action =mobileview & format =json& page ="+ keyword + " & redirect =no& sections=0 & prop =text & sectionprop =toclevel%7Clevel%7Cline%7Cnumber%7Cindex%7Cfromtitle%7Canchor & callback =? It has auto-completion of search terms, which was a breeze to implement using jQueryUI . Super-script and a few other tags are removed from...

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.