We (at Pixel Lab) have mixed feelings today as we wish our friend and colleague Derek Lakin the best of luck in his new role at Microsoft. We’re a really small group and losing someone as talented as Derek is hard. He makes an amazing contribution to the team. Mostly, however, he’s become a great friend and it won’t be the same around here without him.

On a brighter note, Derek will be on the Skype team at Microsoft in Stockholm and I’ve volunteered to be a frequent source of testing. Hopefully that means we stay in touch! Still, the best part of running a company is that you get to choose who you work with and Derek was a great choice.

Good luck, Derek!

This is it.  An internet bookmark for JSON states. Really, I just don’t want to go through formatting this again.  I think this was my second time actually…

var usStates = [
    { name: 'ALABAMA', abbreviation: 'AL'},
    { name: 'ALASKA', abbreviation: 'AK'},
    { name: 'AMERICAN SAMOA', abbreviation: 'AS'},
    { name: 'ARIZONA', abbreviation: 'AZ'},
    { name: 'ARKANSAS', abbreviation: 'AR'},
    { name: 'CALIFORNIA', abbreviation: 'CA'},
    { name: 'COLORADO', abbreviation: 'CO'},
    { name: 'CONNECTICUT', abbreviation: 'CT'},
    { name: 'DELAWARE', abbreviation: 'DE'},
    { name: 'DISTRICT OF COLUMBIA', abbreviation: 'DC'},
    { name: 'FEDERATED STATES OF MICRONESIA', abbreviation: 'FM'},
    { name: 'FLORIDA', abbreviation: 'FL'},
    { name: 'GEORGIA', abbreviation: 'GA'},
    { name: 'GUAM', abbreviation: 'GU'},
    { name: 'HAWAII', abbreviation: 'HI'},
    { name: 'IDAHO', abbreviation: 'ID'},
    { name: 'ILLINOIS', abbreviation: 'IL'},
    { name: 'INDIANA', abbreviation: 'IN'},
    { name: 'IOWA', abbreviation: 'IA'},
    { name: 'KANSAS', abbreviation: 'KS'},
    { name: 'KENTUCKY', abbreviation: 'KY'},
    { name: 'LOUISIANA', abbreviation: 'LA'},
    { name: 'MAINE', abbreviation: 'ME'},
    { name: 'MARSHALL ISLANDS', abbreviation: 'MH'},
    { name: 'MARYLAND', abbreviation: 'MD'},
    { name: 'MASSACHUSETTS', abbreviation: 'MA'},
    { name: 'MICHIGAN', abbreviation: 'MI'},
    { name: 'MINNESOTA', abbreviation: 'MN'},
    { name: 'MISSISSIPPI', abbreviation: 'MS'},
    { name: 'MISSOURI', abbreviation: 'MO'},
    { name: 'MONTANA', abbreviation: 'MT'},
    { name: 'NEBRASKA', abbreviation: 'NE'},
    { name: 'NEVADA', abbreviation: 'NV'},
    { name: 'NEW HAMPSHIRE', abbreviation: 'NH'},
    { name: 'NEW JERSEY', abbreviation: 'NJ'},
    { name: 'NEW MEXICO', abbreviation: 'NM'},
    { name: 'NEW YORK', abbreviation: 'NY'},
    { name: 'NORTH CAROLINA', abbreviation: 'NC'},
    { name: 'NORTH DAKOTA', abbreviation: 'ND'},
    { name: 'NORTHERN MARIANA ISLANDS', abbreviation: 'MP'},
    { name: 'OHIO', abbreviation: 'OH'},
    { name: 'OKLAHOMA', abbreviation: 'OK'},
    { name: 'OREGON', abbreviation: 'OR'},
    { name: 'PALAU', abbreviation: 'PW'},
    { name: 'PENNSYLVANIA', abbreviation: 'PA'},
    { name: 'PUERTO RICO', abbreviation: 'PR'},
    { name: 'RHODE ISLAND', abbreviation: 'RI'},
    { name: 'SOUTH CAROLINA', abbreviation: 'SC'},
    { name: 'SOUTH DAKOTA', abbreviation: 'SD'},
    { name: 'TENNESSEE', abbreviation: 'TN'},
    { name: 'TEXAS', abbreviation: 'TX'},
    { name: 'UTAH', abbreviation: 'UT'},
    { name: 'VERMONT', abbreviation: 'VT'},
    { name: 'VIRGIN ISLANDS', abbreviation: 'VI'},
    { name: 'VIRGINIA', abbreviation: 'VA'},
    { name: 'WASHINGTON', abbreviation: 'WA'},
    { name: 'WEST VIRGINIA', abbreviation: 'WV'},
    { name: 'WISCONSIN', abbreviation: 'WI'},
    { name: 'WYOMING', abbreviation: 'WY' }
];

Enjoy!

I will be speaking at the Stir Trek conference  on May 4th, covering Blend for HTML.  This is the latest incarnation of Blend now rebuilt to support HTML, JavaScript and CSS.

They’ve done a killer job and I’m excited to share how the application makes building WinJS Metro style apps a great experience.

Check out my retro circus style announcement for the session:

Come and see the most marvelous, novel and thrilling Windows 8 design tool ever before displayed under Canvas, in fact ever seen anywhere. Watch in awe, while the Interactive Mode transports you from scripting web pages to building web apps for the Microsoft Store. Expression Blend is valuable as both, a companion to Visual Studio for you and as an integral tool for your design team. Its the big CSS-styling animal sensation of the season!

Read more details on the Stir Trek site.

Manifesto is kind of an old fashioned word. I started flirting with it because of Paper (the app). I’ve been a little obsessed with Paper, both the product and the process that made it.

If you haven’t seen it, Paper is an iPad app for sketching. It’s probably only 20% different than a dozen other apps but it’s 1000% better. Just about everyone agrees. They’ve sold 1.5 Million copies in 2 weeks, The Verge started reviewing styluses and Amazon ran out of them (for a few days at least). We’re all buying styluses now, mostly because of one app.

What makes it so much better? There’s been endless opinion about this. The convergence seems to be on their painstaking attention to detail and focus on doing a single thing well. Sounds familiar. In fact, that seems to be the magic one-two for creating a great version of anything: focus and then a relentless committment to doing that thing well.

That’s why you need a manifesto. It’s a powerful instrument that helps you do both of those. I started thinking about that word when I saw it here:

That’s from a sample Paper sketchbook called “Making Paper” that ostensibly contains notes about the process of building the app and the brand. This page is to be their site map and the real page does, indeed, contain a manifesto. Their’s reads:

We noticed that somehow, along the way, software designed to help us be creative actually made us less creative. That’s because we believe our best ideas emerge when we use pencils and paper. So we set out to build tools that work the way we do.

I don’t have a dictionary definition of manifesto at hand. I’ve avoided looking it up because I’m willing to hijack it (take that word meanings!). I think of it this way: a manifesto is a declaration of why the thing you do makes the world better.

Sounds simple, and maybe it is. Maybe you’re already working under some assumptions that roughly add up to one. The power of the manifesto, though, only comes when you write it down. Keep it short and understandable. You should have a single sentence version and a single paragraph version and then be ready and excited to lay those on anyone that asks. To be clear, it’s not the sentence or the paragraph that matters. It’s the process and the fight for clarity that makes the difference.

Until you write it down, your manifesto is not a manifesto. It’s just those rough assumptions, equivocal ideas and inconclsusive connections. That amorphic thing has no power, no ability to make you focus and no capacity to strenghen your comittment. I think you have to write it down and then share it. I’m writing mine.

Paper had a manifesto and they knew it. They labeled it. I think some people might have the clarity of mind to create these naturally, without trying. For the rest of us, it takes some work but I suspect it can become a habit.

I started looking for examples and their are dozens, probably hundreds. Find a hero (a business you love, a thinker you want to emulate, a creation that touched you, a leader you want to follow) and you won’t have to dig deep to find a manifesto. They might not call it that (probably won’t), but the evidence will emerge in the form of an alluring ability to simply state their reason for being, coupled with an infectious commitment to what they create. And that’s the magic.

There has been a lot of talk about the lack of a Start button in Windows 8.  Or more accurately, a statically placed visual icon in the Desktop app which the user can click on to return to the Start screen.

What happens if the user is in the Desktop app and moves there mouse into the same area, perhaps even driven by muscle memory?  A little thumbnail of the Start screen shows up and when clicked takes you to the Start screen.

For even faster travel back to the Start screen, just press the Windows key and you’re there. It’s stunning, really.

I do agree though, it’s not in your face and you have to learn how to do it. Should they put the Start button back in the task bar?  Sure, just use the new Win8 logo and you’re done.

BUT…

Do I think this is going to be a real issue for my mother, grandparent or my kids? No.  At least I hope not.  If so, something went terribly wrong.

Try this.

Go to one of your non-techie Windows-using friend’s computers and hit the amazing start button.  Take a look at the most commonly used programs.  What do you see?

This is what I found:

1. Web Browser
2. Photos, Music, Video, Messaging, Twitter, Facebook, Reader
3. Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
4. QuickBooks, Family Tree Maker, Minecraft, League of Legends

Those are examples of commonly used Windows Programs. Now how does that compare to the new fandangled Metro style apps which run from the Windows 8 start screen and not the Desktop app?  You know the one missing the Start button.

Web Browser
You can do just about everything in the browser, the web is amazing. You may even be able to build an OS on it.  Is there a Metro-style browser in Windows 8? Yes, its IE10 and hey it has way better support for CSS3.  Are there more coming? Yes, Firefox is confirmed.

Mail, Photos, Music, Video, Messaging, Twitter, Facebook, Reader
There are Metro-style apps already available in the Consumer Preview that perform these functions. Are they awesome? Almost, definitely promising, but I believe they will be better for release. And if not, there will be other options via the Store.

Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
These programs are not  yet available as Metro-style apps. If Microsoft does not make them available then they’ve failed here.  And the good news is, as far as the last three are concerned, there will be other options via the Store.

Quickbooks, Family Tree Maker, Minecraft, League of Legends
These are examples of programs that are likely not to be changed (ever or anytime soon) to Metro-style apps, for some reason or another – existing investment, technical philosophy, etc.  This is where it hits the most and we might need that little Start button back. And if you don’t convert or get a hook in the Store somehow, less and less Windows users will adopt your program and instead use one of the other options via the Store.

My mom won’t care about the Windows 8 Start button
Because hopefully she will be too busy hanging it in Metro style land; not breaking her computer rather finally getting to it enjoy it.  One of my first “ah-ha” moments with Windows 8 was looking at the Settings app.  ”My family could use this!” I thought.  It’s way friendlier and less intimidating than the Control Panel.  Thanks Metro design language.

…other options via the Store
You may have noticed this phrase come up more than once in this post.  That’s because this is big clincher, the thing that makes everything work.

Quick, guess how many Windows programs my 10-year old daughter has installed? 0

Now how many apps has she installed on her iPod? At least 30 or 40.

What does the mean?  She loves her iPod way more. I believe that once she sets up her Win8 PC in the same manner as well she’ll be hooked. When my wife customizes her Win8 PC she’ll be happier and more productive. When my mom customizes her Win8 PC (or I do it for her) she won’t be lost anymore.

As for those of us power users
I need my Visual Studio and Photoshop to pay for all of these apps and Windows 8 PCs, so I need to learn to be comfortable moving between the Start screen and the Desktop app. The good news is it’s not that hard. You really just need to know Win, Win+X and Win+C.

Try it out. Besides, your other hand needs something to do while you’re mousing around.

When I worked at Microsoft on the WPF team, my job was to manage (“project manage” that is) the controls team. We (at least thought we) were an important team. Controls are big deal, a huge part of what UI framework does. The other half of the WPF team was the Documents Team and for those guys, controls were kind of an after thought. You don’t really need controls in document platforms.

Until a few years ago, we all thought the web was more like the Documents team than the UI team but things are changing quickly and today we think of HTML as an app platform as much as a document platform. Windows 8 has bet on that. So has just about everyone.

Oddly, though, we still don’t have a great components framework for HTML. Personally, this drives me nuts. There’s not a standard way to encapsulate reusable bits of UI on the web. Don’t get me wrong, we hack our way through it pretty successfully (I’m looking at you jQuery plugins / jQuery UI) but everyone has a different approach. Some are better than others. Few are easily extensible. Most have inconsistent support for styling, subclassing, etc.  It’s kind of a mess and it’s lacking the rigor of a UI-first framework.

Incidentally, the Windows folks have done a stand up job at addressing this in Windows 8 using data- properties to flag a div as a control (e.g. <div data-win-control=”WinJS.UI.ListView” />). There’s been some criticism of that approach, but I personally like it. It’s a tough problem because the HTML spec simply doesn’t provide a solution today.

Well, all is not lost! In trying to figure out how we organize our component library for HTML, I’ve found two promising solutions:

Quick UI

First, is QuickUI. It hasn’t gotten the attention it deserves, but it’s awesome. It’s immediately intuitive (especially if you’re coming from a component driven framework like WPF or Silverlight), extensible, flexible, stylable, etc. It’s also declaritive (like XAML). There’s a good walkthrough on the site that will bring you up to speed in 30 min. and there’s big library of free controls (ready for styling). For me, though, the exciting bit is the extensibility. There’s a clear path for creating your own reusable QuickUI components.

If it feels a little like WPF, don’t be surprised. It’s the brainchild of Jan Miksovsky. He’s also a former Microsoft guy (an early UI guru there that invented all kinds of things that today we take for granted). He was also super influential in helping us define early requirements for WPF. He’s a components guy. He’s one of those UI-first people that also has a solid engineering background, and the sort of person that does things right or doesn’t do them. QuickUI is pretty amazing and done very thoughtfully.

Web Components

Where QuickUI is my solution for today, the longer term solution might be Web Components. This is new. It’s a spec from some folks at Google and it defines a way to build this kind of extensibility right into HTML. I think it’s incredibly promising and may be a key to HTML becoming a real UI framework.

Incidentally, I came across the spec on Jan’s blog (the QuickUI guy). He sees convergence with QuickUI and Web Components in the future. So there you have it! Invest in QuickUI today and migrate to a better solution later and for free. At least you begin to apply some of that CS rigor that makes the S part of CS true. It’s also the right time to start building out your own library of components. The age of HTML apps is upon us, we just need to wait for HTML to catch up!

The results are in, but they don’t quite stack up.

Download the full image

There are currently 29 options compared to the 150 options in WinJS.  Additionally some of the names and icons conflict or are used in different ways.  I’m hoping this is ironed out before the full Windows 8 release.

Instead of a property, the appearance of the Button is set via a Style where the name of the icon is used as a prefix to the string “AppBarButtonStyle”. The Styles are defined in the “StandardStyles.xaml” resource dictionary which is part of the basic project template.

Sample code:

<Button Style="{StaticResource PreviousAppBarButtonStyle}" />

This works fine and is inline with how XAML-based controls are styled, but after doing so much WinJS work I will say it feel a bit heavy compared to just setting a property.  Custom icons are defined by setting the to “AppBarButtonStyle” and setting the Content property of the Button to your own PNG file.

Overall, I prefer the WinJS choice of names and icon usage over those used in XAML, except for the “find/Search” icon. Since the icon looks like the OS-level Search charm, I believe it should be named “search” and not “find” in WinJS.

While digging into the Windows 8 Consumer Preview, I found that AppBar buttons are now defined by using the AppBarCommand object which has an icon property. In order to work, the string value must be set to a property of WinJS.UI.AppBarIcon or a custom PNG.

Sample code:

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'back', label:'Back'}">
<button>

This is wonderful functionality providing for both custom icons and 150 existing icons using the Segoe UI Symbol font.  Genius, now where is the list of available icons?

Oh, I see, there isn’t one available yet.  Ok, I’ll just make one for myself and my friends. Enjoy.

From fahrenheit to celsius in Windows 8 Weather app from Adam Kinney on Vimeo.

This is a very short screen capture on how to change the settings of the Weather app in Windows 8 to use Celsius instead of Fahrenheit. Useful for those who want to make the change, but also indicative of the broader concept – Windows 8 is new, like really new.

Now that you’ve learned to use the Settings charm, you will find it in the same spot every time. And any development team who take the time to follow the pattern will have happy non-confused users.

This is fresh new path to be discovered, refined and molded. I’m looking forward to it as both a user and developer.

———–

As side note, the screen capture was created with Expression Encoder, which has no trouble running on Windows 8.

• Git is an amazing tool to manage and collaborate on text content -- source code, html, javascript, etc.
• Giving money to United Republic is a great way to get involved in the political process and fight the influence of money in our democracy.

• Office Nomads
• 1617 Boylston Ave, Seattle, WA 98122

• Thursday, Feb 23, 2012.
• 6:30pm.
• Doors open at 6:15.
• We'll start right at 6:30. Don't be late.

• Your laptop.
• Windows - install Git Extensions. Use the latest "Setup Complete"
• Mac
• If you don't already have HomeBrew or MacPorts installed, install Git from here.
• If you do have HomeBrew or MacPorts, I'll help you get going when you get here.
• Linux
• I'm sure you can figure it out.
• A GitHub account. Free. Easy.
• Note taking materials. Your favorite text editor or a pen and paper.