Browser Link + LESS? Does it work?
(You can grab the code for this from: https://github.com/rmaclean/BrowserLinkAndLESSDemo)
At TechDays in Johannesburg, I showed a lot of cool stuff, but this post is about two specific pieces of awesome technology – Browser Link & LESS. In my talk (you can watch a video of it here) I showed off how you use Browser Link with Web Essentials it can detect unused CSS. A rather sharp attendee came up to me afterwards and asked me, what happens with LESS? Does it do the same thing?
I went back and experimented with it – first was to setup some CSS that wasn’t used and test. Everything works as expected.
Step two, was to use LESS directly, so I setup the HTML with
- I used Nuget to pull down LESS.js
- I put in the the link to the LESS file
<head runat="server">
<title></title>
<link rel="stylesheet/less" type="text/css" href="/Content/Awesome.less" />
<script src="Scripts/less-1.4.2.min.js"></script>
</head>
Next step was to configure IIS Express, using the web.config, to serve the LESS file. To do that I added the following to the web.config file:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
</system.webServer>
and I ran the app again. You know what happened? It all just worked – Browser Link’s CSS logic detected the unused class in the LESS file, and when I clicked it – it took me directly to the class in the LESS file 
Missed TechDays? Check out my LightSwitch talk on YouTube!
I you couldn’t make TechDays in Johannesburg or Cape Town (or maybe you did & went to Dave Russell’s awesome MVVM talk which was at the same time as my LightSwitch talk) then you can watch a recording of my LightSwitch talk I did recently.
If you want to get the slides, the completed demo or the script, you can find all of that in my earlier post.
Missed TechDays: ASP.NET
Did you miss the awesome TechDays events in Johannesburg and Durban? Fear not – I recorded my ASP.NET talk for you! This is no way as good as being there as the excitement and energy from the event help a lot, but this is still a great talk to watch!
All the slides, assets, demo bits etc.... can be download in this post.
TechDays 2013: LightSwitch
I had an awesome time recently at the Microsoft TechDays events in both Johannesburg and Cape Town where I presented on Visual Studio LightSwitch and ASP.NET! Below you can find the slides (SlideShare does a poor job with them, but if you go to the website you can download the original PowerPoint!), the demo script, the completed demo and the assets used in the demos!
TechDays 2013: ASP.NET
Missed the event? Watch the YouTube video!
In both Johannesburg and Cape Town with the awesome Microsoft TechDays events! I was lucky enough to present on two talks: LightSwitch and ASP.NET. Below you can find the slides for ASP.NET (SlideShare does a poor job with them, but if you go to the website you can download the original PowerPoint!) - See more at: http://www.sadev.co.za/content/techdays-2013-lightswitch#sthash.zYVT7SR…, the completed demos, my demo script and the assets I used!
The final part of this ASP.NET talk was a streamlined version of my Visual Studio is awesome talk I did at JSinSA – I recommend looking at that for even more awesomeness (I have even more cool demos in that).
Visual Studio 2013 - WHERE IS MY PRESENTON?!
Update: The pro power tools for 2013, which includes PresentOn is now out!
A mere seven months ago, I wrote about an awesome trick in Visual Studio 2012: PRESENTON. This trick optimises a bunch of fonts really quickly to look good on stage – not just the text editor but the IDE too!
However this relied on the Pro Power Tools extension which doesn’t exist for Visual Studio 2013 yet. So how can you achieve the same results? With just some manual settings in the IDE.
Backup
Before you start, make a backup of your current settings by going to the Tools menu, then Import & Export Settings. In the next dialog, all you need to export is the Fonts and Colors options (see image below). This will ensure that after your presentation, you can roll back to your normal experience. It is also a good idea to do this again after you are setup for your talk, so that next time you can just import it in minutes & be ready (in fact I did that & you can grab my one below).
Changing the settings
Step one, get to the font settings – which is REALLY easy. Hit Ctrl+Q, which takes you to the Quick Launch & type in font.
Now you are in the font dialog and you can change all the settings in here. The key ones I find are listed below.
- Text Editor : Naturally, this is the text that appears on the screen!
- Environment Font : This badly titled item is for the IDE, all menus and text rendered in the IDE that is readonly is affected. This really makes your IDE much easier to see.
- Code Lens : For VS 2013 Ultimate*
- Statement Completion : This is intellisense – since I use it a lot, I find it helps the audience see better what I am doing
- Editor Tooltip : If you are showing off the editor which may include tooltips you can make them larger**.
- Package Manager Console : If you are demo’ing Nuget and/or Entity Framework Migrations this is very useful to increase**.
- Output Window : Always something worth having large because compilation is a big part of any talk.
- Locals Window : Another one that is good for IDE demos or demo’s where you are doing demo’s focused on debugging**.
- JavaScript Console : Lastly for the JS demos, a must have. **
Font Choice
Something to think about when doing this, is what should this look like. For almost a decade, I’ve followed the advice from Don Box on what goes into a great technical presentation which is min font size of 14 point (I use 16pt). While I think he was spot on with font choice, now days I use a different font called DejaVu Sans Mono which I think looks amazing.
My Presenter Settings
Since I did this for the recent TechDays, you may want to use my presenter settings file so you can grab it below!
* If you want Code Lens for versions of VS other than ultimate, go and make your voice heard: https://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/4150271-make-codelens-available-outside-of-ultimate
** This setting is not included in my presenter settings which you can download below.
Updating an update panel from JavaScript
At TechDays in Cape Town, I was asked an interesting question: how do you force an update panel to update from JavaScript? The asker was using SignalR to do the trigger but really, that isn’t important – JavaScript is just JavaScript.
You can grab the completed example at: https://github.com/rmaclean/UpdatePanelExample
Code Behind
So the first part is the code behind – I am using a static integer to just have something to update, so every time we update the text it is different. The only interesting thing to remember here that the update panel causes a partial postback so you can’t use the page load event isn’t useful here. In the example I used the update panel’s onload event to update the text.
public partial class _default : System.Web.UI.Page
{
string thingyText = "loaded";
static int counter = 0;
protected void updatePanel_Load(object sender, EventArgs e)
{
counter++;
thing.Text = thingyText + counter.ToString();
}
}
Update Panel Config
A minor point, is that since we will be calling the update panel from JavaScript we need to give it an ID. In addition we can use the ClientIDMode property, which was introduced in .NET 4, to set it to static so we can easily find it in JavaScript.
<asp:UpdatePanel ID="updatePanel" OnLoad="updatePanel_Load" ClientIDMode="Static" runat="server">
<ContentTemplate>
<asp:Label Text="nothing" ID="thing" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
JavaScript
Finally we have the JavaScript. For this example we are using setInterval to do the call every 500ms. The code to update is just the __doPostBack function and we pass the ID of our update panel to it. That will cause the update panel to do its thing 
<script>
function boop(){
__doPostBack('updatePanel', '');
}
$(function () {
setInterval(boop, 500);
});
</script>
Finally, if you are using .NET 2 or .NET 4 then you could run into a bug with the __doPostBack – thankfully this is fixed & you can read about the issue & get the fixes from Scott Hanselmans post on the issue.
ALM Readiness Treasure Map v2.1 - Show what we have done
I recently had the fun of recording another video for the AL M Rangers treasure map project, this time showing all the work I did for the 2.1 release. You can view it below
Hopefully you like it! Part of this video is a serious attempt at trying to find out how to build great coding videos. When I compare to “let’s plays” on YouTube the issue with coding is it is primarily a thought exercise. So the idea of just record the coding and talk about it later is a way to solve that. The pop-ups & music are all to enhance the video. If you have any other ideas or comments on this, please let me know. I would love to hear them!
Amazing Lock Screen: release 14
Last night I shipped the latest version of the very popular (4 stars from 800 ratings, just under 70k downloads) Amazing Lock Screen which brings in some new features.
Visual Improvements
First off it is for Windows 8.1 only – so get that upgrade going! Next is there are some UI tweaks in it, nothing too major around that either, but I think it is still visually interesting.
The most obvious visual improvement is around the tiles. We now have wide tile support (in addition to the square) and it is a live tile, which shows the last 5 days worth of images!
Image Handling
However that is not the major reason for this release, the major new features are a bunch of settings. The default, and the way we have always done it, is to have the app download the image to a temp folder & then set the lock screen. For release 14, we have made each one of those steps a setting, so
- You can control if it downloads automatically now
- You can control if it sets the lock screen automatically
- You can control the location (temp or pictures library)
So what does this allow you to do? To the right is my settings, where I have it download automatically, download to the pictures library & do not update the lock screen.
Using this combination I can add the folder under pictures to the normal lock screen settings and set it to be a slide show (see settings below).
Since Windows is checking a folder for images and the app is not setting the image, it allows for amazing lock screens which are built from MULTIPLE pictures from Bing! It looks amazing!
(shitty camera phone)
The second trick is because we no longer use temp, I can also use the Bing images for my desktop wallpaper by setting the wallpapers to point to the Amazing Lock Screen folder.
I hope you enjoy using this release and please send feedback!
Rangers Treasure Map v2.1: Snap re-invented
As part of my work on the Microsoft ALM Rangers Treasure Map, I want to share about how we changed snap for the 2.1 release.
Why?
The first question, is why do we need to change snap for 2.1? The requirement is that 2.1 is primarily focused on supporting Windows 8.1 & Windows 8.1 does snap a little differently to how Windows 8 handled snap. In short, in Windows 8 you had snap (fixed width), a full screen and third “middle” state – however Windows 8.1, has full screen and then any value between that down to a minimum width.
Microsoft has written a great document covering what is new at: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx
Planning
Step one in doing this was to investigate what we had – so I just took the app and ran it on Windows 8.1 and played with the new snap experience. From that I took screenshots, made annotations etc… for us to decide on an approach. You can see these images along the side/bottom of this post.
Decisions
Since this is a minor release for us, the decision to not invest too much into this release was made. So we decided not to try and build something brand new but rather make sure everything works as it does currently.
To this we chose a minimum of 320 pixels (the default in 8.1 is 500) since that matched what we had in Windows 8.
Code
One of the choices we made in version 1, was to NOT use the out of the box state manager way to change the UI. You can find out more about how we implemented that in a video I did for Channel 9
:
So what did the code changes look like for with our model? In the image below you can see that rather than ask what state we are in (line 142 on the left) we rather just check the screen width and based on that we load the correct namespace.
This tiny change was all that was needed, and this was made successful because we decoupled the views from the start rather than trying to have one view that does everything using the visual state manager.
