CSS media queries used to scare me. The problem is that I know CSS, but media queries look so much more complex & having to rely on browser tools to help get them correct was never a great experience. Thankfully Visual Studio + Web Essentials has made great strides in making using media queries easier to use, so much so that now that I think they are kinda boring and I need a new thing to scare me… like closure

Snippets

Web Essentials has snippets for CSS media queries, and these are a great help. First there is the @media snippet which will get you setup with a basic media query. The real power though is in the device specific ones that produce a the right set of CSS & takes a lot of the searching for the right settings away.

Browser Link

I have demo’d browser link many times & written about it before – it is awesome. It gives ANY browser the ability to have a two way connection with Visual Studio. That means the browser can send data to Visual Studio, useful for detecting things that only happen when you render the DOM. Browser Link + Visual Studio can also send data to the browser, for example telling the browser to refresh because the page has changed. Since it works with ANY browser, you can have multiple browsers open and work with all of them at once. Browser link isn’t an ASP.NET feature, it is a web + Visual Studio feature, so if you are using PHP or pure HTML (like I do in the video below) it just works.

For media queries, browser link can read the browser dimensions into Visual Studio, this means all you need to do is set the browser to the right size & press Ctrl+Space on the right property of the media query and it will show you the dimension the browser is at that very moment! It means that getting the exact right size of the browser window for sizing is trivial, since you can work visually in your browser and have all the power in your tools.

Check out this video for how it works!

Have you got any awesome features in Visual Studio that are kinda hidden? Share them in the comments.

A project I was recently working on ran up against an interesting bug and, unfortunately, it was a bug we had to ship the app with in the end. My main reason for sharing this is in the hope that should you find this same bug that you know you are not alone and maybe it gives you some ideas what you can do. Not only did we find this bug, but we have been able to confirm this happens to a number of other apps in the store.

The Issue

The app itself is an audio streaming app, except it is not real streaming, it is actually HTTP progressive downloading and playing the file as it downloads. The problem we had is that when it finished playing one file, it would not load the next file. Part of the pain for us is that this is a pretty hard scenario to identify as it has these requirements for the bug to raise it’s ugly head:

1. It is related to network only. If the file was on disk already it would work every time.
2. It only happens when on battery. Plug the phone in or the emulator (which is always “plugged-in”) and it won’t show the issue.
3. The screen must be locked & off. Any interaction with the device causes the problem not to appear.
4. If it is playing a file, it will finish that file fine. The issue only happens when we skip to the next file
5. It will not raise any errors or exceptions – it just silently does not play the next file.
6. This is using background audio, so it is not that the app is being suspended.

We tried everything as a team and could not solve it, so we escalated to Windows phone support. This was the first time I dealt with premier Windows phone dev support, and while they cost a lot, they know their stuff and could help out to confirm out understanding and give us some ideas to work around the problem.

Root Cause

The cause is this: when the phone is on battery and there is no interaction, the phone lowers the signal strength of the antennas. This is to save battery, but it also means that your HTTP connections could be too slow to work properly and so the audio won’t play.

Workarounds

This does not seem to happen with the Windows Phone 8.0 Silverlight apps, which have a different way of handling background audio, however moving from Universal apps to that maybe too costly (it was for us). The other option is to use real streaming and it is less impacted by this and also you can do a lot of smart server side stuff to ensure it keeps running.

Future

This happened on Windows phone 8.1 and it looks like it still happens on Windows 10 for phone. The official response is “by design”, although I think it is more a unexpected side effect of a number of design decisions; but it could change. If you think it should change, please vote on the user voice item for this so that the product team can see enough people care about resolving it.

The developers I know who refer to themselves as “craftsman” will, at length, tell you how methodology, principals & practise are all that matters to becoming a successful developer – tools are not important. Often they say that from behind a Mac Book Air, running Visual Studio with Resharper or some other combination of best of breed tooling. None of them code in notepad oddly.

Everyone really does care about their tools and I am totally behind the idea that you are more than your tools, but good tools help which is why I want to share what is in my bag and why it is there.

Daily Driver

My daily development machine is a Lenovo Thinkpad T440s – it is the best machine I’ve ever worked on. Weight? It is basically air. It handles app & web dev with no issue. Has a backlit keyboard that is turned off 95% of the time but in those rare moments of darkness, I can turn it on with a keyboard combination. Great performance overall. The touchpad is the best I’ve ever seen, and considering I think touchpads are evil, that says a lot.

One thing that really stands out is the touch screen – I can’t imagine modern development being done without one. It is essential for testing on web & apps.

Why do I carry it?

Simple – it is what I use to do my job! and it gives me a place to put stickers.

Audio Out

I carry three sets of headphones with me. My primary ones are a set of super comfy large Steel Series ones. They have a built in mic, which is serviceable but since the laptop doesn’t have an audio in jack there isn’t much use. Thankfully the mic slides into the headphones so it is never in the way. When you have headphones on for hours, comfy wins for me and these are them.

I also carry a, company supplied, Jabra headset. This has a USB connection so the audio in works plus it is designed to work with Lync – so it has a bunch of cool tricks on the control dial. Not great for comfort or quality, but for a meeting where I want to keep my hands on the keyboard it is okay.

Last is my tiny Sennheisers – these don’t get used often as they are the backup. 

Both my sets have something to wrap the cables with – the big ones using the fantastic apple core which I got at JSinSA.

Why do I carry it?

You need to focus, and having music or podcasts will help. It also means less disturbance to your co-workers.

The issue with large headphones I use at home & work is I may leave them at home and then could be stuck with no audio the next day; so the small Sennheisers run as backup for me. This means they seldom leave the bag but having a small high quality backup has come in handy many times.

Audio In

I have a small Samson mic that connects via USB. The audio quality is okay. Considering it is a sub R900 ($90) mic it is pretty good for that price range and it is a million times better than the laptops built in offering. It has three nice features, first a clip/stand/base. In the picture it is standing on it’s base, which it can fold flat on to. It can also use the clip to attach to the top of the laptop screen as the mic is on a ball joint and swivel pretty much to any direction (check the link for it, they show off that really well). This stand gives it so much versatility.

Second is the switch on the side, which lets it switch from front facing only to a omni directional mic. The omni directional mic is great for the daily standups where the team & client may not be together, as it gets a lot more audio into the conversation.

Last is the cable, it is stupid long – we often pass it around during the stand ups & it handles the length of our boardroom table with ease.

Why do I carry it?

Meetings; be they a stand up or more formal meeting, having something to capture audio is an essential for a modern developer.

Storage

Nothing too fancy here. A large Seagate, mostly for backups. I also have a tiny plastic box which contains a LOT of USB sticks. Since I switched to carrying the USB sticks in a box, I lose less of them so now I have an issue of having too many… if that could ever happen.

Why do I carry it?

You will lose data. Have backups. Simple as that.

The USB sticks are great for sharing stuff & if they break or get lost there is no issue.

Mouse

I’ve written about my mouse before, (and it is the exact same mouse still - it is 6 years old now) and I stand by that – the Logitech Performance Mouse MX is the best mouse you can get & you owe it to your hands to be happy.

Why do I carry it?

Touch pad and touch screen do not beat the performance a real mouse will bring.

Bags

My laptop bag is a Targus (it isn’t exactly that bag, but it is close). The bag isn’t anything special but Targus as a company is. With my last Targus bag, the zip broke (from squeezing too much in) and all they wanted to ship me a new bag for free was a photo and the service tag removed. They believe their bags will last and they are prepared to back it up that belief. That one interaction has made me a very loyal customer.

I also have some smaller bags worth mentioning:

• First is a Targus hard drive bag, nice and padded. It fits the hard drive, its USB cable and my small headphones easily.
• Second is the hard shell case which the Samson mic came with. It is great but had no space for the cable (which is a stupid oversight). Thankfully my last Samson mic came with a bag, so the cable and mic/shell go in that bag now.
• Last is my, SUPER DIRTY, organiser. It has three pouches and lets me easily store my laptop charger and mouse in a easy to find bag (I can pull it out my laptop without looking). It also doubles as a handy mouse pad which is why it is so filthy.

Why do I carry it?

Ignoring the laptop bag & its obvious use. The hard drive bag & mic bag keeps the devices safe – especially since they are carried to and from the office daily & then on many trips. The organiser is just brilliant, I cannot imagine not having it. Being able to be setup quickly because I am not digging in my bag looking for my power cable is great.

Writing

To take notes, I use a Lego Moleskin – it is awesome, best paper I’ve ever seen. I carry a few pens with me & of course a few whiteboard markers.

Why do I carry it?

I take a lot of notes, every single meeting. I seldom read them. The reason to take them is two fold, first it helps me remember as I am combining listening & an action which helps my brain reinforce the ideas a lot better than merely listening (doing is better than consuming). Second it gives me confidence that, if something is forgotten, I can find it.

Always carry your own whiteboard markers, since meeting rooms are often missing them.

Odds and Ends

I carry a few odd things in the bag too. First is a couple of microfiber clothes and a deck of planning poker cards. I also carry a mifi device & a USB graphics card. The USB graphics card let’s me output to USB and has connectors for a few different types of screens. Lastly is some battery packs.

Why do I carry it?

The microfiber clothes is for one reason: Touch Screen.

The reason to carry planning poker cards is because we use them all the time in my teams. I have enough for 6 or 7 people with me so it handles a team well.

The mifi is legacy, before my phone had a wifi hotspot, the mifi it did that job. It is still useful to create a small wifi network for working with others if the main network fails.

The USB graphics card is to handle scenarios where projectors refuse to work with my laptop or if I need another output (for example, video recording on one, projector on the other output).

Battery packs because of Eskom.

Power strip

The best thing I’ve put in my bag in the last 12 months is a power strip.

Why do I carry it?

Plugs can often be at a premium and this covers me & two more people, plus it has space for two prong plugs like cellphone chargers. It also means that when I travel overseas, I buy one plug converter and then slap this into that and everything is so each to setup – no more plugging my cellphone into my laptop to charge. It is so useful, I wonder why I didn’t carry one before.

What’s Missing?

What is missing in my bag? At the moment I think there are a few items missing:

• Network cable: I think a good quality network cable is worth having. I am tired of either missing cables or cables where the clip is damaged.
• A stylus: Drawing is more important than ever for a developer, and I think some sort of good stylist would help improve it.

That is what is my bag? Is there anything you think I am missing? Let me know in the comments!

What’s New Roadshow

Starting next week the What’s New Roadshow (or as it is officially called, Dev Day) will be happening in Johannesburg (already sold out), Durban & Cape Town. This should be a great fun event, where we will be covering some interesting concepts in the land of .NET which don’t get enough time, for example Machine Learning. We will also be looking forward with VS 2015 and C# 6 coverage! I will be tackling the C# 6 content (which has already wowed the internal teams) & also covering DevOps. The events are free but you need to register so catering & seating can be taken care of!

Developer User Group

Also next week, is the monthly developer user group meeting, and it looks fantastic! Each month, on the second Tuesday of the month, the DevUG meets from 16h30 to 18h00 to learn & share. Next week we will have topics ranging from Flying Quadcopters with Node & learning Go!

Any events you attend or want me to share? Send them over in the comments!

Each month Xbox gifts their Xbox Live Gold members a number of free games. Something remember is that you get ALL the games, regardless of the console you own! That means, if you only have a Xbox 360 you still get the Xbox One game; so when you do get a Xbox One console you will have a LOT of free games already. To get your game, you need to go to the marketplace on the  Xbox website to “purchase” your free game.

That’s it! What is your favourite Xbox game? Let us know in the comments!

or how do I remove a file from Git, including the history. This came out of a discussion with some ALM Rangers (in fact the title was from Willy-Peter himself!) and I thought it is too good not to share. In addition I’ve added some other information I learnt since then!

Before you start

Make a copy of your git repo before you start! We are going to mess with your repo, so if you have a backup and something goes wrong you can just rollback.

Revert

If you have ever made a mistake on a computer, you know it the moment you finger lifts off the enter key. So you may just want to undo that last commit quickly and use the revert command in git, which appears to remove it, but the problem is that remains in the history. So this means that everyone needs to get it when the clone or pull the repo.

Amend

If the very last commit added the offending file and you NOT pushed your repo yet there is a simple process to solve it. First delete the file. Then run another commit with the --a and --amend switches. 

• --a  tells git to automatically stage all modified & delete files.
• --amend tells git to rewrite the last commit.
• if the only thing was that file, then you may need to add a --allow-empty switch to tell git to accept a commit with nothing in it.

For example, if I want to remove the password.txt file.

del password.txt

git commit --a --amend

Rebase

What if it isn’t the last commit, but a few back. Once again if you have not pushed your repo an option would be to rewrite history (you may want to look at that link, it goes in DEEP detail on what rewriting history means). Step one is to kick off a rebase and in the editor go to the commit with the issue and change it from a pick to an edit, for example:

git rebase -i origin/master 

(in the picture above, I am going to remove the file added in commit 47f73e6)

You will then be dropped back to the command prompt, and you can step through the commits you set to edit. You can make the changes (either edit the file or delete it) and then use the same amend as before. Once you have finished that you step the rebase forward by doing rebase --continue.

For example:

del password.txt

git commit --a --amend

git rebase --continue

Filter-Branch

What if you have pushed? Or perhaps you need something more? Git includes a solution for this, called filter-branch which was totally unknown to me before this discussion. Filter-branch is not only useful to remove files but you could also change the details of a number of commits (for example: updating your email associated with your commits).

Lets get rid of the file, for example password.txt

git filter-branch --tree-filter "rm -f password.txt" HEAD

Note – on Windows you will use double quotes (“) like above, but on Linux it would be a single quote (‘). Once done you need to push to git, but you will need to use --force and --all switches to do it.

git push --force --all

Your next issue is that all your team members still have the file (if they already have pulled), so they need to clean up to. The way they do this is to run rebase but using the onto switch this time. For example:

git rebase --onto origin/master master

Those members who haven’t pulled since that file got into the repo, can pull as normal and do not need to worry about this.

BFG

There is also a stand alone tool called BFG Repo Cleaner. There is a nice set of documentation for it and it is blindingly fast! One nice thing is you can say remove all files above a certain size or or x number of the largest files.

GC

One thing to do once you have done all of this, is run a garbage collection by using the gc command, which may return disk space from orphaned files. To do this run:

git gc – --auto

That’s it! Have you ever messed up a file (I have, I committed my Azure password once in a file!)? Share what happened and how you fixed it!

I am having a lot of fun with a new project, one where the customer said we had to do unit tests (how rare is that ). It is still VERY early days in the project so by the end maybe I will realise this is wrong but for now, but right I am pretty proud of one specific test. It is 50 lines of long (C# + XUnit) and 18 of those lines are asserts. If the normal practise of unit tests produces asteroids, then this is a planet sized unit test. When I wrote it, I immediately felt the weight of hundreds of purists telling me it is wrong or that it has too much complexity & will hurt me.

Is this the norm for the project?

No – it totally will not be. Most unit tests will be sub 10 lines and have one or two asserts. I believe planet sized unit tests will account for 5% of the tests at the end of the day.

You’re doing unit tests wrong!

No – there is some advice I am choosing to ignore, but really it is just advice. Why is that advice there in the first place? It is there because people with far more experience and knowledge have learnt that the larger a unit test becomes (for this just assume size = complexity), the more brittle it becomes and the more time will be spent trying to understand and maintain it. In short the value vs. risk equation breaks down (i.e. high value & low risk is awesome but low value & high risk is a bad idea). So here is the rub, for 5% of the tests we have a very high risk but they exercise the code in ways that provide a massive amount of value.

So what does it do?

I think calling this a unit test is wrong, I feel that even though it uses unit test tools & is part of the unit test project it really isn’t a unit test – it is more of a process test. We are testing how the user would run through a specific process from end to end. These process tests exercise the interactions between various pieces which a single unit test might not. I had thought to call these integration tests, but we aren’t integrating to any external systems – everything is still mocked out and injected in. Another way to look at this, and in fact this is how we structured it, it is multiple unit tests (each with a arrange, act, assert pattern in them) chained together.

I have used these in previous projects and the value of them is stupidly massive. The often find issues long before a unit test will because so much is coupled together, you could say that the increase in complexity actually increases their value.

Why so many asserts?

How I figure out who to assert is simple, I follow the advice: Assert all your assumptions. For unit tests since they are simple, the assumptions can be simple. For a process test, since it is complex you should have more assumptions during each part of it. 

This is what I am doing, have you ever tried a planet size test or a process test? What did you find in it?

The first sign of a problem was when the app crashed while I was testing a new feature I put in. The error in VS indicated a XAML issue which was odd, since I wasn’t working with XAML at that point. I restarted the app and no error occurred. “Meh, what ever” was my response. The second sign of a problem was when another developer on the team, a week later told me about the issue. My response – shrugged it off and told him to restart. The third sign was when the testers logged a bug about it – finally someone was making this a real issue. You may hear that a developer & tester are better than two developers – this is a great example of why: two different perspectives of what really is an issue does really help.

The app we were building was a Windows Store App for Windows 8.1 using XAML & C#. It was being built using the Universal App Framework. It was also big for an app with over 40 screens! The XAML for our custom controls & styles is over 2 000 lines of XAML!  The bug could be anywhere, but it had four traits:

1. The error which told us it was a XAML issue & related to a ContentPresenter: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentPresenter.Content'
2. It only happens when we navigate between pages.
3. It was not limited to any one page. It could happen on any page.
4. It is intermittent – very intermittent. Make you scream levels of intermittent. I’ll introduce you to Heather later, but she told us that it was 1 in 40 times on average it would happen!

So how did we fix this? This is a story of the dumb things I did followed by the smart thing I did.

Starting to understand the problem

Step one, we know it is XAML & it is on every page – so what is common on all pages? First is our styles.xaml where we store all the common colours & styles for the app. Second is a custom control we built, called PageLayout, which gives us a common layout and pieces of functionality (basically it is similar to the Frame control). If you are interested the XAML for that control is here. The key thing which suggested the XAML control was the cause was it has FOUR content presenters on it and the error suggested a content presenter was at fault. I reviewed the XAML & so did another dev – no problems found. 

One thing happened, when we tweaked the XAML for PageLayout the line numbers in the error changed. So we knew the problem was there – but what was it?!

Windows Debugging

We were running the app outside of Visual Studio one day and it crashed. You know what is awesome in Windows? It will grab a memory dump for scenarios like this – so we got a memory dump of the error! This is awesome because we can use Visual Studio to work with those and there is a fantastic blog post on exactly how to work with it. You know what two hours of doing that told me… nothing. Come on, what is all that text below if we had the answer now. Keep up reader. All I could get was the following error message: Unhandled exception at 0x7582B152 (combase.dll) in triagedump.dmp: 0xC000027B: An application-internal exception has occurred (parameters: 0x055C31F8, 0x00000004).

I also got stuck since I didn’t have the Debugging Tools for Windows and over a gig of download wasn’t going to happen at work, but that may have been a blessing in disguise. Through this though, I did find this great Wintellect Now video on how to debug on a OS level.

The birth of Heather

So after spending hours of repeating the process of making a small change and then clicking through various screens over & over again (and thus making sure carpel tunnel syndrome was coming) – I wondered, can’t I automate the clicking. Actually I don’t need clicks, I just need navigations to a different page. So I created a new universal app, with a single page in it. I then copied PageLayout and everything it needed over – totalling 300 lines of XAML! I added a single button which automatically navigates to the mainpage over and over again. You can see this code base here.

This app is called Heather Speed Crash! and boy did it deliver, it could crash every time! It was still intermittent but it meant I could get it happen in < 60s with one click rather than > 20 clicks & 5 minutes. This helped a lot in getting work done. It also meant that the code base was less than 500 lines of code + XAML compared to the actual app of thousands of lines of code.

Now to iterate over Heather and clean it down and still get the errors which led to this version, which got us down to less than half the code + XAML & it also showed the exact issue was in the PageLayout. Not something which PageLayout used. This is one of the biggest learning's from this, intermittent issues aren’t some pain to resolve, the trick is just to make the scenario happen faster.

Two lines of XAML

Somewhere between starting to understand the problem & diving into Windows Debugging, I realised that I was struggling with the problem and I decided to post the issue to StackOverflow and then, a few days later, to MSDN forums. This is always a valuable exercise for me as it forces me to put down in a systematic way and often just the act of collecting, ordering and writing down the information shows me what the problem is. This time, writing didn’t help and after a few days I had no progress with it. On the MSDN forums, it was suggested that I try identify which of the four content presenters was the problem. Now that I had Heather to help, I could do this. The process I went through was:

• Comment all four ContentPresenters out – run – it works! This is great because we know it is one for four lines of XAML!
• Comment each one in individually and test. Of the four, only two crashed! So we are down to two lines of XAML!

These two content presenters were not used on ever page, so their binding to content was set to null by default. This was the only difference between these two & the other two. So I gave each a default piece of content and the problem stopped. Oddly, if I gave just one a default piece of content and left the other presenter null, it would also be resolved.

The issue turned out to be a layout bug somewhere deep in XAML which is triggered only when two content presenters both exist on a page with null content. When XAML tries to work out the sizes of the controls, having two nulled content presenters causes a crash.

The work around to resolve this was to have both content presenters visibility set to collapsed by default & only make them visible if they have content.

tl;dr: Some one was dumb & used a good idea to excuse being lazy. It gave me an idea. I created a micro site to share simple rules for better email!

Sentenc.es is a novel idea to have more meaningful email communication by applying a discipline to how you respond. The suggestion it offers, is to limit your responses to  certain number of sentences or less. They have pages for two, three, four and five sentence lengths.

Picture from Intersection Consulting

I am all for ideas to improve email – I GET A LOT OF IT, sometimes it feels like I am drowning in it. I use unroll.me and a million filters in my email client to try and cope. I also love the idea senten.ce offers of being disciplined to responding, but there is a problem.

The problem is people (when isn’t it). This was highlighted for me recently when I questioned someone on why their emails were short, rude & insulting. Their answer “You misunderstood my tone”. When pushed further it turns out the reason he couldn’t craft his emails to get the tone right, was because he blindly followed the three sentences rule.

Picture from darkuncle

The mistake made here, which is made not only with this idea but with many, is to be too focused on being disciplined that you lose sight of the bigger picture. Another place I’ve seen this is with scrum, where they “do it by the book” even when they are hurting because of it. Agile is helping with scrum, but what can we do for the “senten.ce sheep”?

The solution!

I decided to make a micro site called Rules for better mail, which like senten.ce, has what I think are better rules. Share it, put it at the bottom of your emails, ignore it, contribute to it or what ever you feel like, I am not your mom – you don’t need to listen to me.

Visual Studio has an embedded browser, but it uses the IE 7 render path?! Really, that is pretty messed up.

and worse it can cause the Internet to break

Thankfully, you can fix this yourself with a quick registry addition. Note: Fiddling with the registry can break your device, so be careful and this carries the usual “this works on my machine” and it is your own risk for doing this.

The key you need to care about is:

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Note: the Wow6432Node bit is needed since Visual Studio is a 32bit process. In there, add a new registry key of DWORD type named: devenv.exe

I set the value to (HEX) 2af9 – since I have IE 11 on my Windows 8.1 machine, but you can pick from the list of options to best suit your needs and now it just works!

No issues on GitHub

A much better looking user agent.