Scott Hanselman

DISCLAIMER: I don't work on TypeScript. I am not involved with that team and this is all my own opinion and conjecture.

UPDATE: After this post I sat down with Anders in Denmark at the GOTO 2012 Conference sin Aarhus and asked him bunch of questions about TypeScript. That recorded audio podcast is now available.

TypeScript was announced and folks are saying "TypeScript is clearly Microsoft's answer to Google's Dart" or "So TypeScript is Microsoft's answer to CoffeeScript."

I was chatting with Jez Humble today about the intense interest and some little gnashing of teeth around TypeScript and he offered this little gem of a quote:

It's disappointing when smart people display a profound ignorance of computing history. - Jez Humble

TypeScript has been out a day. It's way early to see if it has legs, but it seems initially promising.

TypeScript and Dart

People have compared TypeScript to Dart. That's comparing apples to carburetors. TypeScript builds on JavaScript so there's no JS interop issues. Dart is a native virtual machine written from scratch. Dart interops with JavaScript...but it's not JS. It doesn't even use the JavaScript number type for example.

TypeScript and CoffeeScript

I'm a huge CoffeeScript fan although it is a different language with a syntax of its own to learn. What I like about TypeScript - so far - is that TypeScript’s static typing could enable better tooling with warning squiggles, easy statement completion, plus smart refactoring. You also get easy navigation around code, as well as find references, rename, and more. You don’t currently get that in CoffeeScript.

So what is TypeScript?

TypeScript is a superset of JavaScript and you write it like you write JavaScript which I like. Any existing JavaScript is already TypeScript. One argument has been made that TypeScript is for people who don't want to learn JavaScript. I don't buy that. As Ward Bell said in an email:

TypeScript is not a crutch any more than JSLint is a crutch. It doesn’t hide JavaScript (as CoffeeScript tends to do). - Ward Bell

I think Ward says it well. Folks rail against static typing but they don't complain about JSLint. TypeScript offers optional type annotations - it's hardly a perversion of JavaScript.

From what I can see after using TypeScript for a few days is this. It gives you type checking, explicit interfaces and easier module exports. In fact, it's a little like getting some of tomorrow's ECMAScript 6 early in a way that's compatible with today's JavaScript. ES6 won't be out for at least a year but we can play with some of those features today.

Things that I like about TypeScript:

• It's Open Source and under the Apache 2.0 license
• You can install the tools easily with
  • npm install typescript -g
• You can git the source
  • git clone https://git01.codeplex.com/typescript 
• You can play with it online at http://www.typescriptlang.org/Playground

Things I don't like about TypeScript (these are mostly implementation things)

• No splitscreen editor like Visual Studio's existing CoffeeScript editor
  • UPDATE: While this isn't "official" support, Mads has updated Web Essentials 2012 with a splitscreen editor. The two teams are going to work together on a more official solution.
• Doesn't generate .js on save, requires a build.
  • UPDATE: The Web Essentials extension does this for us.
• You have to add a BeforeBuild target to your ASP.NET application's CSPROJ:

<Target Name="BeforeBuild">
<Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

I will continue to use TypeScript and evaluate it, but I think the fact that it's open source, it creates JavaScript and it feels comfortable to me as a C# programmer means it will fill a useful niche.

This quote from Luke Hoban, co-creator of TypeScript really hits the spot.

"CoffeeScript is to Ruby as TypeScript is to Java/C#/C++." - Luke Hoban

If you love Ruby, you'll enjoy CoffeeScript as it makes the JavaScript more like the Ruby. The same is true with TypeScript. It brings useful features into JavaScript in an ultimately compatible and syntax-friendly way using language constructs you're comfortable with.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

I really enjoy working on and thinking about mobile websites. There's something about making an experience great on a pocket supercomputer phone that is so much more satisfying than a desktop. I actually got this blog looking nice on mobile devices back in 2006 when nobody was mobile except doctors and, well, all of us techies here on the blogs.

I've talked about the importance of a good mobile site before in posts like Create a great mobile experience for your website today. Please. However, some folks had asked me if I'd do a post on how to do a combination Desktop and Mobile site using ASP.NET MVC similar to the examples I used in my talks in Russia on mobile earlier this year. (There's video of those ASP.NET mobile presentations available)

When you start Visual Studio 2012 and go File | New ASP.NET MVC 4 app, there's an Internet Application template and a Mobile template. One gets you a standard desktop site - although with responsive design elements so it works on small screens - and the other gets you a jQuery Mobile application meant primarily for phones and tablets. Let's make one that switches between both.

We will do a small site in ASP.NET MVC for the Desktop, do some quick DB access, add jQuery Mobile and a View Switcher switch back and forth. I'll be using the Electric Mobile Studio from Electric Plum to simulate an iPhone. You can get a 7 day trial or you can get the Lite version of the Electric Plum Mobile Simulator with WebMatrix 2.

Quick CRUD Example

First, a model for DVDs.

public class DVD
{
    public int ID { get; set; }
    public string Title { get; set; }
    public int Year { get; set; }
    public Rating rating { get; set; }
}

public enum Rating
{
    G, PG, PG13, R
}

Next, I scaffold out the Index, Create, Edit, Delete, etc. Unfortunately scaffolding doesn't do Enums (I'm sad) for my Movie Ratings so I add EditorFor() calls to my Create and Edits, and update my Index.

<div class="editor-label">
    @Html.LabelFor(model => model.rating)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.rating)
    @Html.ValidationMessageFor(model => model.rating)
</div>

I could have used DropDownList I suppose, but I have always found that helper confusing. Instead, I'll create a Rating.cshtml that makes a dropdown. I could change this at some future point to be fancier and not even use a DropDown.

Aside: How do you guys usually handle Enums? I've seen it done a few ways. I'd like this to be more generic, but here's what I did for the Rating editor Template. Note the nullable ? as it has to work for both Create and Delete

@model MyApp.Models.Rating?
@using MyApp.Models

<select id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldName("")">
    @foreach (int rating in Enum.GetValues(typeof(Rating))) {
        var name = Enum.GetName(typeof(Rating), rating);
        <option value="@name" selected="@(Model.HasValue ? (int)Model == rating : false)">@name</option>
    }
</select>

OK, so there's a basic Desktop CRUD app.

Making it Mobile

As I mentioned, you've probably noticed when making an ASP.NET MVC application that you can choose a Mobile template with jQuery Mobile along with the standard responsive "desktop" Internet Application. However, there isn't a switchable template. That is, one that is the regular template on Desktops but switches to jQuery Mobile (or KendoUI, or whatever makes you happy) on mobile devices.

Using NuGet, install the jQuery.Mobile.MVC package. You can either right click on References, select Manage NuGet Packages, or you can use the Package Manager Console and type:

install-package jQuery.Mobile.MVC

This package will automatically bring in jQuery Mobile as well as:

• A ViewSwitcher partial view and supporting Controller
  • This is what lets us switch manually between Desktop and Mobile
• A basic _Layout.Mobile.cshtml and supporting stylesheet
• A BundleMobileConfig.cs used with ASP.NET Optimization (the bundler for CSS and JS)

NOTE: There's nothing jQuery Mobile specific about the ViewSwitcher or the techniques here. You can happily change this package for any other popular mobile framework.

We start by adding the new Bundles in the Global.asax:

BundleConfig.RegisterBundles(BundleTable.Bundles);
BundleMobileConfig.RegisterBundles(BundleTable.Bundles); // <-- ADD THIS ONE

Since I installed the Electric Plum iPhone simulator, I'll select it from my browser dropdown in Visual Studio and run my app and navigate to /DVD.

The system sees that I'm on a mobile device and rather than using _Layout.cshtml it uses _Layout.mobile.cshtml.

This doesn't really look nice for a few reasons. First, I don't like the default style. Just go into _Layout.Mobile.cshtml and change the data-theme attribute to a value that makes you happy. I changed it from theme a to theme b.

Second, while I'm using the _Layout.Mobile.cshtml I'm still using the desktop Index.cshtml which looks lousy when displayed in the mobile layout. Remember that I only have an single Index.cshtml. If I had an Index.mobile.cshtml the system would use that page instead when rendering on a mobile device.

I can make an Index.Mobile.cshtml with simpler markup, change the table into an unordered list and add some jQuery Mobile specific attributes like this:

@model IEnumerable<MvcApplication2.Models.DVD>
@{
    ViewBag.Title = "My DVDs";
}
<ul data-role="listview" data-filter="true" > 
@foreach (var item in Model) {
    <li>
        <a href="@Url.Action("Details", new { item.ID })">
        <h2>@Html.DisplayFor(modelItem => item.Title)</h2>
        <p>@Html.DisplayFor(modelItem => item.Year) - @Html.DisplayFor(modelItem => item.rating)</p>
        </a>
    </li>
}
</ul>

Note the data-role and very basic elements like <ul>, <li>, <h2< and <p>. I also added the client side data-filter attribute to get some nice client-side searching. Hit refresh and now it's starting to look like a real mobile site.

See the ViewSwitcher at the top there? That's a partial view called _ViewSwitcher.cshtml.

By default it will let you switch back and forth between Desktop and Mobile but only on mobile devices. Why? Check out the first line of code:

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        } 
        else 
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

That first line checks if it's a mobile device making the request. Just surround that with /* comments */ and you'll be able to view and debug mobile layouts with your desktop browser without faking User Agents.

So far we've been talking about "mobile" and creating files with "mobile" in their file names and it's all been magic. Turns out we have lots of control over these things. Perhaps we want more than Index.mobile.cshtml but also, perhaps, Index.iPhone.cshtml and Index.WP7.cshtml.

Create lines like these in your Global.asax:

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WP7") {
    ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("Windows Phone OS")
});
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone") {
    ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("iPhone")
});

You can affect the DisplayMode collection (of which "mobile" is one) by inserting in your own. Here I'm making two more specific mobile ones but you don't need to do mobile things to change DisplayModes.  A DisplayMode could be right to left for RTL languages, or "gold" and "bronze" for customers or whatever makes you happy, based on the ContextCondition you evaluate on each request.

There's lots of choices and you've got the flexibility to do things however you like. I'll show an example of a totally offline iPhone site using cache.manifest in a future post.

Related Links

• Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize
• Create a great mobile experience for your website today. Please.
• New Mobile View Engines for ASP.NET MVC 3, spec-compatible with ASP.NET MVC 4
• Learning about Progressive Enhancement - Supporting Mobile Browsers with CSS3 Media Queries
• ASP.NET for Mobile, One ASP.NET and Realtime ASP.NET with Signalr - Video of Scott Hanselman's talks in Russia

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

I make a lot of DVDs. I make them for weddings for family and for funerals and memorials. I make trip DVDs and memory DVDs and all sorts of stuff.

Why don't you put all that stuff online, Scott? Why don't you put it on Facebook/YouTube/Vimeo/Whatever? There's a couple reasons. First, believe it or not, there's a lot of people in the world who don't have high-speed internet. We've got lots of relatives overseas who don't have a laptop at home nor do they have any internet in their home. Here in the US we've got lots of older relatives who don't have computers, or perhaps they only have an iPad and a link to a YouTube video doesn't have the sense of meaning or permanence that a DVD does.

Random Aside: It's a shame that today's young people won't realize how much effort it took to create a mix tape for someone. Rearranging MP3s and emailing a list isn't the same as waiting for specific songs to get played on the radio and pressing Record within the first two notes.

Perhaps making DVDs is a lost art and I'm an old fogey. Or perhaps DVDs are today's mix tapes.

Regardless, I recently installed Windows 8 on my home machines and my laptop. Around the same time my Uncle Ronald - the closet person I've ever had to a grandfather - passed away. I immediately got to work creating a DVD for his memorial service. I had 30 minutes of audio of Uncle Ronnie that I recorded for a never-aired podcast. I had hundreds of photos over 90+ years of his life, 8mm and Super8 film reels as far back as the 50s, combined with digital video going all the way back to 1998 from my own collection. I was looking forward to burning many DVD copies and mailing it to interested relatives as well as playing the DVD at the memorial.

I spent many hours putting together a tribute video. I used Movie Maker as I have for many of my projects. I also have Adobe Premiere but for putting together family videos there's little easier than Movie Maker. I did my editing and went to Save Movie to export my movie as a WMV to import into Windows DVD Maker. But there was no DVD option. Confused, I searched the start menu for Windows DVD Maker. I'd used it just a week before...before I upgraded my Windows 7 to Windows 8.

Windows DVD Maker was gone. It's not in Windows 8. :(

I was pretty bummed as I needed to make DVDs for the memorial event and I kind of needed them immediately. There's lots of different third party DVD creation software packages but I've always personally felt that media players and media creation software from 3rd parties (Roxio, CyberLink, etc) have always been rather garish in their user interface style. They never LOOK like they belong in Windows. There's always bright red window chrome, the same airbrushed happy clipart families in splash screens.

I just want to import a video file into a simple app and create a DVD. Preferably for free.

I evaluated a number of DVD creation suites over a number of hours and decided on the open source DVDStyler (NOTE: this is a link to the Adware-Free Portable Edition!). I like DVDStyler because it's extremely spartan in its user interface but extremely capable. One could believe it was included with Windows and it is an excellent complement to Windows Live Movie Maker. For me, installing DVDStyler makes up for DVD Maker being gone on Windows 8.

IMPORTANT NOTE/WARNING: While it is an open source GPL'ed project, in order to support itself DVDStyler does install some toolbar software and will change your browser home page and install additional software if you just "next, next, next, finish" through their installation process. When installing free software please ALWAYS be aware of what you're saying YES to. Be sure to use the Custom installation option and select (or deselect) the options that are right for you. While I found these changes surprising and an annoyance, I feel the value provided by this free software to be worth the annoyance of these other applets. I removed them later via Uninstall Programs as well as by manually removing extensions in Firefox and IE.

When you save your movie from Windows Live Movie maker, you might want to make a Custom Production Setting. I created one and called it DVD and set it to 720x480. You might change this if you are creating PAL (720x576) or NTSC DVDs. It's up to you. The point is that Windows Live Movie Maker has no standard DVD movie creation option anymore but you can create any custom setting you'd like.

In DVDStyler I use similar settings. Be sure to select 16x9 if most of your source material is widescreen and most of your destination TVs are also widescreen. I usually use DVD-5 (4.7 gigabytes) but occasionally I'll use a dual-layer DVD-9 (8.5 gigabytes) and a high bitrate if there is a lot of action on the screen.

You can burn the DVD directly or, if you want more control, create an ISO file and use another tool like ImgBurn to burn or create multiple copies.

I'm glad to have found a reasonable, simple and free option for creating DVDs on Window 8 in DVDStyler.

Sponsor: Be part of GENERATION APP. Your Idea. Your App. 30 Days. Begin your 30-day journey to create a Windows Store style app and talk 1-on-1 with a Windows 8 app development pro. Get started today.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

There were lots of reactions to my blog post Everything's broken and nobody's upset. Some folks immediately got the Louis CK "Everything's Amazing and Nobody's Happy" reference. Some folks thought it was a poorly worded rant. Some folks (from various companies) thought I was throwing developers under the bus, accusing them of not caring. Others saw a meta-goal and started a larger discussion about software quality.

The questions I asked were these...but the most significant one was added a few hours later, suggested by a reader.

• Is this a speed problem? Are we feeling we have to develop too fast and loose?
• Is it a quality issue? Have we forgotten the art and science of Software QA?
• Is it a people problem? Are folks just not passionate about their software enough to fix it?
• It is a communication problem? Is it easy for users to report errors and annoyances?

After the post I went back and tried to file bug reports for all the issues I bumped into. For products where I couldn't find an easy bug reporting site I used Twitter. Google and Microsoft were universally pleasant when I reported the bugs and seemed sincerely interested in helping.

Is it easy for your users to report a bug? Does you app automatically report crashes? Is your site friendly? Are you support people friendly and engaged? Are your bug support forums filled with reports but no company representatives? Do you use GetSatisfaction or UserVoice?

Anatomy of a Good Bug Report

Ideally the "best" bugs are those that can be reproduced given enough context. You can save developer time and trouble by giving them as many details as you can. Developers can save everyone time with bug reporting tools that collect that information for users.

For example, on Windows if you run "msinfo32.exe" you can get a complete snapshot of your system.

Send a Frown and Send a Smile

I am a big fan of the "Send a Frown" way of getting bugs.

The Office 2013 Previews even have hotkeys for this!

Sending feedback is even better with screenshots.

The help menu for Skype includes a Give Feedback menu as well as "Skype Status."

As a user, if you can include information like:

• What were you doing? What were you trying to do?
• Advanced folks: What weird add-ins/extensions or hacks are you using that you haven't mentioned but you really should? *cough* Adblock *cough*
• Can you make it happen every time?
• Can you include a screenshot? Bonus points for a screencast!

This is a lot to ask of a user!

Some examples of where to file bugs

Here's some sites you can use to report bugs in certain applications. Note that some are fancy, some spartan, some just forums, some actual bug tracking software, made for and used by developers.

• Google Chrome/Chromium - http://new.crbug.com
• Firefox and all Mozilla products - https://bugzilla.mozilla.org/
• Spotify - http://www.spotify.com/se/help/support-forum/
• Internet Explorer - http://connect.microsoft.com/IE
• Visual Studio & ASP.NET http://connect.microsoft.com/visualstudio and 
  • Suggestions http://aspnet.uservoice.com and http://visualstudio.uservoice.com

Or, the ultimate place to file bugs for your favorite software, as my friend Anil points out:

@shanselman on Twitter, duh!

— Anil Dash (@anildash) September 24, 2012

How hard does the user have to work to file a bug? It's OUR bug but the user not only hit the bug but also has to work to report it!

Every click or manual step that our users have to invest in our bug is a click too many. A bug is the pain that hurts the user and keeps hurting as they report it! A good bug report is a gift that keeps on giving and we should treat it as such.

I'd love a world where all crashes are automatically reported and there's a "Send a Frown/Smile" button on everyone's computer that offers to record a short screencast with just a single "record/stop" button.

What product do you think has the best bug filing experience? Sound off in the comments!

This week's sponsor: Be part of GENERATION APP. Your Idea. Your App. 30 Days. Begin your 30-day journey to create a Windows Store style app and talk 1-on-1 with a Windows 8 app development pro. Get started today.

Related Posts in this Three Part series on Software Quality

1. Everything's broken and nobody's upset
2. A Bug Report is a Gift
3. Help your users record and report bugs with the Problem Steps Recorder

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By

I've got this little one page website I wrote a few years ago that attempts to detect the version of the .NET Framework you have and give you a download for the smallest redist you need to get up to date. It's called SmallestDotNet.  It was written and thrown up while watching an hour of TV. Fortunately or unfortunately this little throwaway still gets about 10,000 page views a month. It also has a tiny JSON API that a lot of people have actually embedded into their sites and products.

Additionally, it's starting to break. IE9+ doesn't include .NET Framework details in its HTTP User-Agent. The site isn't setup for .NET 4.5, etc. You get the idea. Plus, it's a pile of if statements and prayer and it's just horrible. Worse yet, it lives in a ZIP file on my hard drive and I drag it into SmartFTP to deploy. Yes, I know, this is all thick with irony.

I took and hour over lunch today to accomplish these basic goals:

• Get this crap site into source control so others could help fix it
• Move the site to Azure and off my blog's server
• Update the site's DNS
• Setup continuous deployment with Git to Azure
• Fix the .NET 4
• Maybe add .NET 4.5 detection
• Cleanse myself, possibly by reading Programming Pearls

Making a Site in Azure

I use the Azure Command Line Tools (get them with npm install azure). (I did an npm update azure --global to make sure I had the latest.)

I clone my Git Repository, create an Azure site, then make sure my Azure site is setup as a remote. (Soon the remote add will be made automatically when creating an Azure site from within a Git repro)

git clone https://github.com/shanselman/SmallestDotNet.git
azure create site SmallestDotNet

I copied my site in from elsewhere and

git add .
git commit -m "Initial Commit"

Next, I'll associate my Azure site with my GitHub (or CodePlex) repo. I could also deploy from local files, but I like the idea of an auto-deploy since I'll guessing I'll be making lots of changes and this is one less thing to worry about.

From the Deployment tab on the Azure Portal I'll use OAuth to authorize azure with GitHub.

Then...

I'll confirm the repository I'm using:

This sets up a WebHook plugged into GitHub so it'll notify Azure when a push happens, Azure will deploy.

Now, I'll push my repository to origin.

git push origin master 

Within a second or so of this push, the site automatically updates and is up and running at smallestdotnet.azurewebsites.net. I'll do a custom domain in a second.

Yes, I should probably make a deployment branch. I could have two small Azure sites and then have each represent a deployment from a different branch in Git. Then I could git push staging and git push production.

To move the domain name records from my own server to azure, I'll log into my DNSimple account (referral link for a free month!) and create a CNAME that points to my new site.

Back in the Azure Management Portal - about 10 minutes later - I'll click Manage Domains and enter my new CName.

I'm also using an A record so read the instructions carefully.  After Azure verifies the CNAME, I return and add the A record. That way I can have not just www. but also the "naked" domain work as well.

I visit the site, and boom. It's there. http://www.smallestdotnet.com/ is on Azure in less than a lunch hour. About 25 minutes, actually. Whew.

Next, I have to fix the horrible code and bugs. Join me and issue a pull request.  ;)

Thanks to Calin Balauru for his help with the code a few months back.

Related Reading: ScottGu on Continuous Deployment in Azure with Git

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

About   Newsletter

Hosting By