Tech Tips, Tricks & Trivia

HTML5 introduces custom data attributes for tags - these are attributes that starts with "data-". These will be treated as a storage area for private data . If you rely on element class names or rel attributes to store arbitrary snippets of metadata and still look for "hooks", these data attributes will come as a relief. Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist. Every HTML element may have any number of custom data attributes specified, with any value. Data attributes can be used in the following scenarios - To store the initial height or opacity of an element which might be required in later JavaScript animation calculations To store parameters for a Flash movie that’s loaded via JavaScript To store custom web analytics tagging data  To store data about the health, ammo, or lives of an e

As the Tablet wars get fiercer and accessing the Web moves beyond desktop browsers, web developer face the challenge of making web pages they create work on all kinds of devices. Thanks to CSS3, there can just be a single web page that can be made to work on a variety of screen resolutions. While there are a bunch of ready-made templates and frameworks  like Twitter Bootstrap  to build responsive pages, understanding how they work is important if you've to customize it. I feel there is a dearth of  beginner level, 101 articles that explain how to build responsive/adaptive web pages. If you're getting started, here are some articles that I found so far (this is a work in progress) which are simple and easily understandable - Responsive Design with CSS3 Media Queries CSS3 Media Queries The width:auto\9;  IE (for versions 8 & below) hack to make images flexible Responsive Web Design - Ethan Marcotte Media Queries - MDN v5, the Responsive HTML5 Master Page for

Brick & mortar companies face a tough competition from online shopping sites as they offer greater convenience & cheaper prices. But should you trust these websites with your credit or debit cards? Here are some interesting question (& links to answers) from online technical forums to help you take better decisions - How are Cleartrip & PayTM able to store the credit/debit card details of the customers for future purchases in contrast to other websites like Flipkart/Snapdeal/Myntra etc. which require customers to enter card details for every transaction? Groupon SG is Storing Customers' Credit Card Information. Is Groupon safe? How does Amazon bill me without the CVC / CVV / CVV2? What's the impact of disclosing the front-face of a credit or debit card? work in progress...

Wordament is an addictive free 4×4 grid MMOWPG or Massively Multiplayer Online Word Playing Game, available for users of Windows Phone 7+ & Windows 8. Here are some tips drawn from others & my own (limited)  experience to score better - Hunt for patterns, not words. Practice looking for common letter combinations and roots, which can help you quickly rack up points. A nugget like EAD, for example, can lead to BEAD, DEAD, HEAD, LEAD, MEAD, and READ. Pay attention to prefixes and suffixes. Wherever you find common prefixes (DE, DIS, RE, and UN) or common suffixes (AL, ED, ER, ES, ING, LY, S) juicy words usually aren’t far behind. The most common prefixes are RE and DE. Mind your Vs and Qs. Focus on high-scoring tiles such as Q, Qu, K, Z, V, which help you pile on the points even with short 3-letter words. Don’t forget the past. One common beginner’s mistake is forgetting to swipe in plural and tense variations of a word. In Wordament, JUMP, JUMPS, JUMPING, and JUMPED ar

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 the Wikipedia conten

This list of Q & A is compiled from multiple resources (see links at the bottom). I have edited, added links and paraphrased original content at some places to provide context & improve readability 1. If we make an application for WinRT, how much work will be required to get it to work whenever Windows phone 8 comes out? Will WP8 support WinRT at all? Jeff Brand: First, I am not a WP8 expert. You will need to do some rework, most of it centered around UX since the screen sizes are so different. It is my understanding that WP8 has an implementation (subset?) of WinRT, but there are some differences, especially around device specifc things (like a dialer, for example) 2. Is the process for submitting an update as time-consuming as the initial release? Jeff Brand: As of right now, it seems to be about the same since they run the same set of tests and compliance checks. Again, it should get better. WP7 was slow at first, and they turn stuff around now in less than 48 hours,

While working on a geo-location application, you would want to see how your app works for different coordinates. Windows 8 has a very helpful simulator that makes testing your geolocation based web application or Windows 8 Store app, easy. The Windows 8 Simulator exe can be found at this path (assuming your system files are in the C Drive): C:\Program Files\Common Files\microsoft shared\Windows Simulator\11.0 The Simulator can also be invoked through Visual Studio 2012. Update: I noticed that this tool is available after you install Visual Studio 2010 Express for Windows 8 or VS  2012 Windows 8 Simulator To change the default location's coordinates, select the Location icon in the Simulator & fill the latitude and longitude of the place you want to test your app for. Update(29/Dec/2013): Chrome & IE11 now allow you to spoof latitude and longitude coordinates from their respective Developer Tools Happy geo-location spoofing! Related: Using the Wi

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.

Update - There is now an official search interface for  Windows Store apps  and  Windows Phone apps Considering that there is currently no official Windows 8 app directory , how do you search for apps related to a keyword? Let's say, you wanted to know about Twitter or FourSquare client apps. Type in the following queries into Google or Bing to see what related apps are already in the Microsoft Store & get more information about them - site:apps.microsoft.com foursquare  site:apps.microsoft.com twitter The root site,  apps.microsoft.com, currently throws a "403 - Forbidden: Access is denied" error message. A Windows 8 Store directory website will probably be available after the official Windows 8 launch on October 26th.

Yesterday W3C announced the creation of a new website WebPlatform.org as a "place to come for answers to your trickiest (and simplest) development and design questions about the Open Web Platform." Microsoft, Opera, Google, Facebook, Mozilla, Nokia, Adobe and W3C will contribute content. The Web Platform Docs (WPD) Getting Started page loftily announces that "Anyone can contribute to WPD. To get started, you'll first need to register and verify your email address....The community is friendly and welcoming to newcomers..." When I tried to register this is the message I see - Account creation from this IP address (199.27.75.20) has been blocked by Cmills. The reason given by Cmills is Autoblocked because your IP address has been recently used by "Ella". The reason given for Ella's block is "Inserting nonsense/gibberish into pages: Seems to be a bot, or a troublemaker" My Internet service provider is Airtel, one of India's a

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

Forget the Start Button, there are no pre-installed games either in Windows 8 (basic RTM edition) unlike all previous versions of Windows. The Minesweeper game is now a free install-able app - a whooping 100 MB download! As there is no proper progress indicator, just a message "Installing Microsoft Minesweeper...", there is no way of knowing if there is anything happening at all and how long you'll have to wait for it to finish installing. It took more than 20 minutes on a low-bandwidth Internet connection  to finish downloading and I don't recollect seeing any message that the app was successfully installed. The new Minesweeper with lots of bells & whistles, is no longer the Minesweeper of yesteryears. And oh, you have to remember Windows 8 keyboard shortcuts to get your way around. The keyboard shortcut to take a screenshot is Windows key + PrintScreen key. Update: While installing the Wordament app, I discovered that if you click on the "Inst

Key points from the  The State Of HTML5 Video  report by LongTailVideo (last updated on April 19, 2012): 75% of the desktop & mobile browsers can play HTML5 50% supports either WebM or MP4. Firefox doesn't support MP4 as it has " no plans to support patent encumbered codecs " 90% of tag attributes (poster, preload, autoplay, controls) are supported. Mobile browsers ignore preload (video is never preloaded) and autoplay (video is never played upon page load). 80% of API features (loading, buffering, playback, seeking, volume) work reliably.  The video tag provides an extensive JavaScript API for controlling its content. 50% fullscreen support is halfway there. Although the HTML5 fullscreen specification is still in its infancy, most browsers have now implemented either a fullscreen control or a scripting API. 30% of accessibility (keyboard control, closed captions) is available. The HTML5 Text Track element (<track>) is designed to add closed captions