Lance Larsen - .NET Architect Madison Wisconsin

All posts in JavaScript

Needed to add MP4 video support to an ASP.NET website project. 

Found that adding the following made that work great when I deployed to Azure.

<!-- ====================================================================== -->
<!-- Required to have Videos show up when deployed to Azure  -->
<!-- ====================================================================== -->
<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
</staticContent>

Alas, when I refreshed the cache on my browser – all of my CSS and Javascript files would not load, with the dreaded 500 errors.

So apparently, as soon as you add any <staticContent> settings – you need to add all possible settings.  Counter intuitive, so wanted to share the a comprehensive non-trivial fix that worked for me.

If there’s a better way to do this – love to hear it…  Also may be a better way to do this in ASP.NET Core – but for now this is a pre-Core project.

Here’s the solution, hope it helps someone else.  Good coding :)

<!-- ====================================================================== -->
<!-- Required to have Videos show up when deployed to Azure  -->
<!-- ====================================================================== -->
<staticContent>
  <!-- Set expire headers to 30 days for static content-->
  <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00"/>
  <!-- use utf-8 encoding for anything served text/plain or text/html -->
  <remove fileExtension=".css" />
  <mimeMap fileExtension=".css" mimeType="text/css; charset=UTF-8" />
  <remove fileExtension=".js" />
  <mimeMap fileExtension=".js" mimeType="text/javascript; charset=UTF-8" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
  <remove fileExtension=".rss" />
  <mimeMap fileExtension=".rss" mimeType="application/rss+xml; charset=UTF-8" />
  <remove fileExtension=".html" />
  <mimeMap fileExtension=".html" mimeType="text/html; charset=UTF-8" />
  <remove fileExtension=".xml" />
  <mimeMap fileExtension=".xml" mimeType="application/xml; charset=UTF-8" />
  <!-- HTML5 Audio/Video mime types-->
  <remove fileExtension=".mp3" />
  <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
  <remove fileExtension=".mp4" />
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <remove fileExtension=".ogg" />
  <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
  <remove fileExtension=".ogv" />
  <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
  <remove fileExtension=".webm" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
  <!-- Proper svg serving. Required for svg webfonts on iPad -->
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
  <remove fileExtension=".svgz" />
  <mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
  <!-- HTML4 Web font mime types -->
  <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <remove fileExtension=".otf" />
  <mimeMap fileExtension=".otf" mimeType="font/otf" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".crx" />
  <mimeMap fileExtension=".crx" mimeType="application/x-chrome-extension" />
  <remove fileExtension=".xpi" />
  <mimeMap fileExtension=".xpi" mimeType="application/x-xpinstall" />
  <remove fileExtension=".safariextz" />
  <mimeMap fileExtension=".safariextz" mimeType="application/octet-stream" />
  <!-- Flash Video mime types-->
  <remove fileExtension=".flv" />
  <mimeMap fileExtension=".flv" mimeType="video/x-flv" />
  <remove fileExtension=".f4v" />
  <mimeMap fileExtension=".f4v" mimeType="video/mp4" />
</staticContent>

imageHad the need to create a nice UX (user experience) by moving a boostrap “div” up and down within a bootstrap “row” collection on a website.

Always love sharing some elegant code, so check out this jsFiddle to see it working…

https://jsfiddle.net/lancelarsen/814rteua/

https://jsfiddle.net/lancelarsen/w4fob4pv/ (variant for nested bootstrap divs)

Read more


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;
});

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


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