Archive for June 2010

Home » Archive for June 2010

Browsers, Learning Resources, Performance

Velocity 2010 Videos & Slides

If you find Web Performance exciting, you shouldn't miss watching the Velocity 2010 videos & slides.

Velocity is an annual Web Performance and Operations conference conducted by O'Reilly Media.

There are a lot of speed tips, suprising facts & interesting thoughts shared by experts. Did you know, seventy five percent of that traffic comes through third-party apps via the Twitter API rather than the Twitter.com web site? Twitter manages 700 million searches & 65 million tweets a day. There are sessions by folks from Facebook and Twitter on how they scale to millions of users.

The list of videos also includes Lightning Demos of Web Performance & Analysis tools like HttpWatch, AOL Pagetest, Speed Tracer, Fiddler, dynaTrace, Firebug, YSlow, and Page Speed by people directly involved with the development of those tools.

Among the few I watched already, I liked Lenny Rachitsky's "The Upside of Downtime: How to Turn a Disaster Into an Opportunity". Taking a contrarian view, he says downtime can be an opportunity to build trust.

Also see:
Free Web Performance Analysis & Optimization tools

180

Browsers

Browser Usage Stats for India

As per StatCounter Global Stats, IE6 is the most popular browser in India with 26.56% users preferring it (during this year). Interestingly, Internet Explorer 6 usage has fallen to approximately 5% in US & UK.

All the IE versions combined are used by 50.13% of Indian users while Firefox is the second most popular.

Among social media websites, Facebook (61.59%) is the most popular in India while Twitter (6.1%) ranks fourth. Orkut is not featured in that list.

These stats are based on aggregate data collected by StatCounter on a sample exceeding 5 billion pageviews per month collected from across the StatCounter network of more than 3 million websites. StatCounter is a web analytics service that has both free & paid versions

Also see:
Comparison of free Web Analytics tools
Free ASP.NET Charting Tools
Get IE6 to retire

Learning Resources

Tech-Ed Online Videos

The Tech-Ed Online website features recorded presentations of sessions conducted at venues around the world. There are over 1700+ videos just from TechEd North America. The entire collection of recorded presentations are spread across 19 categories -

After some cursory browsing, I picked these for viewing in the coming weeks -

The sessions can be viewed online (needs Silverlight plugin) or downloaded in WMV, MP4 & PPTX format

Also see:
Explaining Technology in Plain English
Free SQL Server Videos

Browsers, Tools/Utilities

6 ways to filter HTTP traffic with Fiddler

I've been taking notes from Eric Lawrence's recorded presentation at MIX10 on Fiddler for future reference. This is the third part, check the earlier two tips if you haven't already read them -

Fiddler offers multiple ways to filter the HTTP traffic for analysis with varying degrees of granularity so that you can jump to the point of specific interest -

1. Application Type Filter - You can click on this Filter that's in the status bar to toggle between one of these options -

All Processes
Web Browsers
Non-Browser
Hide All

2. QuickExec - The QuickExec box is a thin black box just above the Fiddler status bar that lets you type commands instead of clicking on the menu options. Just type CLS when you wish to clear the Web Sessions, use ?word to look for a specific word among the Session URLs or filter URLs that are of a specific size using the commands > size and < size. Typing HELP lists all commands that you can use in the QuickExec box & explains what they do.

3. Process Filter - A recent feature to filter down to a particular process. Drag & drop the Process filter icon onto the application of interest.

4. Filters tab - This provides the most exhaustive filtration

5. Find Sessions - Accessible from the Edit menu or Ctrl + F keyboard shortcut, this dialog box aids in carrying out a deep find

6. Rules - The "Hide Image Requests" & "Hide HTTPS CONNECTs" options accessible from the Rules menu can filter out the generally distracting Image Requests & HTTPS CONNECTs from the captured traffic.

Google, Search Engines

Best of Google Webmaster Help videos

Over at SEOmozBlog, Dr. Pete informs that there are 200+ Webmaster Help videos on YouTube featuring Matt Cutts, Google's most visible anti-spam engineer. Occasionally, some Google secrets slip out during these videos. He watched 70 of the videos posted in 2010 & gathered some unusual facts. Excerpts -

Google does not use the keywords meta tag for ranking. Meta description still has value for other reasons
Cross-linking 3 sites probably isn't a big deal, but 30 or 300 could likely get you into trouble.
...footer cross-links are often low-value
Google does not guarantee that pages in your XML sitemap will be indexed.
Indexation has a lot to do with your authority and trust – an authoritative site will get more love from the crawlers, plain and simple
Matt (Cutts) says: "Most people can switch their IP address and never have any issue whatsoever."
As long as your domain name and hosting country stay the same, switching from one reliable host to another should have no SEO impact.
page speed...would be one of over 200 ranking factors.
Google makes a change to the algorithm on the order of ONCE PER DAY.
These changes may be batched and rolled out in chunks, but another video confirmed a number of roughly 400 algorithm changes in 2009.

Search Engines

Google Search Operators

Google gets you results fast but if you are searching for something complex, how do you frame your input to Google so that you can relevant results immediately?

If you haven't already tried, you should read up on search operators & take advantage of it.

Google supports several advanced operators, which are query words that have special meaning to Google. Typically these operators modify the search in some way, or even tell Google to do a totally different type of search. For instance, "link:" is a special operator, and the query [link:www.google.com] doesn't do a normal search but instead finds all web pages that have links to www.google.com.

There are also some undocumented operators listed in the Google Guide. Some of these operators may work in other search engines as well.

Search operators for GMail are also available.

Also see:
Search Engines in the pre-Google era
Search Engine Wars

HOWTO

HOW TO choose a webcam

This excerpt from David A. Karp's Windows 7 Annoyances has tips on features to look for while buying a webcam. Here is a paraphrased list -

High frame rate (for smooth, blur-free video)
Motorized face tracking enables video chat without having to sit perfectly still
Look for UVC (USB Video device Class) compliance as such a webcam can work on a variety of operating systems without any special drivers.
Pick a known brand name (like Logitech, Creative Labs or Microsoft) as they are more likely to ensure driver availability in the years to come.
Read online reviews (plentiful at YouTube) to see how well a particular model actually renders an image.
Good mounting system (for attaching to laptop and desktop screens, resting on a desktop, or perching on a tripod)
Built-in microphone should reproduce voice clearly.
Widescreen aspect ratio (16×9) is a plus
Network streaming capability can be useful for surveillance, baby monitoring, and web publishing
Resolution—is the least important. A 5-megapixel webcam isn’t necessarily any better than a 1.3-megapixel model as it is unlikely that you will take still photos with an eyeball-cam tethered to your laptop.

Also see:
HOW TO stretch the battery life of portable devices

Google, Mobile, Tools/Utilities

Look what Google Goggles visual search can do

Google Goggles is a visual search application available currently for Android powered phones. It may possibly be available for phones of other platforms in the future.

You can take a photo of a book with a Android phone & Google Goggles will show you search results pertaining to that. So an image acts a keyword for Google Goggles.

It can scan a business card, extract information from it & store contact details on your phone automatically. It can get you the title & artist of a painting or get you landmark information for a place that you take a snap of. This computer vision technology can also do translation of text.

This YouTube video explains more about this interesting app. An excerpt from it about what it holds for the future -

Visual search is still in its infancy.

In the future it will help you do more cool things like suggesting a move in a chess game or taking a picture of a leaf to identify the plant available for Android powered phones

The technology is both exciting & scary. Scary because of the potential privacy issues that it can cause.

Also see:
Sound Search Results
Visual tags: Microsoft Tag vs QR Code

Websites

Check out O'Reilly Answers

The website currently in beta describes itself as a community site for sharing knowledge, asking questions, and providing answers that brings together our customers, authors, editors, conference speakers, and Foo (Friends of O'Reilly).

To me, O'Reilly Answers looks like a cross between Stack Overflow & LinkedIn Answers. The nice thing about it is that you can get to interact with O'Reilly authors & earn points for participating that can be redeemed for books, training, courses, and conferences.

Mobile, WP7

Learning Windows Phone Programming - Preview Chapters

If you are getting started with Windows Phone 7 development, you can check two preview chapters from the book Learning Windows Phone Programming being written by two Microsoft folks Yochay Kiriaty and Jaime Rodriguez. On the book's dedicated website, the authors specify their objective -

"Our goal for the book is to share an insider view into Windows Phone. We want to share the insights from the product team, and lessons learned from the very early adopters."

The site also has a Windows Phone FAQ that has links to two other FAQ compilations.

Also see:
What's in Windows Phone 7 for Developers

180

Browsers, Performance, Tools/Utilities

FiddlerCap makes HTTP Traffic Capture easier

As a web developer, if you would like to debug HTTP traffic of web pages that your site users are having problem with, you can have the end-users record the traffic details as a Session Archive Zip (.SAZ) file & then send it to you.

Talking about Traffic Import options with Fiddler in his session titled "Advanced Web Debugging with Fiddler" at MIX10, Eric Lawrence highlights a lesser known tool called FiddlerCap. For non-technical folks, FiddlerCap Web Recorder is a lightweight version of Fiddler that's easier to use than Fiddler. The interface is more intuitive with Start Capture, Stop Capture, Save Capture buttons.

IE9 is going to have a Network tab like Firebug under Developer Tools (accessible through the menu or F12 key). The traffic details collected through the IE9 Network tab can be exported in a soon to be standardized format called HAR (or HTTP Archive Specification). The XML version of the HAR format file that is emitted by can be opened within Fiddler for analysis. As more tools start respecting the HAR format, the Web Performance Analysis & Optimization tools will be able to exchange information seamlessly.

180

Browsers, Performance, Tools/Utilities

Track HTTP traffic in Firefox with FiddlerHook

Eric Lawrence, the creator of Fiddler (his side project since 8 years) & an Internet Explorer Program Manager at MS, presented an interesting session titled "Advanced Web Debugging with Fiddler" at MIX10. I have gone through the half-hour breezy presentation and also downloaded it (.WMV version is 68.2MB) so that I can watch it again to digest & try out the many tips discussed in it. I plan to blog about the tips that Eric shared in his presentation with my own observations, starting with this one. I agree with him when he says "people are using Fiddler in a shallow way" as I'm one among them (having started using it on & off since 2005). Although the documentation is pretty good, I guess there should be more ways of creating awareness. I found that Fiddler now has a dedicated blog on MSDN & a Discussion Group.

While current versions of Internet Explorer, Google Chrome, Apple Safari, and Opera all automatically use Fiddler when Fiddler is configured to capture HTTP traffic, Firefox is the only browser which does not use the System Proxy settings by default. So you can manually configure Firefox to point at Fiddler or better still, take advantage of the FiddlerHook Firefox add-on that lets you toggle Fiddler use with Firefox.

When you install Fiddler, FiddlerHook add-on gets installed as well. When I installed the latest version of Fiddler (v 2.2.9.4 beta) on a PC with Vista & Firefox 3.0, I did not see FiddlerHook in the menu under Tools or in the Firefox Add-ons/Extensions list. I suspected this could have been because I had already opened Firefox while installing Fiddler. I also wondered about what Firefox versions this Extension works on. My suspicion was confirmed when I re-installed Fiddler without having Firefox open and bingo...the Extension appears! Eric mentions in his talk that FiddlerHook works on Firefox 3.0 & above.

Whenever you need to debug HTTP traffic in Firefox, you can adjust your FiddlerHook preferences in the status bar or from the Tools > Monitor with Fiddler menu option. For easier access, you can add the "Launch Fiddler" button to your toolbar by right-clicking the Firefox toolbar, choosing Customize & dragging the Fiddler icon in the dialog box that appears to a preferred position in the toolbar.

Also see:
Web Performance Analysis & Optimization tools

180

HTML/CSS, Learning Resources

Sitepoint CSS Video Tutorials Giveaway

Sitepoint is giving away the video tutorials of it's CSS Crash Course. The offer ends today so grab those videos right away.

They take your email address to send you the Order Id which you'll need before you can start downloading. In case, you have trouble logging in with the email address & Order Id credentials, write to their Customer Support.

Here's what's in the nearly two and half hour tutorial -

An Introduction to CSS (17:40)
Videos 1 & 2: CSS Selectors (40:56)
Videos 3 & 4: Text Properties (35:41)
Video 5: Inheritance (13:10 mins)
Video 6: The Cascade (25:21 mins)
Video 7: What’s Next? (12:45 mins)

CSS is a very powerful but vastly under-rated technology. This tutorial is a good resource for web developers.

Also see:
My favorite Developer Cheat-Sheets

Browsers, HTML/CSS, Learning Resources

Get ready for HTML5

The upcoming versions of all browsers are busy implementing HTML5 features. Chrome & Safari 4 already have lead over the rest.

Some of the most notable new additions in HTML5 are the video tag that will let videos to be displayed directly in the browser without having to rely on plugins and Offline Storage. YouTube has a preview of it's HTML5 Video Player.

Web developers can benefit from proactively understanding & planning on incorporating HTML5 features in their websites. There are some good learning resources online for HTML5 -

Also see:
HOW TO disable Flash in IE and Firefox

Tools/Utilities

Save time while typing with PhraseExpress

PhraseExpress is a free utility that saves the time spent typing with features like Autotext, Auto-complete (found in MS Word), Text Suggestion etc. It integrates with Windows applications (like Notepad, WordPad, Office applications, browsers) & kicks in from the System tray whenever user starts typing.

The mobile phone text input T9-like predictive text feature is present in the paid versions of the tool.

One of the product's touted benefits is that it prevents Repetitive Strain Injury (RSI)!

Also see:
Giveaways
Phone number to word - mnemonic generator
WordWeb - the desktop English teacher

Browsers

Browser UI features are getting consistent

Cross-browser issues are caused by browsers not complying with W3C standards while rendering pages. Increasingly however the browser UI features are getting consistent. If a particular browser brings out an innovative feature that is lapped up by users, chances are the rest of the browsers would implement it too. Here are some examples -

Pop-up blockers - At the height of the pesky pop-up window scourge inflicted by unscrupulous webmasters for making money out of ads, there were paid tools to prevent pop-up windows. IE 6 started having a in-built pop-up blocker & so did other browser versions that came in that period.

Inline Find, Find As You Type - These were some of nifty features that endeared me to Firefox. IE8, Chrome, Safari now also sport this feature. Opera (v 9.6) still retains the intrusive Find dialog box.

Inline Spell-checking - Firefox, Safari & Chrome point out spelling mistakes with red squiggles as soon as you finish typing a word within a textbox or textarea

Search from Address bar - Google Chrome introduced the "Omnibox" feature that lets you use the traditional address bar to type your search keywords as well. IE 8, Firefox (v 3.6), Opera (v 9.6) now support this feature.

Keyboard shortcuts - Several of my favorite keyboard shortcuts are the same in Firefox 3 and IE8. The shortcut Ctrl+Shift+T lets you re-open a tab that you may have accidentally closed in Firefox, IE, Opera & Chrome.

Moving Tabs around - Opera was the first among the popular browsers to introduce tabbed browsing. I guess, Chrome brought the feature of dragging a tab & dropping it at any other place in the tab list. Now all the new versions of common browsers let you move tabs around.

Caret Browsing - IE8 & Firefox let you select text & navigate line by line using the keyboard. This accessibility feature can be toggled on or off with the F7 function key.

Hidden menu bar - IE, Chrome, Safari on Windows (ver. 4) do not display the menu bar by default to conserve browser real estate.

Child tabs open immediately after Parent tab - When clicking on links within a web page to be opened in a tab in IE8, Firefox 3.6 & Chrome the child pages spawned from the referring page will immediately precede the parent tab rather than at the end of the tab list as it used to happen in older versions of IE & Firefox.

Private Browsing - IE 8, Firefox (3.5 & above), Chrome, Safari on Windows (ver. 4), Opera (10.5) will not let anyone know about the secret sites you browse by not storing them in your browsing history when you enable this feature.

A context-sensitive option to send highlighted text within a webpage as query to Google/default search engine now appears in all popular browsers (IE, Firefox, Safari, Opera, Chrome)

Paste & Go is a context-sensitive menu option that appears when you try to paste a URL onto the address bar in Chrome, Firefox (version 4 & above) & Opera (keyboard shortcut Ctrl + Shift + V in version 11). It saves you the step of having to hit the Enter button after you have pasted the URL in the address bar. (Update - 1/Sep/2011)

The browser versions I've specified in the examples above are the ones I've tested on. It's possible that a particular feature may work in a earlier version as well.

Also see:
The Collective Decisions of Competitors

Browsers

Web Performance Analysis & Optimization tools

If you cannot measure it, you cannot improve it - Lord Kelvin

There are a bunch of free Web Performance Analysis & Optimization tools that web developers can take advantage of to build blazing fast web pages -

Page Speed - open source Firebug plugin
YSlow - Firebug plugin from Yahoo
AOL Pagetest - appears under the Tools menu in Internet Explorer after installation. Online version of Pagetest also provides Optimization Report.
Zoompf - this web-based service can detect over 300 possible issues & provide recommendations
MSFast/MySpace’s Performance Tracker - IE browser plugin from MySpace
VRTA (Visual Round Trip Analyzer) - Microsoft tool that works along with Netmon
neXpert - works with Fiddler. Especially useful for pages built with ASP.NET
Web Page Analyzer - incorporates the latest best practices from the book Website Optimization
Yottaa - measures performance, provides customized analytics & optimization tips

These tools provide suggestions that not just cut page download time but also operational costs. I learnt about some of these tools from web performance guru Steve Souders' blog

Also see:
HOW TO improve the front-end performance of a website

Browsers, miscellaneous

Middle-click mouse to open link in new browser tab

It came as a nice surprise to me that clicking the scroll wheel in between the right & left mouse buttons while positioned on a link can open that in a new tab. I found this feature working on all the popular browsers - IE (version 8), Firefox (version 3), Opera (version 9.6), Safari on Windows (version 4) & Chrome (version 5)

Also see:
HOW to continuously refresh any web-page in IE8 & Firefox

HOWTO

HOW TO measure page load times across continents for free

How quickly users can view your web pages depends on a variety of factors like the browser they are using (newer browsers can download page elements concurrently & faster), their Internet connection speed, where the web server hosting the site is located (results in lesser hops) , size of the browser cache.

The freeware Fiddler which can be used to debug HTTP traffic provides very rough estimates of download times of any page element for different kinds of Internet connections (modem, DSL) across US, Europe & Asia.

WebPagetest offers a free service that's a lot more better! Not only does it provide an web page assessment of a submitted URL but it also let's you choose the test location from among USA, UK, Netherlands, Germany, China & New Zealand to conduct an actual test. It also lets you choose browser type (IE 7 or IE 8) & connnection type (Dial-up, DSL, Custom).

Also see:
HOW TO easily verify your website design in different browsers/OSs

130

C#, HOWTO, Tools/Utilities

HOW TO extract only specific files from a .ZIP using C#

"Well, it's better to be silent than to be a fool." - Harper Lee

Online Forums are a great place to learn new tricks.

I learnt today that DotNetZip is an open source class library and toolset for manipulating zip files or folders that's easier to use than the other popular library SharpZipLib. Built by Dino Chiesa, it is hosted on CodePlex and has extensive documentation & samples. It takes just a few lines & the ZipFile.ExtractSelectedEntries Method to filter specific files from a zipped file using a selection criteria expression.

Talking of open source compression\decompression Libraries, there is yet another Library on SourceForge that has been immensely popular - 7-Zip. The code is available in C++ for whoever wants to tinker. Like 7-Zip, there is a ready to use WinForms sample app based on DotNetZip which can be a free replacement for the commercial WinZip utility.

Rant: At a lot of places in CodePlex, like the Issue Tracker & Reviews sections of a project, the year part is not shown for timestamps of posts. If you are tracking a discussion thread, viewing the date is meaningless without the year. If you feel strongly about this issue with CodePlex like I do, please vote it up so that it gets addressed faster.

Also see:
Regular Expression to negate non-matching characters
Enclose email attachment as text in the body

200