experiment with using shiki twoslash

blog-website/.gitignore

@@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.cache

blog-website/blog/2012-01-24-what-on-earth-is-jquery-and-why-should.md

@@ -47,7 +47,7 @@ My CSS (filter, by the way, is just linear gradients in IE 6-9):
 
 My jQuery:
 
-```js
+```js twoslash
 $(document).ready(function () {
   //Add hover behaviour on picker buttons for IE6
   if ($.browser.msie && parseInt($.browser.version, 10) < 7) {

blog-website/blog/2012-02-23-joy-of-json.md

@@ -18,15 +18,15 @@ So back to JSON. For those of you that don't know JSON stands for JavaScript Obj
 
 As mentioned in my previous [post on Ajax](http://icanmakethiswork.blogspot.com/2012/02/potted-history-of-using-ajax-on.html) I came upon JSON quite by accident and was actually using it for some time without having any idea. But let's pull back a bit. Let's start with the JavaScript Object Literal. Some years ago I came upon this article by Christan Heilmann about the JavaScript Object Literal which had been published all the way back in 2006: [Show love to the JavaScript Object Literal](http://christianheilmann.com/2006/02/16/show-love-to-the-object-literal/) Now when I read this it was a revelation to me. I hadn't really used JavaScript objects a great deal at this point (yes I am one of those people that started using JavaScript without actually learning the thing) and when I had used them is was through the `var obj = new Object()` pattern (as that's the only approach I knew). So it was wonderful to discover that instead of the needlessly verbose:
 
-```js
+```js twoslash
 var myCar = new Object();
 myCar.wheels = 4;
 myCar.colour = 'blue';
 ```
 
 I could simply use the much more concise object literal syntax to declare an object instead:
 
-```js
+```js twoslash
 var myCar = { wheels: 4, colour: 'blue' };
 ```
 
@@ -36,7 +36,7 @@ Lovely. Henceforth I adopted this approach in my code as I'm generally a believe
 
 Let me illustrate the above method names using the myCar example from earlier:
 
-```js
+```js twoslash
 var myCar = { wheels: 4, colour: 'blue' };
 // myCar is an object
 

blog-website/blog/2012-03-03-jquery-unobtrusive-remote-validation.md

@@ -85,7 +85,7 @@ But for the purposes of seeing what's "under the bonnet" I thought it would be m
 
 Next the JavaScript that performs the validation:
 
-```js
+```js twoslash
 $(document).ready(function () {
   var intervalId = null,
     //

blog-website/blog/2012-03-12-striving-for-javascript-convention.md

@@ -17,7 +17,7 @@ Now I've come to love it but what I realised pretty quickly when getting into Ja
 
 . But JavaScript is forgiving. Some would say too forgiving. Let's do something mad:
 
-```js
+```js twoslash
 var iAmANumber = 77;
 
 console.log(iAmANumber); //Logs a number
@@ -56,7 +56,7 @@ I'd started making more and more extensive use of JavaScript. I was beginning to
 
 As I started doing this sort of work I made no changes to my coding style. Wherever possible I did \***exactly**\* what I would have been doing in C# in JavaScript. And it worked fine. Until.... Okay there is no "until" as such, it did work fine. But what I found was that I would do a piece of work, check it into source control, get users to test it, release the work into Production and promptly move onto the next thing. However, a little way down the line there would be a request to add a new feature or perhaps a bug was reported and I'd find myself back looking at the code. And, as is often the case, despite the comments I would realise that it wasn't particularly clear why something worked in the way it did. (Happily it's not just me that has this experience, paranoia has lead me to ask many a fellow developer and they have confessed to similar) When it came to bug hunting in particular I found myself cursing the lack of friendly tooltips and the like. Each time I wanted to look at a variable I'd find myself tracking back through the function, looking for the initial use of the variable to determine the type. Then I'd be tracking forward through the function for each subsequent use to ensure that it conformed. Distressingly, I would find examples of where it looked like I'd forgotten the type of the variable towards the end of a function (for which I can only, regrettably, blame myself). Most commonly I would have a situation like this:
 
-```js
+```js twoslash
 var tableCell = $('#ItIsMostDefinitelyATableCell'); //I jest ;-)
 
 /* ...THERE WOULD BE SOME CODE DOING SOMETHING HERE... */
@@ -68,7 +68,7 @@ You see what happened above? I forgot I had a jQuery object and instead treated
 
 After I'd experienced a few of the situations described above I decided that steps needed to be taken to minimise the risk of this. In this case, I decided that "steps" meant [Hungarian notation](http://en.wikipedia.org/wiki/Hungarian_notation). I know. I bet you're wincing right now. For those of you that don't remember HN was pretty much the standard way of coding at one point (although at the point that I started coding professionally it had already started to decline). It was adopted in simpler times long before the modern IDE's that tell you what each variable is became the norm. Back when you couldn't be sure of the types you were dealing with. In short, kind of like my situation with JavaScript right now. There's not much to it. By and large HN simply means having a lowercase prefix of 1-3 characters on all your variables indicating type. It doesn't solve all your problems. It doesn't guarantee to stop bugs. But because each instance of the variables use implicitly indicates it's type it makes bugs more glaringly obvious. This means when writing code I'm less likely to misuse a variable (eg `iNum = "JIKJ"`) because part of my brain would be bellowing: "that just looks wrong... pay better attention lad!". Likewise, if I'm scanning through some JavaScript and searching for a bug then this can make it more obvious. Here's some examples of different types of variables declared using the style I have adopted:
 
-```js
+```js twoslash
 var iInteger = 4;
 var dDecimal = 10.5;
 var sString = 'I am a string';
@@ -88,13 +88,15 @@ Some of you have read this and thought "hold on a minute... JavaScript doesn't h
 
 I would be the first to say that alternative approaches are available. And here's one I recently happened upon that I rather like the look of: look 2/3rds down at the parameters section of [the DOJO styleguide](http://dojotoolkit.org/community/styleGuide) Essentially they advise specifying parameter types through the use of prefixed comments. See the examples below:
 
-```js
+```js twoslash
+
 function(/*String*/ foo, /*int*/ bar)...
 ```
 
 or
 
-```js
+```js twoslash
+
 function(/_String?_/ foo, /_int_/ bar, /_String[]?_/ baz)...
 ```
 

blog-website/blog/2012-03-17-using-pubsub-observer-pattern-to.md

@@ -76,7 +76,7 @@ For a while I've been making use explicit use of the [Observer pattern](http://e
 
 So this is what it ended up looking like when I turned my 3 classes into JavaScript files / modules. First BaseReilly.js:
 
-```js
+```js twoslash
 $(function () {
   $.subscribe('PubSub.Inheritance.Emulation', function (obj) {
     obj.LastName = 'Reilly';
@@ -86,7 +86,7 @@ $(function () {
 
 Next BoyReilly.js:
 
-```js
+```js twoslash
 $(function () {
   $.subscribe('PubSub.Inheritance.Emulation', function (obj) {
     obj.Sex = 'It is a manchild';
@@ -96,7 +96,7 @@ $(function () {
 
 And finally JohnReilly.js:
 
-```js
+```js twoslash
 $(function () {
   $.subscribe('PubSub.Inheritance.Emulation', function (obj) {
     obj.FirstName = 'John';
@@ -106,7 +106,7 @@ $(function () {
 
 If the above scripts have been included in a page I can create myself my very own "JohnReilly" in JavaScript like so:
 
-```js
+```js twoslash
 var oJohnReilly = {}; //Empty object
 
 $.publish('PubSub.Inheritance.Emulation', [oJohnReilly]); //Empty object "published" so it can be enriched by subscribers

blog-website/blog/2012-04-16-simple-technique-for-initialising.md

@@ -44,7 +44,8 @@ Background explanation over. It may still be a little unclear but I hope you get
 
 I was writing unit tests for the controllers in our main web application and was having problems with my arrangements. I was mocking the database calls in my controllers much in the manner that you might expect:
 
-```ts
+```ts twoslash
+
 // Arrange
   var orderDb = new Mock<IOrderDb>();
   orderDb

blog-website/blog/2012-05-07-globalizejs-number-and-date.md

@@ -101,7 +101,8 @@ The long and short of which was:
 
 Globalize.js clearly has a rosy future in front of it. Using the new Globalize.js library was still simplicity itself. Here's some examples of localising dates / numbers using the German culture:
 
-```js
+```js twoslash
+
 <script
   src="/Scripts/Globalize/globalize.js"
   type="text/javascript"></script>

blog-website/blog/2012-07-16-rendering-partial-view-to-string.md

@@ -13,7 +13,7 @@ Just last week I was thinking about `Partial Views`. Some background. I'm workin
 
 The wonderful thing about approach 2 is that it allows me to massively simplify my `success` to this:
 
-```js
+```js twoslash
 $('myRowSelector').empty().html(data.RowHTML); //Where RowHTML is the property that
 //contains my stringified PartialView
 ```

blog-website/blog/2012-08-06-jquery-unobtrusive-validation.md

@@ -40,19 +40,19 @@ As you can see MVC has done the hard work of translating these data annotations
 
 To validate a form it’s as simple as this:
 
-```js
+```js twoslash
 $('form').validate();
 ```
 
 Or if you wanted to validate a single element:
 
-```js
+```js twoslash
 $('form').validate().element('elementSelector');
 ```
 
 Or if you wanted to prevent default form submission until validation was passed:
 
-```js
+```js twoslash
 $('form').submit(function (event) {
   var isValid = $(this).validate().valid();
 

blog-website/blog/2013-11-26-rolling-your-own-confirm-mechanism.md

@@ -29,7 +29,7 @@ When we show our dialog we are in asynchronous land; waiting for the user to cli
 
 Here's my custom confirm dialog:
 
-```js
+```js twoslash
 /**
  * Show a "confirm" dialog to the user (using jQuery UI's dialog)
  *
@@ -94,15 +94,15 @@ Finally we return the promise from our deferred object.
 
 It's very simple to move from using `window.confirm` to `confirmDialog`. Take this example:
 
-```js
+```js twoslash
 if (window.confirm('Are you sure?')) {
   // Do something
 }
 ```
 
 Becomes:
 
-```js
+```js twoslash
 confirmDialog('Are you sure?').then(function (confirmed) {
   if (confirmed) {
     // Do something

blog-website/blog/2013-12-04-simple-fading-in-and-out-using-css-transitions.md

@@ -63,7 +63,7 @@ Andrew Davey tweeted me the suggestion below:
 
 So I thought I'd give it a go. However, whilst we've a `transitionend` event to play with we don't have a corresponding `transitionstart` or `transitionbegin`. So I tried this:
 
-```js
+```js twoslash
 $('#showHideButton').click(function () {
   var $alertDiv = $('#alertDiv');
   if ($alertDiv.hasClass('fadedOut')) {

blog-website/blog/2014-01-09-upgrading-to-typescript-095-personal.md

@@ -27,7 +27,8 @@ First hurdle jumped, the upgrade continues simple enough. Then the fun starts...
 
 Having upgraded my plugin I opened up the project I'm working on in Visual Studio. I used NuGet to upgrade all the Definitely Typed packages to the latest (TS 0.9.5) versions. Then I tried, and failed, to compile. It was the the most obscure error I've seen in a while:
 
-```ts
+```ts twoslash
+
 VSTSC : tsc.js(37574, 25) Microsoft JScript runtime error : Unable to get value of the property 'wrapsSomeTypeParameter': object is null or undefined
 ```
 
@@ -39,7 +40,7 @@ I decided to take a look at the Q typings at this point to see what was so upset
 
 Roughly speaking I went from:
 
-```ts
+```ts twoslash
 declare function Q<T>(promise: Q.IPromise<T>): Q.Promise<T>;
 declare function Q<T>(promise: JQueryPromise<T>): Q.Promise<T>;
 declare function Q<T>(value: T): Q.Promise<T>;
@@ -55,7 +56,8 @@ declare module 'q' {
 
 To:
 
-```ts
+```ts twoslash
+
 interface QIPromise<T> {
     //… functions etc in here
 }

blog-website/blog/2014-02-27-typescript-and-requirejs-keep-it-simple.md

@@ -89,7 +89,7 @@ Install-Package requirejs.TypeScript.DefinitelyTyped
 
 Right – looking at index.html we can see from the data-main tag that the first file loaded by RequireJS, our bootstrapper if you will, is main.js. So let’s add ourselves a main.ts based on [John's example](https://github.com/johnpapa/kis-requirejs-demo/blob/master/ModularDemo/Scripts3/main.js) (which will in turn generate a main.js):
 
-```ts
+```ts twoslash
 (function () {
   requirejs.config({
     baseUrl: 'scripts',
@@ -106,7 +106,7 @@ Right – looking at index.html we can see from the data-main tag that the first
 
 main.ts depends upon [alerter](https://github.com/johnpapa/kis-requirejs-demo/blob/master/ModularDemo/Scripts3/alerter.js) so let’s add ourselves an alerter.ts as well:
 
-```ts
+```ts twoslash
 define('alerter', ['jquery', 'dataservice'], function ($, dataservice) {
   var name = 'John',
     showMessage = function () {
@@ -123,7 +123,7 @@ define('alerter', ['jquery', 'dataservice'], function ($, dataservice) {
 
 And a [dataservice.ts](https://github.com/johnpapa/kis-requirejs-demo/blob/master/ModularDemo/Scripts3/dataservice.js):
 
-```ts
+```ts twoslash
 define('dataservice', [], function () {
   var msg = 'Welcome to Code Camp',
     getMessage = function () {
@@ -138,7 +138,7 @@ define('dataservice', [], function () {
 
 That all compiles fine. But we’re missing a trick. We’re supposed to be using TypeScripts AMD support so let’s change the code to do just that. First dataservice.ts:
 
-```ts
+```ts twoslash
 var msg = 'Welcome to Code Camp';
 
 export function getMessage() {
@@ -148,7 +148,7 @@ export function getMessage() {
 
 Then alerter.ts:
 
-```ts
+```ts twoslash
 import $ = require('jquery');
 import dataservice = require('dataservice');
 

blog-website/blog/2014-03-05-caching-and-cache-busting-with-requirejs.md

@@ -13,13 +13,13 @@ So there I was, delighted with the TypeScript / RequireJS demo. It was working j
 
 Let’s find out. I'll open up alerter.ts and change this:
 
-```ts
+```ts twoslash
 var name = 'John';
 ```
 
 to this:
 
-```js
+```js twoslash
 var name = 'Bobby';
 ```
 
@@ -40,13 +40,18 @@ As with any set of answers there are different and conflicting views. [Phil McCu
 
 > \*"urlArgs: Extra query string arguments appended to URLs that RequireJS uses to fetch resources. Most useful to cache bust when the browser or server is not configured correctly. Example cache bust setting for urlArgs:
 >
-> ```js
+> ```js twoslash
+>
+> ```
+
 > urlArgs: 'bust=' + new Date().getTime();
+>
 > ```
 >
 > During development it can be useful to use this, however be sure to remove it before deploying your code."
 >
 > -
+> ```
 
 Phil’s answer suggests using urlArgs \***both**\* for Production and for Development in 2 different ways. Using what amounts to a random number in the Development environment (as in the official docs) for cache-busting. For the Production environment he suggests using a specific version number which allows for client-side caching between different build versions.
 
@@ -93,7 +98,7 @@ Oh yeah! We’re cache-busting like gangbusters!
 
 So now let’s comment out our existing urlArgs (which represents the Development solution from Phil’s answer) and replace it with a fixed value like this:
 
-```js
+```js twoslash
 //urlArgs: "v=" +  (new Date()).getTime()
 urlArgs: 'v=1';
 ```
@@ -104,7 +109,7 @@ This represents the Production solution from Phil’s answer. Now let’s run, r
 
 It does! Now let’s increment the value:
 
-```js
+```js twoslash
 urlArgs: 'v=2';
 ```
 

blog-website/blog/2014-03-11-knockout-globalize-valuenumber-binding.md

@@ -14,7 +14,7 @@ Like so much development we start by standing on the shoulders of giants. In thi
 
 Essentially his approach provides an “interceptor” mechanism that allows you to validate numeric data entry on input and format numeric data going out as well. Very nice. Into this I plugged Globalize to handle the parsing and formatting. I ended up with the “valueNumber” binding handler:
 
-```js
+```js twoslash
 ko.bindingHandlers.valueNumber = {
   init: function (
     element,

blog-website/blog/2014-03-17-the-surprisingly-happy-tale-of-visual.md

@@ -33,7 +33,7 @@ What I’m after is the Chutzpah test adapter for Visual Studio 2012/2013 which
 
 All fail. This makes me sad. All the errors say “Can’t find variable: Player in file”. Hmmm. Why? Dammit I’m actually going to have to read the [documentation](https://chutzpah.codeplex.com/wikipage?title=Chutzpah%20File%20References&referringTitle=Documentation)... It turns out the issue can be happily resolved by adding these 3 references to the top of PlayerSpec.js:
 
-```js
+```js twoslash
 /// <reference path="../src/Player.js" />
 /// <reference path="../src/Song.js" />
 /// <reference path="SpecHelper.js" />