A couple months ago, the thought of updating it crossed my mind and although I designed a few mockups in Photoshop, I never got around to sitting down and developing it. One of the earlier ideas I toyed around with was this one:

Please excuse the silly copy. It was a late night when I made this one.

Eventually I fell out of love with it and designed the following one which is the design that made it into the final product.

It's simple

The final design was very much influenced by two key frameworks/libraries which drive the site. For the layout and CSS, I used the 1140px Grid and for content management, I used Stacey.

The 1140px Grid is a fantastic CSS framework for creating a website that can adapt itself for different devices (as long as you keep this in mind during the design). If you visit the site and resize the window to a shorter width you can see the framework in action as the site adapts for the shorter width.

This allows for a more friendlier layout when viewing it on a mobile device. The CSS framework also allows for the use of higher resolution images for devices which have a high density display. (eg. the iPhone 4)

Screenshot of portfolio viewed on an iPhone 4

In regards to Stacey, the CMS I used, it’s really great for portfolio situations. As is described on its site, it’s also very lean since it does not require a database. However, it still supports RSS feeds and editing content is a pleasure as each project ended up being contained in its own folder with all the content contained in one text file. With no database involved, I’m able to make updates to my portfolio locally and when ready, push up all my changes with git with ease (using this method).

I went a bit experimental with some of the aesthetic implementations, like choosing to use CSS3 stylings for the About and Contact buttons. They look great in Firefox and Chrome but not as intended in IE 8, and definitely not IE 7. In IE 6 the site blows up. I made the decision not to support IE 6 like with most of the other recent sites I developed as the marketshare is no longer significant. Plus it’s 2011, if you’re still using IE 6, you’re three versions behind. Even Microsoft doesn’t want you using it anymore.

Related Post

• Using Git Between Mac and Windows
• BBM Probably Won’t Be Available to iPhone/Android
• Next Stop: An iPhone App for Calgary Transit
• Six Tips for Optimizing Your Website/Web Application
• A New Stint With Mediumrare, A New Theme

Cloning a repository from Mac to Windows

To clone a repository from a location on my Mac to Windows, I had to install ssh and git for Cygwin through its installer. After that, the standard ‘git clone’ worked:

You will need to turn on Remote Login in your System Preferences to open up port 22 needed to create the SSH connection between your Mac and Windows PC:

Pulling changes from Windows to Mac

This problem was the more challenging one. Perhaps it was because my mindset was used to the centralized philosophies of CVS and Subversion, but for a couple of hours, I thought that I had to figure out a way to issue a ‘git pull’ from Windows to my Mac and through SSH. Googling the issue with the terms I had in mind didn’t help either and it looks like quite a few people out there ran into the same issue. I struggled installing different SSH servers onto my PC, generating and importing public keys, and running the git daemon. Eventually I managed to get a working SSH connection from my Mac to my PC, but then the pull didn’t work – I couldn’t provide a proper path to the files since Windows has its paths with opposite slashes (eg. ‘/Users/samlu/repo’ wouldn’t work because it would have to be ‘\Users\samlu\repo’) and I was unable to enter those slashes properly in the command line.

Then I figured out a solution that was simple and got the job done by mounting my user folder from my Windows box as a samba share on my Mac.

Once that network share gets mounted, you can access it directly as a drive. You should be able to find it if you navigate to /Volumes.

After that, you can issue a git pull easily.

Related Post

• A New Portfolio
• BBM Probably Won’t Be Available to iPhone/Android
• Next Stop: An iPhone App for Calgary Transit
• Six Tips for Optimizing Your Website/Web Application
• A New Stint With Mediumrare, A New Theme

“…the likeliness at which visitors bounce is directly related to the performance of your web application.”

Although most of these tips are geared more towards web applications, there is nothing stopping you from applying this to a website. Applying these tips in practice towards any sort of web development will see immediate payoffs during a sudden burst of traffic. Those with slightly slower internet connections or using outdated browsers will also unknowingly appreciate these extra steps you take as these older browsers have javascript engines that perform much slower than what we’re used to with the blazing fast engines implemented in Google Chrome, Safari 4, Firefox 3, etc.

Tip 1: Use Image Sprites Whenever Possible, Especially On Common Graphics

Apple's usage of a sprite for their navigation menu

This has been advised many times in blog articles but for those who do not know, utilizing one larger image file instead of multiple image files is better. Of course, there is always a point when the benefit can become lost if you go overboard with it, but the rule of thumb is: if a graphic is used multiple times across a sprite, especially in the use of a CSS background, add it into a common sprite.

Why is it more efficient? The bottom line is that you save on the amount of HTTP requests that have to be made between the client and the server. For more information on sprites and how to implement them, check out the awesome “how-to” article over at CSS-Tricks.

Tip 2: Keep Your External Javascript and CSS Tidy

“Why is it more efficient? The bottom line is that you save on the amount of HTTP requests that have to be made between the client and the server.”

As a follow-up to the first tip and how saving on HTTP requests can help your web application; the same can be said about external javascript and CSS. By minimizing the amount of external files that have to be referenced, you save on HTTP requests. This results in the scripts getting to the client (browser) quicker and having it execute faster. As mentioned in the introduction of this post, I said that those using older browsers with slower javascript engines would unknowingly appreciate some of these extra steps you take to optimize your web app – this tip is one large part of it.

To help see which files can be combined, YSlow for Firebug is a great extension for Firebug that analyzes page loads and script execution to see where your website/web application is performing slowly.

In fact, these first two tips are outlined in Yahoo’s Best Practices for Speeding Up Your Web Site. They also advise that you move references to javascript to the bottom of your page (just before the ending </body> tag) so that your page loads first, and then your javascript.

Tip 3: Compress Your Javascript

This tip is meant more for web applications that utilize a lot of javascript. By compressing your javascript with a tool like YUI Compressor, you can cut down on the size of your javascript files so that they can be downloaded to the client quicker, resulting in earlier execution.

Tip 4: Optimize Your Algorithms

This tip is also meant more for web applications as building websites typically do not require the use of algorithms. As I’ve learned with the development of my facebook application, the use of a very inefficient algorithm can break your application.

Long story short, I created my facebook application in PHP and deployed it on a very powerful Joyent server that I was able to use for free for a year as part of a promotion. I created a very inefficient algorithm during a lookup which performed fine on the Joyent server. However, when the year of free service came to an end, I moved the application over to my personal server and saw the application break. The use of unnecessary nested loops was later rewritten into one loop and then the application came back to life.

Tip 5: Cache Dynamic Content on the Server When Possible

Codeigniter is one of my favourite PHP frameworks to work with. I’ve used it a ton for its great performance and ease of use. On one of my projects I used it for, I noticed that it was having to constantly look-up data from the database when I knew that it didn’t necessarily have to. I knew that there were caching plugins for WordPress which worked by saving static pages of dynamic content. If something liked this existed for WordPress, then surely it must for CodeIgniter since it had such a strong community.

Lo and behold the core installation of Codeigniter already included methods of caching dynamic content. After implementing it, less database calls were made which resulted in a more efficient application.

There are also some modules for PHP which can be installed to help give an even better boost with server side caching such as XCache. Installing this alongside with smartly utilizing cache methods in CodeIgniter can make your web app perform almost as fast as if it were a static web page.

Tip 6: Tweak Your Server Set-up

For the longest time I was a user of Apache. Of course, when I started out making websites, I really had no idea what a web server consisted of so I was using it without knowing.

When I set out to set up my own VPS for the first time, I went with an installation that used Apache. When I found that it was constantly eating up memory, I did more research on how to optimize it. It turned out that Apache was a bit hungry on memory.

A graph of Apache vs. Nginx Response Time. Apache is represented in blue.

In the above graph that was taken from Joe’s Blog, it’s easy to see that Apache isn’t the most efficient server out there. There are things you can do however to optimize Apache so it performs better, but I ended up switching to using Nginx since it used up less memory. You could also see performance gains by using Nginx as a reverse proxy alongside Apache to get the best of both worlds. More about my Nginx experiences at another time though.

Related Post

• How to Create Your Very Own “Archive Navigator”
• Integrating Flickr Into Your Wordpress Theme
• Improving the Archive Navigator; Graceful Degradation
• A New Portfolio
• Using Git Between Mac and Windows

How did Google specify this iPhone specific icon?

Getting your site to have this “iPhone specific favicon” was just as simple as applying a regular favicon. To do so, just insert a tag like so in the <head> section of your markup:

Obviously, just replace “PATH_TO_ICON_HERE” with an image path and you’re all set!
To keep things to spec, be sure to design your icon in a 57×57 pixel canvas and export it to PNG format when finished.
If you’d like a sample to work with, why not check out the tasks icon Google uses?

Related Post

• BBM Probably Won’t Be Available to iPhone/Android
• Next Stop: An iPhone App for Calgary Transit
• iPhone Web Concept Kit
• Commute Logger
• A New Portfolio

Now that it’s been released as a beta for Windows as of this moment (Mac and Linux versions are currently being developed), how did it fare to this claim?

Installation

Installing the browser was a very easy task. Google made it so simple that it automatically installs it onto your primary drive without even asking you where you’d like to install it. After it’s done installing, it prompts you if you’d like to customize it (import bookmarks, set as default browser, etc.):

You can specify which customizations you’d like, and it’s nice that Google unchecked it from making it the default browser:

Once finished with the installation, you finally get to see Google Chrome in all its glory with a UI that’s getting some mixed reception. Personally, I kind of like it:

If you open a new tab, you get a page similar to Opera’s speed dial of recently visited pages, and your bookmarks. It’s quite handy:

Browsing Experience

With the half-hour I’ve been playing with it, I have to say I’m really liking how Google’s browser is shaping up. Some of the advantages it has over Firefox is that it does feel a lot faster, especially with javascript intensive pages (like a post from digg with comments) and it also feels a lot more lightweight in regards to its footprint. According to the comic that Google released which is sort of like its instruction manual, memory usage will start of higher than most browsers but then in the long run use less memory because of its multi-process design.

On a sidenote, I was worried an introduction of a new browser would make my job as a web developer tougher as I first thought it would be another rendering engine I had to make compatible with, but its rendering engine is based on webkit (the same as Safari’s) so I’m happy about that.

Overall, it’s shaping up to be a really nice browser and I think if it proves to be stable to me, I will use it over Firefox every chance I get just because it’s much more speedy.

Related Post

• New Version of Google Analytics
• PicLens: Immerse Yourself in Photos on the Web

Just yesterday, I found everystockphoto which is a search engine for free photos. This is a brilliant idea for a search engine as there are free photos on flickr too but searching the photos with those specific creative commons attributes isn’t as easily accessible as everystockphoto provides. Not only that, but sxc.hu and flickr aren’t everystockphotos only sources, there are even more sites that everystockphoto pulls results from making it easier to find that perfect stock photo (for free!) that you’re looking for.

Graceful Degradation for Non-Javascript Users

When you build a solution with javascript, you should always try your best to make it accessible for non-javascript users. The non-javascript version doesn't need to be as fancy or even attempt to mimic what can be done with javascript, it just needs to be accessible. Case in point, turn javascript off and take a look at what happens to the archive navigator to the right. The tabs won't work, the box won't slide, but at least you can still access all the content inside the box.

Now if you took the code I wrote in last post and just pasted it, it's not degradable. If you were to view it without javascript, you'd see something like the following:

It's what you'd see with javascript, but the buttons won't work.
Click above image for demo.

If you recall from the last post, there were three divs. One saying 'Hello World', another saying 'Hello Earth', and the last saying 'Hello Planet'. If a person browsing with javascript disabled saw this, the other two divs are hidden from them. And the reason for this is the CSS property we assigned to the parenting div: overflow: hidden;

When I thought about the easiest way to make my archive navigator accessible without javascript, altering the CSS was the simplest option as it required the least modifications. The most important modification of course is to remove that overflow:hidden; CSS property. What I did was replace it with: overflow:auto;. This allows the div to display scrollbars when given specific dimensions smaller than the inner contents. To restore the overflow:hidden; CSS property for javascript users, we can easily make that assignment using jQuery:

By doing the above, the archive navigator is accessible by those browsing with javascript disabled.

How To Make Tabs Like I Did

From the comments in last post, a lot of people wondered how I made the tabs in my archive navigator and how I got them to change style when clicked. First off, I did not use buttons, I used an unordered list:

Here is the HTML for my tabs:

If you're wondering about the <a href="javascript:;"></a> tags wrapping the text, it is meant to make the cursor change to make it look like it's clickable (the hand). I'm aware you can do this in CSS, but IE does not follow it. Also, instead of making href point to "#", I assign "javascript:;" instead so that the page will not scroll back to the top. It's a bit hacky, but it works.

Next, it's all jQuery. I created handlers for the three different li elements: #btn-popular, #btn-latest, and #btn-categories. Here's a sample of the handler I wrote for #btn-popular:

And now the breakdown of the code snippet above:

1. For this handler, I want something to happen when #btn-popular is clicked. Hence the first line.
2. Next I check if the user is already viewing the first div (which is the popular posts). I have a global variable called currentView which stores which div is currently being viewed. If it is not on the first div, the code inside this if statement is executed.
3. In the if statement, I tell the #btn-popular li element to change its class to "selectedView". This class is defined in my stylesheet which gives it a white background and bolds the text. In other words, it makes it look like it's active. On the next line, I call a function called "changeTabStyle" which basically tells all other li elements (besides #btn-popular) to go back to their default class so that they no longer look active.
4. In the next line of code, I call a function which moves the wide area to scroll to the first div (popular).
5. Lastly, I assign the global variable to "popular" so that when another handler is executed, it can check what the user is currently viewing (as demonstrated in point 2).

Final Words

If you're going to take anything away from this post, it should be this: Develop for non-javascript users, then add javascript functionality later.

Why bother? It's true that it could just be a handful of people browsing without javascript, but think about the benefits; by making your sites, widgets or applications accessible, it becomes SEO friendly. With that said, people browsing with screen readers will not be missing anything either.

If you'd like a quick way to test your work with javascript disabled, I highly recommend the Web Developer Firefox Extension. There is a "Disable" menu which allows you to disable javascript in two clicks! Also, if you don't have Firebug already...get it.

Related Post

• How to Create Your Very Own “Archive Navigator”
• Six Tips for Optimizing Your Website/Web Application
• A New Portfolio
• Using Git Between Mac and Windows
• BBM Probably Won’t Be Available to iPhone/Android

Developing a Facebook application is also a great starting point in learning to develop database driven web applications. Prior to developing the Wii Friend Number app, I was mostly a front end developer. After releasing it, I felt I was a more well-rounded developer now that I understood the basics of back end development.

So How Do I Get Started?

First off, it’s given that you need a Facebook account. You will also need a hosting environment which supports the technology you choose to develop for, so for PHP, a LAMP stack works. Next, add the Developer application. The Developer application will be where you do most of the administrative stuff such as applying for an API key.

After adding the Developer application, navigate to it and press Set Up New Application:

It will bring you to a form where you will fill out information about the application you will create. There are optional fields you can fill out but you don’t need to worry about them, most of it can be modified after you’ve created your app. Hopefully you have an idea of an application at this point, otherwise, spend some time thinking about it. I don’t think you can change the name of it after it’s created.

Since I’ve developed my app, Facebook has made it super easy to start now. There will be link to some sample code:

Upon clicking it, you will receive instructions on how to begin developing your app within 3 steps if you choose to develop it in PHP (recommended). Also on this page are sample applications and links to documentation on the platform.

If you choose to develop your app in Java, a link to the Java client library is provided. Be sure to note the API and Secret keys listed on this page as well as you’ll need those when you edit your config file.

What Do I Do Once I’m Finished?

After you’ve finished developing your application, you’ll want to submit it to the Facebook Application Directory (link accessible from Developer application):

This allows your app to be searched by Facebook users. You’ll also want to allow your app to be added by people other then just yourself:

Additional Resources

• Facebook Developers Site
• Building Your First Facebook Application with CakePHP
• Finding Sample Code for Facebook Apps

Related Post

• What I’ve Been Up To: Wii Friend Number Facebook App 2
• A New Portfolio
• Using Git Between Mac and Windows
• BBM Probably Won’t Be Available to iPhone/Android
• Next Stop: An iPhone App for Calgary Transit

Last week I received an email from fellow reader Jaap asking if I could provide a link to a plugin that would implement something like my very cool Archive Navigator you see to the right.

I did some searching and found a jQuery plugin that is capable of the same effect called Coda-Slider. The reason this plugin is called 'Coda-Slider', is because this effect was made popular on Panic's product site for their web development software called Coda.

If you're looking for a quick solution to pull this off, head on over to Niall Doherty's blog (the author of the Coda-Slider plugin) and download it. There's enough documentation there to pull off the effect in a matter of minutes if you know what you're doing.

But if you're looking to improve on your web developing skills, I'll show you how to pull this off from scratch and customize it for WordPress using just the jQuery library.

Step 1: Building the Navigator

First, we're going to build out the elements needed for the Navigator. Open up your favorite text editor and create a couple of divs which will nest like this:

With CSS, we will try to achieve a layout like the following diagram:

Here's some sample CSS code that will go along with the HTML above:

Since the .crop div is a parent div of the other divs, specifying fixed dimensions as well as assigning hidden to the overflow attribute will effectively crop out anything not inside its dimensions. Although this example only has three divs, you can create as many as you want as long as you make the .widearea div wide enough.

Next, we'll need to add some controllers available to the user so that they can interact with this. For simplicity's sake, let's add three buttons:

Now that we've built out the HTML, we will start getting into the fun stuff.

Effects with jQuery

The first thing that needs to happen before we can start writing javascript for the jQuery library is to reference it. I recommend downloading it and referencing it off your own host rather than referencing it elsewhere.

Once you've dropped the library into your host, add a reference to it in your html like so:

Next, create a new js file with your text editor. This will hold all the custom javascript we will write. Let's take a step back and try and figure out what our objectives are before we start writing code:

1. Add a click event handler to our buttons
2. Create one (or more) functions which will produce the sliding effect

So for the first objective, creating a click event handler (also known as onClick) is real simple using jQuery:

Hopefully it's intuitive enough that you clued in that to create the other click event handlers for the other two buttons, you just had to copy and paste that line of code and replace buttonone with buttontwo or buttonthree. To explain this a little better: we are targeting the button with id buttonone (as done with $("#buttonone")) and then assigning a click event handler which will call a function.

Next, we will create the functions inside these click event handlers which will "scroll" the .widearea div horizontally:

In our function, we are instructing the .widearea div to animate to margin-left (note how jQuery's syntax is a little different from CSS) of 0. If you got this set up, you'll notice clicking on the button doesn't do anything, that's because by default, we are already seeing divone so there's no reason to move the .widearea div. Let's set it up for buttontwo:

If you add this in and click on buttontwo, the .widearea div should move 300px to the left so that #divtwo is in view. If you're wondering what the "500" is for, it specifies how long the animation should last in milliseconds.

Putting it all together now...

Eventually, after coding everything up, you'd end up with something like this:

If you want, you can copy and paste the above into an html file, stick it in a directory with version 1.2.3 of the jQuery library (the latest stable version as of this post) and run it for a quick demo. It functions the exact same as my archive navigator.

Now, you'll notice something new in the javascript. There's this $(document).ready(function(){ wrapping it all and it ensures that no javascript gets run until the page is fully loaded. It prevents any javascript errors getting thrown because if you didn't have this and this javascript gets executed before the button or div involved is loaded, it wouldn't work.

Customizing it for WordPress

If you've ever created or modified a WordPress theme before, you might have come across the template tags. You can use these inside the divs of .widearea to list categories, tags, and more. Here are a few examples:

• Tag cloud:
  <?php wp_tag_cloud(''); ?>
• Categories listing:
  <?php wp_list_categories('arguments'); ?>
• Last five posts:
  <?php query_posts('showposts=5');
          while (have_posts()) : the_post(); ?>
                  <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
  <?php endwhile; ?>

Still with me?

I tried to make this mini-tutorial as newbie friendly as possible but there are some advanced topics in here that might have gone over your head. If you have any questions, feel free to ask through the comments as I'm sure I might have not explained something very well or left out something.

And if you're a seasoned programmer, I know some of this stuff is bad practice (I realize that the javascript is anti-OO), but I tried to make it accessible as possible.

Related Post

• Six Tips for Optimizing Your Website/Web Application
• Improving the Archive Navigator; Graceful Degradation
• Integrating Flickr Into Your Wordpress Theme
• goSammy 3.0
• Midnight WordPress Theme

The Process

Like the last tutorial, we will go about this in a similar fashion by creating a script which we will utilize as a cron job.

1. Open up your favorite text-editor and copy and paste the following snippet:
   #!/bin/bash
   mysqldump --add-drop-table -h internal-db.s99999.gridserver.com -udb99999 -pPASSWORD database_name > database_name.sql

   We will need to replace a few things here though:

   • Replace all the instances of '99999' with your gridserver account number.
   • Replace 'PASSWORD' with your mySQL password
   • Replace 'database_name' with the name of the database you'd like to backup

   If you've ever setup WordPress or some other CMS which needs a database, you've likely come across this info before.

   You could test if your command works by first SSHing in and then entering in the command. If an sql file is created, it worked.

   If you have more than one database you want to backup, just create another mysqldump command.

2. Now save this file as something like 'db-backup.sh'
3. Upload 'db-backup.sh' to your /data folder
   I chose to put the script in this folder because when it runs, the .sql files are also dumped into this folder. This folder is nice because it is only accessible by you and you wouldn't want the public to accidentally stumble upon an entire dump of your database.
4. Now log into your Media Temple Account Center
5. Go to the admin section of your primary domain and click the Cron Jobs link
   
6. Click on the 'Add a new cron job' button
   
7. Feel free to fill in your email address in the output email field if you'd like. This will send you emails whenever the cron job runs and will let you know if it was successful or not. However, the important field we need to fill out is Command to Run. In this field, enter:
   /home/99999/data/db-backup.sh

   Again, replace the '99999' with your grid-server account number (it's actually listed below 'Command to Run')

8. In the bottom half of the page, you can specify how often you'd like your script to run. This entire section is up to you. I've set mine to run daily at 2AM when traffic on my site is slower
9. Click Save and you're all done!

Now what about saving these mysql dumps to my local disk?

If you've went through part one of this tutorial and successfully set up rsync, these dumps are now part of that synchronization.

Again, if something didn't make sense or you know of some way to improve these backup processes, please feel free to leave a comment!

Related Post

• Automating Your Server Backups On Media Temple’s Grid-Server
• A New Portfolio
• Using Git Between Mac and Windows
• BBM Probably Won’t Be Available to iPhone/Android
• Next Stop: An iPhone App for Calgary Transit