Monthly Archives

May 2013

Control Designers for JavaScript Widgets in Sitefinity

By | Sitefinity | No Comments

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 slide through a…

Read More

OAuth2 Localhost Testing with Visual Studio

By | ASP.NET, MVC, Web | One Comment

When creating a new ASP.NET MVC 4 project in Visual Studio, the “Internet Application” template provides a jumpstart for using SimpleMembership and OAuth2 providers.  But you may quickly find that it some providers (Windows Live, Facebook, Twitter) require a redirect or source domain.  Most will not allow you to use a localhost address for this redirect domain which can make testing in a development environment difficult. (Note that OpenID providers, such as Google, do not require a redirect URL and these steps are not necessary to test from a localhost site.) One solution is to come up with a unique…

Read More

Custom Sitefinity Layouts Using Bootstrap (Or Any Other Grid System)

By | Uncategorized | No Comments

Today I am going to show you how to have your cake, and eat it too. Sitefinity’s layout system is great most of the time, but what if you want to use a custom grid system like Bootstrap along with it, while still using Sitefinity’s drag and drop layouts? Well you can, Sitefinity allows you to add to, or replace their existing classes. For example if you used the 4 column system, Sitefinity would automatically add classes like below: If we wanted to use a common 4 column Bootstrap layout, we would use the code below: <div class=”row-fluid”> <div class=”span3″>…</div>…

Read More

Types of Objects in Modern JavaScript Development

By | Uncategorized | One Comment

Writing modern JavaScript typically means using JQuery and the miriad libraries that are built on top of it. If you transition to this new paradigm  from the old one of programming directly against the DOM (document object model) objects, it can be especially confusing. In this blog post, I’d like to show you some different types of objects you may encounter while doing modern JavaScript development. This will include DOM objects and a couple of modern JS libraries–JQuery and Kendo UI. The DOM The Document Object Model (DOM) is a cross-platform convention for interacting with objects in HTML documents. (adapted…

Read More

How to enable SimpleMembership + Roles in an ASP.NET WebForms Project

By | Uncategorized | 3 Comments

As I write this, there is a lot of unclear and contradictory information on how to do this. Here is the best way that I’ve found to do it. The steps below will add SimpleMembership to a WebForms project as well as enable you to use the WebSecurity class in code-behind, without any weirdness such as adding a .cshtml to your WebForms project (which will work but won’t let you use WebSecurity anywhere but in that file) Create a brand-new ASP.NET WebForms project Open the Package Manager Console and run this command: install-package Microsoft.AspNet.WebPages.WebData Open web.config Add a connection string…

Read More

Kendo DataSource.view() does not always return ObservableArray

By | Uncategorized | No Comments

I came across this inconvenient inconsistency while implementing a client-side CSV export from a filterable Kendo Grid. In short, when a DataSource is not filtered and/or sorted, the view() method returns an ObservableArray, which has a toJSON() method to convert its contents back to the raw data objects without the ObservableObject wrapper. However, when the DataSource is either filtered or sorted, the view() method returns a standard JavaScript Array of Kendo ObservableObjects. Each individual item in the array has a toJSON() method, but of course the array itself does not. When I asked Telerik support about this, they said that…

Read More

Multiple desktops for a Windows world

By | Microsoft | No Comments

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 is…

Read More

Hover Over Info for An Image Thumbnail

By | Uncategorized | No Comments

Today we are going to create a nice animated hover over to display information over an image. You can download the source code here. To start, let’s look at the code below: <div class=”wrapper”> <ul> <li> <div class=”image-wrapper”> <a href=”#”><img src=”images/1.jpg” /> <h2>Image Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p> </a> </div> </li> <li> <div class=”image-wrapper”><a href=”#”><img src=”images/2.jpg” /> <h2>Image Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p> </a></div> </li> <li> <div class=”image-wrapper”><a href=”#”><img src=”images/3.jpg” /> <h2>Image Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen</p> </a></div> </li> <li> <div class=”image-wrapper”><a href=”#”><img src=”images/4.jpg” />…

Read More

Supercharge your clipboard with a clipboard manager

By | Uncategorized | No Comments

How many times has this happened to you: you cut or copy a snippet of code, select where you want it to go, then whoops! you accidentally press ctrl-c instead of ctrl-v and copy a blank line or the selection you meant to replace. This is normally just a mild inconvenience requiring you to go back and copy the snippet again, but sometimes going back to that snippet isn’t so easy. Maybe you carelessly cut the snippet and then closed the file so you can’t undo it back, or maybe you copied from a remote location that you’ve been disconnected…

Read More

Avoid IE Hacks with Kendo UI’s Browser Detection

By | JavaScript | One Comment

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 not so convenient since you need to modify the HTML…

Read More

Bringing back the Blog Archive Dropdown

By | .NET, Sitefinity, Telerik | One Comment

If you are upgrading your blog site from 3.7 or if you have worked with that version of Sitefinity before, you must be missing the good old-fashioned blog archive control. Believe it or not it is still one of the poorly designed controls in Sitefinity 5.x or 6.x. Hopefully that will change in the future, but meanwhile I created an exact copy of the 3.7 version of that control and made it compatible with the latest Sitefinity 5 or 6   And of course, not to forget the (missing) control designer The code might seem pretty straightforward to you, but…

Read More

Create a Responsive Table Layout with Unordered Lists and Divs

By | Uncategorized | No Comments

This post is an extension of a previous post I wrote on responsive layouts, you can read that post here. Today we are going to create a responsive table using unordered lists and divs. I am going to use an example from our site, it is the agenda for FalafelCon 2013. You can download the source files here. To start we are going to use an unordered list for the rows: Then we will use divs inside the lists for the columns: We want to set the main container width, and then override it for the specific devices we are…

Read More

Using Kendo UI template engine with RequireJS

By | JavaScript | One Comment

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 in dynamic data,…

Read More