jsfiddle.net – what is it and why is it so useful?

If your writing a web application and using any kind of JavaScript library then jsfiddle is something worth taking 5-10 minutes to look at in my opinion.

You can try out your JavaScript (any library you can think of) add some HTML and sprinkle with CSS and quickly see the results, its a no brainer.

At work we are starting out on a web application which we will be using KnockoutJs on and jsfiddle will be invaluable, I have been watching the Pluralsight and Tekpub videos on KnockoutJs and wanted to blog about jsfiddle after watching John Papa talk about it in one of his KnockoutJS modules.

John’s courses on Pluralsight are awesome and I highly recommend them, the one I refer to was his course on Buiding HTML 5 apps (middle one below):-

jsfiddle.net is a website where you can test out some JavaScript code snippets you have, before you add them to your project, it’s an excellent little test harness for ideas and trying things out.

You can save the fiddles you create and share fiddles with others if you can’t get something working and could use some help with some tricky JavaScript.

Ok less talk more action:-

  • Browse to jsfiddle.net and then sign up for an account, the reason you want an account is so you can save fiddles for later and come back to them in the future.
  • You can add in pretty much any JavaScript library as a a managed resource so that you test all kinds of stuff, jquery, jquery ui, knockoutj, kendoui and more.
  • If you see a blog post that mentions a js fiddle and you want to it then I will show you how to use it below:-

How to create your first fiddle using jsfiddle

  1. Since this demo is going to use KnockoutJS we will add a reference to KnockoutJS
  2. Browse to https://github.com/SteveSanderson/knockout/downloads and then copy the location to the latest version of the knockoutJS library, at this moment in time this link to the file we need is :- https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js
  3. To add this to our jsfiddle look at the left hand side looking for ‘Add Resources’ and then paste in the link to the js file and then click the plus icon.

  4. The screen is split into 4 sections:-

    • Top Left is for HTML
    • Top Right is for any css styling you wish to add/try out
    • Bottom Left is where you add your JavaScript code.
    • Bottom right shows the output you would see in the browser
  5. Add the following into the top left hand window pane (Html):-
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>
  6. Now add the following into the bottom left window pane (JavaScript):-
    // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    function AppViewModel() {
        this.firstName = "Bert";
        this.lastName = "Bertington";
    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
  7. And thats it we are ready to save the fiddle and test it out.
  8. To test out our code click Run up at the top and you can use your favourite browser to check for any errors that may arise as you play around with the code.
  9. A very simple demo but you get the idea on whats possible, and if like me your trying to learn KnockoutJS its an invaluable tool.

Ok now that you get the idea, go create some fiddles and test our your ideas using any JavaScript library you can think of – enjoy!

What I learned last week – July 23-27th

This is the first in a series I am going to do on what I learned last week – it will cover what I’ve been up to and what I have read and learnt throughout the week – ok let’s get started.

Found a really nice sample on how to notify users when an action on your site has taken place – say you save a record or delete a record, perhaps you need to show a validation message, maybe even a banner at the top that has to stay there,

Take a look at the oh so simple to use JQuery plugin called Notify.

Awesome Stuff

  • Visual Studio 2012 is really nice to use! – you should take a look now if you havent already.
  • Shout out to the guys at RavenDb highly recommend it, also note its FREE until you need to release to production, so if you’re doing demos, needing a quick win on a project – take it for a spin.
  • Resharper 7 is out – if you’re not already using this then do yourself a favour, why walk when you can run, go try it now Resharper 7.
  • Redgate have brought out a plugin for setting up a database build in TeamCity Redgate TeamCity Plugin

Please leave a comment after the beep.

AspConf – My Review

Last week we had AspConf – “aspConf is a virtual conference focused on one thing: showcasing the ASP.NET stack as the platform for great web applications.

Over 2 days they had 5 virtual rooms used to present lots of fascinating stuff on .Net, including talks about all manner of things in the Asp.Net world.

The sessions on both days covered topics such as, Async in .Net 4.5, Glimpse, TDD, Azure and Cloud Computing and lots lots more, you can read more about the sessions here.

Although it had some technical difficulties, due to its popularity I may add, the conference is an awesome way to learn for free – and free is always good. It’s a superb way to learn about content you havent had time to look at it, or new technologies you havent heard of. Hopefully next year they might try to use something different from livemeeting.

If you missed any of the session then fret not, most of them if not all of them were recorded and put up on Channel 9 here

I only managed to see sessions from day 2 so I am off to go watch more content on Channel 9 – a great resource for free learning.

Twitter Bootstrap – What is it?

What is it? – If your creating a new web project and want it to start off on a good footing using HTML 5, CSS, JQuery, templating, boilerplates and all that’s generally good for a new or existing project then this is for you.

Twitter bootstrap comes with layouts and templates to use all built for you using best practice web standards. Recently it has received a fair bit of attention and there are a large number of people using it out there.


What does it contain? – html templates and boilerplates to get you started, JQuery plugins for a number of things, thumbnails, progress bars, all sorts of navigation aids such as tabs, pagers and label and much, much more.


You can learn more and download it from the official site here.

If you like twitter bootstrap then try this too:- Initializer


How many of you are using it? – have you come across any other useful bootstrap projects? – If so please leave me a comment.

Use Nuget for Jquery and jQueryUI Updates and more

If you’re using Visual Studio 2010 and your web application is using jQuery and or jQueryUI, you want to keep up to date and make sure everyone has the most up to date versions.

Use NuGet to add the latest and greatest versions of these libraries into your application and no longer will you have to go find the latest version, download, unzip and then add to your web app.

NuGet has a very similar way of adding and removing libraries such as you would use add/remove programs within Windows.

Scott Hanselman has an upcoming talk at TechEd on NuGet for the Enterprise which will cover how to use NuGet and setup a NuGet Server within your work – looking forward to that.

That’s it enjoy.

Modernizr MVC 3 update and what is modernizr?

If your using MVC 3 and you have updated to the latest update just after MIX 11 then you may notice a very nice addition to the Scripts folder, something called Modernizr, at the moment my brand new MVC 3 web app has modernizr-1.7.js included.

If you wanna know what Modernizr is –> modernizr ?

Follow @Modernizer on twitter and even watch Scott Hanselman talk about it at Mix 11 Modernizer at Mix (Scroll to about 11 minutes in)