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:

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


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:

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

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

Just a quick update after day 1 of the Xamarin Evolve conference. The Xamarin Mobile Platform allows developers to use C#, and the .NET framework (via the Mono cross-platform implementation) to build applications for iOS, Android, and Mac OSX. Resultant apps are near-native and there is a potential for some major code reuse, provided your application is architected accordingly.

First, the event itself: Overall I am very impressed with the production. Knowing that this is Xamarin’s first conference, I expected something short of the events I am used to seeing put on by the likes of Apple, Google, and Microsoft. ...

In this post I’ll explain how you can work with the Sitefinity Configuration classes to retrieve and modify settings. We also will see how we can build these configuration classes ourselves, to store specific settings for our projects and maintain those settings through the Sitefinity UI.

Default configuration classes
Sitefinity features a powerful GUI Configuration editor. Through the configuration files you can control the behavior and the look of your website.

You can configure almost all features programmatically in your code, by using the Configuration Managers that will access and modify the information inside the .config files. These config files ...

Sometimes the built-in functionality of Sitefinity doesn't quite fit the needs of your projects. I recently was looking for a way to manipulate photos or images on my website.

These were my requirements:

  • Upload one image.
  • Scale it to different sizes using the query string.
  • If the image is too large for the container, crop the image

Sitefinity has the ability to add the ?size=x parameter inside your query string, so when you would request an image like this:

The image would 'scale' down to have a width of 100.

Problem
What if the image doesn't fit the placeholder?...

Today I am going to show you a simple way to bring a viewer to your web site back to the top of a page, with an animation, using jQuery.

Back to Top

You can download the source files, here.

To start make sure your page is loading jQuery, you can do this via a local file or use one of many hosted jQuery files. In this example we are linking to a file hosted by jQuery.com.


  <script src="http://code.jquery.com/jquery-latest.js"></script>  


The second piece of code you will need is a link with a little bit of JavaScript in it, shown below:




You can ...