I recently built a Home Theatre PC (HTPC) to drive my new LCD TV.  The benefit of using a HTPC is that it can replace many components of a traditional home theatre system while adding the benefits of having a full fledged computer system in your living room.

I plan on keeping this system running 24/7 so it makes sense to make it as energy efficient as possible.

Here’s a quick list of the components used:

• Processor: AMD Athlon II X2 250
• Motherboard: Gigabyte MA-785GMT-UD2H
• Memory: Corsair XMS3 2×2GB DDR3 Dual Channel Kit
• Hard drive: 1TB Seagate Baracuda 7200.12
• Heatsink: Scythe Ninja Mini Rev. B with Arctic Silver 5 Thermal Paste
• Optical drive: Samsung DVD-RW
• Case: Antec NSK2480
• Speakers: Logitech Z-Cinema Advanced Surround Sound System w/Media Center remote

Motherboard
You might notice that I don’t have a graphics card listed, which may seem strange for a PC that’s built for high definition video playback.  The reason is because I’m using AMD’s new 785g chipset that was just released earlier this month.  This features an integrated Radeon HD 4200 GPU which is capable of smoothly decoding 1080p video.  This 785G chipset really has everything you need for a HTPC and is highly recommended in reviews by TomsHardware and AnandTech.

CPU
The AMD Athlon II X2 250 is one of the best value CPUs out there.  One can be had for about $70-$80 while providing two cores at 3.0ghz.  The best thing about it is that it is rated at 65w, making it one of the more energy efficient CPUs.  I could have opted for the 5050e which is only rated at 45w but I figure the extra processing power may come in handy for 1080p decoding.

Case and Heatsink
For the rest of the system, I decided to keep it as quiet as possible, opting for a passive heatsink cooled only by the case fans on the NSK2480 chassis.  The Antec NSK2480 case was designed by Antec in conjunction with SilentPCReview to give it the best airflow.  You can read a full review of the case here but let me just say, it is just beautiful and the attention to detail really sets it apart from other cases.  It’s also fairly inexpensive at around $100.

The case comes with a 380W power supply that’s 80+ certified meaning high energy efficiency.  Although the PSU isn’t that large, the low energy footprint of the individual components means 380W is already plenty.

Problems
The RAM that I got came with their own heatsinks which adds to the size of the modules.  This increased size coupled with the fairly large Scythe Mini Ninja CPU heatsink meant that the first two DIMM slots were not usable.  Luckily, Gigabyte arranged the DIMM slots so that the dual channel pairs were together.  As a result, I could put my two sticks of RAM into the 3rd and 4th DIMM slot while maintaining dual channel capability.  This means no more memory expansion though unless I get a smaller heat sink or memory modules without heat spreaders.

I’m also still missing a TV tuner to receive Over-The-Air HD transmissions.  I’m waiting for a nice one to go on sale.

Windows 7
For my operating system, I’m using a release candidate of Windows 7 which is simply amazing for a HTPC setup.  The Windows 7 media center is probably the best Microsoft product I’ve used so far and I haven’t found anything that really compares.  It’s highly moddable and coupled with the media center remote from the Logitech speakers, it makes for a very nice HTPC experience.  I recommend using the free media browser extension for extra eye candy and features.

Total Cost
I already had some of the parts so I only had to spend about $500 on this system.  Yes you can build a quad core system for $500, but you can’t get this type of HTPC experience whilst staying green!  All the components together, I’d estimate the final cost to be around $700.  If you wait for deals and bargains, you might be able to get it for less but many of these components are already fairly competitively priced.

Do you have an HTPC setup? What components did you end up using? Let me know in the comments!

Popularity: 3% [?]

Yahoo! Developer Network has posted a great article on 34 ways to speed up your website.  They divide these 34 methods into 7 categories:

• Content
• Server
• Cookies
• CSS
• Javascript
• Images
• Mobile

Some of the practices are a bit advanced and hard to implement for most people.  For example, setting up a content delivery network is by no means a trivial task and is probably unnecessary unless your website is serving tens of thousands of visitors per day.

Other tips are quite simple and are things that any seasoned web developer should already be doing, i.e. putting stylesheets at the top of the page and optimizing images.

This is a great article to keep bookmarked if you’re starting a new project or if you’re looking to improve an existing one!

Popularity: 8% [?]

With the new year just around the corner, here are a few books you may want to consider reading as part of your New Year’s resolutions.  I’ve read/own these and can fully recommend them from personal experience.

The Pragmatic Programmer: From Journeyman to Master by Andrew Hunt, David Thomas

For anyone that spends a significant amount of time coding, this book is definitely a must have.  It will give you a new way of looking at the way you design and code, essentially turning it into an artform instead of just a routine task.  Being pragmatic means being practical and efficient.  Spend a few hours skimming through this book and you’ll save hundreds of hours later on. You can read my book review here.

Beautiful Code
Beautiful Code is a collection of short case studies written by lead programmers from around the world.  Anyone that likes learning by example will love this book.  What better way to learn than from other people’s mistakes and experiences?

Code Complete by Steve McConnell
This book is similar to Pragmatic Programmer in that it talks about a lot of the same stuff.  No harm in reading both though since they offer a slightly different slice of the same pie.  I strongly believe that computer science courses should teach these concepts to all programmers so that programming can become anyone can love doing.

Regular Expression Pocket Reference
This one isn’t just a must-read, it’s a must have! Regular expressions are a mixed bag for programmers.  Most will find that they are extremely useful when needed and can make a complex problem very elegant.  However, most will also find that they don’t practice them often enough to fully master them.  This is why I find this pocket reference to helpful.  It includes examples in all of the popular languages APIs (Java, PHP, .NET and C#, Python, vi, JavaScript, Ruby etc.)

The Case of the 500 Mile E-mail
This last must-read isn’t a book but rather a very funny and interesting story of a campus E-mail administrator who comes across an impossible problem.  I won’t ruin any more of it, but definitely read it for a good laugh!

What other good books (not necessarily computer related) would you recommend as a must-read for a programmer?

Popularity: 6% [?]

Regular readers of my blog will know that I am a proud user of the Getting Things Done system and love using a To-Do list to manage my tasks.  So when I was asked to write a review of Swift To-Do List, I was pretty excited to try it out and see how it compares with my current pen & paper method.

Swift To-Do List Online is a web application created by Dextronet.  Although called a To-Do list, it is in fact much more than that.  Being an online application, the biggest reason for using it is that tasks can be accessed and modified whenever you have access to the Internet.  Luckily for me, I’m almost always in front of a computer so it is very convenient.  It might be interesting to get input from somebody that doesn’t always have access to the Internet to get their thoughts on this tool.

Features
With regards to shear number of features, this is by far the most I’ve seen on any to do list software.  Here’s some of the more notable ones:

• Hierarchical tree structure to organize tasks
• Ability to set due dates and use built-in reminders for tasks
• Import lists from XML format
• Export lists to HTML or CSV format
• User management for collaboration and task allocation
• Add notes/files/media to individual tasks

That last feature is a huge one in my opinion.  With each task you have to do, you can associate formatted notes, files, folders and links to it.  A lot of times the task itself can be described in one line but all of the extra things that go with the task need to be stored somewhere else.  By allowing users to add notes and links directly to a task, it really helps with organization.

For example, I might have a task say “Print this document at the office” and then simply attach the document along with the task instead of having to save it to a USB key or e-mailing it to myself.  Not a big deal, but definitely helpful!

A lot of people (myself included) like to keep things simple but it is important to remember that just because all of these features are offered, doesn’t mean you have to use it!  You can make Swift To-Do List as simple or as complex as you need it to be.

User Interface

In true Web 2.0 fashion, Swift To-Do List Online operates exactly like a desktop application.  The UI reminds me of Microsoft Outlook with its 3 panel view.  The buttons (very nice icons by the way) are large and intuitively easy to use.

From a web developer perspective, I can really appreciate the detail and effort put into making the user interface usable and free of bugs.  Since I’ve done my share of Web UI programming before, I spent a few minutes trying to “break” the UI with common oversights but it was nice to see that it was all accounted for.

In my opinion, a couple things that could be added to improve the experience are:

• Keyboard shortcuts – I love keyboard shortcuts
• iPhone App – This would open the application to a huge audience that wants a featureful to-do list application accessible anytime anywhere.

Price
With a web application of this caliber, it isn’t a surprise to find out that it isn’t free.  The online version comes at a monthly cost in 4 different plans ranging from $9.95 to $225.95 a month.  The difference between the versions are the number of users allowed (from 1 to unlimited) and the amount of storage given to store files associated with tasks (from 100MB to 50GB).

For most people, the most basic personal plan should be enough.  The higher tier plans are clearly geared towards businesses that want to manage large projects with many contributors.  I can see it being extremely helpful for a manager to assign tasks and keep track of project progress through this web application, especially if the office is decentralized.

They do offer a free 30-day trial so you can try it to see if you like it.  Or check out their live demo to see if the features suit your needs!

Conclusion
Swift To-Do List is one of the most complete and feature packed online to-do list software I have come across.  I didn’t try using their collaborative features yet since my To-Do list is only for personal use but I can see many possibilities for it.  The only thing I can think of to improve it are the addition of keyboard shortcuts and perhaps the development of an iPhone application to supplement the site.

If you want something for your desktop, Dextronet also offers an award winning to-do list software for Windows, which is what this online version is based off of.

Popularity: 17% [?]

With the advent of AJAX, JavaScript heavy scripts and applications are becoming more and more popular on the web.  As is the nature of AJAX applications, many of these will pull/generate data dynamically.  With images this can cause minor performance lag if an image needs to be loaded.  Another situation where image lag can be a hinderance is a simple onmouseover image changes common on menus and navigation bars.

Since the early days of the Internet, there have been many ways of preloading images to prevent this lag.  By loading the image into the browser’s cache, there is no need to refetch an image over the Internet.  Throughout the years, each new method poses more advantageous and simpler than previous methods.  I’ll discuss three ways of preloading images, starting from the earliest and most cumbersome to the most recent and efficient.

The Pixel Image
Perhaps the earliest form of preloading images is the pixel image.  By embedding many images on a page (usually at the end of the page) and then forcing the size to be 1 by 1 pixel, you essentially still load the image without displaying much.  Setting a border doesn’t matter too much but doesn’t hurt.

<img src=”img/mypic.jpg” width=”1″ height=”1″ border=”0″ />
<img src=”img/mypic2.jpg” width=”1″ height=”1″ border=”0″ />
<img src=”img/aREALLYbigpic.jpg” width=”1″ height=”1″ border=”0″ />

Setting the size to 0 by 0 pixels works in some browsers as well and is a better solution.

Create an Image in JavaScript
With two simple lines of JavaScript, you can create an image and load it up without having it actually display on a page.

mypic = new Image();
mypic.src = “img/mypic.jpg”;
mypic2 = new Image();
mypic2.src = “img/mypic2.jpg”;
mypic3 = new Image();
mypic3.src = “img/aREALLYbigpic.jpg”;

Hide Images with CSS
Using CSS, you can choose to not display certain elements with the display property.  You can either make each individual image you wish to preload not display or you may make an entire section of images not display.

In your CSS file,

#preloadarea { display:none; }

In your HTML,

<div id=”preloadarea”>
<img src=”img/mypic.jpg” />
<img src=”img/mysecondpic.jpg” />
<img src=”img/aREALLYbigpic.jpg” />
</div>

Or you can set each image to not display individually by creating a CSS class,

.preloadimage { display:none; }

and then assigning that class to each image you wish to preload,

<img src=”img/mypic.jpg” class=”preloadimage” />
<img src=”img/mypic2.jpg” class=”preloadimage” />
<img src=”img/aREALLYbigpic.jpg” class=”preloadimage” />

Which way is best?
Of the ways above, the second and third are much more elegant than the first.  Also, keeping in mind that there is a small minority with JavaScript disabled, the third way is perhaps the most versatile.

You may ask yourself, why would I care about preloading images to user without JavaScript enabled?  Well, preloading images also help if you know what page the user will load next.  It’ll make their web experience more seamless and more enjoyable!

Too Many Images to Preload?
If you have too many images to preload (especially many small images), consider loading a single large image containing all the smaller images stiched together and then use CSS to position the single large image with the appropriate offset to display only the portion of the image you want.

Known commonly as CSS Sprites, it’ll make a good topic for the next How-to

Popularity: 16% [?]