Book Review: Jason Beaird's "The Principles of Beautiful Web Design"

Rating: 4 out of 5

I consider myself knowledgeable in generating the CSS and xHTML code needed to get a design from paper to the web. What this book does is attack the area of development in which I need help with: creating the design. This book teaches the basics of design principle in Layout and Composition, Color, Texture, Typography, and Imagery. Like all SitePoint books, The Principles of Beautiful Web Design walks you through a project from beginning (talking to a client) to end (polished web design) in order to provide a real world example of the material being taught.

The most informative chapters, for me, in this book were: Color and Typography. The chapter on Color goes over the basics of color psychology, color theory, and creating a color palette. There were a few good resources identified in this chapter including: the Color Scheme Generator from WellStyled and Jonathan Snook's Colour Contrast Checker. The chapter on Typography goes over the anatomy of a letterform, typeface distinctions, and choosing the right fonts. One of the most helpful bits in this chapter was a web resource: Marko Dugonji's Typetester, which allows you to compare a variety of text options side-by-side to help you choose the right font and styling for your web site.

This is a good resource for developers, like myself, who want to learn more about the design world (at least how it applies to the web). What this book does not do, and is not intended to do, is teach you about xHTML, CSS, or PhotoShop. So, if you are a designer and want to learn how developers work, this book is not for you. I am looking forward to applying what I have learned throughout the book to my next web project (you might just see some changes on this site as well).

Engagement Ring

A year ago tomorrow (April 28th), Stephanie and I will have been engaged for a full year. With the wedding a short 99 days away, it's about time I started the process of getting the wedding bands made.

We had Stephanie's engagement ring custom designed by Koorosh Daneshgar of Wedding Bands and Company (full details at my first blog post: I'm Getting Married!) and we are going back to him to get my wedding band and a shadow band made for the wedding. I'm not too keen on gold (Stephanie's ring is white gold), so I went over to the Wedding Bands and Company web site to check out the other metal options they have. While there, I took a look at the Engagement Rings section of there site and noticed this:

In the upper left hand box (marked "Antique-Design") is Stephanie's Engagement Ring!

I was pretty excited that Koorosh thought so much of the design that we collaborated on that he has the ring featured on the web site

We are just beginning the process of collaboration on my wedding band, I will be posting images throughout the process.

SVN: Merging a Branch into Trunk

This is more for my benefit than anything else, but someone might find this useful.

Recently at work, I have taken on more responsibilities. Part of that includes branch control over a few web sites I work on. It took me a while to figure out how to manage everything properly and most of the stuff I found on the web wasn’t much help so I will explain it here.

The source control program I am using is SVN and the source code is stored on a server with SSH access.

Merge a Branch into Trunk

1. Check out a copy of trunk:

   svn co svn+ssh://server/path/to/trunk

2. Check out a copy of the branch you are going to merge:

   svn co svn+ssh://server/path/to/branch/myBranch

3. Change your current working directory to “myBranch”
4. Find the revision “myBranch” began at:

   svn log --stop-on-copy

   This should display back to you the changes that have been made back to the point the branch was cut. Remember that number (should be rXXXX, where XXXX is the revision number).
5. Change your current working directory to trunk # Perform an SVN update:

   svn up

   This will update your copy of trunk to the most recent version, and tell you the revision you are at. Make note of that number as well (should say “At revision YYYY” where YYYY is the second number you need to remember).
6. Now we can perform an SVN merge:

   svn merge -rXXXX:YYYY svn+ssh://server/path/to/branch/myBranch

   This will put all updates into your current working directory for trunk.
7. Resolve any conflicts that arose during the merge
8. Check in the results:

   svn ci -m "MERGE myProject myBranch [XXXX]:[YYYY] into trunk"

That is it. You have now merged “myBranch” with trunk.

Updated: June 18th, 2008

Steps 2-4 can be replaced by a remote log lookup:

svn log --stop-on-copy svn+ssh://server/path/to/branch

That is it. You have now merged “myBranch” with trunk.

My thanks to Samuel Wright for bringing that to my attention :-)

Bonus: Cutting a Branch

Cutting a branch is a lot easier than merging a branch. And as an added bonus, I will tell you how.

1. Perform an SVN copy:

   svn copy svn+ssh://server/path/to/trunk svn+ssh://server/path/to/branch/newBranch -m "Cut branch: newBranch"

That’s all there is to it.

Paint.NET - Barcode Plugin v1.1.x

After some user feedback on the Paint.NET Forum, I have released an update to my Barcode Plugin.

By the way, Sepcot, my previous comment about irregular selections was not a "bizarre observation": your plugin is actually written incorrectly, and its rendering will end up incorrect if changes are made to the rendering framework and how the region of interests are passed to effects. (Like what if I start dividing up the rendering based on rectangle tiles, instead of scanlines? etc)

-- Rick Brewster

Dude! I deal with barcodes all day. Can you make it output a POSTNET barcode w/Check digit?

-- barkbark00

'12345' encoded with POSTNET

After some major code refractoring, I am now building the barcode in a separate BarcodeSurface before any rendering is done to the destination surface. I now have separate classes for each type of barcode, making it easier to add additional barcode formats in the future. Barcode Plugin v1.1.0 supports POSTNET barcodes.

Features

• Supports all three Code 39 barcode encodings: Code 39, Code 39 mod 43, and Full ASCII Code 39
• New: Supports 5, 6, 9, and 11 digit POSTNET encodings
• Automatically tries to convert text into an encodable format. (Example: "Sepcot.com" in Code 39 becomes "SEPCOT.COM")
• Provides visual feedback for text that cannot be encoded.
• Uses the user defined Primary and Secondary colors to build the barcodes. Note: Barcodes built with colors other than Black (Primary) and White (Secondary) will probably not scan correctly.
• The width of the bars in the barcode adjust to fill the available space. No barcode is shown if the surface is too small for the barcode to be completely drawn.
• Fixed: Supports non-rectangular selections. Note: Barcodes may not scan correctly if not rectangular.

Files

• Barcode Plugin Source Code - to install, drop the Barcode.dll file into your effects directory (typically: C:\Program Files\Paint.Net\Effects\)

Resources

• Wikipedia - Code 39
• Wikipedia - POSTNET

Paint.NET - Barcode Plugin

‘Sepcot.com’ Encode with Code 39

Version 1.0.0 of my Paint.NET Barcode Plugin is completed. Note: I do not have access to a barcode reader and have not checked the validity of the barcodes, but theyshould be accurate =)

Also, barcodes are rectangular. You will not get very good results if you use this plugin in non-rectangular selections.

Screenshots

Features

• Supports all three Code 39 barcode encodings: Code 39, Code 39 mod 43, and Full ASCII Code 39
• Automatically tries to convert text into an encodable format. (Example: “Sepcot.com” in Code 39 becomes “SEPCOT.COM”)
• Provides visual feedback for text that cannot be encoded. Keep in mind different encoding options offer a different set of characters than can be encoded. If “Code 39” doesn’t work, try “Full ASCII Code 39.”
• Uses the user defined Primary and Secondary colors to build the barcodes. Note: Barcodes built with colors other than Black (Primary) and White (Secondary) will probably not scan correctly.
• The width of the bars in the barcode adjust to fill the available space. No barcode is shown if the surface is too small for the barcode to be completely drawn.

Supported Characters

Code 39 and Code 39 mod 43 support the use of the following characters: 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-. $/+%

Full ASCII Code 39 supports the use of all ASCII (control and printable) characters.

Text Validation Code:

public static bool validateText(String text, int encoding)
{
  bool passedInspection = true;
  
  if (encoding == Barcode.CODE_39 || encoding == Barcode.CODE_39_MOD_43)
  {
    passedInspection = Regex.Match(text.ToUpperInvariant(), "^[A-Z0-9-\\.\\$/\\+%\\s]+$").Success;
  }
  else if (encoding == Barcode.FULL_ASCII_CODE_39 && 0 != text.Length)
  {
    for (int lcv = 0; lcv < text.Length; lcv++)
    {
      if ((int)text[lcv] < 0 && (int)text[lcv] > 127)
      {
        passedInspection = false;
      }
    }
  }
  else
  {
    passedInspection = false;
  }
  
  return passedInspection;
}

For Code 39 and Code 39 mod 43, we have a short set of valid characters. To ensure text validity, I perform a Regular Expression match to see if the text is valid.

For Full ASCII Code 39, control and printable characters are in the valid character set. To ensure validity, I check to see if the integer value of each character falls within the 0-127 range.

Files

• Barcode Plugin Source Code - to install, drop the Barcode.dll file into your effects directory (typically: C:\Program Files\Paint.Net\Effects\)

Resources

• Wikipedia – Code 39