A modern browser like Google Chrome or Mozilla FireFox 3.5+ has built in support for the latest web technologies like HTML5, CSS3, jQuery 1.4, PHP 5+ and much more. I would like to create a website from scratch that uses all of these modern technologies as much as possible. By creating this website I will be able to demonstrate some of the amazing new web applications we will be able to create in the new future, and show why we must support web standards and have browser development progressed faster.

This entire process will be documented both on paper for submission, and online so the progress can be followed by other students, and anyone curious about future technologies. I will be modifying my personal website (chrisblackwell.org) for this project. Since it is only a personal site, there is no mission critical applications that will be effected. The site also has a large FireFox, Chrome and Safari audience which should be able to render most of the modern technologies safely.

Technology Overview

This project is going to use the most modern versions of web markup languages, scripting languages, and programming languages that are available. I will focus on only the most conventionally used languages like HTML, CSS, jQuery (JavaScript & AJAX) and PHP. I will not be using any frameworks. For the content management system I will be using WordPress which is the most popular content management system in use today, and fully runs on mySQL and PHP. Here is an outline of the of technologies that will be in use:
HTML5

HTML4 and XHTML 1.0 have been around for ten years. The W3 organization were working on two separate standards. Both HTML5 and XHTML 2.0 were both active projects until the W3 organization last year ended development for XHTML 2.0 and decided to focus completely on HTML5.

HTML5 is almost a hybrid of HTML4 and XHTML 1.0. The markup language is backwards compatible, and everything that is written in HTML4 and XHTML 1.0 will validate in HTML5. HTML5 adds some special markup structure for our pages. The following new tags have been officially declared:

	<header>  <!-- used to denote a header of a section or page -->
	<nav>     <!-- specifies a navigation area -->
	<section> <!-- used to denote section of page -->
	<article> <!-- used to denote an article in a section -->
	<footer>  <!-- used to denote a footer of a section or page -->

I will be documenting during the project what each of these new tags do and how they are used for semantic markup. Other new tags and markup that I learn along the way will also be added.

CSS3

CSS2.1 is the latest specification that all browsers (including IE6) support. CSS3 is an “almost finished” specification and many browsers have already started implementing some of the key features. CSS3 support will also implement some features from the 2.1 specification that were never fully supported by all web browsers, such as the @font-face feature.

In a lot of ways CSS3 is an even bigger step forward in web design evolution then HTML5 will be. Whereas HTML5 only changes the semantic markup, CSS3 allows us to do very creative things that would have required EXTRA markup before.

Such features include:

• Multiple Backgrounds
• Colour Gradients
• Border Radius
• Box Shadow
• Text Shadow
• @font-face

jQuery (JavaScript)

JavaScript has been around almost as long as the web has. However, gone are the days of annoying alert warnings. JavaScript engines such as jQuery have given programmers and designers the power to do very powerful applications while still looking beautiful and functional. jQuery is backwards compatible and thus can work on any modern browser, even IE7 and IE8.

I will be using jQuery and try to push it to it’s limits and see what kind of interactivity I can implement on a website given a limited JavaScript knowledge. jQuery promises to be a write less, do more engine.

Graceful Degradation

Finally I will be testing how far back these features can go. The first part will be to find out which browsers will fully support all technologies. I will then create a feature list, and go browser by browser and find out which browsers support which features, and how much support. This will show us all how long we will have to wait for browser adoption before we can begin using these technologies.

The website should degrade gracefully as we move to older browsers, and if we can implement graceful degradation, we may be able to move to these newer technologies sooner than later.

I don’t often advertise on this website that I am Canadian, and I try to stay clear of geographical specific information so not to leave out anyone. However, I felt the absolute need today to tell everyone, and remind others, I am Canadian. The last two weeks have been absolutely magical. I’m not talking about the record setting 14 gold medals (although that was nice too). I am talking about watching my country come together and cheer as a single nation united. In my lifetime I have never seen this in Canada. It was absolutely magical, heart warming, and has left me with a lifetime of memories.

Canadians are a very special group of people. We have such a diverse country, both geographically and ethnically. We are a bi-lingual country (french and english), but a large percentage of our population speaks other languages. Quite often Canadians talk about their heritage proudly, whether it be from Franch, England, China, Jamacia, Finland, Italy, etc, but the last two weeks, everyone was Canadian, and no other flags were waved. It didn’t matter if you were not a sports fan, or didn’t care for the Olympics, everyone wanted to be part of the winter games. We dared to believe, and believe we did.

There were so many moments that made these Olympics stand out for me. There was the incredible story of Joannie Rochette, who was set to compete in woman’s figure skating before her mom sadly past away of a heart attack while on her way to see Joannie skate. Joannie decided to skate anyway, and carried the country on her shoulders as she won the bronze medal. She was given the honor of holding the flag during the closing ceremonies and I believe no one else deserved it more than she.

The moment I will remember the most was not one of victory, but one of loss and selflessness. Mellisa Hollingsworth was one of the favourites to win gold in the woman’s skeleton race. Unfortunately it was not meant to be and she ended up with a 5th place finish. Hollingsworth was in tears after her 5th place finish. She told Canada with tears in her eyes,

“It’s really hard. I feel like I’ve let my entire country down.”

She didn’t.

The first thing we have to do is login to the WP-Admin area. Go to Settings and under WordPress address put www.domain.com/wordpress/ Leave the Blog address at just www.domain.com Now once you press Save Changes your site will be broken, but don’t worry it’s only temporary. The important thing is that pressing Save Changes sent the change to your mySQL database before your site broke.

The next step is to move all your WordPress files into a subfolder, except for the index.php files and .htaccess. Moving the WordPress files were easy enough, you just create a subfolder in your home directory named wordpress. The directory can actually be named whatever you wish, but for our purposes we will just call it wordpress. Not edit the index.php file in your root directory to have it include the file from your new directory.

Before the change:

/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');

After the change:

/** Loads the WordPress Environment and Template */
require('./wordpress/wp-blog-header.php');

Once this is done your site should be backup and running again. The one problem you may notice is that images in your posts may be missing. That is because most of your posts are looking for images from the root /wp-content/uploads/ folder which has been moved. Rather then edit through each and every post to change the path, there is a simply SQL command to run on your WordPress database to fix the problem.

UPDATE wp_posts SET post_content = REPLACE(post_content, 'your-domain.com', 'your-domain.com/wordpress');

There you have it! You’ve successfully moved your WordPress installation to it’s own directory and reclaimed your root directory for easy management. If you had any problems with this or you know of a better solution please leave a reply in the comments.

1. Avatar – This was the biggest film of the year and everything else is a distant second. I loved this movie for it’s immersive experience, but it was not the best story line of 2009. That said, what I felt during and after this movie makes up for any shortfalls in the storyline. The graphics and 3D are spectacular, and not done in a gimmicky way, but in a completely scenic way, like watching Discovery Channel in HD.
2. Star Trek – I am a huge Star Trek fan and was disappointed this didn’t take the number one spot on my list this year. I’m really glad J.J. Abrams brought the franchise back to life, and even took it a little main stream. The first time I saw this movie I was actually disappointed, but later realized that was only because of my impossibly high hopes for the movie that just about nothing could have met.
3. Watchmen – I never have read any of the Watchmen comics but this movie had so much buzz from Comic Con that I decided to go see it right away. I was blown away, and think this is one of the best comic book movies ever. You defiantly feel like your watching a comic book movie, but it still leaves you on the edge of your seat thanks to an amazing gripping story and well done acting.
4. Inglourious Basterds – Quentin Tarantino does WWII. What else do I need to say?
5. Terminator Salvation – I’m a big fan of the entire Terminator series and I think I’m one of the few that actually enjoyed the third movie. While I was skeptical at first about a Terminator movie without Arnold, I was quickly corrected during this movie. The entire movie feels like a Terminator movie, and much like the third one, doesn’t have an overly happy ending to it.
6. Transformers: Revenge of the Fallen – The second installment of the Transformers franchise was a fun watch for all. While I didn’t find it nearly as funny as the first movie, it still managed to thrill me and make me laugh from time to time. The story line leaves something to be desired though.
7. X-Men Origins: Wolverine – Wolverine tries to bring X-Men back from the dead after the horrible X-Men 3 movie. The movie isn’t just about Wolverine, we do see many of the other X-Men in their earlier stages, but for the most part we are taken along Wolverine’s life journey. This movie takes us back to the good old, bad ass kicking Wolverine that we all know and love, but still lacked the magic from the first movie.
8. Underworld: Rise of the Lycans – The third movie from the Underworld series takes us back to the time when the Lycans and Vampires worked together. This movie is a little disappointing because it goes over the same history that we had already learned about from the first two.
9. The Curious Case of Benjamin Button – I had huge expectations for this movie that were not lived up to. While this movie was still pretty good, I felt as if the life experiences could have been enhanced. I would have rather followed around Benjamin Button around on his life journey, rather then the old girlfriend that is narrating the story.
10. Hangover – I can’t remember the last time I laughed so hard in a movie. The only reason this movie is on the bottom of the list is because of the lack of actual story line. That being said, I don’t think I had more fun at any other movie this year. If your looking for a good time, and loads of laughs, watch the Hangover.

Windows installs default drivers after installing the Windows kernal. The problem that I experienced was that the default driver Windows installed for the ATI video card was not the correct driver and thus left the screen completely blank. I found that I was not the only one having this problem, and after some Googling around, I came upon a solution that seems to work great.

1. Reboot your iMac and hold the Option/Alt button down to bring up the boot menu.
2. Arrow over the the Windows install disc and press Return/Enter
3. Navigate through the Windows install process until you come across the install options (it’s right after the language selection screen).
4. Select the Repair your computer option
5. Choose the C: BOOTCAMP drive
6. In the list of repair options, find Command Prompt at the bottom and select it
7. In the command prompt, type of the following command
   del c:\windows\system32\drivers\atikmdag.sys
8. Close the command prompt and reboot your machine back into your Boot Camp Windows

That’s it! The ATI video driver should be deleted and you are free to install the Apple drivers and Boot Camp software (found on the OSX install disc that came with your machine).

This is going to be replacing my existing iMac. Since I have a lot of iTunes media (TV Shows and Movies take up a lot of space), my needs for storage were fairly large. I am also going to be installing Windows 7 on this machine via Boot Camp so that I can play a few games (like Star Trek Online early next month). So taking everything into consideration I ordered the following specs:

• 2.8Ghz Quad-Core Intel Core i7
• 8GB 1066mhz DDR3 RAM 4X2GB
• 2TB Serial ATA Drive
• ATI Radeon HD 4860 512MB
• Apple Magic Mouse
• Apple Keyboard with Numeric Keypad

27" iMac in the box

So far I am absolutely loving this machine and I can’t believe how much power they were able to fit into an iMac form factor. The draw back to this is heat. This machine runs HOT! The processor itself only idols at around 50c, but if you put your hand on the back of this machine, you could actually burn it if you left it there.

27" iMac Booting Up

I used Boot Camp to partition the hard drive for the Windows install. I allocated 500GB for Windows, and left 1.5TB for OSX. There was a display issue when installing Windows 7, as the default driver for the ATI card is not compatible and leaves the screen blank. There is a fix for this that I will be posting tomorrow.

27" iMac Installing Windows 7

Overall I’m very happy with my new machine. I think this is a powerhouse of a computer, and the price is really good value considering everything that comes with it.

I was considering last summer moving to a Mac Pro for storage and power reasons, but now this iMac takes care of everything I needed to do, at about half of the cost. Granted there is still a need for the Mac Pros, especially if you want more than two monitors, but for most consumers and prosumers needs, this new iMac fits the bill.

1. Dropbox (new for 2010) No application or program has changed the way I use my computers more then Dropbox. The days of worrying about file changes and transferring files between computers are over! Dropbox syncronizes all your files in your Dropbox folder to all your Mac, Windows and Linux computers. The synchronization is so fast both ways that most files take just seconds before the changes appear on all your computers. All files are kept locally as well so you can access all your files even when you are offline. This is the one application I believe that everybody can benefit from.
   Price: FREE for 2GB, $99.95/year for 50GB
2. LaunchBar 5 (new for 2010) is an application and file launcher taken to the next level. I was a little bit hesitant to try LaunchBar because I thought Spotlight did a good enough job, but when I finally took the plunge, I got hooked. LaunchBar can not only launch applications, but can access data within them, go through your contacts, add events to iCal and so much more. Any power user must check out this application.
   Price: 30-Day Free Trial then $35.00 USD
3. FireFox (1st in 2009) web browser is still my favorite browser of choice. Though I am really starting to like Google Chrome, my day to day web development work is done in FireFox. The extension library is what I love most, and I would be lost without extensions like FireBug and Web Developer Toolbar. The browser is made by the company Mozilla which is dedicated to providing free open source software to the general public. FireFox has a huge community base and has thousands of extensions that are available to add to the functionality of the browser.
   Price: FREE (Open Source)
4. TextMate (3rd in 2009) is the text editor that has been missing all my life. I just discovered this little jem last year and I still can’t believe how I ever lived without it. TextMate provides syntax highlighting for just about every programming language in use today. Using a simple drop down menu on the program’s bottom bar, you can change between languages on the fly. TextMate also comes preloaded with hundreds of code snipplets too for quickly adding text or special character encodings in. There are simple too many features to fully go into detail in this post. Please give TextMate a try today if you do anything but edit the most basic forms of text.
   Price: 30-Day Free Trial then €39
5. 1Passwd (2nd in 2009) is a program that keeps track of all your usernames, passwords, and form data. The program not only keeps track of all your secure information but it also includes a secure password generator that automatically fills a password request field with a very secure password and then is remembered by the program. This allows you to do what you should be doing all along which is use a different password for each website. All you have to remember is your one master password and 1Passwd will remember the rest. It is completely encrypted using the keychain and can even be synced between your various mac computers using Apple’s Mobile Me.
   Price: 30-Day Free Trial then $39.95 USD
6. Things (new for 2010) is a personal to do manager based on the principles from David Allen’s Book, Getting Things Done. Things allows you to create Projects and assign tasks and due dates around those Projects. You can tag your tasks for quick access later, and sort them by areas of responsibilities. Things also syncs with iCal so you can have all your tasks in your iCal and Mail for easy access. There is also an iPhone application for Things so that you can carry all your task along with you, and sync when you get back to your home or office. Things has made my life so much easier and I love the simple UI of this application and highly recommend for anyone who wants to really take control of their working life.
   Price: 14-Day Free Trial then $49.95 USD
7. Transmit (5th in 2009) by Panic is simply the best FTP program I have ever used on ANY platform. The ability to upload to Amazon S3 and Apple’s iDisk is fantastic. Transmit also allows you to sync between different folders, use tabbed site management, has dock status updates, and syncs your saved FTP sites with Mobile Me. This is a must have app for anyone who manages websites or needs remote file management.
   Price: $29.95 USD
8. Text Expander (6th in 2009) is a tiny application that runs quietly in the background of your Mac. It allows you to enter snipplets (small text phrases) that will expand into preset text or graphic strings. For example; say you keeping having to enter your email address like bob@something.com. You could setup a key so everytime you type bob@ the text is automatically replaced with bob@something.com. You can even program in complete email signatures, and photos to pop up, just about anything you can think of. This is a great time saving application that has saved me from a lot of excess typing.
   Price: 30-Day Free Trial then $29.95 USD
9. Tweetie (new for 2010) is a Mac only Twitter client. Twitter broke out in a big way in 2009 really going mainstream, and that in turn gave us more and more people to follow each week. Tweetie uses a very Mac like UI to help you follow your Twitter peeps. Tweetie is really good for tracking conversations between different twitter users, and a double click on a reply will bring up the entire conversation thread so you can learn what they have been discussing. This is a must have for any Twitter user who wants a more powerful way to use the Twitter stream and take the Twitter experience to the next level.
   Price: FREE (Ad Supported), $19.95 with no ads
10. Super Duper (4th in 2009) takes care of the task that all of us seem to avoid, BACKUP! SuperDupper can be setup to make a complete screen shot of your computer’s hard drive so you can be backup within minutes of a complete system failure. SuperDuper also allows for incremental updates so you don’t have to make a huge backup file every night. Super Duper was updated last year to work with Leopard’s Time Machine.
    Price: Free for regular backup, $27.95 for advanced features

The affair with Chrome has left me shaky and unsettled. I thought I loved FireFox and that just about nothing they could do would make me leave them. After some thought, I realized it’s not so much what FireFox was doing that was causing the affair, but what Chrome is doing for me that FireFox has yet to do.

Things I love about Chrome

Integrated address bar & search bar is my favorite feature and seems so intuitive. I think the only reason that this has not changed on all browsers is the fear that people won’t understand that they can search or type an address into the same field. While I understand the possible worry, I think the fear is unfounded and that people would adapt. I’d love to see this feature in FireFox 4.

Tabs on the top is a beautiful way to get your tabs out of your way. This was my favorite feature of the Safari 4 Beta, but when Safari 4 was officially launched, this feature was removed. I can’t think of too many useful advantages of having the tabs on the top versus below the address bar, but I just seemed to like it and wish this was an option on all my browsers.

Speed, speed, and more speed is what Chrome is all about. Like Tom Cruise in Top Gun, I feel the need for speed and can’t get enough of it. When I first heard that Chrome was so much faster then FireFox, I didn’t really believe it. After all, how fast can a browser really be? Apparently, very fast!

I found Chrome to be much faster at loading pages, especially pages that have a lot of JavaScript on them. My FireFox use to really slow down if I was jumping through more then 100 unread items in Google Reader, but Chrome doesn’t even hiccup. I have also seen vast speed improvments in Gmail and labeling and moving email around is faster then ever.

Things I hate about Chrome

Lack of extensions is my biggest problem with Chrome. As I web developer I depend largely on browser testing and getting all my applications and websites to function correctly as quickly as possible. Tools like FireBug and Web Developer Toolbar on FireFox help me track down bugs and work with fixes much quicker then I could ever do if I had to refresh a webpage every time I made a change.

While Chrome has added extension support on the PC and Linux versions, it is still only for the beta releases, and they have yet to add extension support for the Mac version. Once Google has added extensions to all versions of the browser, I need some big extension developers to jump aboard before I can fully move.

The Bookmark Manager in Google Chrome is either horrible (like on the PC version) or non-existent (like on the Mac version). One of the things I hate the most about Safari has carried over to Chrome. The bookmark manager doesn’t allow me to manage my bookmarks in a very quick and orderly fashion, like I’m use to doing in FireFox. Plus, how can the Mac version not have a bookmark manager at all? I simply can’t believe they left that out, and I can’t understand why that wouldn’t have been such a trivial thing to add.

Ending the Affair, but Seeking Counseling

While I did have a very fun time with Google Chrome, FireFox just does stuff for me that Google Chrome can’t yet do. However, I think FireFox and I must seek some counseling very quickly, because at the rate Chrome is improving, I think I may stray again in the future.

I don’t want to leave FireFox, I love FireFox. I love what the entire Mozilla foundation has done to support alternative browsers and to help move web standards forward. This post confession wasn’t about how great Google Chrome is becoming, it was about how I would like FireFox to become.

What was your favourite application of 2009? If you select Other, please let us know in the comments so we can all learn about your favourite app.

There has been the much documented solution to hold the “6″ and “4″ buttons down at boot-up, but since I reboot quite often and turn my machines off at night, I’d like an automatic solution. The best solution I found after doing a lot of Googling around was to edit a small file found in

/Library/Preferences/SystemConfiguration/

In this folder look for the file named

com.apple.Boot.plist

Edit this file in a programming editor such as TextMate or Script Editor. The file by default should look like the following:

<plist version="1.0">
<dict>
<key>Kernel</key>
<string>mach_kernel</string>
<key>Kernel Flags</key>
<string></string>
</dict>
</plist>

Change the 6th line to the following new entry so it appear as follows:

<plist version="1.0">
<dict>
<key>Kernel</key>
<string>mach_kernel</string>
<key>Kernel Flags</key>
<string>arch=x86_64</string>
</dict>
</plist>

Now you can reboot you Mac and it will automatically boot into 64-bit mode. If you have a better or different solution to this please post it in the comments.