Web apps in less than 10 KB

There have been over 350+ submissions to the 10K Apart contest conducted by Microsoft & Event Apart that has a prize money of over $10K.

The important rule was that participants should build a web app whose total file size including images, scripts & markup, shouldn’t be over 10K. All code must run client-side although 3rd-party Web services & JavaScript libraries like jQuery, Prototype & Typekit are allowed. The code must be standards compliant & usage of HTML5 is encouraged.

The submissions are good learning material for developers who value speed & standards. They are listed on the home page. Sort on the Highest Rating & Most Comments options (generally good indicators of popularity) in the dropdown box there, to get started with viewing the apps & their source.

Update (14-Sep-2010) - Hakim El Hattab's game measuring a measly 6.9KB has won him the grand prize of $3000 & other goodies. The entries of the other 3 Runners-Up are addictive games that you better not check if you don't want to waste time.

Related:
Get ready for HTML5
HTML5 features emerging in popular web apps

Read More

Large sites that run on ASP.NET

ASP.NET powers websites that have millions of page views per day -

• Tesco 
• Dell
• Costco 
• National Health Service, UK
• HSN.com
• Match.com
• MySpace.com; details

Sites using ASP.NET MVC -

• StackOverflow.com; details
• Monster.com
• Dimecasts.net
• MarketWatch

work in progress..


Also see:
How LARGE websites manage performance & scalability

Read More

What's new in Visual Studio 2010

Michael Otey's tour of Visual Studio 2010 in the September issue of SQL Server magazine informs about interesting new changes. Excerpts -

...Windows Presentation Foundation–based IDE.

.. after you convert a Visual Studio 2008 project to Visual Studio 2010, you’ll no longer be able to open the project with Visual Studio 2008


IntelliSense in Visual Studio 2010 supports two modes: statement completion and the new suggestion mode. Suggestion mode lets you use members before they’re defined. You can toggle between completion mode and suggestion mode using Ctrl+Alt+Spacebar

Visual Studio 2010 provides SharePoint 2010–specific project templates that simplify SharePoint application development. Visual Studio 2010 also provides the ability to debug SharePoint projects. In addition, you can now deploy SharePoint projects directly to SharePoint rather than having to use the old command-line Stsadm tool.


New options under the Premium and Ultimate Editions’ Visual Studio 2010 Data menu let you compare schema, compare data, edit and execute T-SQL statements, and view and synchronize database schema

The SketchFlow feature encourages user input in the design process because the developer and user can sit down and cooperatively create a working model

...unlike earlier versions of Visual Studio, Visual Studio 2010 doesn’t automatically update applications using older versions of the .NET Framework to the new .NET Framework 4—you must explicitly change the .NET Framework to update your older .NET applications to the .NET Framework 4.

To better take advantage of today’s multicore processors, the .NET Framework 4 includes a new System.Threading.Tasks namespace that makes writing multithreaded applications easier.

Read More

What is the difference between ccTLD suffixes like "co.in" & just ".in"?

A friend asked me this question & this is my attempt at answering it.

A country code top-level domain (ccTLD) is an Internet top-level domain (like .com, .net, .org) generally used or reserved for a country, a sovereign state, or a dependent territory.

Internet Assigned Numbers Authority (IANA) is responsible for determining an appropriate trustee for each ccTLD. Each country's trustee may assign registrars to sell domain names with suffixes pertaining to their country as per their policies.

A country code second-level domain (ccSLD) is a second-level domain to a country code top-level domain. Some domain name registries introduce a second-level hierarchy to a TLD that indicates the type of organization intended to register an SLD under it. For example, in the .uk namespace a college or other academic institution would register under the .ac.uk ccSLD, while companies would register under .co.uk. The complete list of suffixes including those for each country are available at PublicSuffix.org

The following are the domain name public suffixes for India, made available by INRegistry  -

• .in
• co.in
• net.in
• org.in
• firm.in
• gen.in (general)
• ind.in (individuals)

The following zones are reserved for use by qualified organizations in India -

• ac.in (Academic)
• res.in (Indian research institutes)
• edu.in (Indian colleges and universities)
• gov.in (Indian government)
• mil.in (Indian military)

The ".co.in" suffix was originally for banks, registered companies, and trademarks. Liberalization of registration rules in 2005 & promotion of the ".in" ccTLD has led to greater registrations. India has fewer registration restrictions, especially for foreigners, than other countries.

Read More

Some lesser known Google tricks

Crowdsourced answers to questions on "Hidden features of  product/service X" on the StackOverflow family of sites, make for interesting reading. I picked a few tips & trivia I didn't know earlier, from a similar thread on Google Search -

1. The calculator feature in Google understands not just numbers but also words. This query would still return the correct answer -
(five plus seven) divided by six

2. Searching for "population germany" will display a chart as the first result -

(Note though that Wolfram Alpha can do more complex mathematical calculations & give more detailed answers for search terms like population germany. )

3. The results for define:camouflage are different from en:en camouflage. The latter returns a dictionary-style definition of camouflage

4. Searching for anagram gives an interesting "did you mean?" suggestion, and a query for ASCII Art also has an unexpected effect.

5. Another poster informs that inserting the letter 'l.' before 'google.com' in the URL of Google or any subdomain and get to the same site, e.g.:
video.l.google.com
mail.l.google.com

This way, you can still watch videos even if your filter blocks video.google.com

6. The Google Labs feature Experimental search makes Google keyboard-friendly.

Related:
Bing + Wolfram | Alpha = Cool
.

Read More

Display global trends with Heat Map & Slider

I liked the way Google Insights for Search graphically shows country-wise trends for keywords you search on with a Heat Map & Slider. The slider below the heat map neatly provides the interactivity.

The below images show the web search interest for the keyword "swine flu" in May-August 2010 & the same period in 2009.

Someday I would like to create a generic data visualization control out of the Heat Map-Slider combo (or is there one already?) that can have a easy way to bind to any data source.

It would be interesting to see wealth distribution across countries over the years & centuries. I couldn't find this with a cursory search on Gapminder.org, a site that unveils "the beauty of statistical time series by converting boring numbers into enjoyable, animated and interactive graphics"
 
Also see:
Free ASP.NET Charting Tools
.

Read More

Comparison of Mobile Browsers

Peter-Paul Koch, better known as  PPK, has helped web developers worldwide with his browser compatibility tables on QuirksMode.org. He has since been researching on mobile browsers. If you are interested in mobile web development, his articles can be of great utility.

He has rated the following 21 browsers -

• Safari
• Android WebKit
• Dolfin
• Opera Mobile
• Palm WebKit
• Iris
• BlackBerry WebKit
• MicroB
• Symbian WebKit
• Firefox
• Ozone
• BlackBerry old
• IE Mobile
• NetFront
• Blazer
• Obigo
• Brew browser
• Opera Mini
• Bolt
• Skyfire
• UCWeb

He now plans to focus on the following ten smartphone OSs - Android, bada, BlackBerry, iOS, LiMo, MeeGo, Phone 7, Symbian, webOS, Windows Mobile, and is now seeking feedback & validation on data related to them.

Also see:
Free Windows Phone 7 Learning Resources

Read More

My web pages work in browser X but fail in browser Y. What to do next?

It doesn't take long for rookie Web developers to realize that the browser world is as unfair as the world we live in as browsers do not all comply with standards to the same degree. As a result, they are aghast when they find that their painstakingly-built web pages fail in some browsers that they test on towards the end. Being aware of HTML, CSS & JavaScript standards is a pre-condition to building cross-browser web pages but what if you skipped that step & now have to get a project out of the door?

Almost all of the new browsers come with developer tools to help locate & debug issues that could be preventing a web page from running as intended in that browser. A good first line of action would be review & resolve the errors & warnings displayed in the Console that is generally part of the browser's native developer tools.

In Firefox, there is an Error Console in the Tools menu.

IE 8 has a Script Console under the Script tab in Developer Tools which is accessible with keyboard shortcut F12.

Safari (on Windows) has the Show Error Console option in the Develop menu.

Opera's Error Console is a tab present in Developer Tools (also called Dragonfly) that is available from the Tools menu under Advanced option.

If this step doesn't help then review these links for tips on addressing specific issues -

• Stack Overflow: What are the typical reasons Javascript developed on Firefox fails on IE?
• Migrate apps from Internet Explorer to Mozilla

.

Read More

Bing + Wolfram|Alpha = Cool

Google may have been the first to do maths calculations, currency conversions & the like which are impressive but what Bing & Wolfram Alpha are doing is astounding! You get more precise answers quickly. Sample the results for these search queries -

• What is the population of India compared to China? 

• What is the area of India compared to China? 

Also see:
Search Engine Wars
.

Read More

HOW TO add hashtags while auto-publishing posts to Twitter

Hashtags are a community-driven convention for adding additional context and metadata to your tweets. They're like tags on Flickr, only added inline to your post. You create a hashtag simply by prefixing a word with a hash symbol: #hashtag.

So if you are interested in listening to what the twitterati is saying about jQuery, you can search with the #jQuery hashtag on Twitter Search or hashtags.org

I've been looking for a simple way to convert the keywords within the headings of my blog posts that I auto-publish to Twitter to hashtags that are already used on Twitter. There are multiple tools that can take your feed &  auto-publish it to Twitter. I found two methods to convert keywords to hashtags -

1. The FeedBurner Socialize service makes it easy to publicize your articles by auto-publishing their feed to Twitter.

To automatically add hashtags while publishing your feed items to Twitter, sign-in to FeedBurner, go to the Publicize tab & pick the Socialize option in the left-side menu.

For the label Hash tags in the form, choose "Create hash tags from item categories" to let FeedBurner  automatically convert labels or tags, assigned to your post through a blogging system like Blogger or a CMS, to hashtags. For instance, JavaScript is a label I use within Blogger. The preview below shows how the label within the heading of a feed item of my blog would show up after I activate the service.

To make the best of this service, choose label names that are already existing Twitter hashtags. Additionally, utilize the feature that FeedBurner provides to append a string like "My blog post:" infront of the article title to distinguish it from your manually submitted tweets.

What's more, the Google URL Shortener service goo.gl used for the links in the auto-published tweets, also provides click analytics which lets you track popularity of your links.

2. Twitter has introduced its own version of Tweet buttons that you can customize & embed so that it appears along side each article/post.

Although you have to manually assign the hashtags, the process is partly simplified as the article heading & shortened URL are filled in for you.

Read More

Popular JavaScript apps dissected

A good way to be a better programmer is by studying & analyzing source code of others.

Here is a work-in-progress compilation of popular JavaScript apps or libraries dissected by generous folks -

• Google Suggest
• Google Analytics script; also see Steve Souders analysis from a performance perspective
• Google Adsense
• Digg widget
• jQuery; code run-through by Paul Irish 
• Prototype
• Google Instant Preview
• Meebo (updated: 20/Jan/2011)

Seen anymore articles dissecting popular JavaScript apps? Please share that by posting a comment & I will update this list.

(image by Sebastian Bergmann)
.

Read More

Google Font API offers free custom fonts

Did you know, Google's new Font API lets you display text on your web page with custom fonts served from their server farm? (Thanks Chris)

There are currently 19 fonts, some with multiple variations, in the Google Font Directory. Their site informs that all fonts in the directory are available for use on your website under an open source license and are served by Google servers. You can use CSS or JavaScript to embed them. There is a Font previewing tool to fine tune how the letters should look.

This program is in beta & it is supported mostly on newer versions of popular browsers.

Read More

Free Learning Resources on WPF, WCF, WF, XAML, Sharepoint 2010

The following material is available for free on Microsoft eLearning -

1. Collection 6261: Developing Rich Experiences using Microsoft .NET Framework 3.5 & Visual Studio 2008 consists of 3 2-hour premium clinics -

• Clinic 6262: Introducing Windows Workflow Foundation using .Net Framework 3.5 & Visual Studio 2008
• Clinic 6263: Introducing Windows Presentation Foundation using .Net Framework 3.5 & Visual Studio 2008
• Clinic 6264: Introducing Windows Communication Foundation using .Net Framework 3.5 & Visual Studio 2008

2. Clinic 6375AE: Introduction to XAML
 
3. Two introductory clinics on Sharepoint 2010 -

• Clinic 10277: What's New in Microsoft SharePoint 2010 for Developers
• Clinic 10279: What's New in Microsoft SharePoint 2010 for IT Professionals

 
Related:
Free Sharepoint 2007 goodies on Microsoft e-Learning
mvark

Read More

How they develop software at Microsoft

Some Microsoft bloggers ocassionally share their group's software development practices & they make for interesting reading -

• Ivo Manolov's (Test Manager of the Windows Presentation Foundation team) notes on the techniques used to manage development of the WPF 4 and Visual Studio 2010 products
• Back in 2004, Scott Guthrie described how development of ASP.NET 2.0 and Visual Web Developer was coming along. He also discussed his team's testing strategy.

I'll keep updating this list as I find more such articles. Dear reader, you can post links that you may come across in the comments section.

Related:
Some Software Engineering Myths Busted
Book Review - I. M. Wright's Hard Code
.

Read More

Wolfram Alpha can probably finish your homework

Does it take you more than a few minutes to precisely calculate your age exactly to the month & day?

There are a number of online tools to find your precise age to the nearest day but Wolfram Alpha the “computational knowledge engine” not only calculates this when you just enter the date but also presents fun facts about that date. Try it out.

Wolfram Alpha is also an excellent research tool for students of all ages. For school kids, it may even finish their homework.

Also see:
View math calculation results directly in Firefox Search bar

.

Read More

HOW TO make your website mobile-friendly

Gartner research predicts that by 2013, mobile phones will overtake PCs as the most common Web access device worldwide. Bruce Lawson offers 3 strategies in a Dev Opera article to "mobilise" a web site to work across all devices i.e. not just mobiles but also alternative browsing devices like games consoles (Nintendo Wii, DSi), web-enabled TVs, in-car browsers etc -

Strategy #1: Code well and do nothing special for mobile - The current crop of advanced mobile browsers are very good at rearranging content without being told how to by a developer...Making a good semi-liquid layout that has a min-width and max-width set in your CSS and em-based typography will work very well across a range of different devices and screen sizes.

Strategy #2: Make a separate mobile site - .. (although) it results in having two sites to user-test, maintain, etc

Strategy #3: Build mobile-aware adaptive sites - hardest to pull-off methodology... (but) future-proof as it tests features rather than sniffing browsers.

There are also numerous mobile web optimization tips in that article -

• Combine files and reduce requests across the network
• Put script elements as far down as possible in the source
• State the dimensions of images in the HTML
• Opera users can sign up for seven free hours of testing on Perfecto Mobile service that lets you test on real handsets via the Internet

.. and interesting facts -

Smartphones can run full Web browsers such as Opera Mobile or Safari/iPhone, while in the developing world we see much lower-end handsets that don’t have an operating system but, if they can run Java they can use Opera Mini (a thin client for a proxy-based system that compresses pages down to about 10% of their original size before being sent to the handset for rendering — see our comparison of Opera Mobile and Opera Mini)

Also see:
Jason Grigsby’s DOs and DON’Ts of Mobile Strategy
Visual tags: Microsoft Tag vs QR Code

Read More

Free Windows Phone 7 Learning Resources

Now that Windows Phone 7 has hit the technical preview milestone, there are even more resources for developers to learn from. Here's a compilation of free learning material on WP7 Development -

Books -

• Programming Windows Phone 7 - Microsoft Press has announced that Charles Petzold’s upcoming book Programming Windows Phone 7 will be available for free download by October end. The second draft preview of the ebook (PDF link)  contains 11 of the total 22 chapters planned.
• Learning Windows Phone Programming -  a free sampler of 2 preview chapters from the book by Yochay Kiriaty and Jaime Rodriguez is available for download.

Videos -

• Channel 9 videos on developing with WP7
• Windows Phone 7 Jump Start sessions

 .

Read More

Fun facts about domain names

The right-most label in a domain name is referred to as its "top-level domain" (TLD). For example, in the domain name www.example.com, the top-level domain is com

While wiki surfing this Sunday, I came across some fun facts about domain names -

Most TLDs with three or more characters are referred to as "generic" TLDs, or "gTLDs". Currently there are 20 gTLDs out of which 6 (.biz, .com, .info, .name, .net, .org) are open TLDs i.e. any person or entity is permitted to register

Country-code top-level domains (ccTLD) are two letter domains established for countries or territories or their internationalized domain names (IDN ccTLD). With some historical exceptions, the code for any territory is the same as its two-letter ISO 3166 code.

A number of the world's smallest countries have licensed their TLDs for worldwide commercial use. For example, Tuvalu and the Federated States of Micronesia, small island-states in the Pacific, have partnered with VeriSign and FSM Telecommunications respectively, to sell domain names using the .tv and .fm TLDs to television and radio stations.

Vanity ccTLDs are TLDs which are used for various purposes outside their home countries, because of their name. The list of ccTLDs on Wikipedia (incompletely) identifies countries (there are atleast 15) that permit foreign registration.

A domain hack (sometimes known as a domain name hack) is an unconventional domain name that combines domain levels, especially the top-level domain (TLD), to spell out the full "name" or title of the domain.

Some popular domain name hacks are who.is, blo.gs, del.icio.us, cr.yp.to, retou.ch, goo.gl, bit.ly and ow.ly
 
Also see:
My favorite Developer Cheat-Sheets
.

Read More