Place the following in your model:

[DisplayFormat(ApplyFormatInEditMode = true,
DataFormatString = "{0:HH:mm}")]
[RegularExpression(@"^(?:0?[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$", ErrorMessage = "Invalid time.")]
public DateTime? YourDateTime { get; set; }

This will perform the validation for 24 hour time in the format HH:mm

A big thanks to Markus Wulftange (Gumbo on Stack Overflow) for the tip. Here is his original answer he posted.

The benefits of being able to quickly change the colour scheme by replacing a few variables, add cross browser vendor prefixed CSS in one line and to quickly create grids tailored to your project far out weigh the portability of standard CSS.

There are other dynamic CSS languages like SASS and Stylus to name a few. My experience so far has only be of LESS, I can’t comment if one is better than the other. I recommend you research which you prefer for yourself. The reason I settled on LESS was right from the beginning it has been platform independent with many ways of implementing regardless of platform (OSX, Windows or Linux) and the other factor of it being very close in syntax to standard CSS.

To use LESS the files need to be processed to standard CSS to use in your web project. This can be done in a multitude of ways:

• Via referencing a JavaScript file
• A library as part of a build process
• An application to process the LESS files independent of programming language
• Using a plugin in your IDE

Using LESS.js to compile your LESS

I can’t say I’ve ever used this method. I’m not sure if you could use it in development, as I believe it’s not cross browser supported. For a guide in using the LESS.js file I’d recommend going to the LESSCSS.org web site and following the guide here.

Implementing LESS ASP.Net as part of your build process

In my day job I develop a web application using ASP.Net MVC 3. The way I implement LESS in ASP.Net is via using the package SquishIt. Grab it from the NuGet Gallery here. The great thing about SquishIt is not only does it process your LESS files (plus CoffeeScript) it will minify, and combine the output (even in a cache busting way). It’s implementation is also extremely easy (and it works with both MVC and WinForm projects). Check out the developer Justin’s guide here on implementing SquishIt

SquishIt can also be used to reference your JavaScript files both minifying and combining. It can reference external CDN files e.g. for jQuery etc and local files in the same call, using the local file for development and the external file when going live. It will compile you LESS files on save so all that is needed to see your changes in the browser when developing locally is a refresh.

Using the plugin in Visual Studio 2010 Mindscape Web Workbench

There is a plugin for Visual Studio that will add support for LESS syntax and highlighting, it will also process your LESS files to CSS. This would seem to be a great way to get started using LESS in your project without the need for much setup, but unfortunately I can’t recommend it. The plugin would grind my copy of Visual Studio to a halt, making it virtually impossible to develop at any speed. The other nail in the coffin is the manual need to configure and minify and combine your CSS which is an essential part of web development these days.

Using an application to process LESS

By far the the easiest way to implement LESS processing regardless of platform is to use an application to convert the LESS files into CSS, either on save of the file or by manually clicking a process button. On a Mac there are a multitude of options but by far my favourite is the application CodeKit. It allows importing from other folders, processing of many other CSS dynamic languages and the minification and combining of files. Other applications of note are SimpLESS which is multi-platform, and LESS app for Mac by the same developer as CodeKit. If you are just starting out I’d recommend CodeKit to start with, it’s easier to setup and independent of the language your developing on also it will notify you of errors when compiling the LESS to CSS. CodeKit isn’t free but in my opinion is worth every cent.

Getting Started quickly with LESS

To get started quickly with LESS you can start with some great frameworks so you won’t need to write your own mixins. The rapid development kick starter Twitter’s Bootstrap uses LESS and is a great learning tool to see what’s achievable. I’d recommend checking out the nicely structured LESS files of Twitter Bootstrap. Other frameworks of mention are Elements and my own set of mixins LESS Mixing.

Further Reading

LESS CSS

Tuts+ Get into LESS

Learn LESS

Apps on Mac for CSS pre-processing

Mindscape Web Workbench

SquishIt on github

• ASP.Net MVC 3
• LESS CSS (pre-compiled CSS)
• Azure
• PHP
• CodeIgniter PHP framework
• CoffeeScript
• Git (version control)
• iOS development using Objective C with Xcode
• Facebook Open Graph and PHP SDK

The web application I’m building at SpeEDI Software is all built using Microsoft technologies. It’s a MVC 3 application that will be deployed on Azure web hosting. This site takes advantage of Twitter Bootstrap and LESS. Can’t say too much more, but it’s coming along at a good pace.

Vote Daily Deals is a web application I built in my spare time (what little I have) on the CodeIgniter framework. The application takes advantage of the Twitter Bootstrap framework that allowed me to focus my effort on the PHP and CoffeeScript and not on the look and feel. The site allows users to vote for their favourite daily deals site in New Zealand. Users have the choice of logging in using their Facebook account, upon voting for a site and entry is added to the users Facebook timeline notifying other users about the site.

After learning all these great languages/technologies/frameworks some further blog posts will have to be done to share what I’ve learned.

Ever had to build a web page for a picky web designer? One that will rake you over the coals for little things not matching their design?

I have plenty of times… To save all the frustration and make sure I get it right first time I use one of my favorite tools.

The tool I have depended on in the past is the great Firefox plugin Pixel Perfect. It allows you to overlay an image over top of the site your developing in the browser. This is great to make sure the page your styling matches the design.

If you use Google Chrome for development, there is a newly developed extension called Perfect Pixel. This has a lot of the same functionality as Pixel Perfect. Great if you’ve moved from Firefox to Chrome for developing like myself.

Try it out for yourself and you will quickly see how close (or far) you are from making the site your working on matches the design.

Pixel Perfect for Mozilla Firefox

Perfect Pixel for Google Chrome

I recently built a WordPress site for some friends. Being very busy people they were struggling to use the sites theme for galleries (I was struggling too with it). Being iPhone users they had no problem uploading photos of their clients cars to their business Facebook Page.

To help them out and get their galleries on display on their new website I used a great plugin for WordPress called Facebook Page Photo Gallery. It allows you to add galleries from Facebook Pages with a simple short code on the page with the gallery ID. It formats the thumbs nicely and even opens the images in a ‘fancy box’ light box.

Great way to maximize the painful time consuming task of uploading images to your site.

Get the plugin from here:
WordPress Plugin page
Developers Plugin Page

Lets start with Facebook. There are a couple of items that will need to be added into the header.

Step 1: Add the following meta tags (if they don’t already exist).

<meta name="title" content="This is the Title">
<meta name="description" content="This is a description">
<meta name="keywords" content="keywords here">

Step 2: Add the Facebook share script

<script src="//static.ak.fbcdn.net/connect.php/js/FB.Share"></script>

Step 3: Add the following to your custom Facebook share link

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php" target="_blank" class="socialLinkFacebook" title="Facebook">Facebook</a>

For Twitter follow these steps.

Step 1: Create a custom Twitter tweet link

<a href="https://twitter.com/share?url=mydomain.com" class="socialLinkTwitter" title="Twitter" target="_blank">Twitter</a>

Step 2: Add Javascript window popup click handler function (you’ll need jQuery linked already for this javascript)

$('.socialLinkTwitter').click(function (e) {
        e.preventDefault();
        var sTwitterShare = $(this).attr('href');
window.open(sTwitterShare,'Share','width=550,height=450');
    });

From that article I found my favourite new flight comparison tool, SkyScanner and the best part is it’s in NZ dollars.

Web Jet have a nice monthly deal finder search tool, choose your destination and it can tell you the best price for the next 6 months. http://www.webjet.co.nz/

Here are a few of my own tips for Air New Zealand:

Tip 1: For Air New Zealand flyers if you’ve flown in the last 7 days make sure you enter your details on https://www.airpointsluckyseven.co.nz/ and keep checking back everyday at midday to see if you’ve won.

Tip 2: Earn Air New Zealand airpoints the easy way by getting a Go Fly Kiwibank mastercard, spend over 15k on it and you’ll also get free Koru lounge passes. http://www.kiwibank.co.nz/personal-banking/credit-cards/gofly/ There are also other credit cards that can help you wing your way overseas.

Tip 3: With the above credit card every thursday, they have a simple trivia competition for air-points as well as special grab a seat deals for Go Fly Kiwibank customers https://www.kiwibank.co.nz/go-fly-promotion/

Tip 4: Combine your Fly Buys to your Air New Zealand air points, be aware that the conversion rate is pretty low though 1 Airpoints Dollar for every 6.25 Fly Buys Points. https://www.flybuys.co.nz/Airpoints/Pages/Default.aspx

Tip 5:  Sign up for Colmar Brunton surveys to get more Fly Buys points http://www.flybuyspromotions.co.nz/July07ColmarBrunton/CB.html. Every week or so I get emails to complete surveys for Fly Buys points.

I did a few quick searches of Google and I came across this little helpful plugin called the “Nightly Tester Tools” made to help developers using the latest builds still be able to test and develop plugins. This will allow any disabled plugin to work regardless if it’s compatible or not.

Simply go to Tools > Nightly Tester Tools > Force Addon Compatibility to enable your out of date plugins.

Nivo Slider

http://nivo.dev7studios.com/

I’m currently using Nivo slider on this website for the home page. It’s currently pulling in the Featured Post image  using a custom function for my WordPress theme. Nivo slider has a great set of animation effects and has a number of options. If you want a no hassle installation for WordPress Dev7Studios offer a paid plugin as well. There are even a number of other platforms already supported with Drupal, Joomla and Sitefinity.

What I like about Nivo slider is the different types of transitions rather than just the standard slide in from left to right/ top to bottom.   I’m using “sliceDown” on my own site, where it segments up the image and makes each segment slide down, a unique different effect to most other sliders around. Check out the demo page here to see the prebuilt themes too.

Points of difference:

• Unique transitions to most other sliders – slice down/up, fold, box rain/random
• Plugins already available for popular CMS (WordPress, Joomla & Drupal)
• Nice looking prebuilt themes

jQuery Cycle

http://jquery.malsup.com/cycle/

This great plugin has the most effects of all the sliders here, it also has the honor of being the oldest project of the round up. Very highly configurable, huge number of options and can be paused, progressed etc from a JavaScript call. I’ve used it on multiple projects and combined with jQuery easing the transition effects can be very smooth and extended (ease in, bounce etc).

Points of difference:

• Huge number of effects
• Mature project, has been around since 2007
• Large number of demos available on the site

Orbit

http://www.zurb.com/playground/orbit-jquery-image-slider

Orbit is a new comer to the group that uses CSS3 to keep the size of the library down to a mere 4kb. It also has a nice loading animation/pause button.

Points of difference:

• Loading/countdown animation
• Very small at 4kb
• Compatibility: IE7+, FF 3.5+, Chrome, Safari

Points of difference:

• A move slide quantity option (killer feature)
• Ticker option to have your images/slides constantly scrolling
• Great call back functions, next, previous, before and after.

1. The page weight is usually smaller, and the site doesn’t require multiple http requests (it shouldn’t anyway if your using image sprites)
2. The elements can easily grow and shrink to fit content without having to resort to techniques like “sliding doors”
3. Less time is spent exporting and optimising images for use in the CSS

To visually create the styling without resorting to lots of painful CSS properties in my chosen HTML/CSS editor I use the following web sites to quickly create the look I want or that I’m trying to mimic from provided designs.

Layer Styles

Layer Styles is a great tool if your familiar (or even if your not) of Photoshop effects. It mimics the same panel interface as Photoshop with the check box and slider panes. Once your happy with the look of the styling you’ve created simply copy the CSS from the code pane on the bottom of the page. There is one caveat of the Layer Styles, you will need to add the vendor prefixes to your CSS. To save you the hassle simply copy and paste your CSS into the tool below.

Prefix my CSS

Prefix my CSS will add the vendors (Mozilla, Opera, Webkit) prefixes to your styling for what ever browser your’ve been creating your styles for. Easy as that.

Ultimate CSS gradient creator

If your used to Photoshops gradient effect tool you’ll love the Ultimate CSS gradient creator. It allows you to place multiple gradient points along the bar and adjust to your hearts content. Alternatively you can just grab one of the pre-generated presets and edit that. The CSS produced is already prefixed and also there are fall backs for older browsers and IE.

jsFiddle

jsFiddle is a front end developers playground. The page is divided into 4 panes where you can quickly add your HTML, CSS and JavaScript. Simply hit the run button and you’ll see the results of your pasted in CSS of the above tools. One of the killer features I love about jsFiddle is the ability to create short codes to your mockup so you can quickly test cross browser simply by copying the short code address into the address bar. There are a ton more features on jsFiddle enough to write an entire article or two. Definitely worth checking out.