Ultimate Guide to Mailing Lists, Part 2

Kirk — Wed, 02 Sep 2009 21:19:09 +0000

Welcome to Part 2 of a 4 part series on Mailing Lists for Web Developers.

In Part 1 we went over Mailing List Providers, and in Part 2 we’ll be discussing mailing list templates. In Part 3 we’ll integrate a custom mailing list into Wordpress. Finally we’ll do some tracking and statistics with our mailing list in Part 4.

Download the example template used in this tutorial here. (You may need to right-click Save Target As)

Keys to Building HTML Template

HTML/Minimal CSS Only
CSS must be within HTML (No linking elsewhere)
Tables Must be Used for Layout (No layout with CSS)
Not every reader allows images
Tracking can be done with embedded images ONLY
Variables Must be Set According to Mailer

As you can tell, our email templates are very limited. But even just with CSS, HTML, and Images, we can create a clean, pleasant template.

How an Email Template is Built

Email readers are funny things. While browsers have Javascript and Flash and interactivity, email is stuck in 2001. We have no Javascript functionality, very little CSS support, and no Flash interactivity whatsoever. We must be very careful about our design too, if we are to have it look consistent.

This is not the time to get insane with design. Simplicity is key with newsletter emails.

That being said, let’s look at the CSS code for our standard email newsletter template:

CSS Code

You’ll notice the CSS is put within the BODY tag, with an old fashioned STYLE tag. That’s as fancy as we can get with our CSS. So deal with it, and change the things you need to individually. As in within the TABLE.

Sylin’ Tables

Yes, you heard that right. Everything needs to be individually styled within the TABLES you create. So it’s a lot of rewriting code, and most things end up looking like this:

Email not displaying correctly?
View it in your browser.

This process can be greatly sped up by using something like Dreamweaver. Yes, this is one time where as a web developer you’ll appreciate all the work that’s gone into FRAMES in Dreamweaver. So take it while you can.
Images
As you might have noticed above, you need to upload your images to your webserver before you can use them within your template. I find it easiest to do this from within Wordpress. Just click the upload/insert image, and then select the files you would like to insert into your newsletter. Once it finishes uploading, copy the url to your IMG tag.

Of course, you’ll need to resize your files way down, to under whatever your design calls for. My design calls for main images at 306px x 170px, and side images at 188 x 300. Just make sure it fits.

Variables
If you look through the template, you’ll see there are place holders for template variables. Such as the mailing list name, the subscriber’s name, etc. Depending on the mailing list provider you use, you may need to change these codes. In Part 3 we’ll run through these, and pick out just how to set variables.
In case you missed it, you can download the example template here.

Ultimate Guide to Mailing Lists, Part 1
Kirk — Tue, 01 Sep 2009 20:32:37 +0000
Welcome to Part 1 of a 4 part series on Mailing Lists for Web Developers.
In Part 1 we’ll go over Mailing List Providers, in Part 2 we’ll discuss mailing list templates, and in Part 3 we’ll integrate a custom mailing list into Wordpress. Finally we’ll do some tracking and statistics with our mailing list in Part 4.
Today, we’ll run down the Open Source options for people trying to get a mailing list up and running on any platform. I use Wordpress for most of my work, and all of the following have great integration with Wordpress.
We have three options:
Free hosted provider – Such as feedburner. Robust tracking, but mailing list isn’t very customizable.

Commercial Hosted Provider – Such as Constant Contact. Robust tracking and mailing list, but paid monthly, hosted elsewhere.

Free Local Provider – Such as PHPList. Hosted on our webservers, robust tracking and mailing list, but a pain to set up and maintain.
Free Hosted Provider: FeedBurner

FeedBurner makes managing RSS feeds and gathering statistics very easy. Since being acquired by Google in 2007, they have also made email newsletter subscriptions available for free. They offer very robust statistics, so you can tell everything about your subscriber’s habits. However, you can only fill your newsletter with an RSS feed.
Pros:

Easy Setup
Robust Statistics
Integrate with Wordpress Immediately
Copy and Paste Level Difficulty

Cons:

Feed controlled by Google
User statistics owned by Google
Stuck with RSS feeds turned into mailing list contents
Not very robust for customization

Verdict: Best For Newbs
If you’re just starting out blogging, you need to have some way to keep in touch with your readers. Google’s feedburner makes it easy as possible. What you give up in control of your list you make up for with ease of use and robust tracking statistics. Get up and get running quickly with feedburner.
Commercial Hosted Provider: Constant Contact

Constant Contact is a good example of a commercial mailing list provider. Almost everything is taken care of for you, from template management to subscriber tracking, to Wordpress integration. It’s all there, and you get a level of quality only available for paid software.
Pros:

Immediate functionality
Robust Tracking
Strong Customization Features
Prebuilt Templates

Cons:

Not Free
Data Still hosted Elsewhere (Although you can back up locally all information)

Verdict: Best For Paid Clients
This is a great solution for paid clients. They just want functionality, robustness, and ease of use. If something goes wrong, your clients can call customer service instead of you. Giving clients a commercial product gets me out of the way and lets them take care of things for themselves.
Free Local Provider: PHPList w/ Custom Integration

Pros:

Open Source, Free
Robust; Powerful
Own all Information
Complete Control

Cons:

Difficult to use
(Possibly) Difficult to integrate
Steep learning curve

Verdict: Developers Only
Even though PHPList is easy to install, configuring it and setting it up for your own personal use can be a headache. There is documentation, but there are a thousand little steps that take time. It is, however, worth your time to learn the process, especially if you are a web developer. There are some things you can only do with PHPList as your base. This is my preferred mailer, but it is only because I have put so much time into learning the process of building a list within it.
Summing Up
We have 3 main options for a mailing list provider:

Feedburner – Free service from Google, not very customizable. Best for beginners.

Paid Option – Best for clients, sign them up, then let them do the work. Best for Businesses.

Open Source (PHPList) – Best for developers. Learn the process of building a mailing list at every step.
What’s next
In Part 2 we’ll discuss building our mailing list templates. These are built using basic CSS and HTML. Depending on our provider, we’ll have a few variables we can use, such as a subscriber’s name, custom tracking software, etc. It’s easy enough, but it’s not well documented. We’ll also discuss how to make our Mailing Lists readable from within web based mailers, something nobody seems to get right.

From PSD to Wordpress, Part 2
Kirk — Mon, 13 Jul 2009 22:15:48 +0000
When we last left off in part one, we had built a complete homepage from a PSD mockup. It loaded the latest content and looked very minimal. Next, we’ll build out the rest of the pages, ending up with a complete theme we can load from within Wordpress itself.
First, we’ll create our blog post layout in Photoshop. I decided to keep a minimalist approach, consistent with the homepage. We have a quote on the left sidebar, and on the right we’ll have a list of related links.

Step 1: Separating header and footer
This layout is easily mocked up in html. But you’ll notice, we’re reusing the header and footer parts from the homepage. As such, we should create a header.php file, and a footer.php file. This will make it easier to make changes to the header and footer in the future. If we decide to change the date, for instance, we only need to edit one file, as opposed to editing each individual template file. This is easily done, just cut and paste the code out like so:
header.php

<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>

()

Home

And the footer.php file, it’s the exact same:

is powered by zotheme by Kirk Kaiser

We make sure and include the @package and @subpackage so we can keep track of which files are which. The bloginfo(‘name’); call retrieves the blog name, and the wp_footer(); is included so plugins are made aware of the footer’s location.
As we’ve taken out the top and bottom of the index.php’s file, we’ll need to make sure it loads the header and footer. Easily enough, we just need to add get_header(); to the top, and get_footer(); to the bottom of our homepage. Easy enough.
Step 2: Laying Down the Content
With the header and the footer taken care of, we only need to work on the content now. The layout of content should look something like the following:

Truth and Lies

The dream and the dreamer

This is some lengthy intro text. And this is some filler

Latest Posts
The DreamThis is some filler.

The MythThis is some filler.

Save this template file, and load it in a web browser, you’ll get something like this, which is perfect:

Step 3: Doing the CSS hustle
Now it’s time to begin turning this html mockup into a great looking CSS masterpiece. First, create the code to define each and every div class and get the basic layout, then follow through with the nitty gritty fonts.
.widecol {
width: 946px;
margin: 0;
padding: 0;
}

h1 a {
text-align: left;
font-size: 90px;
margin: 3em 0 0.1em 180px;
letter-spacing: -0.06em;
color: #222;
}

h1 a:hover {
color: #E86AD3;
}

.widecol h1 {
color: #222;
font-size: 7em;
letter-spacing: -0.05em;
margin: 0.5em 0 0.5em 180px;
text-align: left;
}

#content h2 {
color: #222;
font-size: 3em;
letter-spacing: -0.05em;
margin: 1em 0 0.5em 180px;
text-align: left;
}

#content hr {
margin-top: 10px;
margin-bottom: 1em;
}

#dacontent {
position: relative;
width: 476px;
float: left;
clear: left;
margin: 0;
padding: 0 270px 0 180px;
font-size: 16px;
font-family: Palatino,Georgia,'Times New Roman',serif;
text-align: left;
line-height: 1.5em;
text-indent: 1em;
}

#dacontent strong {
font-size: 1.125em;
line-height: 1.125em;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
color: #353E34;
}

.inlineexcerpt {
margin: 1em 1em 1em -180px;
float: left;
position: relative;
width: 148px;
font-weight: bold;
line-height: 1.25em;
font-family: "Helvetica Nue", Helvetica, Arial, sans-serif;
font-size: 1.4em;
}
.introtext {
background-color: #e9e8e8;
color: #000000;
border: 1px solid #d6d5ce;
font-size: 4em;
height: 175px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
padding: 30px 10px 30px 10px;
}

.introtext p {
margin: 0;
padding: 0;
}

#sidebar {
margin: 1.5em 0em 1em -184px;
float: right;
position: relative;
width: 164px;
overflow: visible;
line-height: 1.25em;
font-family: "Helvetica Nue", Helvetica, Arial, sans-serif;
text-align: left;
}

#sidebar h2 {
font-size: 1.9em;
font-weight: bold;
margin: 1em 0;
}
#sidebar li {
line-height: 1.25em;
list-style-type: none;
margin-bottom: 0.5em;
width: 164px;
font-size: 1.25em;
}

#sidebar a {
font-size: 1.4em;
font-weight: bold;
color: #0080C0;
text-decoration: none;
}

All of this gets inserted into your style.css file. If you’re following along, building the site out with me, you can load the non-dynamic post.php, and see how things look so far. If you’re lucky, they’ll look just like the mock up. If not, the best utility for debugging CSS errors is Firebug. Install it, then right-click, and go to inspect element. You can tweak your design live, editing CSS in place and seeing how Firefox displays. If only IE was this easy to develop in.
Step 4: Getting Jiggy with Interaction
Getting interactive is almost too easy. We start a loop, then we fetch the title, content, excerpt, and sidebar. Three easy calls, the page is completely dynamic.

single.php

Step 5: Lather, Rinse, …Reuse?
Now that we’ve built out our main post, we can continue building a category.php file to display categories, and a page.php file to display pages. Easy enough, because we’ve done the hard part already.
category.php

ID, 'thumbnail', 'alt="' . $post->title . '"'); ?>

And finally, our page.php:

'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>

If you were really paying attention, you may have noticed an earlier get_sidebar(); call. We haven’t made a sidebar.php yet. Let’s do that:

Latest Posts

This code gets the latest ten posts, with a title and an excerpt from each one. It then displays it in a list.
Step 6: Packaging it all together
Rounding out our theme, we’ll end by creating a 404.php file, which is displayed when people try to go to a page that doesn’t exist. Here’s what I came up with:
404.php

Oh, Snap!

The page you were looking for isn't here. Woops!

Zip the files up, and upload to your server. Activate it, and hopefully, you’ll have a brand new working theme. All in a hundred million easy steps. If only everything was this (not really) easy!
Tomorrow I’ll upload a complete theme file, including all the PSD source files. You can have it and play with it as much as you like, it’ll be a completely free release. Until next time…

Converting PSD to Wordpress Theme
Kirk — Tue, 10 Feb 2009 22:52:29 +0000
Today we’ll be building a minimalist Wordpress theme from a Photoshop mock up. We’ll start from scratch, so we can really understand how themes work within Wordpress, and what a real life workflow looks like. There will even be some custom PHP function code. Yikes! The theme’s files are located here. Once we finish, we’ll move on to part 2, where we build out the rest of the site’s pages, and end up with a complete Wordpress theme.
Step 1 – Analyzing your PSD
First, we’ll take a look at the mockup we’ll be using.You’ll notice it doesn’t look very complicated.

That’s a Good Thing, because building a Wordpress theme from scratch involves a lot of steps. For our first theme, it’s much better to keep things simple, so we can focus on the individual steps. First, we’ll split our mock up into HTML, then we’ll add our CSS and images. Next, we’ll replace the static html code with dynamic Wordpress template code. Finally, we’ll break our code off into individual files, so our header, footer, and functions can be reused by every template we create.
I also like to get an idea for what portions of my mockup will be dynamic here. Greed, Power, and Avarice will be categories, and the rest is outlined below.

Step 2 – Breaking the PSD Down into HTML
We’ll start with the top portion of the PSD. I like to make the html mockup as easy as possible by breaking everything down into div’s.

So, we’ll create a wrapper div, because this layout wants to be centered. Then a header div, just to make things easier to edit later on. Finally, I’ll break the logo, site name, and main image into their own divs, and add an unordered list for the navigation. Also, we’ll create comments where we want dynamic Wordpress code to go later.

zothcorp theme

zothcorp

Home
About
Family
Team
Propaganda

Next, we’ll break down the body. It’s looks pretty straightforward, we’ll break down the two different post sizes with two different div classes.

When we create the code this time, we’ll be sure to include the same content we had in our mockup. We’re left with the following code.

Greed

Being A Winner

"There is a dog who knows more than me. His name is..."

Power

Finding Hidden Meanings

“People always said there was something funny about him, I ...”

Avarice

Tiny White Dies

“Nouns, kid. They folow you until rats...”

Finally, we’ll end with our footer. Our footer in the mockup is easy enough. We don’t even need to create a layout. All we need is a #footer wrapper and some filler text from our mockup. Then the final html to close the document up.

zothcorp is copyright with mega death enforcement by kirk “the gentle lion” kaiser

All our HTML is now cleanly laid out into one nice big HTML file. Next, we’ll export our images and measure distances, so we can get ready to transform our HTML into CSS’ified goodness. Because as is, the theme’s kinda ugly:

Step 3 – Slicing Images and Taking Measurements
Start by looking at the header. We’ll want to keep the logo as a separate file, and I prefer png files. Crop it down, keeping the whitespace around it to a minimum. This will be our first image exported. If you’re working in Photoshop, I like to Crop, followed by a File -> Save for Web and Devices. Then save your logo with the same filename you gave it in your mockup. In my case, it was ‘logo.png’.
Continue on, the next image we’ll export is the main image. In analyzing the layout, I decided this image wouldn’t be managed by Wordpress. Instead, I’ll change it myself manually on the web server. So I crop out the image using the same process as the logo, but write down the width of my image. It sets down the width for everything else below it, at 946px.
Next, we’ll slice the smaller images that make up our latest posts. We’ll cut them out, and take note of both their width and height. In this case, it’s 350px X 175px for the bigger “.firstcol” images, and 220px X 175px for the even smaller “.secondcol” images.
Finally, we measure the distances between our individual body elements. I like to use the Measure Tool in Photoshop to make this go really quickly. Doing so, I find out the distance from the HR tag and the Main Image is 5px. Repeat this for the rest of the main body elements. Because next, we’re going to make that layout have some CSS pizazz!

Step 4 – Adding CSS Magic to Our HTML Framework
Using our previous HTML mockup and our basic measurements, we can begin to fill out the CSS behind our HTML layout. Begin by creating a new CSS file and linking to it from within our previously created HTML layout. Or, make things really easy and just create a new CSS style right after the Title Tag like so:
zothcorp theme

You’ll see I already added the measurements we took in Step 3. These help structure our document and give us a rough look at how things are shaping up. Next, we can go back into Photoshop and begin changing our colors and fonts in our CSS to match our Photoshop mock ups. Use the Eyedropper Tool to pick up the exactly right color from your mockup.
While I’m creating CSS from a PSD, I like to keep things simple by testing only in Firefox. I find things flow better when focused on getting things working in one browser, and ignore errors in others until finished. A handy Firefox’s addon, Firebug, makes it easy to quickly change CSS and tweak little things while developing.
Converting this design to CSS is pretty straightforward, and the only thing that might give you a bit of trouble is the unordered list. It gave me a bit of trouble, so here’s the code for that, specifically, with some comments:
#sitenav {
width: 100%;
background-color:#333;
margin-top: 11px;
height: 30px;
}

#sitenav ul {
margin: 0; /* Necessary to keep our li's aligned */
padding: 0;
list-style-type: none;
text-align: left;
padding-bottom: 0px;
padding-top: 4px;
padding-left: 4px;
}

#sitenav li {
display: inline;
margin-left: -2px; /* Keeps the first line from showing up on the list */
}

#sitenav a, #sitenav a:visited {
padding: 5px 36px 4px 8px; /* Make a box around links for the mouseover to change the background */
color: white;
text-decoration: none;
font-size: 1.8em;
border-right: 1px solid #fff;
}

#sitenav a:hover {
background-color: #222;
}

After a bit of work, your CSS should give you a layout that looks a lot like your mockup. So much so, in fact that you might not be able to tell a difference between the mockup and the final site:

Step 5 – From Static to Dynamic – Baby Steps
Finally, it’s time to start converting all our work to Wordpress. Begin by creating a new folder. Within it, we’ll create two new files. One named “index.php”, and one name “style.css”. This is the beginning of our new theme. Copy and paste your CSS file created earlier into “style.css”. Do the same with your HTML file, into the “index.php” file.
Every Wordpress Theme must identify itself, and ours is no different. Open your newly created “style.css” file, and add the following at the beginning:
/*
Theme Name: zothcorp unloaded
Theme URI: http://zothcorp.com
Description: zothcorp minimalist theme
Version: 1.0
Author: Kirk Kaiser
Author URI: http://www.zothcorp.com/
*/

This code shows up when we browse to it within Wordpress. If you’re working on a local copy of Wordpress, go ahead and copy this folder to the themes/ directory. Browse to your themes within the Wordpress Admin, and you should see your new theme. Set it as your default.
Hoorah, you should see your theme looking perfect now. Only problem is, it doesn’t do anything. Yet.
Step 6 – From Static to Dynamic – Basic PHP Hooks
Next, we’ll begin to add the dynamic features we decided on earlier. We’ll begin with the head of index.php, where the CSS file is loaded. If you finished the previous step and didn’t see a perfect site, your CSS file might not have loaded correctly. Let’s fix that, and add our basic header hooks. Open up your index.php file, and replace your head with the following:
< ?php
/**
* @package WordPress
* @subpackage zothcorp_theme
*/?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>

< ?php wp_title('«', true, 'right'); ?> < ?php bloginfo('name'); ?>

< ?php wp_get_archives('type=monthly&format=link'); ?>
< ?php //comments_popup_script(); // off by default ?>
< ?php wp_head(); ?>

The beginning of this code is mostly default Wordpress stuff you just put in. You’ll notice the only things that really matter to us in the Head are the Title tag, that fetches the Wordpress Blog post name, and the Stylesheet tag, that fetches the stylesheet url.
Every Wordpress head is supposed to include the wp_head(); functon, so plugins can hook within it.
Alright, now to the meat and potatoes, the code that matters. Replace the following code within index.php:

< ?php bloginfo('name'); ?>

Home

< ?php wp_list_pages('title_li='); ?>

You’ll see we don’t change much. The logo stays the same, the site name becomes dynamic. It’s wrapped in a link, and we get the blog link from the tag. Then we get our blog name from the tag. Easy enough!
The main image stays the same, and we add a homepage link to the unordered list. Then we call , and it gives us a list of all the pages currently on the site. The ‘title_li=’ part is important, because otherwise Wordpress gives us a list with a title. Try stripping it out to see what I mean.
Save your changes, and our Wordpress site has become just a little bit more dynamic. All we need to add now is the content and the footer. So much closer than at the beginning!

Step 7 – From Static to Dynamic – Entering The Loop
Next, we’re going to fetch Wordpress categories in our main body. The code for this is simple and straightforward. In our index.php file, scroll to the content. Change the following code:

< ?php $my_query = new WP_Query('category_name=greed&showposts=1'); /* Get the Greed Category's Most Recent Post */
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

< ?php the_category(' '); ?>

< ?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->title . '"'); ?>
< ?php the_title(); ?>

< ?php the_excerpt(); ?>

< ?php endwhile; ?>

< ?php $my_query = new WP_Query('category_name=power&showposts=1'); /* Get the Power Category's Most Recent Post */
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

< ?php the_category(' '); ?>

< ?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->title . '"'); ?>
< ?php the_title(); ?>

< ?php the_excerpt(); ?>

< ?php endwhile; ?>

< ?php $my_query = new WP_Query('category_name=avarice&showposts=1'); /* Get the Avarice Category's Most Recent Post */
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

< ?php the_category(' '); ?>

< ?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->title . '"'); ?>
< ?php the_title(); ?>

< ?php the_excerpt(); ?>

< ?php endwhile; ?>

You’ll notice we have a bunch more PHP code in the Content section. That’s because we’ve got three loops, each getting one post from their perspective category.
The loop is how Wordpress shows posts. It takes an argument, and spits out posts, until all the posts are finished from the Query.
Reading the comments within the code, we can see how the WP_Query function gets the latest post from a specific category each time. We can then call the functions get_permalink(), the_title(), get_permalink(), and the_excerpt(); within each indidual loop.
One custom tag you may have noticed is the dp_attachment_image(); tag. That’s a custom function we’re going to write ourselves, after we finish the footer. Yes!
Step 8 – From Static to Dynamic – Finish Him!
Now we’re at the bottom of our page, the footer. The code here is very basic. There’s really not even a step involved. Just replace:

< ?php bloginfo('name'); ?> is copyright with mega death enforcement by kirk "the gentle lion" kaiser

< ?php wp_footer(); ?>

Take a look at what you’ve done. The site is all ready, and hopefully by now you’re ready to populate your site. Create your custom pages, posts, and categories within Wordpress. Remember, the site template uses the wp_excerpt(); function, so you’ll need to be sure and leave an excerpt for every post that makes it on the front page.
Step 9 – From Static to Dynamic – Custom Image Code
Create a new file within your template, named “functions.php”. This will hold our custom code, and be accessible from any template file we’ve got. Copy and paste the following code into it:
< ?php
/**
* @package WordPress
* @subpackage zothcorp_theme
*/

# Displays image attachment
function dp_attachment_image($postid=0, $size='thumbnail', $attributes='') {
if ($postid<1) $postid = get_the_ID();
if ($images = get_children(array(
'post_parent' => $postid,
'post_type' => 'attachment',
'numberposts' => 1,
'post_mime_type' => 'image',)))
foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, $size);
?>" < ?php echo $attributes; ?> />< ?php
}
}
?>

Our function checks our post for any attached images. It then spits out nicely formatted images according to the Wordpress settings we have for all thumbnail images. All we need to do now is change our Wordpress thumbnail settings to 375px X 175px. Then we can call this function, and have nice thumbnails for our front page automagically generated. Woohoo!
Step 10 – Tweak your code, and Keep Building
We’ve come a long way with our code. We’ve gone through a bunch of steps and come out alive. My live Wordpress site now looks like this:

Not bad, but there are flaws. The unordered list doesn’t quite look right in Safari or in Internet Explorer. A developer’s job is never over, but it’s a good time to take a step back. In Part 2, we’ll tackle CSS debugging, and putting our files into individual files, so we can show more than one page.
In the mean time, take a walk, get outside. It’s too easy to spend all your time in front of the computer, coding. The theme’s files are located here.

How I Built SoRelated.com In One Month
Kirk — Fri, 02 Jan 2009 17:51:24 +0000
Building software has always been difficult. You’ve got to build something without being able to see, touch, or taste it. Thanks to Open Source Software, however, it is getting a whole lot less painful.
Consider my latest project, SoRelated.com. It is a web application designed to help families keep in touch. A user joins the site, creates a Family, and then adds their relatives. They then have private conversations and post images to one another in their family. It is a private family blog basically, and it was written completely from scratch in under 1 month. To put the server live, it only cost 20 bucks for a Slicehost Slice.
Because I was able to leverage so many Open Source projects like Django, Nginx, PostgreSQL, Ubuntu and Pinax, the development of this project has gone by in a blur. The majority of work has been spent in developing the feel of the site, and not in finding invisible little bugs.
As a matter of fact, with Instant Django, I was able to get a working site up and running in a couple of hours. That’s incredible, considering I didn’t know Python or Django beforehand. The documentation on Django has been awesome, and there’s even a free book online.
After a few weeks of toying around with Instant Django, I decided it was time to start thinking about putting my toy project somewhere. Looking around at webhosts, I realized deploying Django would be a bit more complicated than, say, a Wordpress blog. You’ve really got to have shell access to set up a fast site.
So I decided on a completely custom server.
It looked very difficult to build a server, but the execution has not been hard at all. The Open Source Community really provides great documentation, and Slicehost provides great articles on setting up your web server, mail server, SQL server, SVN server, and every other server you never knew you needed until you build a web app from the ground up.
Granted, I haven’t created Facebook or even Reddit or anything remotely complicated, but I have learned infinitely more than I knew at the beginning.
The three biggest lessons I’ve learned from developing SoRelated:
CODING BEATS READING
It is always better to code and experiment than it is to read and theorize. Coding solves problems, or at the very least creates new ones to fix. A broken application is better than a great application in your head. All the things that seem like they’ll be difficult in your head end up being easy, and all the things you didn’t think about are hard.
START ITERATING IMMEDIATELY

Take the extra time at the beginning to make everything modular and separate. Then create one piece, followed by the next. With Django, this process is especially easy. You create your models first, then define your views, then define your templates. A streamlined way to force yourself to stay neat.
STAY SIMPLE
There are a million little things that would be cool to include in any program. Don’t include them. They’ll only make your life miserable, and add to your code complexity. Code complexity is the worse thing in the world. Keep your code clean and simple, and stay the hell away from “smart” code. “Smart” code breaks when something nontrivial changes.
Finally, I’d like to close with a little soap boxing. With all the economic doom and gloom it’s easy to get apathetic and decide things are only going to get worse. A lot of big companies and big government have proved inefficient at solving real problems. But, they are leaving open a huge opportunity for small scale development and problem solving. I encourage you to personally evaluate what you can do to improve your world without requiring their help…
Because they might not be there when you need them most.
Thanks!
- Kirk

Traveling Forever Blog » Programming

Ultimate Guide to Mailing Lists, Part 2

Keys to Building HTML Template

How an Email Template is Built

CSS Code

Sylin’ Tables

Images

Variables

Ultimate Guide to Mailing Lists, Part 1

Free Hosted Provider: FeedBurner

Commercial Hosted Provider: Constant Contact

Free Local Provider: PHPList w/ Custom Integration

Summing Up

What’s next

From PSD to Wordpress, Part 2

Step 1: Separating header and footer

Step 2: Laying Down the Content

Truth and Lies

Latest Posts

Step 3: Doing the CSS hustle

Step 4: Getting Jiggy with Interaction

Step 5: Lather, Rinse, …Reuse?

Latest Posts

Step 6: Packaging it all together

Oh, Snap!

Converting PSD to Wordpress Theme

Step 1 – Analyzing your PSD

Step 2 – Breaking the PSD Down into HTML

Step 3 – Slicing Images and Taking Measurements

Step 4 – Adding CSS Magic to Our HTML Framework

Step 5 – From Static to Dynamic – Baby Steps

Step 6 – From Static to Dynamic – Basic PHP Hooks

Step 7 – From Static to Dynamic – Entering The Loop

Step 8 – From Static to Dynamic – Finish Him!

Step 9 – From Static to Dynamic – Custom Image Code

Step 10 – Tweak your code, and Keep Building

How I Built SoRelated.com In One Month