Managing dependencies is baked into many languages and is a cornerstone to creating modular architectures. For C#, there the using namespace directive; for PHP, there is the include function; for CSS, there is the @import statement; and finally for JavaScript ES6 modules, we will have import {Module} from './somewhere' or one could use AMD today. Now, HTML joins the ranks and will also offer dependency management!

Introducing HTML Imports

HTML Imports are a way to include and reuse HTML documents in other HTML documents. Behold:

<link rel="import" href="goodies.html">

This loads the full HTML resources ...

CAPITOLA, CA – July 15, 2014 – Falafel Software, the leading provider of software development, consultation and training services has released a new software development kit for Sitefinity. The software development kit (SDK), Babaganoush, instantly adds functionality to Sitefinity websites.

The Babaganoush SDK allows developers to start coding on Sitefinity instantly to create server, client or mobile apps — allowing them to focus on solutions instead of troubleshooting issues or inconsistencies. With the SDK they are able to dramatically cut development time and costs by following proven patterns that provide short cuts.

The code in Babaganoush has been created in ...

Web Components is the next generation of web development. It consists of five pieces: Templates, Decorators, Custom Elements, Imports, and Shadow DOM. With these powers combined, they make a Web Component. You can use these pieces individually as well. In this post, I would like to focus on Shadow DOM and what it can do.

Why the Shadow DOM?

To understand the benefits of Shadow DOM, let me first start out with the problem. Today, your web widgets may look something like this:

<div class="img-caption-button">
  ...
I'm a big fan of Sublime Text, but the project has become stagnant and fragmented when version 3 was introduced. Its neglect and lack of vision for version 3 stunted its potential. However, the upside is that this forced web developers to pay attention to other, more modern IDE's, such Atom and Brackets.

Brackets has been around for awhile. It is open source, backed by Adobe, and has an active community. The great thing about these modern IDE's is that they are light and geared towards web development. Things like live HTML development and JavaScript debugging are built ...

Let's face it, the web was not designed for phones. For the past decade, developers have been desperately retrofitting the web for a post-mobile world. Sometimes we get lucky and something like media queries get introduced to the spec and makes handling mobile devices a little bit easier, this only happened 2 years ago.

We need something more fundamental, perhaps in the HTTP/2 spec we need to extend the User Agent to include attributes like screen size values. This would be great because until now, we have been relying on community projects like WURFL or 51Degrees to maintain an ...

Kendo UI is probably the best JavaScript framework out there. I've used several other frameworks in the real world and toyed with others. Consistently, Kendo is able to hold up from architecture to UI for simple or very complex projects. No other framework comes even close to being as well-rounded. Who else provides intricate UI widgets, while simultaneously provides an object-oriented framework and MVVM options?!

From the framework side of things, one other library has changed the game and is worth examining: AngularJS. While it has no UI framework, AngularJS inspired many JavaScript patterns and features I wish were in Kendo. And to be ...
Did you know there's a shiny new <template> tag making it to a browser near you? It's true! For years, web developers have been coming up with awkward and clever hacks to do client-side templating. Later, template engines came to the scene to mimic server-side template engines, such as Mustache, EJS, Jade, Underscore, Kendo UI, and on and on. They are still based on hacks that goes something like this:

<script type="text/x-mustache" id="template">
  <a href="{{link}}">
    <img src="{{image}}" />
  </...
There are many posts out there about getting the current geolocation of a user via HTML5. However, in this post, I would like to show you how you can track a user's geolocation. After all, what good is getting the current location of a user if they are mobile and on the move?? So here we go...

Geolocation API

The geolocation API is exposed in JavaScript using the navigator object. It is supported on all mobile devices running HTML5 browsers, which is almost all of them now. This means you can comfortably use it and even have a fallback if ...
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 ...

Get weekly updates in your inbox!