CSS & HTML Tutorials for Beginners

Just came across this and thought of sharing with everyone: http://www.codertools.com/css_help_guide/introducing_css.aspx Though this is not an exhaustive reference, it is good for those taking the first step in CSS or HTML.

Check it out.

Update: When digging my old bookmarks, I saw this gem: http://www.smashingmagazine.com/category/coding/. See the CSS & JavaScript sections for some challenging problems and solutions. I never knew I had this wonderful site in my bookmarks collection.

Roundtable with Soma

Yesterday was one of the most memorable days in my professional life!! As community contributors, we MVPs in and around Chennai (a.k.a. Madras) had an opportunity (can't thank Abhi enough for this!!) to have a face-to-face discussion with none other than Microsoft's Dev Tools Team senior VP Somasegar! Of course, Soma himself is a native of Chennai. I was so thrilled, excited, electrified (and add any more superlatives) to meet him and out of sheer excitement I chose to sit right next to him!! It was so amazing to see such a down-to-earth personality without the shadow of his corporate position or the company he works for. Being the first time to have a close meeting with a senior exec from Redmond, here are some of my observations on him; not sure if anyone has any different opinion:

• Proud of what he and his team do (dev & designer tools)
• Admits failures without hesitation
• Listens to people, be it community folks like MVPs, customers and peers and takes feedback
• A common characteristic I have noticed of Microsoft employees is that anything you ask them about they will either give you the up-to-date information or connect you to someone who can give you that information. Soma is not an exception either!
• I have not seen too many high-profile corporate execs like Soma interacting with communities, customers, etc of any level with genuine interest & care (the only other person I know of this type is our Cognizant vice-chairman "Laxmi"narayan!)
• Highly energetic

He shared lots of information about various products that are scheduled to be out (RTM) during 2010 and how they are supported by VS 2010. He also shared us the high-level Windows Mobile roadmap. Soma believes that the .NET 4.0 release will be as significant as the 1.0 release (back in 2002) as it has large number of changes/enhancements. Met other fellow MVPs from Chennai, one of my favorite bloggers Venkat, Moorthy (Director of DPE from Hyderabad) & Stuti (Director of DPE marketing/community outreach from Bangalore).

(with Soma)

(with Stuti & Moorthy)

New Product Editions for Visual Studio 2010

Oh, that's quite long since I blogged. Personal problems pulled my energy level badly and took my focus away from my regular work/life. So bad that I felt I never existed in this technology world. Everything seems to be new to me! Well, I hope it's not going to be for long! :-)

Al right, enough on justifying my long pause on the blogging front. With the release of Visual Studio 2010 Beta-2, Microsoft has dropped all those Team System Dev Ed, Arch Ed, DB Ed, etc SKUs and introducing three snappy simple ones: Professional Edition, Premium Edition & Ultimate Edition - much similar to its Windows OS line ups. Well, this is quite a good news esp. for new/small-scale organizations and those who are planning their Visual Studio subscription/purchase down the line. No more confusion on what you will get with what edition. Comparison of these editions is available here.

On a side note, one of the Microsoft technical artifacts on VS 2010 mentions that the new IDE is built using WPF...! Wow!!! Also, a new tool that helps developers in finding those deadlock-causing "non-reproducible" bugs reported from QA teams.

Look forward to getting the beta-2 bits and discover more...

One More Training Kit...

Yet another training kit focused on developers: Windows 7 RC Training Kit for Developers.

Training Kits

I most of the time forget what offline free training resources are available from Micrsoft when someone asks for them. Now, I have a place to point them to: http://weblogs.asp.net/gunnarpeipman/archive/2009/06/04/list-of-microsoft-training-kits.aspx. One stop place for available learning kits.

In case you aren't aware of MS training kits, they are learning materials (including video, slide deck, lab sessions ,etc) for technologies/platforms Microsoft releases every now and then. They also get updated sometimes. So, keep watching for them.

WPF Grid from Xceed

Microsoft has a WPF version of the DataGrid control outside its standard .NET Framework release 3.0+. This off-branch data grid is part of the WPF Toolkit maintained/released at CodePlex. However, a better one (in terms of features/ease of use, so far I have seen) is the Xceed XPF DataGrid Express Edition which has been around for quite sometime. It's a free control (reg-ware) - but won't be so after few weeks. If you want to explore its features, just take a look at their online demo (available via .xbap). Things I like about Xceed grid are its extreme rendering customization, multiple display styles (table, card, 3D & custom views) and theme-based eye-candy UI. It also supports standard grid features such as data editing, filtering, & grouping capabilities. And it allows exporting grid data to Excel (.xls) format - at least for now. Register yourself and download it from http://xceed.com/freegrid. [Registered for the free Xceed DataGrid for WPF and there’s only 22 days left to do it.http://xceed.com/freegrid]

Microsoft SharePoint Designer 2007 Now Free!

To be honest, when I came across this news bit few days ago, I thought it was a 4/1 prank sort of thing and never got the instinct to check it. When I saw the same news again, I decided to verify it thinking if Microsoft too could do such things. Wow! Yes, it's true!!! SPD 2007 is completely free (no trial version) from April 2, 2009. Read the official news and download SPD 2007 (after Passport registration) at http://office.microsoft.com/en-us/sharepointdesigner/HA103607611033.aspx.

The official blog news is here: http://blogs.msdn.com/sharepoint/archive/2009/04/02/sharepoint-designer-available-as-a-free-download.aspx

As you know, SPD is the next incarnation of FrontPage, a HTML Editor and the only tool (apart from WSS/MOSS web UI itself) available for customizing Windows SharePoint Services 3.0 & MOSS 2007 based portals/sites.

data: URI Scheme - Part 2

In Part 1, I discussed what the data: URI scheme is all about, its various usage scenarios and available browser support. Let's see few examples in this post. Just copy and paste the following HTML code into a HTML file and open it any of Firefox, Safari, IE8, Google Chrome or Opera. Since today's browsers are very forgiving, this bare HTML tag should work without any fuss!

If your browser supports data: protocol, the above puzzling lines should show a small picture (actually, the CEO of my company). OK, here is his name!

Note that I am not using Base64 encoding for the actual HTML markup data; rather I use URL escaping, the default data representation mechanism of the protocol, for the HTML bytes. As commented above, IE8 currently does not support data: protocol for HTML object contents, but others do. Stretching a bit more, the following example shows how CSS can be sourced from a data: URI.

The <meta> tag is required only for IE8. Other browsers don's use it as they allow data: for CSS content also.

Here is a bit interesting one!

Each button calls different JavaScript functions, all sourced from a base64-encoded script (you can decode it using an online base64 decoder or do Console.WriteLine (System.Text.Encoding.ASCII.GetString (System.Convert.FromBase64String (base64_encoded_data))), if you want to see the actual JavaScript code).

I hope now you've got a better understanding of data: and its several usage scenarios. But just keep in mind that overusing or using it in inappropriate contexts might negatively impact the web application performance.

UPDATE: Looks like the HTML markup code went haywire (likely due to Word 2007 which I use for blog posting) and a portion of the HTML got clipped off; fixed it and everything is fine now (in a scrollable view).

Power of JavaScript!

Almost no one doubts it, but still how powerful it is? Just go to http://www.chromeexperiments.com and see it for yourself! These awesome visuals use only JS and JS-based frameworks (such as Prototype & JQuery); no Adobe Flash or Microsoft Silverlight! Not just that, these demos could also be stress testers for your browser's JavaScript engine.

 "Google Gravity", "Browser Ball" & "Ball Pool" are my favorites! There are other fun stuffs too. Another (game) example showing the prowess of JS is http://www.gamesforthebrain.com/game/oooze.

 All these demos use the new <canvas> element introduced in HTML 5 spec and JS to manipulate it. <canvas> allows dynamic drawing/manipulation of graphics and images using JS in a web page. Possible usage scenarios include (but not limited to) showing dynamic graphs, charts, other data visualizations and creating interactive content without using any 3rd party components. Perhaps AJAX and <canvas> duo could make users' web experience at par with Flash or Silverlight. Wouldn't they?

<canvas> at present supported by Mozilla Firefox 1.5+, Apple Safari, Google Chrome 1.0+ and Opera; IE is yet to catch up (including IE8). So, see the above samples in <canvas>-aware browsers only.

ASP.NET MVC Training Kit

After other Microsoft developer training kits, now is a new one: ASP.NET MVC Training Kit. Get it (~12 MB)!

data: URI Scheme - Part 1

    One of the new features introduced in IE8 is support for the data: protocol. Though IE8's support this protocol is a welcome one, it is very limited in terms of features and usage compared to other browsers that have been supporting this protocol for quite a long some time. The data: URI scheme (or protocol, to use a familiar term) has been around for more than a decade but it was hardly used due to inconsistent browser support. Some web browsers have been supporting this protocol right from their V1, but the protocol capabilities and usage limitations inherent in them varied widely. However, recent versions of popular web browsers provide better consistency in data: protocol handling thus reducing the gap.

The purpose of data: protocol is to embed resources of any type, binary or text, within a page itself so that the browser doesn't have to make network requests to remote servers and the saved bandwidth might be used to retrieve other resources in the page. Resources that are static or change infrequently (site logo, bullet images of lists, mini CSS style sheets/JavaScript code - to name a few) are the best bets to go with this protocol. I should emphasize that the resource file size be smaller and appearing in just few places in a page. Let's see why towards the end or maybe you would figure it out by yourself as we go. The format of the data: protocol is:

data:MIME-Type;Parameters;Base64,Data Sequence

Everything except the URI scheme and the data sequence are optional.

MIME-Type can be any valid "type/sub-type" as specified in Content-Type HTTP header (but not all browsers support all MIME types for the data: protocol). If omitted it defaults to text/plain.

Parameters are an optional list of key=value pair, each separated by a semi-colon. If both MIME type and parameter list are omitted, they default to text/plain;charset=US-ASCII.

Base64, another optional parameter indicates that the data is base64 encoded (typically for binary data). Omitting this parameter would mean that the data is in URL-escaped format: URL unfriendly characters are specified in %xx (hex) format. Nevertheless, you can represent every byte in the data stream in hex format and it would just work fine.

As you aware, base64 encoding bloats the data size in a 3:4 ratio (every triplet results in a quartet after encoding), resulting in a bigger encoded size. With the URL escape method, the bloating ratio will vary positively because only non-URL compliant characters need to be escaped using the hex format. However, if every byte in the data stream is hex-escaped, it bloats the result in a 1:3 ratio - each byte results in three bytes. For example, if the original data size is 1024 bytes, the base64 encoding yields 1,366 bytes and a hex escaping would yield 3,072 bytes. So, using the data: based resources heavily, either the same resource being used in multiple places or too many unique resources in a page would just increase the HTTP payload bringing down the performance.

    Since the data: protocol is nothing but an URI scheme, theoretically it can be used anywhere an URI is expected, but browsers vary in its usage contexts. Nonetheless, all browsers support data: resource anywhere an image URI is expected including CSS properties. Here are a few examples:

• HTML
  • <img src="data:image/jpg;base64, base64_encoded_jpg_data" />
  • <iframe src="data:text/html, URL-escaped_or_hex-escaped_html" />
  • <table background="data:image/gif, Hex-escaped_gif_data" />
  • <body background="data:image/png;base64, base64_encoded_png_data" />
• CSS
  • .data_gif: {background-image: url ('data:image/gif;base64, base64_encoded_gif_data')}
  • .data_png: {list-style-image: url ('data:image/png, hex_escaped_png_data')}

Will see some samples in the next entry but before then have your IE8 installed and any other browser that supports data: protocol already (FireFox, Safari 3+, Chrome or Opera).

Internet Explorer 8 RTW

The final version of Microsoft Internet Explorer 8 has been released at last. I am not a big fan of alpha & CTP releases and never bother to install them and play around and read up stuff others have written about such releases - just to catch up with what is "in" and "out". However, I do play around with beta and RC versions only to some extent and did so on IE8 beta-2 and RC-1. The overall impression from these two was, yes, there are new features, more standards-based, existing features enhanced but it leaves a lot of websites esp. those make use of IE-specific features. The final release is more polished and of course does better than beta-2 and RC1; it also incorporates few changes over RC1, but it still leaves hundreds of websites render incorrectly in "pure" IE8 mode (both browser and document modes set to IE8). I fear this will only delay the adoption of IE8 at the enterprise-level and the internet community-wide thus leaving all the great new and enhanced features to be untapped or under-utilized.

Microsoft knew this problem and has given a "switch" to change the rendering mode between IE6, IE7 and pure IE8 - allowing users to select one that shows a website in its intended or best layout/design. This switch is available in the form of a browser setting (for end-users) and a <meta> tag specifying the rendering mode to be used for that page (for developers). Remember <meta> tag overrides user's setting in order to obey the developer's mandate of displaying the website in the way he/she intended irrespective of user's settings. Who knows a website better than its developers?

So, I installed the final IE8 on the very next day it was released and as I said already it has shaped better with few changes compared to RC1. I haven't experimented with all the new features/changes but based on my experience so far, here are my picks but you can find more about IE8 at the source.

• For Developers:
  • Full CSS 2.1 & partial CSS 3 support. As always, Microsoft does include few IE-specific extensions to the CSS 2.1 feature set but they are now identifiable with -ms- prefix (Firefox uses -moz- for its CSS extensions).
  • The first IE version to pass ACID2 test.
  • Support for data: protocol. I will cover this interesting thing in a later blog post.
  • IE Developer Toolbar now 'burnt' into the browser with more features in the name of Developer Tools. Touted to be what FireBug is to Firefox, but still behind FireBug.
  • Native support for JSON data exchange format. AJAX becomes much easier.
  • Support for (scriptable) DOM storage, part of HTML 5 standard, to persist data in user's local PC; a better-than-cookie model for offline features. While cookies are limited to 4KB, DOM storage allows more than 5MB per site.
  • Backward IE compatibility: If your website is incompatible with pure IE8 mode, you can place a <meta> tag specifying the browser version (IE 5.5, 6, 7 or 8) IE8 should use to render the page, overriding user's compatibility settings. See an image-based demo.
  • Includes a better source code viewer (built-in) showing line numbers and tag coloring.

• For End-users:
  • Browse without traces - called as "InPrivate" mode, the feature allows browsing websites without saving any information such as cookies, browsing history and form data. Good for those doing online money/credit card transactions esp. in public internet browsing centers.
  • Reopen closed tabs within the current browser session; you cannot open tabs closed in previous sessions. However, you can reopen pages that were open in the last browser session.
  • Better "Find on the page" interface.
  • Accelerators - context menus to exchange data with services (e.g.: currency converter, dictionary definition of the selected word, etc) - functionally similar to the mini toolbar in Word 2007. Surprisingly, Microsoft and others have published lot of free accelerators, search providers, toolbars, etc for IE8. See the IE add-ons site for the full list. As per my knowledge, none of the earlier IE versions had so many extensions right from their beta-stages.
  • Domain name (base URL) highlighting in address bar to easily identify the website currently being viewed.
  • As discussed above, IE8 has a switch to display IE8-incompatible websites in the way they are supposed to be (or as best as possible) rather than giving instant surprises. If IE8 finds the site being navigated to be incompatible, it flips the switch automatically and renders the site in best possible mode - saves users a few clicks if it is to be done otherwise manually. This compatibility information can also be specified explicitly using a <meta> tag inside <head> element that directs IE8 to render the page in that particular mode only. As of this writing, Microsoft home page has a <meta> tag to display it in IE7 compatible mode! J
  • Search suggestions - ditto of the 'Awesome Bar' feature in Firefox 3.
  • Visual Search - Along with suggestions, you also see a relevant image for each suggestion (not necessarily for all suggestions) if fed by the search provider. Try it: do a search using Amazon.com or Wikipedia search provider from the Quick Search Bar in IE8.
  • Web slices - call it 'Visual RSS Feeds', allow you to subscribe to specific sections on a webpage (as marked by its developers), get notified automatically when the subscribed sections updated & view the new content in a mini-window without visiting the site itself. Example: headiness (or specific sections such as Sports, Health, etc) on a news website, flight arrival/departure info, weather updates. Well, you get the idea. To see it in action, visit MSN in IE8 and hover the mouse cursor over the banner at the top-left corner of the main content area and you would see a green icon popping up outlining the web slice area (see below). Click that green icon and the rest should be obvious.

  

As you might have noticed, many of the new features are already present in other browsers; you can find almost every feature in at least one of Opera, Firefox, Chrome or Safari. The notable exceptions are Web Slices, DOM Storage and native JSON support. I do not know if any of the latest or currently-in-beta versions of other browsers support any of these exceptions.

Well, that's all for now.

Server-side Automation of MS Office Applications

I usually don't talk too much about or discuss things that are commonly known to everyone. Why add noise unnecessarily when something has already been discussed overwhelmingly by the internet community and all it takes is an internet search to find them. The subject of this post is just one of them. I frequently see many posts requesting for jump-start help, suggestions for improving performance or troubleshooting assistance for web applications that automate MS Office applications (primarily Word, Excel & PowerPoint). Microsoft has gone depth and breadth and documented comprehensively why one should not attempt to automate Office applications on server side and consequences of doing the same. See Considerations for Server-side Automation of Office for details.

Just to reiterate quickly:

1. Office applications are still COM based (COM servers) working in STA model. Microsoft hasn't made them to be server-side friendly and it may not happen, at least in near future. OK, the Office interoperability library provided by Microsoft is intended for desktop Windows applications only.
2. The object model is not thread-safe and naturally not suited for multi-threaded web server environment.
3. Office applications are designed to be desktop-based applications and assume the availability of user interactivity (e.g. popping up a dialog box and waiting for the user to respond to it). Since web applications run in non-interactive mode, an Office application popping up a dialog box, will just keep waiting (hanging) because the dialog box won't be visible and hence impossible to respond to it. The end-result is unpredictable.
4. Deriving from 1 & 3, concurrent requests to Office object model will be serialized for unknown periods of time. This affects the web application's stability, performance and scalability adversely. Web servers will start issuing HTTP/500 status code to client requests once the request queue becomes full.
5. Too many instances of Office applications consume more memory and have the potential for threading and shared-resource related issues.

As obvious as can be, none of the above are in favor of multi-threaded web server environments and this is just a small list highlighting significant ones. There are other aspects such as security, data marshalling between COM and .NET, etc, each playing their own devil game.

So, what are the alternatives for programmatically creating/manipulating Word, Excel and PowerPoint files?

1. Migrate to OpenXML based file formats (.docx, .xlsx, .pptx) which use XML files for data storage and Zip as the container format for the XML files. By the way, .docx, .xlsx & .pptx are all actually zip files with different extensions. Rename any of these files to .zip extension and open it using your favorite unzip tool to see the actual 'ingredients' of those files. Working with OpenXML formats is possible from .NET 3.0 onwards (System.IO.Packaging namespace is all about this only) and they are interoperable with other OpenXML based Office suits. Users having Office 2000/XP/2003 can still open and edit OpenXML-based files using the Office 2007 compatibility pack available freely from Microsoft.
2. Use a 3rd party component to programmatically manipulate Office documents without Microsoft Office installation. Aspose is a popular component vendor in this area. See their website for more details (I am no way associated with this company).
3. Consider text-based formats such as rich text format (.rtf) or HTML instead of binary .doc format. HTML is flexible, simple to create and can be opened in any browser, while RTF requires some learning curve (and patience!).
4. If the document or Excel file is relatively simple in size and format, you may use XML *** XSLT based rendering.

If none of these are to your liking, you may write your own Office 2000/XP/2003 file processor! The binary file format specifications are freely available from Microsoft!!

Not to mention, the whole story applies not only to web applications but Windows NT service applications (or any application/service that runs in non-user interactive mode on Windows) as well.

On Twitter Now!

After really a lot of thinking, I finally decided to tweet! So, follow me on Twitter at Blue Blip.

WCF Security Guide

After the beta-2 June this year, v1 of the WCF security guidance from Microsoft Patterns & Practices team is available now. Get it from its CodePlex site.

XML Utility Method in .NET BCL

XML has a set of special characters that cannot appear in element/attribute names and values: &, <, >, " and '. For example, <entityText>Mark & Spencer's</entityText> is not valid. The valid equivalent is <companyName>Mark &amp; Spencer&apos;s</companyName>. Here is the list of XML special characters and their entity names:

There is a nice utility method in .NET which does this conversion when working with such XML: System.Security.SecurityElement.Escape().

Unity 1.1 Download

Microsoft's version of dependency injection (DI) container, Unity (a.k.a., Unity Application Block) v1.1 is available for download. As you might remember 1.0 was released just back in April 2008. The documentation for v1.1 is here (VS 2005) and here (VS 2008)

To conceptually know more about DI container/IoC patterns:

• Martin Fowler: Inversion of Control Containers and the Dependency Injection pattern
• Wikipedia: Inversion of Control

Microsoft Enterprise Library 4.0 - Here Comes!

The latest version of Microsoft Enterprise Library, v4.0, is finally here for download!

The most important additions in this release for me are VS 2008 support and integration of Unity dependency injection container (Unity Application Block). Go grab it!!

Visual Studio 2008 Edition Feature Comparison

You know Visual Studio 2008 comes in many editions but ever wanted to know the features available with these editions? Microsoft has a comprehensive feature matrix (for quite some time) here. A downloadable copy is also available here.

If you are deciding which edition of VS 2008 to buy, then this should be your one-stop reference point.

.NET Training Kits - Free Download

Couple of training kits available for download from Microsoft:

.NET 3.5 Enhancements Training Kit

Visual Studio 2008 and .NET Framework 3.5 Training Kit