Download from WordPress.org

What does this plugin do?

Winning.

Install this plugin and four things will happen:

1. You will replace the boring Hello Dolly quote in the admin section of WordPress with a much less boring random quote from Charlie Sheen.
2. You will have a widget that you can add to any sidebar that displays a quote from charlie sheen.
3. You will have the ability to add a random quote from Charlie Sheen to any post by using the short code [charlie sheen]
4. Your blog will have Tiger blood and Adonis DNA.

The way you render a partial view in Razor is by making the following call:

@Html.Partial("{ViewName}")

When you make this call, MVC3′s default Razor view engine looks for the view you specified in the following default locations:

~/Views/{1}/{0}.cshtml
~/Views/{1}/{0}.vbhtml
~/Views/Shared/{0}.cshtml
~/Views/Shared/{0}.vbhtml

Note that {0} is the view name you specified and {1} is the Controller name (if specified).

If it does not find a view matching the name you specified in any of those directories, guess what? Yup, Yellow Screen of Death.

Well what if you wanted to store all of your partial views in a “Partials” directory within the “Views/Shared” folder? You could do this without a problem as long as you called your partial views from now on by prepending the view name with “Partials/”, like so:

@Html.Partial("Partials/{ViewName}")

This is of course perfectly OK, but what if you move your partial views in the future? You would then have to do a search and replace of code throughout your application.

A Better solution:

First, create your own view engine as a class in your Models directory, inheriting from the “RazorViewEngine” base class, store your view locations in a string array, and add your locations to the base PartialViewLocationFormats in your constructor like so:

public class MyViewEngine : RazorViewEngine
{

    private static string[] NewPartialViewFormats = new[] {
        "~/Views/{1}/Partials/{0}.cshtml",
        "~/Views/Shared/Partials/{0}.cshtml"
    };

    public MyViewEngine ()
    {
        base.PartialViewLocationFormats = base.PartialViewLocationFormats.Union(NewPartialViewFormats).ToArray();
    }

}

Then, in your global.asax file, in you Application_Start() method, add your view engine to the applications ViewEngines collection like so:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    RegisterRoutes(RouteTable.Routes);
    ViewEngines.Engines.Add(new MyViewEngine());
}

Now, when you call a partial view in Razor with @Html.Partial(…), the locations you designated will be searched in addition to the default locations.

My role in this project was to take a design which was provided by a separate agency and cut it into a WordPress theme, then assist in deploying the site to the clients selected host. All content throughout the site is fully editable via the WordPress CMS.

In this project, I was given a design which I then converted it into a WordPress theme which includes:

• Ability to create client logins and customizable client pages
• Ability to upload client logos into the home page scroller
• Multi-Column WordPress templates
• Slightly modified look to the Blog section
• Expandable site footer with fully editable content using WordPress widgets
• Editable quotes section

Once the site was created, the site was migrated seamlessly to a new host without any loss in SEO page rankings. All old URLs were re-directed to appropriate new pages and Google Analytics and Webmaster Tools were both integrated into the site as well.

Download Source Code

View a Demo

Horizontal navigation menus are one of the (if not THE) most common user interface elements used across the web. They provide an easy way for a user to both navigate a web site as well as quickly determine, at a glance, what section of the web site they are currently on.

My Requirements

• Must degrade gracefully when style sheets are turned off
• Must be fully accessible
• Must validate to W3C standard
• Must be light-weight and simple
• Must provide ability to change colors without having to modify images
• Must be able to turn a tab on by simply adding a class

The code below generates a customizable horizontal, tabbed menu with a set height of 75 pixels. If you want to change the height of the menu you will have to create new images and also modify the height settings in the CSS code. With that in mind, I have included the Photoshop file I used to create the menu in the zipped archive for you to reference.

I have tested this in Firefox (2,3,3.5), IE7, IE8, Safari, Opera, and Chrome and it looks good across all of them (if you experience an issue in another browser, please let me know by commenting on this post).

The Plan

The HTML Code

<ul id="LATabs">
	<li class="current_page_item"><a href="" title="Home"><span class="tLeft"></span><span class="tMid">Home</span><span class="tRight"></span></a></li>
	<li><a href="" title="Menu Item 1"><span class="tLeft"></span><span class="tMid">Menu Item 1</span><span class="tRight"></span></a></li>
	<li><a href="" title="Menu Item 2"><span class="tLeft"></span><span class="tMid">Menu Item 2</span><span class="tRight"></span></a></li>
</ul>

The CSS Code

ul#LATabs{
	float:left;
	margin: 0;
	padding:0;
	list-style-type: none;
	width:100%;
	height:75px;
	background: #b71e1a url(bg.gif) center center repeat-x;
	font: 24px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #fff;
	}

ul#LATabs li{
	float:left;
	padding: 0;
	height: 75px;
	margin: 0 10px;
	}

ul#LATabs a{color:#fff;text-decoration: none;cursor: pointer;}
ul#LATabs a:hover{color: #e3e3e3;}

ul#LATabs .current_page_item a{color: #b71e1a;}
ul#LATabs .current_page_item a:hover{color: #b71e1a;}

ul#LATabs span{float:left;height: 75px;}
ul#LATabs .tLeft, ul#LATabs .tRight{width:8px;}
ul#LATabs .tMid{padding: 23px 15px 0px 15px;}

ul#LATabs .current_page_item .tLeft{
	background-image: url(tab_01.png);
	background-position: top left;
	background-repeat: no-repeat;
}
ul#LATabs .current_page_item .tMid{
	background-image: url(tab_02.png);
	background-position: top left;
	background-repeat: repeat-x;
}
ul#LATabs .current_page_item .tRight{
	background-image: url(tab_03.png);
	background-position: top left;
	background-repeat: no-repeat;
}

The 4 Tiny Images

The End Result

Download Source Code

View a Demo

I recently needed to backup a folder on my iMac onto a DVD-R disc. The problem was, every time I inserted a blank DVD-R disc into my iMac Super Drive, the Disk Utility application would pop up and only give me options to burn ISO images onto the disc. No option to just burn regular files. When I opened up my Finder window, the drive wouldn’t show up there either.

Well after about 2 hours of digging I found the solution…and it’s about as dumb as it gets.

1) Click the little apple icon at the top left of your screen
2) Click “System Preferences”
3) In the “Hardware” section, click “CDs & DVDs
4) Set the “When you insert a blank DVD:” option to “Ask What to Do”

Now eject your disc (if you are having trouble ejecting your disc…don’t worry…I did too…go into your applications folder in your Finder window, click “Utilities”, open up “Disk Utility”, and eject the disc from there).

When you re-insert your disc, your Mac will ask you what you want to do. Click “Open Finder”. At this point, my Finder window did NOT automatically open. If yours doesn’t either, just open Finder the old fashioned way. Once you open your Finder window you will now see your blank DVD listed in the “Places” section. Once it’s there, simply drag the files you want to burn right onto the drive.

When you’re done selecting your files, click on the little Danger symbol next to the DVD-R drive in the Finder window, follow the prompts to burn your disc, and your done!

In this project, I first consulted with the designer as well as the client to assure that the design would allow for full content management capabilities. I then took the design and developed a combination FTP + CMS method, using WordPress, that would give Amy both the power of a full content management system for the text-based content in the site as well as the ability to have complete control over the images within her different galleries.

The new site is built on WordPress and utilizes PHP, CSS, XHTML, and the jQuery framework. WordPress provides the attorneys with a simple CMS which allows them to update content on the site. One attorney in the firm was also provided with a blog that he uses to publish his publications online to further promote the law firms services.

For this site, I also developed an Ajax contact form that utilizes Captcha in order to prevent spam bots from automatically submitting the contact form and inundating the attorneys with spam.

In addition to site design and CMS implementation, I also updated the site to conform to SEO standards, focusing on a set of keywords and as a result the site has a first page ranking on Google (organic search results) for the popular keyword phrase “Boston Law Firm” (currently #2-#3 overall).

I am also providing the firm with guidance on their search engine marketing strategy, including keyword selection, initial campaign setup in Google Adwords, and campaign maintenance.

Check out Google Charts.

This very easy to use and powerful API allows you to include an assortment of charts on your web site. All you need to do is set the src of an <img> tag to the URL for the Google Chart API and then add a few parameters to the URL string. Once everything is set, voila, the chart appears.

Sample Code

States I Have Visited

<div style="text-align:center;"><img src="http://chart.apis.google.com/chart?chs=440x220&amp;chd=s:_&amp;cht=t&amp;chtm=usa&amp;chf=bg,s,EAF7FE&amp;chco=FFFFFF,0000FF&amp;chld=RIMACTNYVTNHMEILCAFLPAGAALNVLASD&amp;chd=t:0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0" border="1" alt="" width="440" alt="States I Have Visited" /></div>

<div style="text-align:center;"><img src="http://chart.apis.google.com/chart?chs=440x200&amp;cht=p3&amp;chco=0000FF&amp;chd=t:16,24&amp;chl=Visited|Remaining&amp;chdlp=t" border="1" alt="" width="440" align="center" alt="Percentage of States I Have Visited" /></div></blockquote>

Web Project Life Cycle

Web Project Process Diagram

Working on different web teams within various organizations throughout the years, a common issue that I’ve often encountered was the lack of process when it came to designing and developing web sites. Virtually everywhere that I have worked there has not been a standard, documented method or strategy that the “web team” could use to guide a project from start to completion. Thankfully, in one of my most recent roles, my team and I were tasked with doing just that, creating a process that made sense and that we could all use collectively to get our work done.

We called our process “The 4 D’s”

1. Definition
2. Design
3. Development
4. Deployment
5. Support (OK…not a D…but you get the picture)

The documents attached to this post are what we ultimately ended up with. A lot of what we created is based on common methods and best practices in project management and software development….so don’t expect any of this to be ground breaking stuff. We found that having a process like this in place kept projects well organized, kept all team members fully informed of client expectations, and minimized common issues like scope-creep, missed deadlines, blown budgets, and dissatisfied clients. Every member of the web team as well as our external clients were involved in creating this process, so at the end of the day everyone was comfortable with working within it.

Note that it is crucial to work very closely with your clients in the beginning stages of the development process (Definition/Design). The client should expect to deliver and sign off on clear business requirements (a member of the web team would work with the client to create the necessary documents) and also be readily available to answer any questions and sign off on milestones throughout the process. As development of the web site/application progresses, the client should be given periodic status updates. The bottom line is to keep an open line of communication between the web team and the client. In doing so, the chances of delivering a successful product will be greatly improved.

This process is intended as a general guideline in developing web sites and applications and is not meant to be followed rigidly. The scope and complexity of every project is different and as is the case, the degree of process/documentation required should vary depending on the project. Also, some clients require more visibility into projects than others so the level of detail in documentation  may vary as well.

In short, don’t box yourself in with too much process, do what makes sense for your projects, your clients, and your organization.