Scott Hanselman

Skip Intro - CSS3 is the new Flash

January 23, '12 Comments [45] Posted in HTML5
Sponsored By

FutureSplash Animator, ahem, Splash ScreenI remember spring of 1996 when FutureSplash Animator came out. That was 16 years ago, youngsters. Our minds were blown. No one had seen a cell-based animation editor before that was so easy. This was the beginning of Flash. Macromedia bought them, and then Adobe bought them.

Now, almost fifteen years of amazing animations, full screen fun, loading screens, auto-play music and skip intro links, Flash (and browser plugins for general use) seem to be on the way out. Proprietary binary formats are being replaced by angle brackets and curly braces.

Just when we think we've seen the limits of HTML5, CSS3 and JavaScript, another Danish 12 year old succeeds in a complete emulation of a Commodore 64 using only CSS3 or some other such magic.

But why do we hate Flash? Is it because it's a browser plugin? Is that the only reason, and even then, is it a good one? Why hate Flash? It brought us sites like this one and, of course, the greatest flash site in history.

Just to level set, take a moment and type "about:plugins" into Chrome or Firefox's address bar.

Don't fool yourself into thinking that you're browsing a plugin-free web. My Chrome instance has 15 plugins, including Google Update, Google Talk, Quicktime, Acrobat, Java, Silverlight and Flash just for starters.

In fact, today, more people have Flash or Silverlight than have Webkit. LiveScript, then Java, Flash, Silverlight, then JavaScript again, Google NaCl, and on. You've likely heard of Google NaCl (Native Client). Here's a fun quote from Matasano Security in an article called The Security Implications Of Google Native Client.

Google NaCl is, on its face, a crazy-talk idea. It’s a browser plugin that downloads native x86 code from a website and runs it on your machine. If this sounds familiar, it’s because Microsoft tried it over a decade ago with ActiveX.

You can tell how excited people are about any new Web Technology by measuring how long it takes until the obligatory "An Entire Desktop Operating System recreated in New Technology" examples show up. Ahem. I mean, seriously. Just the fact that I can Google with Bing for "Windows 7 in CSS3" and get more than one example of how to emulate Windows 7 using CSS.

However, just because you CAN do something doesn't mean you SHOULD. I prefer to use HTML5, CSS and JavaScript to create clean sites that use responsive design and progressive enhancement and are viewable as documents everywhere. I predict a clearer line will be drawn soon between sites and applications. Ironically, rather than updating  a hundred apps to get the latest features, I'll instead update my browser a hundred times.

Check this amazing webkit abuse example: He's truly pushing the limits of CSS3. Actually, no, it's the limits of the WebKit extensions to CSS3. As Pete Brown said, "wow, that's awesome. In the way that a circus is awesome."

UPDATE: Just to be clear, I love what Steven Wittens from is doing. I'm not meaning to pick on his site at all. One of the significant things worth pointing out about Steven's site is his use of media queries and CSS is all client site and works on any browser. It degrades cleanly. Yes, it's a "gaudy tech demo" but Steven backs it up with clean markup and a site that is smart enough to be functional on any browser (both past and future). His site is totally appropriate to his audience and is a good example of progressive enhancement.. I am in awe of his technical chops and encourage you to check out his content which is also excellent.

Here it is as an animated GIF. Why a gif? Because it's 100% compatible. ;) Maybe I should have used Flash.

The #1 benefit of HTML5, CSS3 and JavaScript is one thing. It's not what they can do, or how they do it. It's that they are owned by everyone. Angle brackets and curly braces are the tools of future, no question. I think we do need to ask ourselves what we want to build with those tools. HTML5, CSS3 and JavaScript of 2012 offer us all the power (and more) of FutureSplash from 1996. Let us not abuse that power and relive the sins of the father.

"The more freedom and power you have, the more you need someone to tell you what not to do." - Pete Brown

Funny thing about all this no technology. You still need a designer.

Sponsor: This week's ComputerZen feed was kindly sponsored by DevExpress. Do check out their new stuff like DXv2 and check out a free trial of their complete suite of Developer Tools. I've personally been a huge CodeRush fan for years.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Abusing the Microsoft Research's Touch Mouse Sensor API SDK with a Console-based Heat-map

January 19, '12 Comments [24] Posted in Coding4Fun | Tools
Sponsored By

In August I purchased and reviewed the Microsoft Touch Mouse. I still use my Microsoft Arc Mouse more than the touch, initially due to what I felt was dodgy scrolling performance on the Touch Mouse, as I mentioned in my review. Still, I've kept it in my backpack and I use the Touch Mouse perhaps a few times a month and have kept the software up to date in case there's some software changes made to improve performance.

I can happily say that they've changed something and the scrolling performance is WAY better. I can finally get 1 to 2 pixel precision with it while scrolling in my browsers. The other nice feature is the "three finger swipe up" which gives you effectively a Windows version of the Mac Expose window switcher view.

Today I noticed while catching up on Long Zheng's excellent blog that the Touch Mouse Sensor SDK is available for download. Per their site:

"The Microsoft Touch Mouse supports multitouch gestures via an integrated sensor. The Touch Mouse Sensor API SDK is a small library intended to enable students and researchers to experiment directly with Touch Mouse sensor output.

Using this SDK, you can create your own applications consuming the 13×15 sensor image. The SDK includes C# and C++ samples demonstrating how to read and manipulate sensor data"

OK, so what can we do with this thing? It comes with a number of samples to get the bitmap from the sensor and process it. It includes examples in both C# and C++. Because I don't have C++ on this machine I got an error opening that solution, but you can just remove that project and still build the samples.

You don't need to do your work in a graphical application, although it's nice to visualize this data of course. First sample is a console app, that tells you were the center of mass of your big fat finger is.

The smarts are in the Microsoft.Research.TouchMouseSensor namespace. You implement a callback function that the mouse effectively calls whenever something interesting happens. It looks like this:

/// <summary>
/// Function receiving callback from mouse.
/// </summary>
/// <param name="pTouchMouseStatus">Values indicating status of mouse.</param>
/// <param name="pabImage">Bytes forming image, 13 rows of 15 columns.</param>
/// <param name="dwImageSize">Size of image, assumed to always be 195 (13x15).</param>
static void TouchMouseCallbackFunction(ref TOUCHMOUSESTATUS pTouchMouseStatus,
byte[] pabImage,
int dwImageSize)

As you can see, the image size is 13x15, always. You get the raw bytes that represent the image, 195 bytes long.

A console app outputing the center of mass as an X,Y coordinate

The first thing I was surprised to see was just HOW MUCH of the surface area of the mouse is covered and how high the resolution is. I was thinking, "13x15? That's so small, how could it tell me anything useful with such a limited structure?" Well, that's how clueless I was.

Of course, each of these bytes is giving a number between 0 and 255 so a lot of information can be extrapolated between two pixels with different values and you can get a pretty detailed picture of what's going on. How much? Well, before I move on to a graphical example, why not abuse ASCII as much as we can?

First, I'll output just the hex values with this code, then show what it looks like when I move my figures around the surface of the mouse.

Console.SetCursorPosition(0, 0);
StringBuilder sb = new StringBuilder(300);

for (Int32 y = 0; y < pTouchMouseStatus.m_dwImageHeight; y++)
// Iterate over columns.
for (Int32 x = 0; x < pTouchMouseStatus.m_dwImageWidth; x++)
// Get the pixel value at current position.
int pixel = pabImage[pTouchMouseStatus.m_dwImageWidth * y + x];
if (pixel > 0)
sb.AppendFormat("#{0:X2}", pixel);
sb.Append(" ");


Here's the result, animated.

Cool. But what about with color? I could use the default Console stuff and set the colors, or I could get direct access to the Console, use the Win32 APIs and what not, but I could also use Tim Sneath's ConsoleEx class that's on NuGet thanks to Anthony Mastrean! First, I'll "install-package ConsoleEx" to bring it in.

How about a mouse touch heat-map with color? I thought about building a whole "find closest color" map and trying to map 255 different colors, but then I just did this.

if (pixel > 230)
Console.BackgroundColor = ConsoleColor.Red;
else if (pixel > 128)
Console.BackgroundColor = ConsoleColor.Yellow;
else if (pixel > 90)
Console.BackgroundColor = ConsoleColor.Green;
else if (pixel > 45)
Console.BackgroundColor = ConsoleColor.Blue;
else if(pixel > 15)
Console.BackgroundColor = ConsoleColor.DarkBlue;
Console.BackgroundColor = ConsoleColor.Black;

ConsoleEx.WriteAt(x*2, y, " ");

And the result is this:

You can do the same thing in WPF, of course, with better bitmap support, but seriously, with a Console-based heatmap, who needs graphics? ;)

OK, fine, here's the sample code that takes the results of the TouchMouseSensorEventArgs and creates a grayscale image.

void TouchMouseSensorHandler(object sender, TouchMouseSensorEventArgs e)
// We're in a thread belonging to the mouse, not the user interface
// thread. Need to dispatch to the user interface thread.
Dispatcher.Invoke((Action<TouchMouseSensorEventArgs>)SetSource, e);

void SetSource(TouchMouseSensorEventArgs e)
// Convert bitmap from memory to graphic form.
BitmapSource source =
BitmapSource.Create(e.Status.m_dwImageWidth, e.Status.m_dwImageHeight,
105, 96,
PixelFormats.Gray8, null, e.Image, e.Status.m_dwImageWidth);

// Show bitmap in user interface.
SensorImage.Source = source;

And the result:

256 color grayscale heatmap of the Touch Mouse

One way to look at this is as if the surface of the mouse is a tiny Xbox Kinect. What kinds of gestures could I recognize and hook up to do stuff? Control WIndows, do custom stuff inside my application, browser, or whatever. Any ideas?

The downloads are here:


About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

An analysis of SOPA and PIPA Protest "Blackout" HTML and CSS techniques

January 18, '12 Comments [28] Posted in Musings
Sponsored By

SOPA sucksMany popular sites are blacked out today in protest of two acts before Congress, known as the Protect IP Act (PIPA) in the Senate and the Stop Online Piracy Act (SOPA) in the House. Long story short, the legislators barely know how to email, much less understand what a DNS takedown is.

As I've been surfing around today bumping into SOAP sites, I noticed that every site is doing the blackout technique differently. This is interesting to me for a few reasons. First, things on the web aren't setup for an event like this. To shutdown your website for a day is one thing but to do it in such a way that your site presents a new temporary message without affecting search engines that have already indexed you is an interesting problem.

A number of people are changing their content for the day and some are rightfully concerned that this single day's protest will affect their search results. In fact, Google has announced via Google+ that they will be slowing the Googlebot in an attempt to mitigate the effects from the protest.

Put a giant DIV over your existing page had this clever technique. I hit the site, saw that it was black, then did a view source. However, when I did, the HTML source had the regular WordPress site that's always there. I used an element inspector as you can see below and started moving around. Note the blue outline that is outlining some phantom element.

WordPress › Blog Tool, Publishing Platform, and CMS - Windows Internet Explorer (106)

What's going on here? Let's blow it up using Tilt in Firefox.


Ah, see those three black buttons on the right? WordPress's original site is still under all that. They are floating a DIV over the top with a super large z-index.

If you change the CSS dynamically and change the z-indexes, (or just delete the DIVs) the actual site peeks out. Clever. A nice dramatic effect with minimal effort and effectively no SEO downside.

WordPress SOPA floats a giant DIV

However, the WordPress technique does kick off the process with JavaScript. What happens if you have JavaScript disabled? I assumed it just wouldn't work.

WordPress No JS

Nice! They've included a banner in the upper right corner using Pure CSS so there is still a visible protest on the page. A good compromise and a nice recognition of the six neckbeards that still surf the web without JavaScript. ;)

In my desperate search to learn everything I can about Justin Bieber, I turn to Wikipedia. I hit the site, I see Justin and then a curtain falls. Wikipedia's blackout page shows up AFTER a teasing flash of content.

Justin Bieber - Wikipedia

They've added a div at the VERY end of their page:

<div id="mw-sopaOverlay">
<div id="mw-sopaColumn">
<div id="mw-sopaHeadline">Imagine a World<br>Without Free Knowledge</div>
<div id="mw-sopaText"><p>For over a decade, we have spent millions of hours building the largest encyclopedia in human history. Right now, the U.S. Congress is considering legislation that could fatally damage the free and open Internet. For 24 hours, to raise awareness, we are blacking out Wikipedia. <a href="" target="_blank">Learn more.</a></p></div><div id="mw-sopaAction">
<p class="mw-sopaActionHead">Contact your representatives.</p>
<div class="mw-sopaActionDiv">
<form action="/wiki/Special:CongressLookup">
<label for="zip">Your ZIP code:</label>
<input name="zip" size="5" type="text">
<input id="sopa-zipform-submit" value="Look up" type="submit">

At the very TOP of their page they have a bunch of positioning CSS. The flash happens because the DIV doesn't show up and get styled until the VERY end of the page gets loaded. Nice simple way to do it as SEO is so important to Wikipedia.

Actually Go Offline with an HTTP 503

The most impressive of the options, and arguably the most semantically correct, is the HTTP 503 Error. When you ask your browser for a page, it usually gets a 200 which means "OK, cool" or a 302 that means "temporarily over here" or even a 301 that means "permanently moved. Jimmy no live here! You no call back!"

An HTTP 503 means "Service Unavailable." I'd look it up on Wikipedia, but well, you know.

Notice in the Network tab picture below that they literally return a 503 result from the main HTTP GET. One could imagine them returning a 200 and just saying in the HTML it was a 503, but in this case they really used the web correctly. The Googlebot will visit the page, see the 503, assume the site is down temporarily and try again tomorrow.

Frankly, this is the technique everyone should have done. All the CSS and DIV work is clever, but not as easy , not as dramatic and certainly not as "correct."

503 Service Unavailable

Kudos to BoingBoing - a group that clearly gets the web - to use HTTP as it was designed to, to make their statement.

Redact by changing CSS Background Colors

From a design and stylistic perspective, Wired really nailed it. I love what they did here with the text intact and background colors in black.

Wired redacts text

You can hover over the text and see what's under it. No SEO affect, and still makes the point in a very dramatic way.

Zoom in on Wired Text Detail

Here's some of the their markup and CSS. censored class

They have a "censor" class" and apply it to a SPAN from a sopa.css.

Change an Image

My friends at DuckDuckGo changed their main image and linked to SOPA information. A simple change that won't affect SEO and is easily undone in the future.



Google did the same thing in fact, with simple markup.



<a href="//">
<img alt="Tell Congress: Please don't censor the web!"
title="Tell Congress: Please don't censor the web!"
border="0" height="196" src="/logos/2012/sopa12_hp.png"
width="445" style="padding-top:50px" id="hplogo">

Make you Wait or Click

Craigslist had an interstitial that blacked out their site with a link at the button to click to continue.

Craigslist against SOPA

Interestingly, Craigslist did their protest in the lowest-tech way possible. They literally just changed their first page. I suspect there will be a few days of SEO issues and we may see this page in search results.

Dramatic Animation

Today Firefox's about:home included a nice CSS animation that takes the background of the page from white to black to a nice effect.

Firefox blacked out in an animation

What other cool SOPA protest techniques have you seen today? You can add a SOPA widget to your own site with Grassroutes.

Sponsor: My thanks to DevExpress for sponsoring this week's feed: Introducing DXv2 – Welcome to the next generation of developer tools from DevExpress! Explore what’s new in the latest release.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Setting a Custom Icon for your External Drives in Windows Explorer

January 10, '12 Comments [25] Posted in Musings
Sponsored By

Ok, I like my icons. You arrange your desk perhaps, shuffle papers, I update things with totally unneeded icons. A while back I made, ahem, these awesome Visual Studio Command Prompt and PowerShell icons with Overlays because, frankly, pretty icons make life better.

I did these back in the day.


I even did a little one for the system menu, 'cause that's how I roll.


I just bought a nice 3 Terabyte Seagate USB3 External Drive that I'm very happy with, but I noticed that it had an awesome icon. This epic icon was was making my other drives jealous. This, of course, cannot stand, Dear Reader.

Ugly icons! Make it stop!

Easily fixed, friends.

Create a text file in the root of each drive called Autorun.inf with contents like this:


Any icon you like will do. You may need to reboot to see the changes. Now my externals are making my internals look bad!

Lovely Icons


About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize

January 6, '12 Comments [11] Posted in HTML5 | Mobile | Open Source | Speaking
Sponsored By

imageI recently did a video with Rob Conery on how to be a better technical speaker and blogged about it. I wanted to put up a site for this video to give people more details and to make it easier for me to get the word about about the video separate from Tekpub. I went and bought and fired up WebMatrix to do a quick one-pager.

The idea was to spend only an hour on this from the moment I got the domain to a "complete" site. My requirements were:

  • An easy to remember domain name.
  • A site that looks kind of like my existing site, to keep the branding cohesive.
    • Cool I've got some existing CSS.
  • Site should look good on mobiles and tablets so I want to use responsive design.
    • Um...
  • A site that includes the free trailer for my video that plays on any device, including phones and tablets.
    • Um...
  • A site that resizes cleanly, rotates cleanly and the video thumbnail is always as large as possible.
    • Um...

First step, a decent starter template that works on Mobile

For stuff like this, I now always started with a decent boilerplate. There's even group knowledge and experience that there's little reason for me to New Blank HTML File these days.

There are a number of options out there, including two of my favorites:

There's others, and the nice thing is that you can get started with a template like this in minutes, not hours, so go find one that makes you happy.

I picked Skeleton, then with a little magic help from Jzy and a late night Skype (go visit his site, by the way!) we brought in a few elements from my currently blog template so the general look and feel is still there.

Add a YouTube video

There's a number of ways to embed a video that will use Silverlight or Flash if HTML5 video isn't available, including

  • VideoJS - A really nice and image-free HTML5 video player with a series of templates that can make it look like Vimeo or YouTube or others. Works everywhere.
  • SublimeVideo - Free and pretty but they have a few sign up things if you serve hundreds of thousands of views.
  • jMediaelement or "jme" - Clean, basic, simple, open. Flash fallback and semantic code.

These are all great but if you've already got your video up on YouTube, Vimeo, Blip or another video sharing site, you might just want to make that existing video embed resizable.

For that, you can use FitVid, a small jQuery plugin that will take effectively any video element and make it resizable and usable in a responsive design.

Originally Rob was using a Flash player called Flowplayer but I recommended that he save money by serving his video trailers on YouTube. That meant that I could serve my trailer video from YouTube. While I could then use the FitVid JavaScript to make the video resizable, it seemed like overkill to use some JavaScript to resize something that CSS should be handling for me.

Enter A List Apart and their article on Intrinsic Ratios for Video. The hardish part about resizing a video is maintaining the ratio, like 16:9 for example. As they say:

padding-bottom: 56.25%
To create a 16:9 ratio, we must divide 9 by 16 (0.5625 or 56.25%).

Anders M. Andersen has a nice clean example of this with the CSS, so I ended up with this markup. Only the embed-container class matters in this context. The other containers are used by Skeleton.

<div class="container">
<div class="sixteen columns">
<div class="embed-container">
<iframe id='player' src="" frameborder="0" allowfullscreen></iframe>

And this CSS:

.embed-container {    
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

photoSo now, when you visit in your desktop browser or your mobile browser, you'll have a lovely experience.


I think I only spent about 2 hours total on this site. Taking advantage of existing CSS wisdom and standing on the shoulders of giants is absolutely the way to go for layouts. I'm totally sold on Responsive Design and am planning on including it on all my sites whenever possible.

Related Links

P.S. As an aside, if you bought the video, drop me a line if you liked it and maybe I can put your review on the site! Also feel free to write a review at SpeakerMix if you've seen me speak before.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.