When Sitefinity added MVC in version 5.1, it was a real pleasure to create widgets the "new way" via MVC. What made it so unique is that Web Forms was still offered in the platform for developers to use as an alternative or hybrid approach, so you can mix Web Form and MVC controls on the same page.

After the honeymoon stage was over, the community started to realize there was some serious limitations to the MVC implementation that made it nearly impossible to create pure MVC pages in the real world. Some examples were not being able ...
With the recent announcements of Paypal and Netflix moving to Node.js, the server-side JavaScript platform has proven itself worthy to enterprises. It's one small step for Node, one giant leap for JavaScript! From developers of .NET, Java, PHP, Ruby on Rails, and more, all walks of server-side coders are converging to the platform. And as bigger players like Yahoo, Walmart, and Oracle join the table, Node is loosing its reputation as being intrinsically immature and unstable. In this post, I would like to show you how easy it is to set up Node.js in a Windows world.

Installing Node.js...

The distinction between true and false is a blurry line in JavaScript. This is why you hear the term "truthy/falsy" in the JavaScript world. As a follow up to Noel's blog post, I would like to focus only on one side of the coin. It was inspired by a pop quiz from my teammate, Jesse Liberty.

Welcome to the False Side

What does false really mean in JavaScript? To sum it up, zeros and empty:

false == 0 //true
false == '0' //true
false == '' //true
false == [] //true
false == [[]] //true
false == [0] ...
Kendo UI has an excellent drag and drop framework. Although it has a nice API and is very capable, I found it a bit difficult to understand due to the disconnected implementation between the drag and the drop. There are two separate widgets to create a single drag and drop action: one is the kendoDraggable widget and the other is the kendoDropTarget.

For example, if you would like to allow boxes to be dragged into a designated area, you would do something like this:


Notice you have two widgets: the first one wires up the boxes to enable ...
When using MVVM in Kendo UI Mobile, there are times where you will need the context of the view so you can make changes to it or read values from it. You can get the current view from the application's "view()" method, but sometimes your app is not in the global namespace if you architected it this way. Unfortunately, this does not come as a parameter for your observable functions. So here's the trick to finding the current view:

<div id="home" data-role="view" data-model="viewModel">
    <a href="#" data-bind="click: doSomething">Do something with the ...
If you are not using Underscore.js in your JavaScript development, then you are really missing out. It cuts out so much redundant functions you find yourself creating when dealing with collections, objects, and conditions, such as finding, filtering, plucking, and so much more. You will instantly see the power of Underscore.js by examining this example:

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
 
_.pluck(stooges, 'name');
 
=> ["moe", "larry", "curly"]

It is simply "plucking" out the "name" property from the ...

When registering widgets into the Sitefinity toolbox, you'll notice there is a parameters section. This allows you to add arbitrary key/value pairs of data.


So how do you access these parameters? Through ToolboxConfig of course!

//GET CONFIG
using (var manager = Config.GetManager())
{
    var config = manager.GetSection<ToolboxesConfig>();
 
    //GET PAGE TOOLBOX
    var pageControls = config.Toolboxes["PageControls"];
    var section = pageControls
        .Sections
        .Where<ToolboxSection>(tb => tb.Name == ToolboxesConfig.ContentToolboxSectionName)
        .FirstOrDefault();
 
    //GET CONTROL FROM TOOLBOX IF APPLICABLE
    var controlType = typeof(ContentBlock); //THE TYPE OF WIDGET TO GET
    var control = section.Tools.FirstOrDefault<ToolboxItem>(t ...

When working with Kendo's SPA implementation, you will soon realize that you can only create views out of existing elements on the page or feeding it raw HTML. What about remote views? Unfortunately, only Kendo UI Mobile gets to have remote views. In this post, I will show you how to extend Kendo UI Web's kendo.View to give it remote view capabilities just like mobile!

//EXTEND KENDO VIEW TO HANDLE REMOTE VIEWS
var extendedView = kendo.View.extend({
    promise: null,
     
    init: function(element, options) {
        var me = this;
         
        //DETERMINE IF ...

Web developers love inheritance, don’t you? Who would have thought you can inherit something so basic as an HTML element and extend it! Now you can do this using the new Web Components specifications.

As an example, how many times have you wanted to add captions to an image? Probably one of the most requested feature of the image. We can do this by extending it with our own custom element. Then, we use the native DOM element as normal, except add a new special attribute called "is". This tells the browser that this "is" really a custom element ...

Callbacks are the cornerstone of JavaScript since it is single-threaded in nature. This can quickly turn into spaghetti code when handling multiple, dependent AJAX calls.

Enter Promises

Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like AJAX. So now instead of using callbacks like this:

$.ajax({
    url: '/data/people.json',
    dataType: 'json',
    success: function (resp) {
        console.log(resp);
    },
    fail: function (err) {
        alert('error');
    }
});

Now you chain the responses using "done" and "fail" like this:

$.ajax({
    url: '/data/people.json',...
If you're a web developer, have I got a treat for you! What if I told you that copying & pasting large chunks of HTML to your page or mutating the DOM via jQuery plugins is a thing of the past? What if I told you that those techniques are nothing but web hacks we have been programmed to accept for all these years? I imagine that right now you're feeling a bit like Alice. Tumbling down the rabbit hole?

"You felt it your entire life. That there's something wrong with the web. You don't know what it is, but it's ...
Kendo UI is more than just interface-candy. There is an elegant, underlying framework at play that makes things work. Is it easy to extend though? YES - Kendo is also framework-candy!

Let's start by extending the ListView widget to render checkboxes for its data source:

kendo.ui.plugin(kendo.ui.ListView.extend({
    init: function (element, options) {
        //BASE CALL TO WIDGET INITIALIZATION
        kendo.ui.ListView.fn.init.call(this, element, options);
    },
     
    options: {
        name: 'ListViewCheckboxes',
        template: '<label><input type="checkbox" />#= ProductName #</label><br />'
    }
}));

That's it!

In the "init" function, I called the base constructor in case there is ...
Wouldn't it be great if you can specify different styles per page all from the stylesheet? For example, your home page may have a larger header section than the rest of your pages. The solution would be to add a different class on each page so you can do something like this:

.header {
  height: 30px;
}
 
.home .header {
  height: 100px;
}

Only problem with this is most of the time your pages are generated by a content management system or web application. That means, you would have to hook into the ...
Are you thirsty for some scalable, elegant Kendo Mobile architecture? We all have been! The reason is because everything is globally scoped and seems to work much smoother if you jumble all your JavaScript on a single page. Fear no more though, RequireJS to the rescue!

Some warning upfront though. Kendo Mobile is a bit of a different animal than other JS frameworks. As a matter of fact, almost all mobile web frameworks are because of its single app nature, which is where the culture of global scope stems from. Because of all this, there are some rules in your ...
The Sitefinity Project Manager makes things very easy to install and upgrade. There is only one catch though: if you don't have the slightest customization on your site! And I am talking about the slightest. Even if you have added a user control, a web service, or even a master page, you are out of luck with using the Sitefinity Project Manager for upgrades. Why? Because it completely wipes out your .csproj and web.config files back to vanilla. This means all your custom references, solution configurations, handlers, modules, etc. are erased. Those files are the blueprint to your solution ...
Kendo UI includes base class objects that provides class inheritance. This is very useful for creating elegant, object-oriented JavaScript code. Couple this with RequireJS and you have a very scalable architecture.

Below is a JavaScript AMD module that returns a base class for client-side classes. It can be consumed as a dependency. Take a look:

define([
    'kendoui/kendo.core.min'
], function () {
 
    //CREATE BASE CLASS FOR LATER INHERITANCE
    var MyBaseClass = kendo.Class.extend({
        id: null,
 
        //CONSTRUCTOR CALLED ON NEW INSTANCES
        init: function (id) {
            this.id = id;
        },
 
        ...
Thanks to everyone who came out to my session today on developing single page apps in ASP.NET MVC. I've posted the slides and source code in this blog post. Please feel free to contact us if you have any questions.

Building Single Page Apps in ASP.NET MVC (PDF Slides)
Building Single Page Apps in ASP.NET MVC (GitHub Code)

We are excited to introduce a new feature in Falafel Tornado: control designers for your HTML5 / JavaScript widgets!! Take a fresh look at the control properties for widget blocks:


There's a lot more going on here than meets the eye. You still select the HTML5 / JavaScript widget to use as before, but what's interesting is that you now get a whole bunch of other selectors. These selectors will feed the property values to your widget block to consume!

For example, say you have an image carousel. It needs an album ID right? That way, it can ...
You will probably agree that having 2+ monitors is one of the most productive enhancements you can do to your PC setup. It is not so easy when traveling or if you are embracing the post-PC era. This is why it is vital to have "multiple desktops" instead. This is not a new concept if you are coming from the Mac or Linux world. Why Windows still has not jumped on this is beyond me. Until this light hits them, let me introduce you to Dexpot.

First thing you will notice is a quick view in the taskbar. This ...

Cross-browser compatibility can be a major pain. The philosophy for most web developers is to code against a standard-complaint browser (Chrome), then apply CSS hacks later for other browsers that need to play catch up (Internet Explorer). In other words, it is better to make your code forward-compatible and apply backward-compatible hacks instead of the other way around.

One technique for cross-browser compatibility is using conditional comments in the HTML like this:

<!--[if IE]>
<style type="text/css">
  p { margin-left:20px;}
</style>
<![endif]-->


This works great, but it is very awkward and ...