First time here? You are looking at the most recent posts. You may also want to check out older archives or the tag cloud. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS. Thank you for visiting! (hide this)

Speaking about Katana and OWIN at NCrafts Conference in Paris

Lately I’ve been digging deeper into the OWIN specs and in particular into the implementation done by Microsoft: Katana.

For those interested in knowing more about this new lightweight and modular web server, Ugo Lattanzi and I are going to have a speech about it on the 16th of May in Paris at the NCrafts conference, organized by our friend Rui Carvalho.

ncrafts-manifesto

This conference, despite being in France, will be almost entirely in English and will have prominent members of the .NET developer community speaking, like Greg Young of CQRS fame  and Lucene.net core contributor Itamar Syn-Hershko.

You can have a look at the full agenda, and you still have 3 days (till Wednesday 16th April afternoon) to secure an early bird ticket with 50€ discount on the full price: don’t miss this opportunity to attend a developer conference with a view on the Tour Eiffel.

In addition to speaking at NCrafts conf, we are also writing a short e-book that will be published around the same timeframe by Syncfusion as part of its “Succinctly” e-book series.

Why is a 32bit Windows Azure WebSite running as 64bit?

Yesterday I updated my Ghost installation on Azure Websites and my test blog stopped working: I enabled error logging and the error I got was:

[31m
ERROR:[39m [31m Cannot find module './binding\Release\node-v11-win32-x64\node_sqlite3.node' [39m

Error: Cannot find module './binding\Release\node-v11-win32-x64\node_sqlite3.node'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (D:\home\site\wwwroot\node_modules\sqlite3\lib\sqlite3.js:7:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17) 

Ghost uses node-sqlite3 which is a binding toward sqlite and thus requires the native binary for the OS and architecture of the server: the download is done during the npm installation and depends on the architecture on which npm is running. In my case, since I have a free windows azure web site, the architecture is 32bit, so after installing the package I got node_modules\sqlite3\lib\binding\Release\node-v11-win32-ia32\node_sqlite3.node, which seems to be legit.

The dynamic reference is done based on the process.arch variable, so you would expect it to be ia32 as well, since my website is configured as 32bit. So why is the sqlite3 module trying to reference the x64 version?

I did some debugging through the amazing Kudu Debug Console to try and understand why: I tried getting the process.arch variable both via console (which should reflect the condition seen by npm) and via a small node.js app running in the same web site.

Running on the console node -e "console.log(process.arch)" I got ia32.

On the other end, trying to detect the same variable via the website I got x64.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Architecture:'+process.arch+'\n');
}).listen(process.env.PORT, '127.0.0.1');

Node-sqlite is behaving correctly: installing ia32 as npm runs under 32bit and requiring x64 as the website process is running 64bit.

Now I fixed my problem by running npm install sqlite3 --target_arch=x64 via the kudu debug console and forcing the installation of the 64bit version of the binary file for sqlite, but question still remains: why if the web site is configured as 32bit, the node.js process runs as 64bit while the console and deply process runs under 32bit?

UPDATE: I just installed the latest from Ghost master which references node-sqlite version 2.2 which changed binary dependency installation to node-pre-gyp. This installs the 64bit version of sqlite, so my problem is solved. Nevertheless, having the 64bit version when my web site is configured as 32bit seems a bug.

Show me your Visual Studio Extensions

All developers like to personalize their IDE, and even if lately I’m not doing that much of coding, I still like to have my Visual Studio 2013 “pimped” with the extensions that make work easier and faster. Here is a list of the extensions I’ve installed on my VS2013.

ReSharper

I guess this tool doesn’t need introductions: refactorings, code completion, code quality and coding standards checks and many other little helpers that make coding faster.

It’s a commercial tool that costs 134€ and comes with a 30 days trial. More info on JetBrains’ web site.

Nuget

Another extension that doesn’t need an introduction is Nuget. It ships with VS2013, but for older versions of Visual Studio you have to install it manually.

Web Essentials

Visual Studio 2013 has already a lot of HTML/CSS/JS editing features, but Mads Kristensen’s Web Essentials adds even more: zen coding, JSHint, LESS, SASS, CoffeeScript, Markdown, image optimization, intellisense for CSS Media Queries, robots.txt files, HTM5 appcache, AngularJS tags and much more.

Basically an essential extension for anyone doing modern web development using .NET.

SideWaffle

Going along with Web Essentials, SideWaffle adds a bunch of project and item templates and snippets for modern web development (and coming also Windows Phone and Windows Store).

CodeMaid

CodeMaid is an extensions that helps cleaning up and organizing your code. Useful even if you have already ReSharper… and vital if you don’t. Have a look at the documentation to see all that it does.

Productivity Power Tools

From Microsoft, this extension adds some pretty useful features that help you navigate through the IDE faster. Some duplicates features available in ReSharper, but others are unique. So, install it even if you have it. Check features and download it from the visual studio gallery. And there is also a video that explains the new features.

Routing Assistant

Not an extension for everyone, but very useful if you do ASP.NET MVC (ops… maybe it is for everyone then): it explores your solution and visualizes in a tree-like interface all the routes and acts also a routing debugger to help you see which routes are called by specific urls.

It’s a free product from a software company that commercializes ASP.NET MVC libraries.

Code Digger

Based on Pex, this extension analyzes possible executions paths of your code and tries to find possible edge cases and exceptions. Download it from visual studio gallery.

Visual Studio Team Foundation Power Tools

An essential extension for anyone “administering” a TFS 2013 installation. Download it.

What other extensions would you recommend?

Here was my list of extensions: what am I missing? What other would your recommend? Write it in a comment.

UPDATE: Ugo Lattanzi wrote a similar post a few one year and half ago, with extensions for Visual Studio 2012: most of the extensions mentioned there are still relevant for 2013, like Vs Commands, StyleCop and Ghost Doc.

How to update Ghost on Windows Azure

While trying Ghost I found myself in the need of updating the code to keep it up to date with the latest version available on github, and since both getting the updates and the deplyoment to Azure Web Sites is done via git I wrote a small batch file that automates the process.

#! /bin/bash
echo Pulling from Azure
git pull azure master
echo Pulling updates from origin
git pull origin
echo Compiling assets
grunt init
grunt prod
echo Committing to local repository
git commit -a -m "Applying changes from origin"
echo Pushing to Azure
git push azure master

A little explanation of what the script does:

  1. It pulls from Azure in case the site has been edited or updated already
  2. It pulls from the master of Ghost to get the latest changes
  3. Executes the grunt build file: compiles Sass, concat javascript files and finally mininfy them
  4. It commits to the local repository all the changes (including all the generated files)
  5. A finally pushes to git repository used by the Azure Web Site
Tags: ,,

How to install all web development tools needed for Ghost on Mac

As I’ve written last week, I’ve been starting to play around with Ghost and to do so I had to go through an extensive maintenance of my MacBook. But that also gave me the opportunity to revamp it installing the tools needed for a modern web development workstation. In this post I won’t focus that much on the Ghost installation part as it’s well explained on Scott Hanselman post about installing Ghost on Azure, but I’ll focus more on installing the tools needed using the best practices.

Tools needed

Basically you’d need to install the following tools:

  • Git
  • Node.js
  • Ruby

Git

Git is a prerequisite for installing most of the other tools, as nowadays most automatic installation processes for opensource tools go fetch the code directly from the git repository and build them. So we are going to install it first. You might already have it installed: if unsure just type git --version. If you don’t get anything you have to install it, downloading from http://git-scm.com/download/mac. Once installed you can open a terminal window and type again git --version. You should get something like:

git version 1.8.4.2

This means it’s been installed correctly and, at the time of writing, you are running on the latest available version.

Node.js tools

Ghost is a Node.js application, so you obviously need to install Node.js. But to make life easier in case you want to work with it for other projects you should also install NVM (a node version manager) which makes switching between versions very easy.

NVM

To install it just type this line on terminal window:

sudo curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Node.js

Once NVM is installed you can download and install the latest version of nodejs by typing nvm install 0.10 to download the latest latest available 0.10.x release.

Grunt

Needed for building your own Ghost, but also very useful if you do JavaScript development,Grunt is a task runner that can automate almost everything: for .NET developers, it’s like MsBuild or NAnt… just running on Node.js. To install it type, and you’re good to go.

sudo npm install grunt-cli --g 

Remember the sudo as otherwise the installation will fail.

Ruby

Even if you are not going to work with Ruby, installing it is a good idea as many web developer tools, like Sass, require Ruby.

Like we did for Node.js with NVM, we are going to install Ruby via a version manager, called RVM.

sudo curl -sSL https://get.rvm.io | bash -s stable --ruby

The line above will install RVM, downloading it from source, and once done will automatically download the latest stable version of Ruby.

Sass and Bourbon

In addition you’ll also have to install Bourbon (which brings Sass as dependency): gem install bourbon will do the trick.

Installing Ghost

Now that you have all the tools needed for building Ghost (or any other modern Node.js application) you can go on and install it locally. Just type in the following lines in the terminal window.

git clone https://github.com/TryGhost/Ghost.git
npm install
grunt init
grunt prod

Running Ghost

At this point you have a local version of Ghost: next step is have it up and running: npm start and then point your browser to http://127.0.0.1:2368

Running Ghost on Azure

Now that you have Ghost running locally, you can install it on Azure… just follow the last part of Scott Hanselman step by step guide and you’ll get your blog up and running in no time.

Planning on moving blogging platform: Ghost

I’ve been one of the main member of the Subtext project, but lately I’ve been lagging behind keeping a consistent posting blogging schedule, and I’ve also realized that this is partially due to the fact that the blogging platform I’m using is kind of obsolete, not in line with the latest “trends” in blogging and site taxonomies.

Since this is a open-source project, actually my open-source project, I could technically tweak the code and add the features I need, but the technology behind the blog engine, despite the effort done in the last few years, is kind of outdated, and not fun to work with. So I’m planning on moving to another blog engine.

Wordpress

First option I looked into was obviously WordPress. I’m already using it for my robotics/arduino blog, but despite being so easy to use and full of themes, I’d still want something I can tweak if needed, and I’m definitely not going to start writing code in PHP.

Dexter

I’ve then also looked into using Dexter, wrote by my friend Ugo Lattanzi… but also this project, while pretty active some time ago, has now gone dormant (as you can also see by the fact his developer moved to wordpress), thus having the same issue of Subtext: I don’t have time to be a main contributor.

Github Pages and Jekyll

Another option I’ve evaluated is to move to Github Pages and using the static pages blog generator Jekyll, exactly like Phil Haack (founder of Subtext) did when he moved out from Subtext a few weeks ago. But… it’s a static code generator, which means that your site is a bunch of html files, and that you need to keep a local version of your site on the machine you want to write a post from. Also if you want to use plugins, you have to generate the site locally because Github won’t generate pages using custom plugins. And additionally if you want to write a plugin you have to write it with Ruby, which I don’t know and personally I’m not very eager to learn.

Ghost

I’ve always been a JavaScript developer since I started working in this industry in 1996 and lately I’ve been working with it on my spare time on OpenROV and also at work on mobile applications with PhoneGap. So the natural language would be Node.js.

And it just happened that a kind of big project for a Node.js blog engine has been launched: Ghost.

It has the features I wanted, like markdown editing, plugin architecture (well, not implemented yet), very easy theme API, and moreover it can be installed pretty easily on Azure Web Sites by just using a few git commands. And in case I want to tweak the code or add some functionalities, it’s pretty easy to do so.

So far I’ve installed the latest version on a test site on Azure Web Sites, http://codeclimber-ghost.azurewebsites.net/ and I’ll try and see how development goes on before doing the actual migration.

Next steps

In the meanwhile, not matter what platform I decided to move to, I need to get content out of Subtext and unfortunately none of the target blogging engine supports BlogML. For the moment I’m going to write a Subtext to WXR export tool. And probably I’d need to think of some kind of redirect method to keep the old URLs for SEO purposes.

And will try to keep you updated with my progress on trying Ghost and on moving the blog.

What do you think?

How to bind a jquery mobile radio button list to Knockout.js variable

Rendering a radio button list with jQuery Mobile is pretty easy: you just write a normal radio buttons list, apply the jQuery Mobile data attribute and you a get nice mobile “touch” friendly radio button list.

radiobutton-group

Also having it send back to a knockout.js variable the value of the selection is easy too: just apply the checked binding to the radio button.

Standard Radio Button List with jQuery Mobile and Knockout.js

This was the code that turns a normal radio button list to the jQuery Mobile horizontal group with binding to a Knockout.js variable.

<fieldset data-role="controlgroup" data-type="horizontal">
  <label>
    <input type="radio" value="Yes" name='Vote'
      data-bind="checked: Vote" />Yes</label>
  <label>
    <input type="radio" value="No" name='Vote'
      data-bind="checked: Vote" />No</label>
  <label>
    <input type="radio" value="Abstain" name='Vote'
      data-bind="checked: Vote" />Abstain</label>
</fieldset>


<script type="text/javascript">
    viewModel = {
        Vote: ko.observable('Yes')
    };

    ko.applyBindings(viewModel);
</script>

You can see radio button list at work on this jsfiddle: http://jsfiddle.net/simonech/pyjV3/

Unfortunately this code only works in one direction: from the html control to the variable. It doesn’t work the other way around. I’ve explained the reason why in my previous blog post about how to 2-way bind a jquery mobile flip switch to a knockout.js variable. The solution to the problem is also the same as with the flip switch: a custom binding is needed in order to let knockout.js know how to update the UI of the radio button list when the bound variable changes value.

Custom binding for radio button

In reality the custom binding is not applied to the radio buttons but to the control group that contains them. Let’s first see the code and then I’ll explain what it does. You can see it working on: http://jsfiddle.net/simonech/cQaDm/1/.

ko.bindingHandlers.jqCheckboxRadio = {
    init: function(element, valueAccessor) {
        var currentValue = valueAccessor();
        $(element).controlgroup(currentValue);
        $(element).attr("data-role", "controlgroup");
        $( "input[type='radio']",element).on( "checkboxradiocreate",
            function( event, ui ) {$(element).data( "init", true )} );
    },
    update: function(element, allBindingsAccessor) {
        var currValue = allBindingsAccessor().value();
        var initialized = $(element).data( "init");
        if(initialized){
            $("input[type='radio']",element).prop( "checked", false )
                .checkboxradio( "refresh" );
            $("input[type='radio'][value='"+currValue+"']",element)
                .prop( "checked", true ).checkboxradio( "refresh" );
        }
    }
};

Compared to the one for the flip switch, this binding is a bit easier, but has to work-around a bug in the jQuery Mobile API for the controlgroup widget.

The init method

The init method creates the control group via API by calling the .controgroup method, with the options specified in the binding (for ex to make it horizontal, or mini). The next line, which applies the data-role attribute again is to work-around a bug that wouldn’t render rounded corners.

The last line of the init method is needed to keep track of when all radio buttons inside the control group are initialized, otherwise the update method will fail if it’s called before they have been initialized: this is done by registering a callback on the checkboxradiocreate event of the checkboxradio jQuery Mobile widget.

The update method

This method is a bit more straightforward: it just verifies that the radio buttons are initialized, resets all their checked property to false (to account for when the value of the variable is undefined) and then “checks” the radio button whose value matches the value of the bound variable.

Applying the binding to the html radio buttons

Last step is applying the binding to the html code.

<fieldset data-bind="value: Vote, jqCheckboxRadio: { mini: 'true', type: 'horizontal' }">
    <label><input type="radio" value="Yes" name='VoteGroup'
        data-bind="checked: Vote" />Yes</label>
    <label><input type="radio" value="No" name='VoteGroup'
        data-bind="checked: Vote" />No</label>
    <label><input type="radio" value="Abstain" name='VoteGroup'
        data-bind="checked: Vote" />Abstain</label>
</fieldset>

Complete demo

You can view the complete demo, where you can see how one version of the control only works in one direction, while the one with the custom binding works also in the other, on the jsfiddle: http://jsfiddle.net/simonech/cQaDm/2/

Node.js and JavaScript coding and development guidelines

Every now and then I go back to doing something with Node.js, and when this happens I’ve already forgotten everything I did and all the little knowledge I acquired the previous time I used it. And I always have to start almost from the beginning again.

Two years ago I wrote about “How to get started with Node.js”: I think most of the information there are still valid… even the book Node.js in Action is still a MEAP (this time planned for release this month, August 2013).

This summer I’m planning on revising, during my holidays, the architecture of OpenROV, and given the huge number of people that are starting to use it, I want to inject" a bit more of “better ALM” in the mix, so I started to look around for coding conventions, development guidelines and how to do unit testing, continuous integration, build and so on: this post is a collection of some link that I found useful.

Coding and development guidelines

Here are some of the links I found useful.

One common idea that comes out from those pages is that:

All code in any code-base should look like a single person typed it, no matter how many people contributed.

So, when starting a project, either open source or proprietary, write a style guideline, possibly striving for maximum readability, especially if it’s open source, and make sure every contributor agrees and then follows it.

Testing framework

A testing library I’m looking into experimenting with is Jasmine (or actually it’s node.js version jasmine-node): it’s a BDD framework and the syntax looks pretty intuitive and, if text descriptions are carefully chosen, the report is very human readable and describes very well what each test is doing.

The documentation of jasmine is well done, with samples of every aspect of the framework, and the wiki explains also how to use Jasmine with other frameworks. If you want to do some tests you can also try it directly online at: http://tryjasmine.com/

Other JavaScript testing frameworks are Mocha and QUnit, the framework used to test jQuery, jQueryUI and jQuery Mobile. To use this last one with Node.js you need to use its port on Node.js: node-qunit.

And while not strictly a testing framework and also not needed with Node.js, Karma is a test runner for JavaScript. Because probably your application also have some JavaScript that runs in the browser and integrates with the DOM.

CI and build

One service I’ve tried a few times, mainly for testing purposes, is Travis CI: it automatically pulls changes from GitHub and can build projects on most platforms (except .NET). To configure it all you need is adding a .travis.yaml file on your repository.

OpenROV is already being built on Travis-CI, but at the moment it only installs all the needed packages, so not very useful. But once I add some tests I think it will become more interesting to use.

I’ve also noticed that Travis-CI also picks up every pull requests and run the same set of tests, thus immediately verifying whether the pull request broke something or not.

Deployment

I usually deploy to Azure Websites, which can run Node.js without a problem. I gave a speech at the local node.js user group about how to deploy a MongoDB powered Node.js app on Windows Azure.

Conclusion

Let’s now see if I find the time to really build a prototype of the new structure of the OpenROV brain.

Do you have more links you want to share and think are useful? Please write a comment and I’ll add them to the post.

How to 2-way bind a jquery mobile flip switch to a knockout.js variable

I’m currently building a mobile javascript application and I wanted to render a Yes/No as a flip switch using jQuery Mobile. To track the status of the variable and pass it to the logic of the application I’m using Knockout.js.

flipswitch

The two libraries play nice together if you update the variable only in one direction, from the UI to the viewmodel: in this case just do as if KO was not in the mix, and annotate the select element that is used by jquery mobile as base for the flip switch with the data-role="slider" attribute.

<select data-bind="options: ['Yes','No'], value: Partecipating" data-role="slider">
</select>

<script type="text/javascript">
viewModel = {
    Partecipating: ko.observable('Yes'),
};

ko.applyBindings(viewModel);
</script>

You can view the flip switch at work on the following jsfiddle: http://jsfiddle.net/simonech/4HPVm/3/

Why 2-way binding doesn’t work

If you also want to have 2-way binding, so that when changing the value of the variable the UI gets updated, this code is not enough. Let’s see why.

Knockout.js is a MVVM javascript library with two-way binding and automatically updates HTML components as soon as the variable bound to them changes.

JQuery Mobile “enhances” standard HTML components to make them mobile friendly, and this is done during the first rendering of an html page.

If you are a seasoned frontend developer you might have already understood why these two libraries cannot work well together: jquery mobile “processes” the DOM only once, at the beginning of the life of the page, so, “enhanced” HTML components cannot be updated by simply changing their backing variable because knockout.js doesn’t know how to update the new UI generated by jquery mobile.

KO custom binding to the rescue

Luckily Knockout.js is extensible and can be configured to “learn” how to update custom UI elements, by specifying custom bindings.

A custom binding defines how to initialize and how to update a given HTML element. In this post I’m showing how to create a custom binding specific for this problem: for more information and better explanation of all the details of custom bindings, please refers to the knockout.js documentation site.

First I’m showing you the code and then I’ll comment it. You can also view the working demo on a more comprehensive jsfiddle: http://jsfiddle.net/simonech/EkAmv/10/

ko.bindingHandlers.jqSlider = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var currentValue = valueAccessor();
        var bindings = allBindingsAccessor();
        if(bindings.options==undefined){
            $(element).slider(currentValue);
        }
        else{
            var called=0;
            bindings.optionsAfterRender = function(option, item){
                called++;
                if(called==2)
                    $(element).slider(currentValue);
            };
        }

    },
    update: function(element) {
        $( element ).slider( "refresh" );
    }
};

Let’s start with the update method of the binding: this is called every time the html component has to be updated, and simply forces the refresh of the flip switch element by calling jquery mobile API.

The init method is a bit more complicate as it handles two scenarios:

  • the first scenario is when the options for the select element are specified “normally” with the option tag (and the options binding is not specified): in this case the flip switch is created straight away but calling the .slider method.
  • the second scenario is when the options are also coming from the viewmodel and specified via the options binding. In this case I had to specify a callback (by setting the optionsAfterRender binding) that is executed after each option is rendered, and call the .slider method only after the last option has been rendered in the DOM.

Here the html element with the custom binding applied:

<select data-bind="options: ['Yes','No'], value: Partecipating, jqSlider: { mini: true }" >
</select>

As parameter of the custom jqSlider binding you can specify any of the parameter of the .slider method, like mini, theme and trackTheme.

Disabling jquery mobile default behavior on select elements

It’s not over yet: jquery mobile enhances every select element in the page, so we need to change the default selector used to find all select elements in the page. To do this we have to override the initSelector for the selectmenu component:

$( document ).on( "mobileinit", function() {
  $.mobile.selectmenu.prototype.options.initSelector = ".mobileSelect";
});

Remember that these lines have to be placed at the top of the page, even before the inclusion of the jquery mobile library

Complete demo

You can also view a demo on this jsfiddle: http://jsfiddle.net/simonech/EkAmv/10/

Using NPM behind a firewall

Lately the proxy configuration of my network has been changed, and moved from a transparent proxy, that required no configuration, to a “standard” proxy which requires a configuration script.

Unfortunately NPM doesn’t pick up the proxy configuration of Windows, and it took me a while to understand how to download node packages via NPM, so sharing here.

Basically you just run config set option of npm to set the proxy and https-proxy config keys, like this:

npm config set proxy http://proxy.example.com:8080
npm config set https-proxy http://proxy.example.com:8443

And here you go.

Tags: , ,