Lance Larsen - .NET Architect Madison Wisconsin

Surface Pro 3

Firstly, love my new Surface Pro 3 – finally the tablet PC I’ve been waiting for!  Have all of my development tools; Visual Studio 2013, SQL 2014, etc loaded up and running very quickly.

As a developer in Visual Studio however I need to use the function keys more than using the shortcuts across the top of the keyboard – and didn’t want to always have to press “Fn” + “F5” – so looked for a solution and found one and wanted to share…

Function Key Lock Tip: Press “Fn” + “Caps” and now all the Fn keys work without having to hold down the “Fn” key! w00t

imageLove sharing little gems of knowledge – this is a good one for anyone using Entity Framework 5 and the new’ish enumerations (emums) inclusion in EF5. 

So working on a MVC5 Code First application for a project of my own – and had the following Model.

namespace GeoBucketlist.Model
{
    public enum TagType { Location, Bucketlist, Member }

    public class Tag : Base.Model
    {
        public long Id { get; set; }
        [Required]
        [StringLength(25, ErrorMessageResourceType = typeof(ResourceMessages), ErrorMessageResourceName = "LengthMax25")]
        public string Name { get; set; }        
        public string Description { get; set; }
        public TagType TagType { get; set; }
    }
}

When you auto-create the View templates for editing / adding that model in MVC through T4 templates – the html is as follows follows…

<div class="form-group">
    @Html.LabelFor(model => model.TagType, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.TagType)
        @Html.ValidationMessageFor(model => model.TagType)
    </div>
</div>

imageWhich then shows up in your pages as a plain textbox – not a good solution for choosing an enumeration value… :(

So simple but elegant solution is to change that line to the following… (Note, would be lovely if this was the default behavior for the @Html.EditorFor – but alas that is a blog article (and more work) for another day – but if anyone else has that complete, always loved to see great code!)

<div class="form-group">
    @Html.LabelFor(model => model.TagType, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.TagType, new SelectList(Enum.GetValues(typeof(GeoBucketlist.Model.TagType))))
        @Html.ValidationMessageFor(model => model.TagType)
    </div>
</div>

Good coding!

//L2

So AngularJs is pretty sweet – especially considering the power and elegance of how you can use “filters” to change the way values appear in the UI.  There is a built in “number” filter that you can apply to a number value and have it always display a set number of decimal places, i.e. “1″ -> “1.0″  But, we wanted a filter that did the following…

“1.56″ => “1.6″
“1.5″ => “1.5″
“1.0″ => “1″
“1″ => “1″

So I wrote a simple custom filter, setDecmial! 

As I love jsFiddle – here’s the live working version: http://jsfiddle.net/lancelarsen/Tx7Ty/

If anyone has suggestions for further improvements, always love to keep making the code better. :) 

<div ng-app="myApp">
    <div ng-controller="Ctrl">
        setDecimal Filter (1): <span>{{val | setDecimal:1}}</span><br>
        setDecimal Filter (2): <span>{{val | setDecimal:2}}</span><br>
    </div>
</div>

var app = angular.module('myApp', []);

app.filter('setDecimal', function ($filter) {
    return function (input, places) {
        if (isNaN(input)) return input;
        // If we want 1 decimal place, we want to mult/div by 10
        // If we want 2 decimal places, we want to mult/div by 100, etc
        // So use the following to create that factor
        var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
        return Math.round(input * factor) / factor;
    };
});

app.controller('Ctrl', function ($scope) {
    $scope.val = 1.56;
});

Event

Dates

Location

Chicago Code Camp

April 26

Grayslake, IL

Kalamazoo X

April 26

Kalamazoo, MI

Azure Developer Camp

April 30

Chicago, IL

ALM Chicago

May 1

Chicago, IL

Virtual Hackathon

May 1- June 5    

Chicago and online

VSLive

May 5-8

Chicago, IL

Code For Rockford Brigade Kickoff

May 10

Rockford, IL

//PUBLISH Hackathon

May 16-17

Chicago, IL

//PUBLISH Hackathon – Milwaukee     

May 16

Milwaukee, WI

SharePoint Saturday

May 17

Addison, IL

GoTo Conference – Chicago

May 20-23

Chicago, IL

Codestock

July 11-12

Knoxville, TN

Iowa Code Camp

July 19

Des Moines, IA

That Conference

August 11-13

Wisconsin Dells, WI

Madison Ruby

August 21

Madison, Wi

Devlink

August 27-29

Chattanooga, TN

Chippewa Valley Code Camp

Fall

Thanks to David Giard {djgiard@hotmail.com} for compiling these!

imageLittle things make me happy…

Easy way to get the RGB value for images / web pages

Check out ColorZilla plugin for Chrome.

imageAt the February 2014 MADdotNET (@maddotnet) meeting – had David Manske (@davidemanske) from Centare out to talk on what’s new in Visual Studio 2013!  Couple absolute gems of knowledge were passed on – one of them was “SideWaffle Templates for Visual Studio” – I had never seen this – so figure some others may not have seen this either!

Specifically liked seeing the AngularJS templates… Check them out!

Always loved JavaScript and client side scripting ( where appropriate <grin> ) – so when we had a new green field project to start, looked to what the best-in-class technologies were – settled on AngularJS (@angularjs). 

It is a client-side MVC (Model-View-Controller) pattern and it rocks for making SPA (Single-Page-Applications) that emphasize responsiveness.  Take a look at either the AngularJS site, or there are a couple great AngularJS videos on Pluralsight – specifically “AngularJS Fundamentals” and “AngularJS for .NET Developers”.

I know that I have a ton to learn about AngularJS – and wanted to share what I’m learning along the way…

Specifically, have a page that has a list of items to be displayed – and want to filter them by a parameter based on what the user clicked.  So in AngularJS we can separate showing the items to be displayed into one controller – the “CollectionController” – and the filters to be applied into another controller – the “FilterController”.  Found many examples / discussion on how to communicate between the controller, but some seemed to be way overkill or confusing – so got the following code crafted – and wanted to share as it turned out pretty slick! :)

To boot, have the live code running on JSFiddle – which again, if you haven’t played with is WAY awesome!

http://jsfiddle.net/lancelarsen/qjkyM/

Read more

mysqlAs a primarily Microsoft SQL Server developer, when playing around with MySQL database ( specifically using MySQL Workbench ) wanted to be able to press F5 to execute the SQL commands that I was writing, by default you need to press Control-Enter or Control-Shift-Enter – but there is no GUI interface to remap keys shortcuts like there is in most Microsoft programs… so… found that the following worked and wanted to share!

Locate your “main_menu.xml” MySQL configuration file – mine was in “C:\Program Files (x86)\MySQL\MySQL Workbench CE 6.0.6\data\main_menu.xml”.  Find the following XML.
 

   1:  <value type="object" struct-name="app.MenuItem" id="com.mysql.wb.menu.query.execute_current_statementwin"> 
   2:    <link type="object" key="owner" struct-name="app.MenuItem">com.mysql.wb.menu.query</link> 
   3:    <value type="string" key="caption">Execute Current Statement</value> 
   4:    <value type="string" key="name">query.execute_current_statement</value> 
   5:    <value type="string" key="command">builtin:query.execute_current_statement</value> 
   6:    <value type="string" key="itemType">action</value> 
   7:    <value type="string" key="shortcut">Modifier+Return</value>
   8:    <value type="string" key="platform">windows</value>
   9:  </value> 

Replace the “shortcut” xml (line 7 above) with the following, exit and reopen MySQL Workbench – and you’re rocking with F5!

<value type="string" key="shortcut">F5</value>

imageYou should almost always store your date/times in your database as UTC – you may think it’s not important now, but as soon as your application needs to display times to users in different time zones ( to paraphrase Yoda ) …it will be, it will be… 

But do you need to know and store your user’s timezone to display it correctly? 

Nope, JavaScript and momentjs to the rescue…! :)

Read more

large_jquery_logoIn my blog “NuGet – Limiting updates for jQuery and Bootstrap” – we looked at continuing to utilize NuGet to keep us up to date on the latest jQuery 1.x version ( even though 2.x is out ).  Reason being that we needed to stick with 1.x because we are still supporting IE 7/8. :(

So… jQuery 1.x and 2.x have feature parity – but you want to use jQuery 2.x when you can, simply because it’s a smaller download as they were able to take out a lot of IE7/8 “fixes”.  Note, jQuery’s post on conditionally include one or the other based on the version of the browser.

But we also like to use the cool MVC bundling and minification feature – can we have the best of all worlds? Oh ya… :)

Read more