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

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

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)

1. Create a brand-new ASP.NET WebForms project

2. Open the Package Manager Console and run this command: install-package Microsoft.AspNet.WebPages.WebData

3. Open web.config

1. Add a connection string ...

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

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

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

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

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:

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

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

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

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:


You really should be doing this:


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

Last time, I summarized Scott Guthrie's keynote session. This time, I'll summarize some of the following sessions.

Azure Websites - Things they don't teach the kids in school

This talk was actually not so much about Azure Websites as it was about the build system that Azure Websites uses to publish web projects from Git. The product is called "Project Kudu" and is an open-source project available on GitHub. The speaker demonstrated a number of  "power user" features of Kudu:

Streaming the application log to the console

This demo actually didn't work, but this could be immensely useful to assist ...

I recently had the pleasure of attending the global AzureConf 2013 event broadcast live on Microsoft's Channel 9. If you didn't get a chance to attend and don't want to spend the time to watch all of the sessions, I plan to summarize each of them over the next few posts. This is my summary of the keynote address.

Keynote

In the keynote, Scott Guthrie gave an overview of the current state of available Azure services, starting with the infrastructure itself. Windows Azure is flexible, supporting a variety of development languages and client platforms; open, with client SDK ...

Here is a nice little feature that allows you to download a resource by simply adding a download attribute to an a element, as shown below.

In this case, since the download is added, the file will be downloaded instead of navigating to the href.

Keep in mind this only currently works in Chrome, but will hopefully be added to other modern browsers in the near future.

One great way to add a unique look to your website is by using custom fonts. There are many ways to do this by using images, javascript, etc...

Google Fonts is an easy way to add custom fonts to your site.

The Google Fonts API is compatible with the following browsers:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

To get started, navigate to www.google.com/fonts/.

Once on the page, you'll notice filtering features on the left. You can filter by thickness, slant, width, Serif, Sans Serif, ...

Today we are going to create a responsive layout using media queries, you can download the source files here.

While there are many ways to go about doing this, I am going to focus on 4 distinct layouts.

• One for desktop and Tablet Landscape
• One for Tablet Portrait
• One for Mobile Landscape
• One for Mobile Portrait

To begin we are going to create a wrapper and give it a width of 1000px, this will be the default size for Desktop and Tablet Landscape.

 .wrapper {  
   background: none repeat scroll 0 0 #efefef;  
   box-shadow: 0 0 5px rgba(0, ...

I posted some free backgrounds and colors a few weeks ago, I have added a few new backgrounds, and a modern color palette.

Enjoy!

You can Download the files here.

I just finished setting up my Windows Phone 8 development environment on a fresh operating system.  Everything went smoothly…and then I attempted to debug  a Windows Phone 8 app using the emulator.  That’s when things started to get difficult, and I mean really difficult!

To be fair, I have several things working against me on this setup.  For almost two years, I have been happily running dual operating systems on a late-2011 MacBook Pro, and recently I installed a new hard drive and a fresh installation of Windows 8 Pro on a BootCamp partition.  In addition, I typically have no ...

Today we are going to look into how we can enable styling of HTML5 elements in early versions of Internet Explorer by using HTML5 Shiv.

What is HTML5 Shiv

According to Wikipedia, "HTML5Shiv is a JavaScript workaround, discovered by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript."

How does it work

First we need to target Internet Explorer borwsers before version 9. To do this, copy the code below, and place it in the head tag of your page.

We ...

I've worked on some reports lately that push one limit or another. Here are a few things that I've learned along the way:

Copy and pasting multiple report items

When a report has repeating groups of items that you must place by hand, it is natural to want to copy and paste all of the items at once. However, when you do this, you will usually be treated to a display suddenly filled with little yellow "warning" signs indicating that the pasted items now subtly overlap one another, even though their location and size might appear to be perfect when ...