goSammy

This blog hasn’t been getting very much attention lately, but I hope that by switching over to Octopress, it might rekindle things.

Sometime in the last year, I did some server maintenance which seemed to affect the performance of Wordpress. I could have either thrown more money at my hosting service in hopes of give Wordpress the resources it needed, but I took the cheaper approach and made a weekend project of migrating everything over to Octopress.

The result is a completely static blog that’s snappy, and I get to write all my posts in markdown.

This semester I enrolled in an info visualization course which required us to submit three visualization projects over the course of the semester to be programmed in Processing. For one of my projects, I chose to log the timings of my commute by Calgary Transit as data to visualize.

Since the course started in the fall and is to last until the end of this year, I felt that it would be pretty interesting to see how the timings would change once winter rolls around as it can cold and a lot of snow can hit the city during the winter, or not.

When I first began collecting my data, I began logging my times in a notebook.

However, since I intended for this one to be my final project, I wasn’t keen on doing it this way for the long haul. Having to fiddle around with a notebook during transfers and a stopwatch at the same time was not ideal. I was a computer science student for crying out loud…so I programmed an app.

The app streamlines how I log my time by providing me with five buttons I need to push at each point in my commute. Beyond needing less interaction on my part to log my time, having produced an app such as this actually benefits my data collection process in three ways:

1. The timing points are more accurate compared to the stopwatch I was using.
2. Duration calculations between the different timing points are automated.
3. All my data gets collected in a format (CSV) I need for when I have to visualize it. No more transcribing from my notebook at the end of the day!

I programmed it over the course of one evening so the code is less than ideal, however in the case that someone might find code for an app like this useful and want to repurpose it for something else, I’ve made it available on Github – so feel free to fork it!

There’s a fan-made poster making its rounds on the internet that you might have seen. It incorporates elements from the posters of Batman Begins, The Dark Knight and The Dark Knight Rises, put together, to display the bat logo.

Batman Trilogy – poster by ~AndrewSS7 on deviantART

I originally came across this poster on my favourite internet news site, and in the comments section there was a request for a wallpaper. Coincidentally, I was having a slow day thought it’d be fun to redo the concept as a larger image for a wallpaper. However, I altered it a bit by making the bat logo overall a little more centered and removing any type as I like my wallpapers simple.

Below are versions for your desktop (1920×1200). I made a version which mimics the original and another which blends the three posters a little more. Click the image to view in full resolution.

You can also download it for your iPhone:

The last time I redesigned my portfolio was in June of 2007. A little over four years ago…that’s a long time.

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:

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

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)

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.

In the past I’ve been mostly a Subversion guy when it came to version control, but recently I decided to try Git on a project. After going through an awesome intro guide to Git, I can definitely see the appeal of Git, especially when it comes to small personal projects. Below are a few cases where I ended up scratching my head trying to clone and pull between a Mac and Windows because the support for Git on Windows isn’t as great on OSX or Linux.

Warning: The following has worked for me on Windows 7. YMMV when it comes to previous versions of Windows. I also prefer the command line when working with Git and Cygwin is a requirement.

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:

$ git clone your.macs.ip.address:/path/to/files

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.

For many months now, I’ve been working with the guys at Mediumrare on an iPhone app to help look up upcoming bus and train times. It’s been a long journey and we left Calgarians a little taste of what’s to come on our company blog, as well as a little demo at DemoCamp. However, last week we finally wrapped things up and submitted version 1.0 to Apple. While the app is waiting to be reviewed for approval, I thought I could give a peek into what it was like to develop my first iPhone app.

A Functional Prototype Goes A Long Way

This summer, I decided to try my hand at iPhone app development. An opportunity arose when we were playing around with the idea to make a more friendlier website to look up bus times. Although creating a website could have been translated into a mobile version, I thought it would be fun to experiment and see if I could come up with a native iPhone app.

I spent a couple many hours delving into Objective-C. I had some basic experience working with C++ in a 1st year computer science course at the U of C, but coming from that and mostly working with Java in other courses, I have to say that the syntax initially comes off as quirky. Eventually though, it was just another language that you get used to (although it helps if you have a background in working with C++).

After a little over a month, I had a functioning prototype. Although it had some rough spots, the prototype did what it was supposed to do by essentially doing the equivalent of filling out the Next Bus/CTrain form on the front page of the Calgary Transit website, grabbing the responding web page’s HTML, parsing it to grab the needed data and displaying it to you.

After getting in touch with the right people, I was able to demo the prototype to some employees of Calgary Transit and the City of Calgary. At the time, a public feed of Calgary Transit’s bus times data was not available and the methods in which I got the data for the prototype went against the terms of service on Calgary Transit’s website. Thankfully after meeting with them and waiting it out, Calgary Transit finally exported their data in the Google Transit Feed Specification which we were able to use legitimately in an iPhone application.

A Re-do

Although we could have easily just changed the methods in the application on how it grabbed the data to the new stuff, Leigh and Bryan proposed some fantastic redesigns which made the app look much more polished.

I too decided to re-do things by rewriting the entire application. The prototype was mostly mashed up pieces of sample code I found from Apple’s developer resources and other various iPhone tutorial sites. I started with a new direction, leveraging the Three20 framework — the same framework which powers Facebook’s iPhone app.

By basing the app on the Three20 framework, I was able to utilize some neat features such as:

• An inline browser (so that clicking on a link in the twitter feed wouldn’t kick you out of the app)
• URL based navigation (this feature made transitioning between controllers feel more like a webapp — even allowing you to pass parameters in the URL)
• A global stylesheet (you’re able to define styles such as colours and fonts in one file, much like the way CSS works)
• A JSON library (parsing JSON for the twitter feed and bus times was made easier because of this)

Current Status

As of this post, the app has already been submitted and is going through Apple’s app review process. In the version which we submitted, you will be able to:

• Look up upcoming bus/train times using the 4-digit stop number
• See the last 5 recent tweets from Calgary Transit’s twitter account (makes it easy to see delays, especially in the recent snowy weather we’ve gotten these past two days)
• Add a stop to your favourites
• Rename a favourited stop
• Reorder your list of favourite stops

Based on other developer’s experiences, our app should be hitting the app store in about a week now. If you’d like to be notified via email as soon as it shows up, sign up on our mailing list at http://calgarytransitschedule.com.

Ever since I started moving on from just developing websites to more complex web applications, I’ve learned different ways of optimizing your web application for speed and efficiency. It’s important to keep your web application running snappy, because as LinkedIn has found out: the likeliness at which visitors bounce is directly related to the performance of your web application. You can find out more about their story with how they kept their Bumper Sticker application running snappy by watching this video hosted on Joyent:

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

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

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.

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.

It’s definitely been a long time since I’ve updated the blog but when I decided to go about updating it, I also wanted to change up the theme because frankly, it was no longer to my liking.

Besides the new theme, I’ve been working a new job at Mediumrare as a web developer. Mediumrare is a new startup in Calgary that provides web design and development services as well as some print work on the side. It was partially started up by some of my friends I met through Critical Mass and when I was out looking for some full time work over the summer, I was glad to join a company with old friends.

Since joining, I have taken on a lot more responsibilities than just a web developer. It wasn’t too hard to adjust working with such a small team since I had my roots in freelancing. Besides filling a web developer role, I’ve done quite a few tasks in regards to server administration which was a welcome challenge.

Beyond that, I’ve also gotten involved in some other interesting application development projects — namely iPhone app development which I hope to blog about later on when production nears finalization.

A few weeks back I updated the Wii Friend Number Facebook App with some significant features. It didn’t get much fanfare as I released it somewhat quietly so here’s a recap of the changes made:

Public Directory

On the application’s discussion boards, there were threads upon threads of people sharing their friend codes for different games. These threads extended to multiple pages and it was clear that some sort of area on the site should host your numbers publicly beyond your friends on Facebook. I also paired this up with Facebook’s messaging system to make it easier to share numbers. I recorded a screencast which outlines how the Public Directory works and it’s the best way to grasp how it works:

Searching the Public Directory

Shortly after releasing the Public Directory, the listings became crowded and I made it possible to search up random people based on a game they own.

What’s Next?

The Public Directory is gaining more and more entries and I’m thinking of setting up a top 10 list of sorts to show what games are popular and find people based on that game. Just a few days ago I also emailed Nintendo asking if there were any APIs I could use for my application such as online statuses, etc. but it turns out they do not endorse these sort of “sharing sites” and did not wish to help me.

Anyways, if you’d like to keep up with the progress and updates for the app, subscribe to the blog I set up just for it: http://wiifacebookapp.wordpress.com/

Earlier this week, Google released a mobile version of Gmail Tasks which could be accessed on the iPhone/iPod touch or an Android device as its internet browser is also WebKit based. I thought it was great that Google allowed us to manage our tasklist previously only accessible through Gmail or a Google Gadget on the go now – but was pleasantly surprised at the attention to detail when you added the site to your Home screen on the iPhone:

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:

<link rel="apple-touch-icon" href="PATH_TO_ICON_HERE" />

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?