Scott Hanselman

I've been experimenting with my diet a little and considering a Paleo diet. What an amazing and selfish thing, though, for me to even consider or be able to change my diet in a fundamental way. Only someone who isn't worried about their next meal could explore that aspect of their lives without fear or concern.

One doesn't get to have certain luxuries until other more basic needs are met. Here's an interpretation of Maslow's hierarchy of needs:

I was talking to a customer a while back and one gentleman was deeply concerned about coding style, curly brace location, best practices in interface design and a bunch of important but arguably not urgent thing. Their unit testing wasn't well organized, their deployment was manual, their build was only marginally verifiable.

Stated differently, he was asking questions like "Am I eating enough veggies rich with Vitamin A" without asking the more fundamental "Do I have food for tonight?"

Now, apply the Hierarchy of Needs to Software and Technical Debt. Here's one, with my thanks to Phil Haack, Jon Galloway, Jonathan Wanagel, Paul Stovell for their help in brainstorming.

Bragging Rights - Change you are proud of

Paul put it well when he said to me: "The top of Maslow's pyramid is self-actualization...in some ways I think we like to achieve self-actualization through our code, [such that] in years to come, maintenance programmers will stumble upon this architecture and exclaim, 'Wow, Scott was here.'"

Are you writing software or crafting software? When does your craft become art?

This is a noble and certainly attractive goal, but is one that should be attempted only after the basic needs are met.

Refactorable - Change without fear

Is your code/system easy able to be refactored? Can you rearrange it without fear? Does it follow all the conventions and use the appropriate idioms of your chosen language? Do you have automated unit tests?

Maintainable - Change with verification

Is it able to change at all? Are bugs fixable? When you make a change is that change verifiably correct? Any tests at all?

Buildable & Deployable - Change in production

Can you deploy your system as easily as you can build it? Continuous Integration is effectively a must in today's software systems, but moving up in importance is Continuous Deployment - with rollback!

Revisable - Change

Is your system in source control with a clear workflow that governs contributions? Can you revert changes, stamp official changes, branch and merge? What? You're using zip files? Sorry, friend, you don't get to talk about class design or move around UML diagrams until you're using source control.

The importance of leadership

This underscores the importance of a strong and appropriately self-aware leader. Creating art is the fun stuff but it isn't always what needs to be done to move the project forward. The tech lead needs to recognize the right time to be an artist and the right time to invest in strong foundational processes.

Are we eating enough leafy greens as a team? Let's start with "are we eating tonight?" and work from there.

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.

About   Newsletter

Hosting By

It's been over 5  years since my post how to contribute a patch to an Open Source Project. That post is focused primarily on Subversion as the source control system. If you are using CodePlex and Subversion for example, those instructions work great. Here's the same idea for GitHub projects.

Folks email me all the time asking questions like "how can I be a better programmer?" "how do I get more experience?" or even the very specific "how can I make my resume more attractive?" My answer is almost always get involved in open source.

Work with an open source project. Fix a bug, do their website, write some documentation. You don't necessarily even have to write code. A lot of open source projects need help and that help can mean doing forums work, support calls, whatever. The thing that folks forget about open source is that it's most volunteers who are doing it for the love of it. They show up.

"80% of success is just showing up." - Woody Allen

Sometimes open source projects fail simply because only one or two people actually show up. Day after day. Using open source is easy, but making open source is hard.

NOTE: This example uses Git and GitHub. It is not meant to be comprehensive nor ideal. It is workable and works, but if you are considering working in Open Source or with Git for multiple projects and features you will want to explore more complete (and complex) workflows. There's an excellent "Git Workflow for Agile Teams" article, as well as a suggested Git Workflow from the NuGet team, and a fantastic screencast from Ryan Bates on contributing with Git as well as a fine screencasted introduction from Bobby Johnson.

Code 52

It can be an overwhelming thing, though, to jump into a large open source project that is already established. It can also be hard to decide which small project to start, because no one wants to waste their time. How do you choose?

Some lovely gents (Andrew Tobin, Brendan Forster and Paul Jenkins) over at Code 52 have started a great idea. A new coding project every week.

What a great idea! Nothing too hard that it can't be jumpstarted in a week. This totally lowers the barrier to entry and also encourages that things stay fresh. It also creates a bunch of great codebases for us (the community) to fork and spin off into larger projects that live longer than a week.

The guys says they figured a week because:

• shorter timelines encourage achievable goals.
• shorter timelines reduce the incentive to procrastinate.
• more variety of projects to work on over a period of time.

Contributing a patch to a small Open Source project on GitHub

The Code52 projects are hosted on GitHub. I host some of my own projects on BitBucket and others on CodePlex. It doesn't really matter where a project is as long as it makes you happy.

Let's say I want to contribute a fix to the DownmarkerWPF project they worked on a few weeks back. There's a few things I can do.

Raise an issue

Filing a bug is literally the least you can do to help a project. Even better if it isn't a ragebug (where you just tell them how they suck) but includes everything you know about the issue, perhaps a stacktrace or a screenshot. Bonus points if you're kind in tone.

Suggest a Feature

Be helpful and suggest an interesting or innovative feature for their product. Bonus points if you include mockups, suggest a design or even better, start implementing it!

Fork the Code, change it, then do a "pull request"

With some SCC (Source Control Systems) you'll change the code locally package it up as a "patch/diff" file and send that file onto the project team for integration at a later time. You'll want to just use the website for spelling changes and easy stuff.

With some newer systems like Mercurial and Git you'll push your code to a central place and send a "pull request" that says "hey, the code is over here, pull it in, m'kay?"

GitHub will allow you to make changes in the browser, but that's not realistic for actual code changes. Let's get the DownmarkerWPF code, change it, and submit a pull request.

It's a lovely Markdown Editor for Windows. If you don't want the source and just want a decent zipped up version you can run, you can download it.

Since I am going to fix what I think is an "issue" I'll first make an issue on the site and claim it. It's issue 82, so I will remember that number.

I'll fork the code from the website and then clone my copy to my local machine. Note the URL I'm using is my fork of the code.

C:\Code52>git clone https://shanselman@github.com/shanselman/DownmarkerWPF.
git
Cloning into DownmarkerWPF...
remote: Counting objects: 1870, done.
remote: Compressing objects: 100% (634/634), done.
remote: Total 1870 (delta 1347), reused 1728 (delta 1210)
Receiving objects: 100% (1870/1870), 11.40 MiB | 2.39 MiB/s, done.
Resolving deltas: 100% (1347/1347), done.

I could make a branch for myself to describe what I'm doing but I'm not going to because it's unnecessarily confusing for this example.

So, I love the idea of a Markdown editor for Windows as I'm writing a book with my wife using Markdown. However, my wife and I (and Leanpub.com) are using *.mkd as our extension, while the Code52 project uses *.md, *.markdown, and *.mdown. Here's an small but impactful change that I can make.

I'll find the code, and change it. Don't get overwhelmed now by the awesomeness and impact of this fix.

public static class Constants
{
    public static readonly string[] DefaultExtensions = new[] { ".md", ".markdown", ".mdown", ".mkd"};
...
}

Now I'll compile and test the change. It works!

Now I'll commit my change locally, then push it to the server. Add, Commit, Push.

C:\Code52\DownmarkerWPF>git status
# On branch master
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   src/MarkPad/Constants.cs
#
no changes added to commit (use "git add" and/or "git commit -a")

C:\Code52\DownmarkerWPF>git add .

C:\Code52\DownmarkerWPF>git commit -m "#82 - Added .mkd extension support"
[master 17c5704] #82 - Added .mkd extension support
 1 files changed, 1 insertions(+), 1 deletions(-)

C:\Code52\DownmarkerWPF>git push
Password:
Counting objects: 9, done.
Delta compression using up to 12 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 453 bytes, done.
Total 5 (delta 4), reused 0 (delta 0)
To https://shanselman@github.com/shanselman/DownmarkerWPF.git
   792d099..17c5704  master -> master

Cool, so now I can see on the website that my issue #82 has been associated with my change because I used the number in the commit message.

Now I'll let the Project Administrators know where they can get it by pressing Pull Request on the website.

Now I wait some number of minutes, hours or days for the owner of the project to accept my request. It's totally up to them what they accept and what acceptance criteria they have.

Here's my fix, now accepted, merged and closed by the Project Administrator. They will then close the issue.

Open Source isn't as scary as it seems. Go out there now and offer your help, time and assistance to your favorite project. Promote them, use them, fix their spelling and bugs. You can play with the Code 52 guys in their chat room on Jabbr or learn all about the project at the Code 52 website.

Related Links

• Screencast: Contributing to Open Source Projects On GitHub For .NET Developers Part 1

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.

About   Newsletter

Hosting By

I 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: http://acko.net. 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 http://acko.net 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.

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.

About   Newsletter

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

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.SetWindowSize(50,16);
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);
        else
            sb.Append("   ");
    }
    sb.Append("\n");
    
}
Console.Write(sb.ToString());

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;
else
    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:

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:

• Microsoft Touch Mouse Sensor API (32-bit)
• Microsoft Touch Mouse Sensor API (64-bit)

Enjoy!

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.

About   Newsletter

Hosting By

Many 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

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

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.

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.

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.

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="http://en.wikipedia.org/wiki/Wikipedia:SOPA_initiative/Learn_more" 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">
            </form>
         </div>
      </div>
   </div>
</div>

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

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.

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.

Here's some of the their markup and CSS.

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.

Just:

<a href="//www.google.com/landing/takeaction/">
    <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">
</a>

Make you Wait or Click

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

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.

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

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.

About   Newsletter

Hosting By