Development

This category is for all things relating to scripting or programming languages, as well as software construction, design and development.

The ‘Metro Inspired’ Interface

We recently saw the release of the Office 2013 Preview which has been received by many as one of the best looking and best executed reboots by Microsoft. The preview is very consumer focused (which is where Microsoft is lagging) and includes some very interesting cloud integration features – like saving to SkyDrive by default.

The thing I want to talk about now is a trend that has been coming at Microsoft for a while now – everything is moving over the Metro look and feel, but there is a distinction between an application that is ‘Metro style‘ and ‘Metro inspired’ the first is built for the new Windows 8 user experience, and the second is just an existing Windows application which has been built with the Metro Design philosophy in mind. (Yes I’m going to keep calling it Metro, for now)

Part of the confusion on the Metro name is due to this shift, and we actually have two things:

  • New Windows 8 Applications (Metro style)
  • Any app designed with the Metro philosophy (Metro inspired)

Now ‘Metro style’ applications are going to be known as Windows Store Applications. But we’ve had no word on what the Metro inspired applications are going to be called yet.

Below are a few of these ‘Metro inspired’ apps we have today…

The first of these applications pre-dates Windows 8 itself and was really the birth of the Metro design philosophy on Windows. The Zune desktop software has always had many of the original design features which we now know as Metro design – big on typography and whitespace.

I spend a massive amount of time in OneNote, and the 2013 version is so Metro it’s almost invisible. If you go into the full-screen mode.

Now applications from the Office Division are merging their ‘fluent’ ribbon interface with the Metro design that the Windows team has embraced. The combination is very interesting.

The Developer Division has also taken note, and Visual Studio 2012 has a really amazing (and controversial) look.

Personally, I really love this Metro look. I just wish Microsoft would decide exactly what we should be calling it. Until then – it’s Metro.

Photosynthesise

I’ve had two themes for this site since I started it in December 2010, and even the second one was only a small refinement of the first. Back then I figured that getting the site up and running was more important than the look itself, so I never really gave that much attention to the theme – until now.

Before the design of my new theme even started, I had to give the project a name. I decided to call it Photosynthesise, as I wanted to give the feeling of energy and growth. (Oh and also the signature colour is green!)

This time I thought I’d share my ideas behind the design process…

Goals

There were three things I really wanted to have for my Photosynthesise project:

  • A design built to fit inside a typographic grid
  • A design which evolves the current identity
  • A design that is great for all existing content

Thinking about space

While researching Swiss Style, I discovered that things look better in grids. I think this is a concept that everyone already knows, but really focusing on the grid when laying out a user interface gives it much more balance. The users may never be aware of the work you have done, but unconsciously – they’ll appreciate the eye for detail.

Switch on the grid to see how it looks.

Thinking about identity

My old site was green, and I decided to keep it. This time the new logo at the top was designed to be a lot smaller, allowing the title of the website to come outside of the coloured box. Designed in a 16×16 grid, the new logo will easily scale down to the microscopic resolutions of favicons, as well as scale nicely when zoomed up to higher definition.

Joining the signature green, the previous theme’s hyperlink colours have also been used throughout the new look. It will be no surprise to designers that this almost-RGB colour pallet is influenced by digital displays. Finally, three shades of grey and white make up all of the colours used throughout the design. The darkest of the greys is used in place of black to ensure the other colours are never overpowered.

The old site was based on Twenty Ten, which had a shape that was very similar to other WordPress blogs. I’m happy to continue to use this layout as it is familiar and user friendly. The overall size of typographical elements in the design is fairly large, something which has also continued over from the previous theme. This keeps the overall look of the site mostly the same as it was before, even though everything has been refined.

When it comes to the typography, I decided to go for Segoe UI for the body font. I had also greatly considered using either Calibri and Cambria, but I ultimately decided that I liked Segoe UI the most. The reason I picked Windows fonts is not by accident – as a Windows developer they feel very familiar to me, and I like writing in them.

Thinking about content

The content is the really tricky bit. Due to the fact I have previously used 600px wide images throughout the blog, I’ve decided to keep the content at that width. Consequently, images like the one above still have a big impact on the body text. Oh and I don’t have to resize everything.

“I feel like a pig shat in my head.” – Withnail

I’ve greatly improved the spacing of the text and other elements to make the whole content area flow with the 100+ posts I already have. I’ve also improved the ability to post quotes, code samples and console commands, handy when you spend as much time in PowerShell as I do.

Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.

PS>


To enable new discovery of content, I’ve improved the visibility of the categories and tags. Large blue links to the right of the content enable switching between categories, and now a new section at the bottom of each post makes the relevant tags much more visible.

I plan to keep tweaking the code over the next few days, but if you have any feedback or you’ve noticed any bugs please let me know in the comments!

Astrolight 1.2 Update

My Astrolight red flashlight application has been updated to keep the screen from locking. I had heard from users that sometimes they wanted to set the phone down while playing with cameras and eyepieces – but when they went back to the phone they’d have to unlock again. Which could be pretty bright depending on your wallpaper! Get it from the Windows Phone Marketplace.

The ‘Real’ Windows 8 Logo

The new Windows 8 logo, as shown above from the Microsoft blog post that announced it, has been designed to compliment the Metro Design Language and also has roots in the Swiss International Style, which is all about typography, solid colours, strong lines and grids.

Over all I like it, but when I first saw it I felt like something was a little off with the ‘beams’ on the window. It looked like the perspective was messed up or something.

Later I came across an article about the new logo by the design agency Pentagram – who were commissioned by Microsoft to create the new logo. After thinking about it for a little while I understand that the beams are like a grid on top of the rectangle shape, and because of this understanding the logo looks better to me.

This is a bit like seeing the arrow in the FedEx logo for the first time.

You can tell this version of the logo looks slightly different to the one posted on the Microsoft blog. As Pentagram explains, the window shape itself has been chosen to be a rectangular shape in perspective, but the actual beams (or grid lines) are separate from the shape.

The perspective drawing is based on classical perspective drawing, not computerized perspective. The cross bar stays the same size no matter the height of the logo, which means it has to be redrawn for each time it increases in size, like classic typography.

You can see these lines are cut out of the coloured shape, and are not in perspective at all. The idea is that each time the logo is drawn the lines are always the same size, as shown below.

Seeing the logo in this view makes me appreciate the design a lot more, but the problem is that the version that is on the Pentagram website is actually quite different to the one on the Microsoft site.

Here is an animation which Kean created for me which show the difference in the beams and text between the two.

So which one is the real Windows 8 logo?

I find it really hard to believe that Microsoft would be able to convince everyone – from OEMs to the press – to render a version of the logo for the exact size they need, every time they need it. So I think they’ve had to compromise on the design given to them by Pentagram.

I’m not sure which is the ‘real’ Windows 8 logo yet, or if Microsoft are going to make any more changes before it gets released to the public. But I’m going to place my bets on the version that Microsoft posted to their blog.

I’m assuming they’ve just picked a width for the beams which fits well for the majority of sizes shown in the new operating system, and decided to stick with that moving forward.

I wasn’t the only person to notice this, Long Zheng has a write up on his excellent blog. He suggests changing the beams to fit in with the perspective of the rest of the logo, and I think his version looks pretty good too.

Microsoft Future Vision

Every so often Microsoft make ‘Future Vision’ videos, and while both of the ones I have posted here were produced some time ago, I stumbled across them again recently so I thought I’d share them for anyone who hasn’t spotted them yet.

The basic concept is for the Office division to imagine where productivity will be in the next 5-10 years, without having to actually create the products today. Both of these videos have a similar feel (I actually prefer the 2011 video) and the technology in them is smart and subtle. Some of the technology is even starting to become real.

It’s this smart yet subtle concept that really connects me to the modern Microsoft design language, including Metro on Windows Phone and Windows 8.

2009

My favourites from the 2009 video have to be the smart school room, and the flexible newspaper display. Fantastic ideas.

2011

There are so many parts of the 2011 video I like, but most of all I like the way the devices work together. The taxi windows and hotel room computers become personal once hooked up to the smaller devices. A very powerful concept.

You can watch a few of the Microsoft Future Vision videos on the Office YouTube page, but I don’t think we’ll see a new one until next year.

Bluetooth Improvements in Windows Phone Mango

It was a pleasant surprise to see that Windows Phone Mango includes some improvements to the Bluetooth stack, which means I now see the name of the currently playing track in my car.

This gets added to the already existing ability to pause, fast-forward and rewind directly from the steering wheel, so now I can do just about everything from the Zune software on my phone while driving.

Very handy – as the built in USB player in my car doesn’t support content downloaded from Zune Pass…

WMPowerUser.com has a more information on what has been the Windows Phone Bluetooth stack, if you fancy being nerdy about it.

Querying TFS with TFPT.EXE and PowerShell

At Branded3 we use Team Foundation Server for source control, task managment, and various other tracking purposes. One of the benefits of this is being able to run queries with WIQL to pull off reports.

As is usually the case with me, I have set up a couple of PowerShell scripts that use TFPT.EXE from the Team Foundation Server Power Tools to make life a little simpler for myself…

Viewing Open WorkItems

$TFSSERVER   = "hq-tfs08-01.branded3.net"

Function Get-WorkItem
{
    $query = "SELECT [System.Id], [System.Title] FROM WorkItems " +
             "WHERE [System.AssignedTo] = 'Julian Kay' " +
             "AND [System.State] <> 'Closed' " +
             "AND [System.State] <> 'Resolved' " +
             "ORDER BY [System.Id]"

    tfpt query /collection:$TFSSERVER /wiql:$query /include:data
}

This little script gets a list of WorkItems which are not closed or resolved from TFS. I find this much faster than opening a copy of Visual Studio to find out which tasks I have assigned to me. True you could run this kind of script by using a batch file, but I like the fact I can use this in conjunction with the various Outlook scripts I use for PowerShell with simple one-liners like foreach ($workItem in Get-WorkItem) { Add-OutlookTask “$workItem” }

Getting Work Hours

Function Get-WorkItemHours
{
    $month = (Get-Date).ToString("MMMM")
    $year  = (Get-Date).Year
    $query = "SELECT [Completed Work] FROM WorkItems " +
             "WHERE [System.AssignedTo] = 'Julian Kay' " +
             "AND [Assigned Month] = '$month' " +
             "AND [Assigned Year] = '$year'"

    $hours = tfpt query /collection:$TFSSERVER /wiql:$query /include:data
    $total = 0.0
    foreach ($hour in $hours)
    {
       $total += $hour
    }
    $total
}

We also have custom fields which help us keep track of the hours we’ve spent on a project, and as shown above, we can even see how many hours have been spent in a month. By running this simple script I can be sure that all my time is correctly recorded to enable us to both bill correctly, and keep track of how long things really take.

Naturally, everyone has their own requirements for scripts like this, but PowerShell gives me the flexibility to create these simple utilities with very little development work.