Avoid IE Hacks with Kendo UI's Browser Detection

Posted by: on | Thursday, May 09, 2013     Comments

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 ...

Using Kendo UI template engine with RequireJS

Posted by: on | Thursday, May 02, 2013     Comments

To make your JavaScript more manageable, you should have a template engine of choice. I have been using Mustache.js for quite some time and love it. Instead of doing this:

var content = 'This is a ' + testA + ' test to ' + testB + ' put strings ' + testC;

You really should be doing this:

var template = 'This is a {{testA}} test to {{testB}} put strings {{testC}}';
var data = { testA: 'blog', testB: 'efficiently', testC: 'together' };
var content = Mustache.render(template, data);

Sure it looks like more lines of code, but throw ...

Icenium and Barcode Scanning

Posted by: on | Monday, April 01, 2013     Comments

In my previous post,  I demonstrated how to implement a SQLite database in your Cordova mobile app using the SQLite plugin in Telerik's Icenium IDE.  Now we will see how to add barcode scanning to your app using the Barcode Scanner plugin.  Previously, we built a Shopping List app that lets you add items, mark them as complete, and clear completed items while storing all data in a local SQLite database.  Now we will add a new "Scan" feature so users can scan a barcode to add items to their list.

First, we need to add the Barcode ...

Icenium: Looking Back on My First Project

Posted by: on | Friday, March 01, 2013     Comments

UPDATE (Mar 20, 2013): Icenium v1.3 was released yesterday with the ability to target iPhone or iPad only on iOS, one of my suggestions below. Thanks, Telerik team!

read more...

I'm just wrapping up my first project using Icenium, Telerik's cloud-based IDE for creating Android and iOS apps using HTML5, CSS3, and Javascript. I must say that it's been a very enjoyable experience and I've been very impressed with the product that our friends at Telerik have created.

It's a bit unfair to do a full review of this product yet, since it's so new and still in v1. ...

How to avoid loading jQuery twice with RequireJS

Posted by: on | Thursday, February 28, 2013     Comments

When working with existing sites or content management systems, you have little say on where and when jQuery is loaded. To complicate matters, some pages may have jQuery auto-loaded, and others may not (yay for performance boosts, nay for client-side plugins). Do you bite the bullet and write unmanageable scripts? Or do you believe in RequireJS and dodge the bullet matrix-style? Let me show you how.

With RequireJS, you can asynchronously load JavaScript files when needed. For example, you can write a simple JavaScript module that depends on jQuery like this:

require([
   'jquery'
], function ($) {
   $('body').append(...

A Widget Builder for Sitefinity (Preview)

Posted by: on | Tuesday, February 26, 2013     Comments

In a previous post, I showed how to create JavaScript widgets in Sitefinity using shared content blocks. This enabled you to create widgets like image carousels and blog rotators on-the-fly without having to compile or deploy. It was so useful in production and we received a lot of good feedback from the community. This is why we felt it deserved to evolve more and began creating a full-fledged Widget Builder for Sitefinity!

The idea is simple… when writing a web-based widget or control for a website, you need a mixture of HTML, CSS, and JavaScript. A portion sometimes goes ...

Falafel Software Announces FalafelCon

Posted by: on | Tuesday, January 29, 2013     Comments

Falafel Software is pleased to announce FalafelCon 2013, the new annual training conference for software developers.

Capitola CA - 29th January, 2013 - Falafel Software’s new annual training conference, FalafelCon, will take place at Microsoft’s Silicon Valley Campus on June 10 and 11th, offering software developers four co-located events and 40 technical sessions to choose from.

FalafelCon’s four co-located events include Web and Mobile specific events that explore cutting edge software development techniques with Microsoft development tools. Advanced development topics include Azure tips and tricks, cross platform mobile development, NFC with Windows Phone, Windows 8 sensor integration and ...

Building Single Page Applications with CanJS and RequireJS

Posted by: on | Monday, January 07, 2013     Comments

The web users of today expect a modern experience that only a single page application can deliver. Page refreshes are a thing of the past. Waiting for anything longer than 2 seconds without a "cool effect" is not acceptable. Responsive design for tablets and smartphones should just work.

These demands of the new era have spawned new ways to develop JavaScript applications. For modern, scalable, and extensible JavaScript applications, two techniques are on the forefront: MVC patterns and AMD design. For this demo, we will be using RequireJS for AMD modular design and CanJS for MVC.

By the way, I ...

Falafel Launches New Sitefinity 5.3 Website

Posted by: on | Wednesday, January 02, 2013     Comments

Its 2013, so out with the old and in with the new! Over the holidays, the Falafel team was hard at work preparing our new Sitefinity 5.3 website for launch. The new site is a complete redesign inspired by Windows 8 that features a tile-based, color-coded theme to make navigating the site and finding the exact Falafel Software content you were looking for easier than ever before.

Under the hood, the Sitefinity 5.3 engine and MVC based widgets have given the site a huge performance boost over past incarnations. Fans of Sitefinity will also recognize and appreciate that the Falafel ...

Sending Request Headers via jQuery AJAX

Posted by: on | Tuesday, December 18, 2012     Comments

Ever wanted to send request headers from jQuery instead of the "code-behind"? You can easily tweak the ajaxSetup object like this:

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Parse-Application-Id', 'QIDkel*****SR2c3');
        xhr.setRequestHeader('X-Parse-REST-API-Key', 'mbm311*****d0X2N');
    }
});
  
    console.log(data);
});



This is especially important when you need to be authenticated to use a service or API. Think of assigning server-signed auth tokens (that you generate on your own servers) to client-side apps. Now with every jQuery AJAX call, tokens get sent back to the server ...

What is "var that = this" in JavaScript?

Posted by: on | Monday, December 17, 2012     Comments

If you've looked at JavaScript recently after any kind of hiatus, you've probably noticed that the language has changed a little in the last few years. Technically, the language hasn't changed so much as the way we use it has. 

One of the most noticeable changes--besides the daily multiplying list of new libraries and frameworks--is the object oriented way in with the language is used. For instance, instead of just creating a sea of functions, you might now create your JavaScript code in classes of related functionality:

var mathObj = {
    writeToLog: function (message) {
        console.log(message);
    },
 
    ...

A Salute to the Falafel Rock Stars

Posted by: on | Friday, October 05, 2012     Comments

Every year, October kicks off a very busy season at Falafel : “Conference Season”. Multiple members of the team travel across the country and around world to share their expertise on a number of technologies. All Falafel Software team members spend their days, and often their nights, helping design and build cutting edge solutions for our customers. Their technical presentations draw from these real world experiences and are assembled, practiced, and presented in what little spare time they have. That’s why we call them “Rock Stars”.

This weekend at Silicon Valley Code Camp, Falafel’s entire team from around the ...

Modular JavaScript Design with Sitefinity and RequireJS

Posted by: on | Wednesday, October 03, 2012     Comments

What if I were to tell you that you can build modular client-side applications in Sitefinity and also not worry about JavaScript dependencies or conflicts? This should be music to your ears if you do any JavaScript development in Sitefinity.

First thing is you need to have solid understanding of what the Asynchronous Module Definition (AMD) is. Essentially, it is a standard for defining self-contained modules that loads dependencies asynchronously on demand. I suggest you take 10 minutes to read my blog post about this with examples. This will permanently change the way you think about JavaScript development. Once ...

Ajax.BeginForm with MVC 4

Posted by: on | Friday, September 21, 2012     Comments

Using Ajax.BeginForm in your MVC View gives you an easy way of doing a partial postback via an AJAX call.  In its simplest form, our view would look something like this:

@model MyProject.Models.Person
 
<div id="myForm">
    @using (Ajax.BeginForm(new AjaxOptions())
    {
        <fieldset>
            <legend>This is a demo form.</legend>
            @Html.LabelFor(model => model.Name)
            @Html.TextBoxFor(model => model.Name)
 
            <input type="submit" value="Save" />
        </fieldset>
    }
</div>

The BeginForm method has several overloads which allow you to pass in ...

Adding Your Own Scripts and Style Sheets to MVC 4 Bundles

Posted by: on | Wednesday, September 19, 2012     Comments

MVC 4 bundles and minifies scripts and style sheets for best performance.  This clean framework has some great selling points:

  • Automatically uses minified versions when you're running in production but leaves everything uncompressed and easily readable when you're debugging.
  • Reduces the markup needed to declare JavaScript and style files. Yet you can still control the order that files load in.
  • Allows bundling by using wild cards and variables. This allows you to load all the "Kendo" JavaScript files, for example.

A new MVC 4 app will bundle scripts and styles for jQuery, Knockout and Modernizr automatically, but you can create ...

Building JavaScript Apps using Modular and MVC Patterns

Posted by: on | Tuesday, September 18, 2012     Comments

In this post, I would like to open your eyes to a new way of developing JavaScript applications. We will be building modular JavaScript code on an MVC architecture while also handling dependencies. With these techniques, you can join a new era of web development and stop coding like it's 1999!

Prince - 1999

Asynchronous Module Definition (AMD)

First, let us get some terminology out the way. The Asynchronous Module Definition, or AMD, is a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. In other words, JavaScript files and units of code can be loaded via ...

JSONP Simplified

Posted by: on | Friday, September 14, 2012     Comments

JSONP is used to get data from remote web locations without running afoul of web browser security restrictions. Browsers prevent access to methods and properties from other domains, with one exception: the <script> tag.  The <script> tag is allowed to reference JavaScript from anywhere. For example, your browser will have no trouble with this script reference, no matter what domain the page is running:

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Servers take advantage of this fact by returning JSON data wrapped in a JavaScript function. The link below asks flickr.com for some images in JSON format. Notice the last ...

Minify your JavaScript and CSS

Posted by: on | Tuesday, September 04, 2012     Comments

When building a full-featured MVC web site (or any web site), it is likely that you will have lots of JavaScript and CSS resources.  In addition, when you are using 3rd-party libraries, you can often get "minified" versions of the files, but you may end up with a handful or even dozens of separate js files.  It is important to reduce the load times of these files as much as possible.  There are a few concepts that help speed up page loads:
  1. Minify files: remove unnecessary spaces and line breaks so the file size is as small as possible.
  2. Combine ...

Lino Tadros on the Tablet Show

Posted by: on | Monday, August 27, 2012     Comments

Listen to this week's installment of "The Tablet Show" featuring Falafel CEO Lino Tadros.
 
The Tablet Show (Show 47, Released Aug. 27th, 2012 )

You'll enjoy this 10-time Microsoft MVP's take on Windows 8 development, HTML 5, JavaScript, iPad and more as Carl Franklin and Richard Campbell ask about his real world experiences developing in the mobile space. 



Lino Tadros to Speak at Sitefinity and Beyond

Posted by: on | Wednesday, August 15, 2012     Comments

To Sitefinity and Beyond! That’s where you’ll find Falafel Software CEO Lino Tadros sharing his Sitefinity knowledge and experience. Lino will join the Sitefinity team at the event to help educate and guide the community on Sitefinity development and best practices. His talk, “Deploying High Performing and Scalable Web Solutions” draws from the experience of developing over 150 Sitefinity solutions and will explain exactly how to optimize Sitefinity for the demands of the enterprise. You’ll learn how to configure IIS, properly cache data, eliminate ViewState, pre-compile sites, optimize JavaScript, use single sign on, load balance mutliple sites ...