Tom DuPont .NET

Come to find out, I am a very retro guy when it comes to music. I have these old things that I like to use to play music, you may not have heard of them, they are called MP3s. They are kind of like 8-track tapes, but digital, not in the cloud, and not old enough to be cool yet.

How do you play MP3s via Chromecast?

The official answer is to use Google Play, but that implies that you want to both pay for that service and upload your files to the cloud. The unofficial answer is to drag and drop your MP3s into a Chrome tab and cast that tab, however this does not allow you to create a playlist.

Introducing Playlist for Chromecast

I have created a simple single page HTML 5 application that will act as a playlist for MP3s on your computer. Just download the project and open up release/playlist.html in Chrome, then drag and drop MP3s on to the page.

Development

I had a lot of fun making this, and I'm not done. I intend to use this project as a case study to talk about VSCode, TypeScript, SASS, HTML5 Audio, NPM, and unit testing. For now, I just wanted to start by getting this initial post up, but expect more to follow.

• Source on GitHub

What's next?

• Update project documentation.
• Create unit tests.
• Add theme support.
• Write blog posts about development.
• Maybe host it on a domain.
• Maybe submit it as a Chrome application.

Enjoy,
Tom

I have talked before about BundleTransformer, and how you can use it to compile your LESS on a per request basis. Did you know that it supports TypeScript too?

BundleTransformer is an add on for Microsoft's System.Web.Optimization frame work bundling and minification of web resources. It allows you to convert your compiled languages on the server on request instead of need to create and maintain complied versions of resource files. Best of all BundleTransformer uses a JavaScript engine to compile LESS and TypeScript in with native compiler, ensuring that you will never lag behind the latest version.

Required NuGet Packages

The BundleTransfomer will bring in System.Web.Optimization, but then you need to specify a JavaScriptEngineSwitcher for the framework to run on, as well as a minifier to use on the final scripts when in release.

• BundleTransformer.TypeScript
• JavaScriptEngineSwitcher.Msie (or the Engine of your choice)
• BundleTransformer.MicrosoftAjax (or the minifier of your choice)

After including these packages you need only make three more updates...

The strongly typed nature of TypeScript offers the potential for amazing IntelliSense!

Open Source TypeScript Definitions

Some people do not realize that there is already a vast library of community authored definition files for just about every JavaScript framework out there. By including these definition files in your project, you can unlock the full potential TypeScript's IntelliSense.

The Original DefinitelyTyped Repository on GitHub

TypeScript Definitions on NuGet

The best thing about the open source community: whenever someone has a great idea, other people gladly line up to help improve it. To that end people have forked Boris's DefinitelyTyped, created NuGet packages, and automated their deployment!

DefinitelyTyped NuGet Repository on GitHub
jquery.TypeScript.DefinitelyTyped on NuGet

jQuery Example

If you want to use jQuery, just install the jquery.TypeScript.DefinitelyTyped NuGet package...

Last week I wrote about making your TypeScript files compile on save by updating your project files. It is an easy update to make, but then what happens when you check into source control? You are probably going to get an error because your build server can not resolve Microsoft.TypeScript.targets

Two ways to make TypeScript compile on your build server

1. You can install TypeScript on your build server.

The big problem with this solution is that it means you have to install a specific version of TypeScript on your build server, and thus make all of your project depend on that single version.

2. You can check the TypeScript compiler into Source Control.

This may seem like an odd solution, but for right now I feel that it is the best way to go. It allows all of your projects to be independent of each other, and you do not need to install anything new on any of your servers. (This solution has been proposed to the TypeScript team; thanks, josundt!)

How to Add TypeScript to Source Control

This may look like a lot of steps, but do not worry! All of these steps are small, simple, and they will only take you a minute or two. :)

1. Create a TypeScript folder in the root of your solution folder.
2. Create a SDKs folder inside of the TypeScript folder.
3. Create a MSBuild folder inside of the TypeScript folder.
4. Copy the contents of your TypeScript SDKs install (where the TypeScript compiler, tsc.exe, is located) to the TypeScript\SDKs folder that you have created.
   • By default, that will be located at:
     C:\Program Files (x86)\Microsoft SDKs\TypeScript
5. Copy the contents of your TypeScript MSBuild folder (where your TypeScript target files are located) to the TypeScript\MSBuild folder that you have created.
   • By default, for Visual Studio 2012, that will be located at:
     C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\TypeScript
6. Edit TypeScripts\MSBuild\Microsoft.TypeScript.targets to make the TscToolPath point to your local SDKs folder.
   • The original path would be:
     <TscToolPath Condition="'$(TscToolPath)' == ''">$(MSBuildProgramFiles32)\Microsoft SDKs\TypeScript</TscToolPath>
   • The new path should be:
     <TscToolPath Condition="'$(TscToolPath)' == ''">..\TypeScript\SDKs</TscToolPath>
7. Open your project file for editing.
8. Update your TypeScript project import to follow a relative path to the local folder.
   • The original path would be:
     <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />
   • The new path should be:
     <Import Project="..\TypeScript\MSBuild\Microsoft.TypeScript.targets" />
9. You're done! Reload your project and test it out; if that works, check it in.

Enjoy,
Tom

Here are several tips to get you started using TypeScript (currently on 0.9.1.1) today!

Compile on Save

For fast development you MUST compile your TypeScript files on save. While this is not built into the current pre 1.0 release of TypeScript, it is still very easy to enable. There is a very simple article on CodePlex that provides you the exact XML configuration to add to your Project file to compile on save.

Compile-On-Save

Here are some the simple steps to compile on save:

1. Right click on your project in Solution Explorer and unload it.
2. Rick click on your project file and open it for editing.
3. Copy and paste the PropertyGroup and Import nodes from the link above.
4. Save and close the project file.
5. Right click and reload the project in solution explorer.
6. Open the TypeScript Options
   • Tools -> Options -> Text Editor -> TypeScript -> Project -> General
7. Check "Automatically compile TYpeScript files which are part of a project"
8. Close the options menu, you are almost done!
9. Open your TypeScript (.ts) file and save it...boom, it compiled on save. :)

Make Generated Files Dependent

Whenever you compile a TypeScript file it will generate a JavaScript file for you. However, as of .9, that JavaScript file will not be automatically included in your project. First, you should include those generated files in your project. Second, you should modify the project file to mark those generated fiels as being dependent upon their related TypeScript (.ts) file. This will ensure that no one accidentally modifies those files, and it will ensure that TFS automatically checks them out for edit before being regenerated.

<TypeScriptCompile Include="Scripts\jqueryExtensions.ts" />

<Content Include="Scripts\jqueryExtensions.js">

 <DependentUpon>jqueryExtensions.ts</DependentUpon>

</Content>

Here are some the simple steps to compile on save:

1. Right click on your project in Solution Explorer and unload it.
2. Open your project file in a text editor.
3. Add a dependent node under the JavaScript file (see above for an example).
4. Right click and reload the project in solution explorer.

Use a Master Definition File

Your TypeScript files require reference tags to include information about other TypeScript files. One of my favorite features of TypeScript is that the community builds definition files for other frameworks. However including multiple references in each file is a lot of work, and a bad idea in general.

I strongly suggest keeping one master definition that references all of your other definition files, and then your code files need only reference that one file inherit information regarding all of your code and dependencies.

Master Definition File

/// <reference path="jquery.d.ts" />

/// <reference path="jqueryui.d.ts" />

interface JQuery {

 alertOnClick(): JQuery;

}

interface JQueryStatic {

 stringFormat(format: string, ...args: Array<any>): string;

}

Normal Code File

/// <reference path="../Definitions/typeScriptDemo.d.ts" />

(function ($: JQueryStatic) {

 $.stringFormat = stringFormat;

 function stringFormat(format: string, ...args: Array<any>): string {

 return format.replace(/{(\d+)}/g, replaceFormat);

 function replaceFormat(match, index) {

 return typeof args[index] != 'undefined'

 ? args[index]

 : match;

 }

 }

})(jQuery);

Next week I'll talk about how to get your TypeScript compiling on Team Foundation Server.

Enjoy,
Tom

Build 2013 was a whole lot of fun!

The big reveals at Build 2013 was Windows 8.1 and Visual Studio 2013. Admittedly Microsoft's big focus was on the Windows 8 store, but that does not mean that they are not delivering great tools for the fastest growing development environment in the world: the web!

Before we discuss web development, let's first take a moment to talk about Windows.

Windows 8.1 actually looks really good! Like all Microsoft products, the first major patch manages to iron out most of the kinks. The new UI updates and inclusion of the start button make the modern UI and desktop seem much less polarizing. Additionally, I am very optimistic about seeing Windows 8 applications come to PC, table, and phone. Microsoft has always had great potential for creating a homogeneous ecosystem consumer devices, and I am finally getting excited about the product line up that they are delivering.

New Editors in Visual Studio 2013

The Visual Studio Team has completely rewritten the HTML and JavaScript editors from scratch in Visual Studio 2013. This is great news; not only are the new editors faster, more responsive, and have much better intellisense, but they also come with a set of fun new features.

• The overall Razor experience has been greatly improved.
• Intellisense now include expandable groups to keep drop downs from getting cluttered.
• CSS intellisense now displays browser compatibility for each rule.
• New shift alt keys allows you to select content from tree structures.

Microsoft has yet to announce how they will charge for Visual Studio 2013. Will it be a stand alone install, will it be full price, we just do not know yet. Personally, I would love to see Visual Studio more to incremental update system, but obviously there would be lot of technical limitation to doing so...but hey, a dev can dream!

HTML Editing Features in Visual Studio 2013 Preview

Browser Link

Visual Studio 2013 comes with a built in feature called Browser Link. This is where Visual Studio opens a socket connection directly to your browsers (yes, plural) via SignalR that allows your IDE to send commands directly to the browser itself. The most basic use of this a simple refresh button that allows you to refresh all your browser windows on command.

The potential of this feature is fun to think about! Right now the Visual Studio team is intentionally keeping their default feature set for Browser link very simple, but also open source; as they want to see what us developers come up with. Remember that this is a two way channel of communication between the browser and the IDE, so sending error messages back to Visual Studio is just the first thing that comes to my mind.

A cool demo that they showed us at Build was keeping multiple browser windows in sync, this included form elements and page navigation. The cool part was that these browsers included Chrome, Firefox, and IE running on a virtualized windows phone. It was a very compelling demo!

Browser Link feature in Visual Studio Preview 2013

Web API 2.0

Web API was a great addition to Microsoft's web development library, and 2.0 looks like a great incrimental update to that framework. Forgive me if it seems that I do not have much to say about Web API 2, it just seems like a very simple but very welcome update to the framework; but don't let that fool you, I am stoked!

• Attribute based routing.
• Integrated OAuth 2 authentication.
• OWIN Web hosting (run your APIs outside of IIS)
• Cross-Origin Resource Sharing

ASP.NET Web API 2

TypeScript 0.9

I am SO excited about TypeScript!

TypeScript is a development language that is a super set of JavaScript. It adds type checking, interfaces, and inheritance to JavaScript. The idea is that you develop in TypeScript and then compile that language down to JavaScript for deployment on the web. The key here is that TypeScript is a super set of JavaScript, so all JavaScript code is already valid TypeScript, making it very easy for you to start your migration from language to the other.

There are essentially two ways that you could choose to use TypeScript:

1. Use TypeScript for simple type checking and enhanced refactoring.

This is probably the more ideal use of TypeScript, or at least the simplest. The idea being that you can constrain your function parameters by type and interface, and make use of TypeScripts more strick declarations for easier refactoring. You would also get significantly improved intellisense both for your code and other frameworks, as a very active open source community has been creating interface wrappers for everything from JQuery to Knockout.

2. Go full monty, and make your JavaScript completely Object Oriented.

Using TypeScript would allow you to define and extend both classes and interfaces, just as you would a language like C#. This opens the possibility for polymorphism, dependency injection, mocking, testing, the whole object oriented play book. While this does go against many principals of a very functional programming language like JavaScript, it also enables a lot of best practices that help simplify large scale application development.

...how far you want to go using TypeScript is up to you, but regardless of which side of the fence you are on, I definitely feel that TypeScript is worth looking into!

www.typescriptlang.org

The future looks bright,
Tom