Scott Hanselman

WallabyJS is a slick and powerful test runner for JavaScript in your IDE or Editor

January 13, '16 Comments [17] Posted in Javascript
Sponsored By

I was reminded by a friend to explore WallabyJS this week. I had looked at WallabyJS a while back when it was less mature but I hadn't installed a more recent version. WOW. It's coming along nicely and is super-powerful. You should check it out if you write JavaScript. It's also super fast, for these reasons:

Wallaby.js is insanely fast, because it only executes tests affected by your code changes and runs your tests in parallel.

WallabyJS has plugins for the IntelliJ platform, Visual Studio, Atom, and more recently, there's preview support for Visual Studio Code and Sublime Text support is coming soon.

It supports supports TypeScript, CoffeeScript, and ES7. Wallaby supports jasmine for running tests but you can plug in your own testing framework and assertion library as you like.

Installing WallabyJS for Visual Studio Code is very easy now that Code supports extensions.

Installing WallabyJS on Visual Studio Code

Once you've installed the extension it will download what's needed and bootstrap WallabyJS. I did have a small issue installing, but and uninstall/reinstall fixed it, so it may have been just a blip.

Visual Studio Code running WallabyJS

If you want to see it in action quickly without much setup, just clone their Calculator sample at

git clone

Do note that it's not totally obvious once you've installed WallabyJS that you have to "start" its server manually...for now.

Starting WallabyJS

Once it has started, it's mostly automatic and runs tests as you type and save. You can access all WallabyJS's commands with hotkeys or from the Visual Studio Code command palette.

WallabyJS Commands in VS Code

It's great to see a powerful tool like this working in Visual Studio Code. Remember you can get VSCode (now open source!) for any platform here and you can get WallabyJS at their main site.

Sponsor: Big thanks to my friends at Redgate for sponsoring the feed this week.Check out their amazing FREE eBook! Discover 52 tips to improve your .NET performance: Our new eBook features dozens of tips and tricks to boost .NET performance. With contributions from .NET experts around the world, you’ll have a faster app in no time. Download your free copy.

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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Control how your bower packages are installed with a gulpfile in ASP.NET 5

October 16, '15 Comments [29] Posted in ASP.NET | Javascript | Open Source
Sponsored By

ASP.NET 5 beta 8 is out. Yes, that's a lot of betas, but it's important to get things right when you're doing something new like this. You can find instructions in our documentation for installing ASP.NET 5 beta8 on Windows, Mac and Linux.

ASP.NET 5 uses the NuGet package manager to get server-side libraries but for client-side things we recommend folks use Bower. The most popular JavaScript and CSS libraries are there, and there's no need for us to duplicate them in NuGet. This means ASP.NET 5 folks get to use the same great client-side libraries that other open web technologies enjoy.

In very early builds of ASP.NET 5 we put those libraries in a folder outside the web root (wwwroot) into bower_components or npm_components and then used a gulp/grunt (think MSBuild for JavaScript) task to copy the files you want to deploy into wwwroot in preparation for deployment. However this confused a LOT of folks who weren't familiar with these tools. It also meant another step after installing a new JavaScript library. For example, you'd install angular with bower, then manually edit the gulp file to copy the .js you wanted into the folder of your choice, then run gulp to actually move it. These are common tasks for many of today's open web developers, but have been confusing for ASP.NET 5 users who don't usually work on the command line. So, this was changed a while back and your bower libraries show up right in your wwwroot.

bower stuff under wwwroot

While this is convenient change and great to starters, at some point you'll want to graduate to a more formal process and want to move your bower client libraries back out, and then setup a task to move in just a files you want. Let's take a moment and switch it back the way it was.

Here's how.

Update your .bowerrc and project.json

In the root of your project is a .bowerrc file. It looks like this:

"directory": "wwwroot/lib"

Change it to something like this, and delete your actual wwwroot/lib folder.

"directory": "bower_components"

Exclude your source bower folder from your project.json

You'll also want to go into your project.json file for ASP.NET 5 and make sure that your source bower_components folder is excluded from the project and any packing and publishing process.

"exclude": [

Update your gulpfile.js

In your gulpfile, make sure that path is present in paths. There are totally other ways to do this, including having gulp install bower and figure out the path. It's up to you how sophisticated you want your gulpfile to get as long as the result is that production ready .js ends up in your wwwroot ready to be served to the customer. Also include a lib or destination for where your resulting JavaScript gets copied. Could be scripts, could be js, could be lib as in my case.

var paths = {
webroot: "./" + project.webroot + "/",
bower: "./bower_components/",
lib: "./" + project.webroot + "/lib/"

Add a copy task to your Gulpfile

Now open your Gulpfile and note all the tasks. You're going to add a copy task to copy in just the files you want for deployment with your web app.

Here is an example copy task:

gulp.task("copy", ["clean"], function () {
var bower = {
"bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
"bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
"hammer.js": "hammer.js/hammer*.{js,map}",
"jquery": "jquery/jquery*.{js,map}",
"jquery-validation": "jquery-validation/jquery.validate.js",
"jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"

for (var destinationDir in bower) {
gulp.src(paths.bower + bower[destinationDir])
.pipe(gulp.dest(paths.lib + destinationDir));

Do note this is a very simple and very explicit copy tasks. Others might just copy more or less, or even use a globbing wildcard. It's up to you. The point is, if you don't like a behavior in ASP.NET 5 or in the general build flow of your web application you have more power than ever before.

Right click the Bower node in the Solution Explorer and "Restore Packages." You can also do this in the command line or just let it happen at build time.


Looking in this simplified screenshot, you can see the bower dependencies that come down into the ~/bower_components folder. Just the parts I want are moved into the ~/wwwroot/lib/** folder when the gulpfile runs the copy task.

A new flow for my JavaScript

Feel free to share in the comments links to your blog posts on how YOU like your gulpfiles and build process to work!

Sponsor: Thanks to Infragistics for sponsoring the feed this week! Responsive web design on any browser, any platform and any device with Infragistics jQuery/HTML5 Controls.  Get super-charged performance with the world’s fastest HTML5 Grid - Download for free now!

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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Easy accelerated 3D Games in a browser with JavaScript and WebGL using Three.js or Babylon.js

June 11, '14 Comments [12] Posted in Gaming | Javascript | Open Source
Sponsored By

Let's ignore that we haven't got a web-agreed-upon way to do just about anything, much less basic line-of-business apps with data-bound text boxes over data, and just revel in the fact that we can do hardware-accelerated 3D graphics in our browsers with WebGL. This works today in all the latest browsers.

I noticed this fantastic mini-game promoting Assassin's Creed over at that uses WebGL via a library called Babylon.js. On my Windows machine it runs perfectly in IE11, Chrome 37, or Firefox 30. (Yes, in retrospec, the version numbering for browsers is getting out of hand.)

Some folks on Macs have reported issues with WebGL. Check out for YOUR browser's capabilities.

This Pirate Ship game is really worth checking out and it's fun for the kids. You can also check out the Developer Teardown and learn how they built it.

3D Assassin's Creed Pirates in my browser

I wanted to get a better understanding of exactly how difficult it is (or easy!) to get in to WebGL in the browser. I found this article over at SitePoint by Joe Hewitson and started with some of his sample code where he compares two popular WebGL libraryes, three.js and babylon.js. The Assassin's Creed game here is written using Babylon.js.

Three.js seem to be  a general layer on top of WebJS, aiming to make scene creation and animation easy. Using Joe's sample (that I changed a little) along with a texture.gif, I was able to make this spinning 3D cube easily.

There's a live example running at you can see in your modern browser. Below is just a static image.

I would have animated it but that would have been a meg. ;)

Three.js is on the left and Babylon.js is on the right. It doesn't really matter given the static image, but one think you'll notice immediately if you run the live sample is that you can zoom in and out, pan, grab, and manipulate the babylon.js cube. I could have hooked up some events to the three.js cube, or perhaps added a physics engine like Physijs and made it interact with the world, I suppose. It struck me though, that this little example shows the difference in philosophy between the two. Babylon seems to be more of a game engine or a library that wants to help you make games so there's interactions, collision detection, and lighting included.

Three.js supports many renderers, cameras, and lighting. You can use all WebGL capabilities such as lens flares. It supports all the usual objects and geometries as well. Their examples are extensive with over 150 coding examples covering everything you'd want to know from fonts, models, textures, to sounds. There's even an in-browser Three.js editor.

Babylon includes a lot including a physics engine from cannon.js built in, full scene graph, offline mode, textures, special effects and post processes, many cameras including Oculus Rift (!) lots of meshes. Babylon.js even supports standard Gamepads via like the Xbox One controller natively via the Gamepad API spec.

Anyway, here is the cube on the right from Joe's code that I modified slightly, using babylon.js:

// Babylon.js 
var canvas = document.getElementById('babylonCanvas');
var engine = new BABYLON.Engine(canvas, true);
var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);

var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), sceneB);
//light.diffuse = new BABYLON.Color3(1, 0, 0);
//light.specular = new BABYLON.Color3(1, 1, 1);

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);
box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);


engine.runRenderLoop(function () {
box.rotation.x += 0.005;
box.rotation.y += 0.01;

I also commented out the lighting but you can see how easy it is to add lighting to a scene if you like. In this case there was a diffuse red light along with a specular white.

With babylon.js I could change the size of the scene by changing the size of the canvas. With three.js the width and height are pulled in programmatically from the enclosing div.

Here is the near-same box created with three.js.

// Three.js 
var div = document.getElementById('three');
var height = div.offsetHeight;
var width = div.offsetWidth;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

var sceneT = new THREE.Scene();

var cube = new THREE.CubeGeometry(200, 200, 200);

var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new THREE.MeshBasicMaterial({ map: texture });

var mesh = new THREE.Mesh(cube, material);


function animate() {

mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(sceneT, camera);

Both libraries have amazing Examples Galleries and you should check them out.

Also note that there's a contest running until June 20th, 2014 over at where you'll create your own shader within the browser and submit it for judging. Contestants must be over 16 years of age and from one of the following countries: United States of America, United Kingdom, France, Germany, Spain, or Australia. The contest starts here and the grand prize is an Assassin’s Creed Collector’s Black Chest Edition and an Xbox One.

Create your Shaders in the browser

Even if you don't win, do check out the in-browser shader editor. It's amazing.

Sponsor: A big welcome to my friends at Octopus Deploy. They are sponsoring the blog feed this week. Using NuGet and powerful conventions, Octopus Deploy makes it easy to automate releases of ASP.NET applications and Windows Services. Say goodbye to remote desktop and start automating 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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Recent JavaScript Jabber Podcast - Microsoft, not Microsoft, and the Web

August 20, '13 Comments [41] Posted in Javascript | Podcast
Sponsored By

loraxI was a guest recently on a podcast called JavaScript Jabber. I enjoy checking out other folks' podcasts and how they run things. I actually talked to the guys about sound quality for about 30 min before the actual recording started.

Their show is about JavaScript exclusively so we spent about an hour talking shop.

Here's a few quotes...yes, I'm quoting myself. On my blog.  We talked about Open Source:

I don’t care if it’s not Entity Framework. If you want to use NHibernate or RavenDB or CouchDB, dude, knock yourself out. But ultimately, the dirty little secret about Microsoft is they want you to run on Windows. Okay, well you don’t run Windows. You guys run Macs. Okay. But maybe you’ll discover that Azure is actually a pretty kickass cloud service and you’ll run your stuff on Azure, which is Windows.

We talked about using the client machine more effectively:

I hear a lot of people say, "Hey, we run a web farm and we’ve got about ten machines in the farm and it just can’t handle the load. We’re going to need to buy an 11th machine." Then you talk to them and they’ll say something like, "Well we’ve got 10,000 people hitting the site," and I’ll think to myself, "Okay, you’ve got 10 machines in the farm and you have 10,000 people hitting the sites. All those people have quad processors, even if they have a phone. Are those processors really working hard? You’ve got 40,000 unused processors just sitting there and they’re waiting for your 10 processors to give them angle brackets. What if you gave them curly braces and let them do the work?”

I think the podcast turned out fairly well, although there was a little tension as I felt I was being asked to make declarative statements and defend historical stuff I didn't work on. I think I made it very clear that my opinions about the industry are just that, opinions, and mine alone. That said, we talked about node, JavaScript in general, the way the industry is moving with respect to where work happens (client vs. server) and a bunch of other things.

They called this episode "JavaScript Strategies at Microsoft with Scott Hanselman." Other than the "with Scott Hanselman" part, this title is problematic.

The hosts are fine folks and I had a pleasant time. I think because of the title of the episode this particular episode has been getting a LOT of Tweets and appeared on Hacker News and Reddit for a short while. I wouldn't have chosen this title, myself.

  • It implies I have anything to do with JavaScript at Microsoft.
    • I don't. I do work in Azure and Web Tools and I often give my opinions on the JavaScript Editor, on what we do with Node, and how frameworks like Ember and Angular will be presented in VS, but I am not in charge of anything. I give feedback just like dozens (hundreds?) of other random folks inside the Big House.
  • It implies I'm some how strategic, strategically involved or know strategery within JavaScript at Microsoft.
    • Again, JavaScript on the client is the Chakra engine and the IE team. I don't work for them, no do I claim (and never have) to speak for them.
  • It implies I'm a spokesman for Microsoft.
    • I'm an enthusiast and a teacher, but not a marketer or spokesman. I speak, and yes, I do have this blog, but it's mine and its writings and opinions are mine. I often write about Microsoft stuff because I work there, but I worked elsewhere for 15 years and blogged that also. I blogged and podcast before I got to Microsoft and I will continue to blog and podcast after I leave. I am not my job.

I would encourage you to check out the podcast episode yourself and see what you think. It also includes a complete transcription, which is a nice touch and very important.

Sponsor: A big thanks, and a welcome to Aspose for sponsoring the feed this week! Check out their Aspose.Total for .NET has all the APIs you need to create, manipulate and convert Microsoft Office documents and a host of other file formats in your applications. Curious? Start a free trial 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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

A rich new JavaScript code editor spreading to several Microsoft web sites

August 1, '13 Comments [33] Posted in Javascript
Sponsored By
Where is this JavaScript-based editable code area coming from?

I noticed yesterday that some C#, JavaScript and CSS files I had sitting in SkyDrive were suddenly editable.

Editable code in SkyDrive

Not just editable, but there's also autocompletion of strings (not quite intellisense, as it's just one file at a time) and token/symbol recognition.

Editable code in SkyDrive

Plus, this editor looked REALLY familiar to me. I started looking.

I looked over at the Windows Azure Portal, where developers can write node.js to make web services directly in the browser. Here we've got dropbox autocomplete, tooltips with syntax errors and even some basic symbolic refactoring!

Azure Mobile Service's rich code editor

Below you can see the editor in Azure Mobile Services throwing a tooltip syntax error. Is this happening on the server?


Then I remember TypeScript's "playground" online that shows how TypeScript turns into JavaScript. This is split-screen with TypeScript on the left and JavaScript on the right.

The TypeScript Playground

Then I went to look at TFS Online's stuff at where I made an account to host private Git repos for side projects.

Inline comments in TFS online

Notice that in TFS Online this editor is used for diffs and comparisons, but also includes inline threaded comments! This is all in JavaScript, people.

The editor in a side by side diff

I brought up F12 tools just to check.

The javaScript editor open in SkyDrive

That's pretty unambiguous. Looking at the CSS by just clicking on editor.main.css. The "vs" in the div's class point to a vs-theme.css that I presume is to set the colors and make the text editor look familiar.


Looking in editor.main.js, it's all minified, but it's cool to see.


This JavaScript code editor/viewer component is on a TFS site, an Azure site and a SkyDrive site, being used very different divisions across Microsoft. Very cool to see code reuse, but also a good experience replicated. Kudos to the SkyDrive team for recognizing a good thing and putting it into production. It'll be interesting to see where else this editor pops up in the future.

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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 21 in the Javascript category Next Page

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.