Skip to content
Apr 17 13

Binding helpers for WinJS

by Brandon

While writing my first JS app for the Windows Store, I found several features of WinJS to be very useful. One feature I used in several places is its data binding and templating support. Along the way, I discovered that custom initializers could be used to great effect.

You can download the set of helpers I created by right-clicking here and choosing “Save As…” from the menu.

What’s included? Here’s a quick summary (replicated in the comments at the top of the file:

BindingHelpers.displayNoneIfNull

Marks the element as display:none if the value is null or undefined.

Example:

<div class=”userName” data-win-bind=”style.display: user.name BindingHelpers.displayNoneIfNull”>
Name: <div class=”userNameValue” data-win-bind=”textContent: user.name”></div>
</div>

BindingHelpers.displayNoneIfNotNull

Inverse of displayNonIfNull

BindingHelpers.originalIfNull

Uses the original (markup) value if the bound value is null or undefined.

<div class=”userName” data-win-bind=”textContent: user.name BindingHelpers.originalIfNull>No user name available.</div>

BindingHelpers.fillStringTemplate

Treat the default (markup) value as a template, where the placeholder {value} is replaced with the bound value.

<div class=”userName” data-win-bind=”textContent: user.name BindingHelpers.fillStringTemplate”>Name: {value}</div>

BindingHelpers.fillLinkTemplate

Same as fillStringTemplate, but url encodes the value.

<a href=”http://website.com/accountLookup?id={value}” data-win-bind=”href: account.id BindingHelpers.fillLinkTemplate”>Account</a>

BindingHelpers.stripHtmlTags

Strips HTML tags from the value (by inserting the value into a DIV and then extracting the innerText value).

BindingHelpers.toStaticHtml

Pre-processes the value using toStaticHTML.

BindingHelpers.appendToClasses

Allows you to bind the value as a class name to the classes property.

If you have questions, founds bugs or opportunities for improvement, or any other feedback – please share in the comment section!

Nov 12 12

My first Win8 app: 4th at Square

by Brandon

If you’ve got a shiny new Windows 8 or Windows RT device (like a Microsoft Surface), and you use the foursquare service (or have been meaning to try it out), you should head on over the Windows Store and check out my first app: 4th at Square.

In addition to the above Store link, I’ve set up a website devoted to the app, at www.4thAtSquare.com. If you have suggestions or other feedback, you can leave them on that site or right here in the comments.

 

Soon I’ll be doing some posts about my experience actually developing the app, and sharing some tips and reusable code snippets I came up with along the way.

Oct 31 12

How I ended up building my first Windows 8 app, and sparking a minor controversy

by Brandon

Throughout the development of Windows 8, I occasionally dabbled in the new WinRT app platform, at various stages building things like a simple “twitter fall” app for watching trending or chosen topics stream by. In most cases all I did was dabble over vacations to see how the platform was progressing. However, back in February or thereabouts, I was sitting at Café Fiore on Queen Anne hill and decided to see how I might build something using the location and background task APIs that would make my Windows 8 laptop feel alive and aware of where I was. As a longtime on-again-off-again foursquare user, building something against that service seemed like a great place to start. So I fired up VS 2012 (a preview version at the time) and created a new WinJS project.

On a whim I named the project “4th & Square” – the name came about at least partly because I’d lived at 4th & Mercer, but looking back it’s also likely that I’d internalized the name of the excellent Windows Phone app, “4th & Mayor.” At the time, I gave the name little thought, as I was just dabbling and not planning to write anything that would ever be seen by anyone other than me and maybe some friends. I put a weekend or two of work into it, originally creating something that did little more than pop toast notifications as you moved around to new locations. Then I got too busy with other things like finishing Windows 8 itself, and the proto-app got stashed aside.

Fast-forward to Win8 RTM, and suddenly it seemed like all of my friends were building apps. I received some encouragement to break out my foursquare project and turn it into something real. Over a weekend I ported my existing work into the final version of the WinJS template and library, and then over a vacation to North Carolina in August, I spent a few afternoons at Starbucks completing most of the feature work for 1.0 version, learning quite a bit about JavaScript and the WinJS library along the way. A couple more weekends of polish and I felt like I had something worth sharing. I also spent some time one afternoon ensuring there wasn’t already an app with this name, and that it fit with foursquare’s naming and branding guidance. As far as I could tell, it was unique and within their rules. So when the Store opened in September, I immediately wanted to submit what I had.

In order to do so, I had to throw a privacy policy up on the web. I based this on foursquare’s guidance and included some boilerplate bits copy-and-pasted from their developer page. In my haste and fear of missing something, I Bing’d “foursquare app privacy policy” and used some of the results as a reference to make sure I had my bases covered. I also used MSDN’s documentation for location privacy (including both Win8 and Phone), and assembled the pieces I needed in a OneNote notebook I use for tracking everything related to my app. I then pasted that into WordPress and threw it up on this site as a temporary solution until I found time to build a proper site dedicated to the app. I also bought the domain name 4thAndSquare.com and pointed it at the appropriate sub-site here. All the boxes checked, I submitted the app. And then the fun began!

The app got through certification on its first attempt, and rather quickly. Within a day I started getting bug reports and feature requests from friends and others who had early access to the Windows Store. I put a couple more weekends into fixing things up, and released a couple of updates to the app to address all the reported issues.

Now, if you follow me on twitter you may know the next part of the story. At some point a few weeks after publishing the app, I received an e-mail from Jeff Wilcox, author of 4th & Mayor. He expressed some concerns about the similarity of my app’s name to his, and perhaps more importantly, a couple of paragraphs in my privacy policy which appeared to have been lifted from his. At first I didn’t believe this (I figured maybe he was confused because we both had the boilerplate stuff provided by foursquare). However, taking a look at both, I saw that the last couple paragraphs (out of many) were indeed virtually identical. In my haste to assemble the privacy policy I had apparently copied from the wrong window (one of the app policies I was using as a reference, namely his) into WordPress instead of the OneNote web app where I’d drafted my policy. I don’t remember doing this, but it is my best guess about how I ended up with something copy-and-pasted from his policy into mine. I absolutely did not intentionally do a single copy-and-paste from anywhere except the blurbs required by the docs on dev.foursquare.com. Of course, for that you have nothing but my word, and if you don’t know me I fully understand why that might not be enough.

Feeling pretty awful about this, I replied to Jeff telling him I had fixed the privacy policy issue and suggested we meet up. Several days later we did just that (ironically, in a coffee shop at 4th & Wall). Jeff’s a friendly and likable guy, and we chatted for a while about the background of how his app came to be and some challenges he’s faced along the way. I apologized to Jeff for the privacy policy issue, which simply never should have happened. I was completely embarrassed and ashamed over it. I did my best to assure him that nothing about my app was based on his (he had looked at it and seemed to agree that other than being a foursquare client, the app’s look and feel was clearly nothing like his). Jeff informed me that he’d been working on a Windows 8 version of his app. I gave him a couple of tips like how I used Unicode emoticons as glyphs in my app to avoid loading or scaling images, and some tips for how to best make use of the background task infrastructure. Then to help avoid any potential confusion, and as a gesture of goodwill, I said I would absolutely make a change to my app’s name to further differentiate it from his. Jeff suggested “4th + Square” as a simple alternative. I told him I’d think on it and figure out what to call it.

A week or so later, after racking my brain more than you’d probably think necessary, I settled on “4th at Square.” One reason for this choice, versus something even more different, was that it let me continue to use the rest of my existing branding. Another was that it was sure to be a less jarring change for my existing customers. It took a couple more weeks to get the fully renamed package into the Store, but it appeared well before Windows 8′s general public availability date.

That controversy was easily the most stressful and regrettable part of building my first Windows 8 app. I am thankful to have moved past it though, and very happy that I can return any time or energy I direct at the app to improving it and implementing feedback I get from users around the world. I’m also looking forward to sharing some of the things I learned about WinJS development, as well as some handy utilities I wrote along the way. It’s my hope that they’ll prove useful to others building WinRT apps using JavaScript. Look for those posts to arrive soon!

Oh, and this entire post was written on my personal Surface and Touch Cover :-)

Oct 1 11

Post-Build notes and links

by Brandon

It’s been a few weeks and I feel like I’m still catching up from my week at the //Build conference.  As it turns out, conferences are very busy places, and sometimes things you planned to do that week (such as, for instance, blogging) can easily fall through the cracks.

In the unlikely event that anyone was looking for me specifically, I hope you were successful.  I spent most of my time at or near the Metro Style Apps booth, which was fairly front-and-center in the Expo hall.  As I didn’t have a session of my own to present, my main purpose was to answer questions and demo different pieces of the Windows 8 user experience upon request.  Because of this, I took to identifying myself as a “booth babe” when asked about my role at the conference.

Of course, my other primary purpose was to support my colleagues who were presenting.  Most relevant in this regard would be the talk given by Priya Vaidyanathan, the main PM for the Windows 8 Search experience.  As the main dev for this feature I was very excited to attend Priya’s excellent presentation (“Search: Integrating into the Windows 8 search experience”) and to help her address attendees’ questions afterward.  If you’re at all interested in how the search experience works in Windows 8, or would like to know how your app can add value to it, I highly recommend watching the video.

Other great session videos:

Misc //Build Links

  • Fellow “Metro Style Apps” booth babe Raymond Chen shared some notes about his experience at the conference, including documentation of a few of our booth antics.
  • Cori Drew’s blog series “My week at //Build/” – unfortunately I didn’t get to meet Cori but her write-up is a great read!
Sep 10 11

//BUILD/ Windows event is just a few days away

by Brandon

If my Twitter stream is any indication, then I’m not the only one immensely excited for the events of the coming week.  While I enjoy what’s likely one of the last solid summer days in Seattle, some of my colleagues have already begun making their way to Anaheim, CA for this week’s BUILD event.

I’m (seriously) overjoyed to say that I will there representing my team along with a few of our Program Managers.  If you will be attending, feel free to track me down and say hi.  I’ll post some updates about my schedule here when I’m at liberty to do so, and will also post (and tweet) some links which I expect many of you following along from home will want to check out.

In the meantime, the event website and Twitter account are probably the best places to watch for official details and updates about the event.

It’s going to be an exciting week!

Aug 18 11

My team for Windows 8

by Brandon

Earlier this week Steven Sinofsky kicked off the Building Windows 8 blog, the successor to the excellent (in my opinion) Engineering Windows 7 blog, which was often referred to as the “E7″ blog.  When the E7 blog kicked off, you may recall that Steven introduced the team, including a list of the names chosen by each feature team across the division.  I soon followed up with a post about the feature team I worked on at the time.

The new “B8″ blog is making this a tradition with a post titled Introducing the Team, and I decided I should do the same.  So before I say any more, any guesses about which team from the list is mine?

If you guessed “Search, View, and Command” then you guessed right!

You’re also right if you guessed that this is an evolution of the Find & Organize team from Windows 7.  However, the new is far from a simple rebranding of the old.  In fact, I would estimate that only about half of our team’s roster can be traced back to F&O.  Along the same lines, our charter has evolved as well.  More about that another day :-)

Stay tuned for the B8 blog to learn more about our team and the work we’re doing.  You can follow @BuildWindows8 on Twitter to get notified about the latest updates.

MS trivia: Our team is commonly abbreviated as “SVC,” which has on occasion caused some confusion.  That’s because the SVC abbreviation has long been used to refer to the Silicon Valley Campus down in Mountain View, CA.  Our team’s offices are in Redmond, WA.
Aug 12 11

How to make sure your customers miss their bills.

by Brandon
Thanks, Seattle City Light.

Seattle City Light e-bill notice flagged as "very suspicious" by SmartScreen.

Yes, that’s their e-bill notification (the only thing you get) being flagged as “very suspicious.”

Their solution?  Tell customers to ignore the warnings and add their address to your e-mail service’s “allow list.”  According to the customer service rep, it’s been this way for years.  How hard can this be to correct?  If anything, I would think bills like this should be using SenderID to make the mail *more* trustworthy, not doing whatever they’re doing that looks “very suspicious.”

In contrast, this is how they *should* make their bills appear:

Mint.com reminder message sent using SenderID
Jun 3 11

First look at the next version of Windows

by Brandon

If anyone still reads this blog, they’ve probably noticed that throughout the last year or more my rate of updates has slowed to a trickle.  There are a number of reasons for that, but the largest reason is that I’ve been “heads-down” working on the most exciting and ambitious project I’ve been a part of since starting at Microsoft.

And as of Wednesday we have finally shared a first glimpse at what we are (for now) calling Windows 8!

Here are three videos from Wednesday:

Jensen Harris’ overview video

Here’s a video of our group’s director of program management, Jensen Harris, giving an overview of some of the new user experience we’ve built.

Steven Sinofsky on-stage at D9

That video was posted just after our division president, Steven Sinofsky, gave an interview and on-stage demo (with VP Julie-Larson Green).

Video here (no embedding available)

Mike Angiulo at Computex

Finally, one of my favorite presenters, Corporate Vice President Mike Angiulo, demonstrates “Windows 8” at partner preview event in Taipei, Taiwan, for COMPUTEX.

Feb 7 11

On GroupOn’s ads

by Brandon

 I may be going against the grain here, if the comments on GroupOn’s blog post are any indication.  But I don’t really care what GroupOn’s intentions were, to be honest.

I found the ads hilarious and edgy.

I also found them thought-provoking because the issues they highlighted are important ones which people (myself included) often take for granted. The fact that ad was jarring was, in my opinion, it’s brilliance. It made me laugh, and then feel bad and thoughtful about the fact that I laughed. You see, my brain had filed these issues in the “past” category, the sort of thing you get used to seeing used in this sort of humor.  When was the last time you heard anyone talk about Tibet or the rainforest?  Seeing these ads made me realize these things are still happening and jarred my brain into realizing its mistake.  And with any luck, correcting it.

Mission accomplished, I think.

Aug 18 10

What does it mean to reverse engineer the brain?

by Brandon

PZ Myers takes Ray Kruzweil to task for claiming that we might be able to reverse engineer the “program” that our brain runs, and indeed make a computer-based “port” of it, sometime in the next 10 years.  He doesn’t just refute Kruzweil’s claim, he seems to be using it as evidence for his argument that Kruzweil is a moron.

I can’t (and don’t particularly care) to comment on the intelligence of Kruzweil, I’ll leave the defense of his honor to the ready and willing.  Instead I want to share an alternative interpretation of what Kruzweil meant.  Or at least some food for thought about what seems to me a fascinating subject.

Myers makes a lot of great points about why it would be difficult (within 10 years) to simulate all the detailed biological interactions between cells in the brain.  He also focuses a lot on a claim Kurzweil apparently made about the potentially small size of the computer program in question, based on the assertion that Kurzweil was only talking about “data” in the genome and that this is not sufficient for building a simulator of brain biology.

But when I read the Kurzweil quote, a simulator of brain biology is not at all what came to mind.  Indeed, reading Myers’ argument had me scratching my head, since it took me a moment or two to realize what he was on about.  You see, I read Kurzweil’s quote from the perspective of a software engineer, whereas Myers’ interpreted it as a biologist would see fit to do.  This is a reasonable thing given that he is indeed a biologist.  What seems less reasonable to me is how vigorously he attacks Kruzweil’s claim without giving the acknowledgement that he’s made an awful lot of potentially incorrect assumptions about what Kurzweil actually meant.

So what is my software engineers’ perspective? 

I don’t see why reverse engineering the brain would require any ability to simulate protein and brain cell interactions.  Doing so would be a brilliant achievement, but it seems orthogonal to the idea as I understood it.  Myers says:

To simplify it so a computer science guy can get it, Kurzweil has everything completely wrong. The genome is not the program; it’s the data. The program is the ontogeny of the organism, which is an emergent property of interactions between the regulatory components of the genome and the environment, which uses that data to build species-specific properties of the organism. He doesn’t even comprehend the nature of the problem, and here he is pontificating on magic solutions completely free of facts and reason.

In my opinion this is not only wrong, but incredibly harsh.

It’s wrong because I think of biology itself as the programming language, and perhaps also the runtime.  If a C++ developer were asked to reverse-engineer a program written in Pascal, they would not have to learn Pascal (or worse yet, reverse-engineer the compiler and runtime) in order to create a functionally identical C++ program.  So I believe it could be with the biology and the functionality of the brain.

I understood Kurzweil’s statement to be about the creation of a computer program (in some existing, modern programming language) which implements at least a rudimentary version of the human brain’s algorithm.  For example, its ability to continously observe input and recognize patterns, resulting in emergent properties that make up at least part of what we call consciousness.  That’s why I think “reverse engineering” seems like an appropriate description, while “simulation” does not.

I won’t claim that this is what Kurzweil meant.  He may have meant exactly what Myers claims he did.  But I have the feeling Myers didn’t give this subject due consideration before lambasting Kurzweil over the supposed ridiculousness of his claim.

Bickering aside, what do you think of this subject?  Can we reverse engineer intelligence/consciousness or at least some fundamental components?  Will we have true “brain simulators” any time soon?  I’m  not remotely qualified to answer such questions, but I’m inclined to share Kurzweil’s optimizism and ambition about at least the former.