Manage HTML5/JS metadata using custom data attributes

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 element in a JavaScript game
• To power accessible JavaScript <video> subtitles

A data attribute like this  data-page-num="42" can be accessed using the jQuery data() method -

console.log($('section').data('pageNum');

jQuery lets you grab values of CSS settings for a class/ID/element -
$('.main').css("z-index");

So though it may be wild & unsuitable to do, you can store metadata in CSS too (as a hack in HTML5 unsupported browsers) & extract those values with jQuery.

Also see:
HOW TO link directly to a certain part of a web page that you don't own

Read More

My favorite articles on building responsive/adaptive web pages

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 SharePoint Server 2010 - Kyle Schaeffer
• Responsive Resources - Brad Frost

A good way to study responsive design is to look at the source of websites that have implemented it, especially ones that are not too complex, like the Google - Good to Know site.

Read More

Read this if you shop online with credit/debit cards

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

Read More

Wordament - Tips, Tricks & Trivia

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 are all legal plays.
• Know your anagrams. If you see a word like EAT, remember to swipe in anagrams like ATE, TEA, ETA, and TAE (obscure but legal).
• Avoid guessing - Guessing is penalized with a one second delay in accepting new words. A guess is defined as attempting to enter multiple incorrect words in a row.
• Use the tile rotator to discover new patterns with the same letters

• Take advantage of Themed puzzles - Currently there are two kinds of themed puzzles: Digram puzzles (single tile containing two letters, like TH) and Hidden word puzzles (containing 6 – 10 words within a given category, like food or birds). For example, the Body theme may have the words LIVER, EYE and EYES - the plural is accepted if the body has two.
• Practice

Trivia:

Wordament creators, John Thornton & Jason Cahill.
Picture courtesy:  The Windows Blog

• Wordament is built by 2 Microsoft-ies, John Thornton and Jason Cahill 
• The game runs 24/7
• It is available in non-English languages.
• It uses the Google App Engine
• The game runs on a single global timer.
• It is possible to cheat using word solving software but beware - Wordament has a cheat prevention mechanism & cheaters can be banned.
• What dictionaries does Wordament use?  - "The Wordament lexicon is our own IP that combines indexing of electronic books, custom curation, and using actual play data in the game". In the Wordament blog comments, the creators also say "Our official arbiter of words is the Oxford English Dictionary."
• Bandwidth consumed - We believe we use 50k of your data for every game played. So playing 20 games (1 hour) equals 1MB.
• If you join a game that has already started, it will count toward your average if you play for more than 1:50 minutes. Consider partial games as “warm-ups”. Other games will count toward your totals, but not your averages. 
• The acceptable word list is heavily reviewed and that words where the primary and secondary meanings are vulgar are acceptable. If there is a primary or secondary definition that is racially hurtful or offensive, it is removed from the lexicon.
• Search FB & YouTube for videos on how the top-scorers do it.

work in progress..

Read More

HOW TO extract Wikipedia content through its API using jQuery

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 content derived from the JSONP payload prior to injecting it into a DIV placeholder -

$('#wiki').html(json.mobileview.sections[0].text)
.find("dl,sup,.thumb,table.infobox,table.metadata,div.dablink").remove().end();

Try it out and let me know your feedback by posting a comment below.

Read More

Windows 8 App Development Questions and Answers

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, often in 24

3. Does the privacy statement need to be hosted within the app or is a link sufficient?
Jeff Brand: Pretty sure the guidelines say the privacy statement has to be available via the app, not just the store description.

4. Is there any way for an app for registering as a (file) printer/device? Like OneNote (desktop version) it does.
No.  You can register an app as a file handler, however. That means files ending with .myapp can automatically launch your app and are passed to it. This might be part of what you are wanting to accomplish

5. If I own 2 apps, is there some way to copy a downloaded app from one PC to another?
There are two ways to install a Windows 8 app - either through the store or through side-loading. Side-loading has native support on Win RT, Win 8 Pro and Enterprise only. Windows 8 Core can be "enabled" by installing Visual Studio. As far as I know, apps from the store can not be copied and side-loaded to another PC. At least I hope not for IP sake.

You can install on 5 machines (without additional cost) after you purchase from the store. It's how the new Office will be.

6. With all of the new devices coming out that support Win 8, what is the best strategy for testing to ensure the application works well across various devices without having to purchase a ton of hardware?
Jerry Nixon: Two answers. The first is that building on WinRT gives a universal experience. Unlike, say, Android that has a fractured set of interface devices, Windows 8 is constant so you need only to test on one.

The second part of that question has to do with capabilities. It would be smart to test on a device that has the capabilities you expect to use. And on a device that does not. Since the device itself is abstracted you don't need to test all of them (again, unlike android). I would also like to test on an Intel and an ARM.

7. Is it important to upgrade from RTM to the GA version? Or can I wait until the RTM license is invalid?
RTM is the General Availability (GA) version.

8. Is there a max size limit on how huge an app can be?
Package size limit is 2 GB

9. Is there a suggested minimum Internet bandwidth metric that apps which use the Internet capability should have?
Doris Chen: I am not aware if there is a minumum requirement for this. The internet should at least be good enough for any kind of download.

10. Is there any list of UI/functionality differences between XAML and HTML?
Both Javascript and C# have direct access to the WinRT API via language projections. C#/XAML may have a slight edge.

WinRT components can only be written in C# or C++. Javascript can only consume these components.

You can call WinRT, COM, Win32 APIs from .NET CLR

Related reading:
Top 10 Reasons why I choose XAML over HTML5
15 More Reasons why I choose XAML over HTML5

11. If I pull content from a website's API and have no control over the content, what is the correct age rating to choose for my app? I was thinking 16+. I remember reading something about an app like this being called a storefront app (or something like that)
From MSDN: Windows 8 app certification requirements:    (Section 5.1)
We understand that in some cases, apps provide a gateway to retail content, user generated content, or web based content. We classify those apps as either Storefront apps, whose primary function is to aggregate and sell third party media or apps, or Streaming apps, whose primary function is to aggregate and stream web-based images, music, video or other media content.

In some cases, it may be acceptable for a Storefront or Streaming app to include some content that might otherwise be prohibited in a single purpose app.

12. Is there a common set of icons and such for us to use in our applications, similar to how there is for Win32? Some examples are things like the open folder type icon, trash, new, refresh etc
MSFT provides symbols in the Segoe UI font. Use the character map to see them.
There are also some app bar icon styles predefined
Related:
Metro Studio - Syncfusion
MetroStation by yankoa on deviantART
The Noun Project - icons
Zurb Foundation Icon Fonts
Freesound - collaborative database of Creative Commons Licensed sounds

13. Can I run a task every time a user logs on, or every 24 hrs
Yes, you can do that. Your app needs to wire up a background task that would listen for a System Event - like user logs in - and if needed, any required conditions, i.e., the machine must have internet connectivity, then your background tasks gets some CPU time.

See go.microsoft.com/fwlink/?LinkId=227329 for a whitepaper on background tasks

Win8 apps have the ability to run background tasks. Win8 has some "built in" background tasks for things like playing music or download/upload of a file over http

Miscellaneous:

Getting started resources -
Create a "Hello, world" app (Windows Store apps using JavaScript and HTML)
Writing code for Windows Store apps (JavaScript)
Apptivate Resources page 

Articles on developing an app that interacts with a DB:
HOWTO: SQLite with Windows 8 apps
Take your Win8 Metro App to the Next Level with a SQLite DB

SQLite is supported well in Wins 8 RTM.

Indexed DB is one of the ways to do local storage.

You can reserve app names for up to a year, so if you have ideas - get the names reserved now

The Ad SDK is completely live. The ads being displayed on the other hand are not live until GA on the 26th.

Q & A derived from:
Apptivate Chat #1 with Jerry Nixon and Doris Chen
Apptivate Chat #2 with Jerry Nixon and Doris Chen
Apptivate Chat #3 with Jeff Brand

Read More

Geolocation spoofing with Windows 8 Simulator

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.

Happy geo-location spoofing!

Related: Using the Windows 8 Simulator & VS 2012 to Debug the IE10 Touch Events and Your Responsive Design

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

HOW TO quickly find if a site/service is available as a Windows 8 app

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.

Read More

A rant on WebPlatform.org

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 and possibly the world's largest service providers and they give me a dynamic IP address. It is totally unfair & illogical that WPD should block me because someone else shares this dynamic IP address.

I was also surprised to see that a community initiative like this doesn't use an authentication mechanism like OpenId as popular community websites do.

I'm also upset with some self-appointed guardians of web standards for talking low of W3schools & suggesting that WPD will supplant it. W3schools which started in 1998, beats any other web developer reference  in staying power.

W3Schools is huge considering it has been written over a long period of time. The site doesn't appear to have a large team but it is truly remarkable how they have churned out a large body of work. The number of site pages indexed by Google is a rough measure of the size of a website. The search query site:w3schools.com reveals that W3Schools has about 45,700 pages. I don't know of any similar website that offers unbiased technical guidance on the same scale and in plain English.

Critics complain the site's information is not up-to-date.  While the complaint is valid, it may be harsh to expect the site owners to make immediate modifications as things change. The inaccuracies stem out of the fact that W3Schools attempts to present information in a simplified manner. At times, it may be too simplified to upset some pedantic folks.

W3Schools has the courage to admit that the content may not be correct. This is a reasonable warning for two reasons. They don't charge users anything and due to the evolving nature of the Web, information can change fast. They have a link in the footer that asks readers to report errors.

I have come across many reputable sites that don't bother updating their sites with the latest information so why just blame W3Schools, it's run by humans after all. I wish not just W3Schools but all technical literature on the web had a last modified date on every web page of value.

I hope WPD can emulate W3Schools' simplicity.

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

Windows 8 - Rant #1

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 "Installing app..." message in the top right corner, you get to see the progress bar on a separate page.

I think it would be helpful if the progress indicator was shown on the same page.

All apps go full-screen and you don't get to see the time in the system tray. That's how apps like Wordament get you addicted ;-)

Also see: Which Windows 8 edition is right for me?

Read More

The State Of HTML5 Video

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 to videos (plus subtitles, descriptions, chapters & metadata).
• iOS is the only platform with streaming. Adaptive streaming formats, like video codecs, are not part of the HTML5 specification.

Also see:

• HOW TO check what HTML5 features a browser supports
• Get Microsoft certified in HTML5 with exam 70-480
• Free 42 episode video series on HTML5, CSS3, JavaScript for beginners

Read More