Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

KMFDM - WTF

Event
Wil Alambre
Wil Alambre Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:152
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Wil Alambre Whiteboard Ninja

Industrial rock group KMFDM will be releasing their new studio album WTF through Metropolis Records on April 26th. The disc will have eleven songs on it, including the lead single "Krank". The group are joined on the album by a string of guests including Static-X guitarist Koichi Fukuda, William Wilson of KMFDM Record's Legion Within, and Free Dominquez of Kidney Thieves fame. 

TheForks.com Launches Version 4

Design
Julian Moffatt
Julian Moffatt CEO / Partner
Visual Lizard
work
1 (204) 957-5520 ext:1
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Julian Moffatt Purveyor of Good Times

If you live in Winnipeg, you know about The Forks, where the Red and Assiniboine rivers merge on their way to Hudson Bay. Without question, The Forks is one of those jewels of Winnipeg that visitors remember long after they have left. From the waterfront dining, to the walk ways, the buzz of activity to the Market, The Forks has something for everyone.

The Versions Before

Before we jump into a technical post about what improvements we have made to theforks.com, we need to look a little at the evolution of the site. Usually by the second or third iteration of a site, most clients have a good idea of what their visitors are looking for. The Forks North Portage Partnership (theforks.com parent company) understands their visitors, but also has the unique challenge of having to represent:

  • The Forks Calendar of Events - because there is always something going on
  • Information about The Forks, such as merchants, dining, locations for parking and the history
  • Information about their other properties, such as Imax, The Forks Foundation and the Forks North Portage Partnership

Focus on the Content

With version 4, our design partners at Fusion put the focus on the two things that people want to see, relevant content and beautiful imagery. At Visual Lizard, we are big fans of keeping things simple. This version of theforks.com does just that. Pages are easy to scan at a glance, images are prominent, but hidden away until you want to focus on them, and the navigation is simple.

Calendar of Events

The Forks understood very early on that the Calendar of Events at theforks.com was one of the primary information points for over half of their visitors. It needed to be upfront and easy to scan at a glance. Mission accomplished!

Merchants and Dining

People visiting theforks.com are also interested in dining there when they arrive. With this version of the site, we have made the Shopping and Dining sections very easy to scan. The administration team has full control over what is displayed for each merchant, they can link to merchant websites and also provide photos.

Better Organization

All web sites need some sort of Information Architecture in order to exist. With this version of theforks.com, the site navigation is presented in two, clear navigation blocks at the top of the interface. The primary navigation now focuses exclusively on the content associated with The Forks. Colours have been carried over from the previous design and are used to provide visual cues for the visitor. All of the additional navigation can be found at the top of the header or in the footer. Nice and clean.

The Experience Layer

With version 4 of theforks.com, we finally got to say good-bye Internet Explorer 6. This allowed us to use some nice little CSS3 transformations in the corners and shadows. We also added several elements that are using jQuery to enhance their presentation, such as the image animations on the homepage and the photo galleries. For visitors in Internet Explorer 7 and 8, they still see the site and all the content, but they loose some of the CSS3 touches. This is acceptable degradation of the site.

Content Management System

Theforks.com has been running on our Catalyst CMS for several versions now. With this version of the site we have done the following:

  • upgraded all systems to our latest Catalyst 4 system
  • built some new tools for managing the calendar of events, dining, shopping and the bibliography
  • attached a Content Delivery Network (CDN) to the site for serving up all the static media elements, such as the background imagery. One of the primary advantages to using a CDN is that it allows your visitors to pull content from servers that are geographically as close as possible to their location. Another side benefit is that your browser gains additional connections above the default 2.
  • have multiple URLs managed through Catalyst for their admin team.
  • some awesome caching techniques to store views, models and modules, as well as clearing them when changes are made within the CMS.
  • perhaps a small, front end easter egg. This one is just for us, but good luck finding it if you go hunting

Happy to Help

Visual Lizard has been working with The Forks on their web site for almost a decade. When we were asked to help with version 4 of their site, we were ecstatic. We think version 4 is the best one yet!

Portal 2

Event
Wil Alambre
Wil Alambre Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:152
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Wil Alambre Whiteboard Ninja

"The highly anticipated sequel to 2007's Game of the Year, Portal 2 is a hilariously mind-bending adventure that challenges you to use wits over weaponry in a funhouse of diabolical science."

That's what the official Valve site says about the upcoming sequel, and personally, I think they are tragically understating it. The original was absolutely mind-blowing, trippy, and hilarious. It wasn't a long game, but it had a fantastic sense of humour and a great concept that continually delivers. This new version promises to deliver all this and more... including co-op play! :D

First Orbit - free film creataed to celebrate the 50th anniversary of the human spaceflight.

Event
Max Chiriac
Max Chiriac Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:155
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Max Chiriac Secretly is KGB that found cookie!

First Orbit - a new free film to celebrate the 50th anniversary of the flight of Yuri Gagarin. First Orbit is availabil on YouTube channel today. You can also join the global premiere at www.firstorbit.org.

Password Protected ZIP Archive on OS X

Technology
Julian Moffatt
Julian Moffatt CEO / Partner
Visual Lizard
work
1 (204) 957-5520 ext:1
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Julian Moffatt Purveyor of Good Times

To Future Me, 

 

So here I am assembling some semi-private documents on my MAC. To be a nice person, I figured I should ZIP up the files to save a little bandwidth, as my plan is to email this bundle to a contact. Not a problem because OS X has a built in archive tool. Just right click (ctrl click) the folder of files and choose make archive from the list. Voila, a ZIP file!

 

 

To be an even nicer person, I figured I should add a thin layer of protection to the ZIP file with a password. Hmm... how the heck do you do that in OS X? No options are presented when you use the context menu. A quick Google search turned up Stuffit, which is a bloated bit of software for what I am actually trying to do. Rather than waste time, I turned to the trusty command line. 

Since zip is built into Linux, it should be hanging out waiting for something to do. Sure enough, a quick command does the job. Let's look at it.

 

# zip -re zipped-me.zip zip-me/

 

The above command does the following:

  • run ZIP at the command line
  • -r means go through the target folder recursively
  • -e tells ZIP to encrypt the final zip file. In this case that file is "zipped-me.zip"
  • zipped-me.zip is the archive that ZIP will make
  • zip-me/ is the folder with which I will make my archive
  • during the archive process, ZIP will ask for a password. Provide it twice and you are done!

 

 

Run the following command in the terminal if your archive utility won't recognize the password. Which the default setup fails at. 

# unzip zipped-me.zip 

Obviously replace the name in the above command with the proper file name.

TaDa! 

Note: If you are not using the awesome and free Unarchiver Utility instead of the default setup, you should be!

Note 2: I'm throwing in the usual caveat here. If you DO NOT know where the command line is located in OS X, or it scares you, this article has nothing of value for you. If you choose to use the above command, we can't be held responsible for any damage, loss, corruption, etc... of your files, pictures of kittens, or anything else. This is advice on the internet. Use at your own risk.

Julian's Birthday

Event
Julian Moffatt
Julian Moffatt CEO / Partner
Visual Lizard
work
1 (204) 957-5520 ext:1
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Julian Moffatt Purveyor of Good Times

Getting closer to 40 and the long slide home. Happy birthday anyway!

Uploading Very Large Files

Functionality
Dwayne Kristjanson
Dwayne Kristjanson Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:154
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Dwayne Kristjanson Indifference Engine

Over the past few months, I've been working off-and-on to get an upload form working for very large file uploads. (In this case, very large means up to 1GB.) I'm still not done, but I've finally reached the "I think I have this mostly working" stage. So I figured I should write a bit on the problems I ran into, the tools I've tried out, and what I ended up doing.

Problems

INI Settings

The first issue I've had is that uploading large files using a PHP script requires increasing a number of limits set in php.ini. This pops up for any file larger than 2MB, since that's the default maximum file upload size for PHP. (Unless your host is already configured with a larger or smaller value.) Usually I can set these values by adding "php_value" statements to the .htaccess file, however in some cases php.ini needs to be edited directly.

The following values MIGHT have an effect on uploads. I'm not 100% certain, so if you know exactly when these settings could effect PHP allowing file uploads, let me know:

  • max_input_time
  • max_execution_time
  • memory_limit

These values set limits on how long PHP can run (max_execution_time), how long it can take to parse the uploaded POST data (max_input_time) and how much memory it can use on the server (memory_limit).

The following values absolutely MUST be updated:

  • post_max_size
  • upload_max_filesize

These values are used to limit the maximum size of the POST data (post_max_size) and the maximum size of any single uploaded file (upload_max_filesize). Binary POST data is encoded in Base64, which makes it larger than the size of the file on disk. The POST data also includes any other form values submitted. This means that the post_max_size will limit the size of the file you can upload. I usually don't bother trying to figure out the math for how much bigger one should be than the other. Often I just double the maximum filesize I want to upload and use that value for both. Not perfect, but good enough. Since PHP will usually die without any feedback if the uploaded file is larger than upload_max_filesize, it makes sense to allow uploads of larger files than you want to allow. For Catalyst, we've implemented an upload behavior that will disallow uploads of files larger than a specified size, and provide an error message that the file is too large. This can only be done if the "too large" file was actually able to upload, though.

In my tests on shared hosting server, updating these values didn't help for files larger than approximately 128MB or 256MB (depending on the server). I suspect that this is due to additional security software preventing these uploads. The behavior was a bit odd. In my tests I already had upload progress meters working, so I could see when things stopped. On the servers that had this problem, files smaller than the magic limit would upload without issue. Once I went over the limit, however, a few megabytes would get uploaded and then the progress meter would stop completely. My coworkers would also stop complaining about having trouble accessing the internet, so it was clear that data was no longer being sent. I suspect that something on the server was closing the connection when it detected that the amount of POST data was bigger than the magic number. The most likely explanation is that this is due to anti-denial-of-service software. When I ran tests on a server where I had full control over ALL software on the system, this didn't happen.

When I set up a Perl CGI script on one of the shared hosting servers, it suffered the same problem. I asked Wil to look into this a bit more, and when he set up a Perl CGI script to handle uploads he noticed that he could not track the upload progress of file. While his script was written to append data to a file as it came in, the file would just suddenly show up at full size. It seemed like the entire file was being uploaded to the server and then passed off to his script ... which would make sense if the security software were proxying POST data so it could prevent certain types of attacks.

Progress Bars

The second main issue with uploading large files using PHP is that PHP doesn't support progress bars for files being uploaded by default. There are numerous ways to ensure that a progress bar will show up, 

Client side solutions:

  • Use an HTML5 JavaScript uploader.
  • Use Flash to upload the file.
  • Use a Java applet to upload the file.

Server side solutions:

  • Use Perl CGI.
  • Install the Upload Progress PECL Package http://pecl.php.net/package/uploadprogress/
  • Re-compile PHP with the Alternative PHP Cache Extension http://php.net/manual/en/book.apc.php

Initially I wanted to use a Flash uploader. I've used these in the past and they are quite easy to integrate and allow things to fall back to a standard HTML form submission if Flash is not available. However, I soon ran into a problem. It seems that Flash on Mac OS X will try to load the entire file into memory before uploading it. From what I've read, Flash on Windows or Linux doesn't have this problem, but since I suspect a large percentage of the end users of this particular upload form would be using Macs, I couldn't just ignore the issue. Plus I'm testing on a Mac myself ... I'd really prefer to have an upload form that I could make use of. Trying to use a Flash uploader to upload a 1GB file on my laptop caused everything to freeze up, which meant Flash was out of the question. So I kept hunting. I ended up trying out quite a wide variety of tools.

Tool Pros Cons
SWF Upload
  • Well established and well documented.
  • MIT licensed.
  • Requires flash.
  • Flash on OSX loads entire file into memory, which freezes the browser when uploading very large files.
PLUpload
  • Multiple runtimes (Flash, Silverlight, Google Gears, HTML5, HTML 4)
  • Can automatically fall back to best available runtime.
  • HTML5 and Flash runtimes both load entire file into memory on OS X before uploading, which freezes the browser when uploading very large files.
  • GPLv2 or Proprietary license.
FileChucker
  • Perl CGI (if you use Perl).
  • Perl CGI (if you don't).
jQuery File Upload
  • HTML5 based, requires no additional plugins.
  • MIT licensed.
  • Doesn't freeze the browser when uploading large files on OS X.
  • Separating out the jQuery-UI features so you can use your own styles is a bit tricky.
  • No progress bars in IE or Opera.
JumpLoader
  • Can pause and restart uploads.
  • Can upload directly to an FTP server.
  • Java applet.
  • Requires a proprietary license to use without a logo.
Jotform
  • Can create complex forms.
  • Synchs with a Dropbox account.
  • Can automatically email form results to you.
  • Saves other form data in a PDF.
  • Externally hosted, so upload bandwidth does not apply to your server.
  • Not integrated into the website. An iframe must be embedded.
  • Styled by Jotform, not the containing website. Customizing the form appearance might be difficult or impossible.
  • Requires monthly subscription in addition to Dropbox subscription.
YUI Uploader
  • BSD Licensed.
  • Good integration with YUI controls (if you use them).
  • Beta software.
  • Requires flash.

Conclusion

I'm currently leaning toward using the jQuery File Upload script. It's simple to integrate, and doesn't require anything special on the client side. The only downside is that IE users will see a spinner instead of a progress bar. Unfortunately, the only way I could get progress bars in IE was through a Flash, Silverlight, or Java uploader and none of the ones I tested worked well in OSX. So it comes down to IE or everything else.