Dev Stories: Post Listing
Dev Stories are a collection of posts which are based on my personal learning. This page is used for two reasons; first it gives a nice easy way for you to move through the various posts & second it shows you (and reminds me) of what is coming up.
- What education have I needed?
- What language should we teach?
- Zealots
- It is always hammer time
- What is successful code
(anything not linked means the idea for the story exists but isn’t up yet… so subscribe to the feed to get it as soon as it comes out)
Joining the AppFactory
I am very proud to do a short announcement that I have moved to join Microsoft, and specifically the AppFactory. The AppFactory is a group of people, mostly consisting of interns who are gaining real world experience in software development. So what is this real world development focused on? Locally relevant apps which give all users a rich and meaningful experience on Windows 8.1 and Windows Phone.
I am joining as a senior developer with my focus on both development, but also skilling up of those involved!
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!