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.

Website Development using Google Chrome

Functionality
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

In one of the latest updates to the Google Chrome browser, a security feature was added as part of web standards moving toward proper secure websites using SSL certificates under the HTTPS protocol. What we discovered however, is that websites that are still under development that have form elements for passwords or credit card numbers are being flagged (and rightly so) as part of an insecure website. The notice of this isn't the problem. A second effect of this new feature is that the Google Chrome browser takes it upon itself to completely disable the form. Again, on an active website this is a nice security feature. It doesn't give the user the opportunity to enter data that could possibly be sent over an insecure site.

From a developer's standpoint, it becomes difficult to do any light programming tests or styling because the forms don't display. In searching for any mention of this issue, before we were aware of this specific change, we found nothing about how to disable this feature so that tests could be run. We were fairly certain that it would be part of the Google Developer Tools for Google Chrome, but there don't appear to be any easily accessible rules that describe this issue.

We did a thorough review of all of the tabs in the Google Developer Tools. We wanted to see if there were any settings that may have needed adjustments to allow for the forms to render even though our development sites are under standard HTTP protocol. There was nothing specific to our issue, however we did come across the browsers caching settings. This was about the only thing we could find that looked like it might help. By disabling the caching in the browser, it forces the page to reload from scratch. It retrieves all of the information from the server as if it were the first time. This bypasses the security protocol in the browser that prevents the offending insecure form from rendering. It is recommended that if you use the Google Chrome Browser on a daily basis that you do not disable this caching as this new feature is quite helpful in helping prevent users from accidentally sharing personal information on insecured websites.

For the developers however, the following is a quick step by step on finding and disabling the caching in the Chrome browser so that you can develop your styles and do your light functional tests. (The following steps are for a Mac. PCs should have a similar, if not the same set of steps)

  • Step 1: Open the developer tools. View -> Developer -> Developer Tools
  • Step 2: Select the Application tab;
  • Step 3: In the left navigation bar under Application, select Clear storage;
  • Step 4: In the settings to the right of the navigation bar;
  • Step 5: Scroll to Cache and uncheck Cache storage and Application cache;
  • Step 6: Close the developer tools, and refresh the page on which your form is located.

Your browser's cache is a useful tool that helps webpages to load quickly. The storage of frequently used webpage assets makes for a fast and efficient user experience. It's just a bit of a pain when it comes to development.

Designing HTML Email templates

Design
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

From time to time we revisit the topic of HTML email templates to keep ourselves informed about the state of email standards. Over the past few years we have received more and more requests to develop email templates for regular mailings to large client lists. From a programming standpoint we are fully aware of the limitations that come from trying to implement a design that will work in multiple email browser clients. In past articles we've made note that certain email browsers do not handle modern HTML very well and that modern CSS won't necessarily work either.

Since we need to use a much older form of the HTML programming language in order to build HTML email templates, we have some immediate programming limitations that are not seen when developing for standard websites. We are developing these email templates for some archaic email browsers. While the email browser market out there is getting better, we still have to take into account that not every business keeps their software up to date. That is where we need to start. We develop for the archaic versions first to be sure that the minimal intended look is getting to these browsers. When thinking about an email template design we need to start with the simplest look that works well with browsers like Outlook (versions 2007, 2010). Since both of those versions of Outlook are widespread, if the design works there we have a good starting point.

Layout

One of the most frustrating things we have to deal with when it comes to email templates is the inflexibility of the layout. Because we have to build our templates on a grid, that means that we can't make things overlap. A design with overlapping elements requires the design to be cut into blocks and laid out using table cells containing images. The weird thing here is that one of the old tricks to doing layout in tables was to prop open spacing elements using spacer graphics. Some email browsers strip out those spacers which effectively breaks the layout. The general rule with email templates is to make the design dead simple. All of the restrictions imposed by the browsers and old HTML mean that a design with a lightweight layout and minimal graphics will always work better that something that has a large number of graphics and a complicated layout.

Fonts and Images

Fonts are fun and can help a design immensely. Unfortunately support for fonts in email templates is again very limited. Modern email browsers can usually handle some web based font providers like Google Fonts. But again, the email browsers previously mentioned don't necessarily recognize the code calling to those external resources. That being the case, from a design standpoint, if the design can be made to look good with standard web safe fonts that are available on the vast majority of computers, it makes the designer's life simpler. Unfortunately that means the designer's toolbox becomes a bit limited.

Images are part of the design that help sell the information to the recipient. The rule however, thanks to the prevalence of spammers, hackers, and phishers, is that images (which are technically attachments) do not necessarily display by default. The ability to display images in emails is usually a defined preference in the email client settings. So if the design can look good without images either then we're way ahead! Images types are also limited thanks to browser limitations too. Some email browser clients don't support .png file format. That means that if an image requires transparency, it has to be a .gif.

A final note

With all of the limitations thrown in the path of HTML email templates, it can be a real challenge to come up with something simple and beautiful that will work in those old but very prevalent email browsers. For a more detailed analysis of what was discussed here from both a design and programming standpoint you can read the guidelines that one of the best email campaign sending sites on the web.
[ https://www.campaignmonitor.com/resources/will-it-work/guidelines/ ]

The Origin Chip And The End Of The Internet As We Know It

Functionality
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

Last week, internet enthusiasts all jumped onto their blogs to write about Chrome Canary. It seems that version 36 started burying the long-form URL, and showing only a webpage’s domain name in a new “origin chip”.

If you want to give it a look-see yourself, download Chrome Canary and enable the origin chip by copy-pasting the following line into the address bar:

chrome://flags/#origin-chip-in-omnibox

Chrome Canary is the experimental version of Google’s browser that lets developers and early adopters try out proposed features. There’s never any guarantee that anything found in it will ever make it to the main channels, never mind being adopted into rival browsers.

Some guessed the change was to emphasize internet searches over internet addresses. Others assumed it was to make it harder to trick the average user with phishing sites. Either way, you’ll be hard pressed to find an article that sees this possible change as a ‘good thing’.

I’m uncertain where much of the apocalyptic conjectures are coming from. A similar thing is already happening in iOS’s default web browser, and has been there for a while now. Last I checked, the mobile web hasn’t yet melted down into an unuseable chaos of phishing trap sites.

Here’s that same blog page rendered in Mobile Safari:

We’ve been on a trend of reducing the URLs for years. Once upon a time, we needed to type in both “http://” and “www.” if we wanted to reach a valid webpage. I think we all got sick of radio advertisers saying “double you double you double you” every morning on the ride in from work.

Modern URLs are more influenced by search engine algorithm changes than by any affirmative attempts to human readability. This has lead to URLs getting stuffed with various pieces of content like page titles, published dates, author names, etc. It may help page rankings, but this information unnecessarily formatted into URLs is just duplicating the ‘real’ content on the associated page. I predict that Google will eventually drop ‘readable URLs’ as part of its rankings for the same reasons it did for keyword metatags.

Developers have to help the machine interpret these long strings into the ID values and file names its expecting. And as web users, we have to do the same thing, trying to translate a coded address into the context we’re interested in. After all, when we send a friend a link, we don’t actually want to share the URL with them, but the content at that URL. This is why Twitter and Facebook use open graph data to provide a preview with status posts:

This isn’t to say URLs are disappearing completely. Over the past four years, the URL has become more prominent in Google own search results. In 2010, the URL appears at the bottom of a listing, and it didn’t even earn itself the link underline:

Today, the URL appears at the top, second only to the content title itself. Even the green font color has been tweaked to let it stand out more:

But realistically, URLs have always been just a means to an end. Every web browser worth its salt can save and sort bookmarks, a feature whose purpose is hide a URL behind a memorable label. As web developers, our job is to tuck the nitty-gritty workings of a webpage underneath slick user interfaces and carefully chosen font families.

The tech savvy among us will laugh at the idea of our grandmothers going to the Google homepage that she’s bookmarked, typing “facebook.com” into the search field, and click the “I’m feeling lucky” button every single time… but it's a stereotype that demostrates how many people see URLs. Domain names are seen more as brand names than machine addresses these days. This is going to blur even more as top-level domains like “.tv” and “.bike” become more prevalent.

The long-form URL will exist behind the curtain for a very long time, but its importance up front and on stage is certain to diminish. It's the scaffolding of the internet, not the star.

Email Templates: Making it Work for Outlook

Functionality
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

In the past few years we've written a few articles about Email Templates and Email HTML standards. The reason we wrote these articles was because we have been doing a number of these email templates using various services like our emediatemail.com, MailChimp and others. In recent weeks we received a template design which should have been relatively straight-forward...

This particular design used background images in a few locations to enhance the look of the template. Normally we can display background images and then fallback to solid colours when the email client does not support them. In this case however it was extremely important to the client to have the background graphics appear in Outlook.

Outlook does not fully accommodate web or email standards. It will normally just fall back to a simpler version without background graphics. However, in order to solve this issue we are re-evaluating how we tackle these HTML email templates.

We decided to go back to the drawing table... literally. We went way back to how we used to layout HTML pages in the late 90s... tables and nested tables. Some googling for insight was also required.

Here are some of the things we learned:

Padding and margins - depending on which version of Outlook, css padding and margin may only be partially or not supported for block elements. We had to fallback to using the cellpadding attribute for Outlook. Unfortunately, this only works if you want a consistent padding around the content in the cells of a table. If you need some additional spacing or padding it's back to nested tables and cells containing the good old spacer graphic (transparent gif or png).

Because padding and margin on block level elements like paragraphs and headings aren't likely to work the way you intend them, the use of spacer graphics becomes important. The problem there is if spacers are applied around elements in these editable templates that are considered optional. For instance, the article in the template has an optional image between the heading and the first paragraph. The design has significant spacing between the heading, the image, and the paragraph that follows. Because we need the spacer graphics to help in the image positioning those spacers are always there. If the new version of the email newsletter our send-out doesn't require that image we are still left with the spacers which leaves a substantial space between the heading and the paragraph. Because of the lack of standards and Outlook's quirky interpretation of HTML we are stuck with some display oddities which we could not fully solve. Luckily they were acceptable to the client.

CSS float - again depending on which version of Outlook the email is being viewed in the level of support varies so it is best to find alternatives to floating elements. The best way to handle these layout issues is nested tables. If you need graphical elements to line up and be spaced properly then it's best to slice up the design graphic and set the table cells that contain those graphics to have no cellpadding or cellspacing. Sadly the old vspace and hspace attributes don't work. Older versions of Outlook might support them, but Outlook 2010 and 2013 don't.

Background images - the general practice out there to design your html email with background images that can't be left out of the display. Outlook will likely ignore them. We hate having to tell client's that we can't or couldn't achieve something. So if they want a background image in their HTML emails, we should do our best to accommodate. Unfortunately due to the still (it is 2014 Microsoft) non-standard HTML rendering in email clients, certain things like background images become really iffy to implement reliably.

For most email client browsers this isn't really an issue anymore as many of these are beginning to adopt some HTML standards. MS Outlook is not one of them. Microsoft has instead promoted the use of proprietary code in order to implement background images. The use of VML to implement backgrounds is their answer to the background image issue. This however is only the first part of their implementation. My colleague and I had to do some digging to find out why our VML implementation was still partially broken. Apparently any images that are to be implemented using this VML coding must be 96 dpi, not the default 72 dpi which most people know to use for web related imagery. The dimensions themselves don't change, but VML requires the 96 dpi. To be on the safe side it is best to make all images for the email template at that 96 dpi, even the ones that are not meant for backgrounds.

It should also be noted that this VML solution is not complete until the table inside the associated v:shape element is set with some negative margin to compensate for the VML inset. We couldn't find anywhere in our research for nullifying that inset, so our only solution was to include some MSO specific comments in our HTML which would allow us to reposition the element with CSS. Obviously this isn't ideal as mentioned above CSS isn't reliable in Outlook.

Other notes about email

Conclusion

When implementing an email template, always build for Outlook first. Once the hard stuff is done, minor tweaks to the CSS for web standard compliant browsers should be relatively straight-forward... maybe. As a note to designers, HTML email templates are a cool way to help with client marketing, we just would like you to keep in mind that there are some real limitations to what email client browsers can render. We as programmers don't like saying no because it would be awesome if we could do all of the things that your concepts entail. We just need to remind you that the technology hasn't necessarily caught up with that awesomeness.

Happy Holidays and So Long 2013

Business
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

Hey there Everyone,

Can you believe that 2013 is just 2.5 weeks from over as of this writing? Time has become this unstoppable river of events blending from one to the next. The saying "The days are long, but the years are short" by Gretchin Rubin in her Happiness Project book, was clearly written by someone that doesn't work on the internet for a living. We work, and live, at the speed of light. With that being said, we really appreciate the holidays and our downtime.

Music for Your Holiday Get-Togethers

In case you are not on our very infrequent mailing list, we put together our favourite tunes to help get us into that holiday spirit. Point your trusy web-navigational-device at http://www.visuallizard.com/christmas/ and turn up your speakers!

Hint: you can sign up below by sending us a quick comment and checking the box to receive emails once in awhile. We sometimes do really fun things in those emails!

We Built You a Little Game To Play

In keeping with our love of building things for the internet and computers, we put together a little Holiday themed memory match game. Until Dec.17, you can enter once per day for a chance at some New Year's Eve Jets tickets. After that you can keep on playing as much as you like. Try and beat your best time!

Holiday Hours

Visual Lizard will be closed from December 20th through to January 5th. We will return to normal business hours on January 6th, refreshed, recharged and ready to tackle 2014. During that time if you need emergency assistance, please call 204-957-5520 and follow our auto-attendant's instructions.

A Big Thank You

Over the course of 2013, we have worked with some terrific people all across Canada. To everyone that believes in us and lets us solve problems for a living, we raise our glass to you and say thanks! We hope you have a terrific holiday, with wonderful memories, warm moments and lots of fun. 

Happy Holidays Everyone!

Sincerely, 

Julian, Doug, Ross, Wil, Max, Dwayne and Lauren

Safari Push Notifications

Functionality
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

As a web developer working on a Mac, one of the more intriguing additions to OS X Mavericks was Safari Push Notifications. Though local notifications have been around for a while, those only worked as long as the site visitor had a browser window open on that page. Push notifications held a lot more potential: the user didn't have to stay on the webpage. They didn't even have to have their browser open.

Using our website a testbed, we decided to implement this new functionality on our blog. We wanted blog authors to receive notifications on their OS X desktop when anyone left a comment on any article they wrote. This took a little more wrestling than we anticipated… though Apple provided documentation about Safari Push Notifications, it extremely frustrating to follow because it skips some steps around certificates. I'll save you the headache of digging around, and point you to the documentation you'd need that covers the creation of .P12 and .PEM certificate files.

The end result is some pretty streamlined interaction. And unlike local notifications, the elements are branded by our website, not by the browser. Neat! The process starts in Safari, with some javascript asking the user for permission to send notifications:

Since this is a javascript trigger, we've already seen websites pop up this alert when the page loads. I don't know about you, but having an alert spawn on page load is the worst way to get me to interact with your site! Thanks to years of aggressive online advertising, we've been trained to immediately dislike and distrust these kinds of attention-grabbing methods. For the Visual Lizard blog, we tucked this trigger over on the administrative side of our Catalyst content management system instead; only when the user presses a clearly labelled button do we trigger the alert.

Now, once permission has been granted, all future interaction is handled through web servers and Apple's services. How and when notifications are sent are handled by web developers and their code. For example, a visitor can leave a comment on this blog and that'll trigger PHP on the server, sending a notification through Apple's push notification services to the blog article's author. Whether we're at our computer or not, whether we're working in any app or not, we'll receive an OS X notification that looks like this:

Handy! And how these notifications display on your desktop are managed just like any other notifications, through the OS X preference pane:

However, there are some downsides. These notifications seem to be device specific. If you sign up to receive notifications on your computer, you won't receive them on your iOS devices. It's set to your OS X desktop, not to your Apple ID. And you'll need to use Safari 7.0+ to grant and deny permissions from then on. You don't have to trust the website developers to enforce any "do not spam me anymore" functionality (thankfully) as you can handle that through Safari's preferences… but that ties these alerts Apple's browser.

The end result? Some pretty cool functionality… but web developers like myself won't find may opportunities to use it. In our testing, it does provide feedback from our site much faster than email (which is limited by when cron jobs run and how often our mail apps fetch information). It would be very useful for any Catalyst administrators looking for near-instantaneous updates on online purchases, registrations, or similar items from their site that require manual review. But because it's tied to OS X Mavericks and Safari 7.0+ specifically, it narrows the number of people that would be able to use it.

Code Camp at Visual Lizard

Functionality
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

Hi everyone,

A few months ago, Visual Lizard started into our 18th year. With that anniversary date (18 years is forever in internet time) we did an internal review to make sure things that made us tick over the years still fit into our vision of who we are. To keep true to our desire to build great things, we decided to implement an almost monthly staff event that we have dubbed CODE CAMP.

Code Camp is 10 one-day competitions held over the course of the year. The general idea goes like this:

  • arrive at the office early
  • brainstorm ideas of little projects we can build/complete in 1 day
  • narrow the board of ideas down to 3 that we are all interested in
  • vote on the idea to build
  • draft teams where we split up the various rolls (i.e. 1 project manager, 1 programmer, 1 front end, etc... we might tweak this as we go)
  • start the clock for 1-1.5 hours of build time in the AM
  • break for a full team lunch for 1 hour
  • back to our teams and build solid for 2-3 hours
  • deadline alarm goes off and hands OFF the keyboards. No more changes!
  • then each team leader pitches their project to the entire staff
  • we then discuss each project as a group, the good, the bad, the other ideas we had to cut in order to get stuff done, etc... there maybe a beverage or two involved at this point.
  • select one winner from the projects and launch it (if applicable)

Last Friday, September 27, we had our first Code Camp event. Well, it was actually #2. The first one got postponed to later in the year. Following our plan above, we met and started to brainstorm out ideas. It had been awhile since we filled a wall with ideas, so it took everyone a little bit to get back into the swing of things. Pretty soon ideas where flying around faster than I could write them down. Things like war on terror victory maps, beard volume calculators, cats (it is in the internet), an RPG, and more. The golden rule when brainstorming is that there are NO bad ideas. 

After the dust had settled, we had all decided to build a little site to help promote Winnipeg (and surrounding area) web developers . It would consist of a list of URLs of projects built locally. We grabbed a URL http://www.builtinwpg.com to house the project at the end of the day and off we went.

The teams where, Doug, Wil, Ross and Lauren (Team WLDR, pronounced Wilder!), and they got to setup in the boardroom due to their 4 person size. The team of Dwayne, Max and Julian (Team DMJ, pronounced Team Damage!), got setup in the secret internet assembly office.

Both teams started out in a similar manner by writing out ideas and the goal of their projects. We do most of our planning on our walls here at Visual Lizard HQ. Team DMJ did a LOT of crossing off of ideas after we wrote them all down. We looked at the aggressive timeline and wanted to make sure we had a working project by 2pm. Set with a simple list of items we could build, we got started before lunch. We decided to start with Catalyst (our CMS) since we know how every inch of that software works. After getting a base install in place on a local server in our office, we set out to build the bare essentials of the project. A list and a form to add URLs to the list. By now it was lunch time.

After a delicious beverage and lunch over at the King's Head (it was also Ross' birthday), we rolled up our sleeves, set a timer, and got to work. We picked a very limited colour scheme, did some Creative Commons searches for images of Winnipeg over at Flickr, found some Google fonts, wrote copy for the site, tested, built and tested some more.

As the clock was ticking towards 2pm, we chopped a couple of presentation layer ideas from the plans, as we would not be able to properly implement a hidden form with animation built on a click to reveal trigger. We also scrapped the start we had made on capturing the submitted URLS and generating screenshots.

1:45 pm and Team DMJ have now committed all our code. Our team spent a few minutes writing down the selling points to our project for the presentation. We tested things one more time and felt pretty good going into the 2pm deadline.

When we all met to review the projects, we found the other team had taken a pretty different approach. Their project was using the google maps API, had room for a lot more stuff, did some pretty cool things with animation and in general looked really good. If they had completed the "submit your site" form, they would likely have had their site online. Unfortunately (or fortunately for our simple little site) team WLDR had run out of time.

All in all, it was a super fun day. Everyone got to roll up their sleeves and play a part in a project build that had a very simple idea, a very short timeframe and a bunch of great people working on it. I think I can speak for the entire group when I say we are all looking forward to Code Camp #3 on November 1.

If you are a web developer, a programmer, an app developer, a designer, and you live in or very near Winnipeg, then please head on over to http://www.builtinwpg.com and submit your site if it meets the criteria. We would love to build that list into a huge repository of all the work we Winnipeggers have built over the years. We look forward to seeing what your projects look like.

How to Make a Cheap Standing Desk

Functionality
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 follow our blog, or are into staying healthy, or read about technology, then you know that sitting in a chair all day is not the most healthy thing in the world for you. In our recent move to our offices at 102-110 Princess Street, we lost our nice 4' middle wall The old 4' wall at 141 Bannatyne that allowed a few of us to work standing up for parts of the day. To make up for this minor loss, we have been hacking around with pieces of shelving, table leaves, stationary boxes and other bits we had lying around in a MacGyver-ish, do-it-yourself, hobo-style standing desk configuration. Since it doesn't appear that people want to sit down all the time, Wil and I have been looking into ways to make more permanent standing desks. If you want to build your own standing desktop, here is what we have done:

Dig Through the IKEA website

Having a decent working knowledge of what is available at IKEA (it's a curse) we immediately looked for some low-cost legs and table surfaces. We set a budget of $50 for each setup with the goals of having it look nice and be functional. We ended up choosing the CAPITA Legs and the LINNMON table top. The CAPITA legs are usually used under kitchen shelving and as such, have a nice adjustable feature for balancing out uneven surfaces. The LINNMON table surface is very light, sturdy (although you may not want to stand on it) and has nicely finished edges in all directions. The cost here was $25 and $9. With taxes the entire setup was under $40!

Some Light Assembly Required

With our pieces in hand, all we needed to complete the job was a screwdriver and a little muscle.

supplies and tools for desktop build
Supplies at the ready.

pre-drilled holes and capita base desktop build
The pre-drilled holes do not match up. No problem.

pre-drilled holes and capita base desktop build
We used the outer hole as an anchor and hand cranked 3 new ones.

2 legs completed desktop build
Halfway there!

completed desktop build
All legs on. Now to test it out.

Enjoy a low-cost desktop extension!

completed desktop in action
Our setup worked like a charm. Cables can run below with the laptop, and there is lots of room on the new, extended-height, desktop for keyboard, mouse and Cthulhu!

The entire build process for each of these units is about 30 minutes of assembly and 90 minutes of running to and from IKEA here in Winnipeg. For under $50, we now have some much less hobo-like standing desktops in the office. The other major bonus here is that cords, cables, notebooks, backup and external hardrives and the like can all slide neatly underneath the table top, leaving you a nice, large area for your keyboard and mouse. Awesome!

Other possible surfaces from IKEA

If you are looking to spend a little more at IKEA, you can look into larger surface areas like a solid wood GERTON table top or a high-gloss finish on the LINNMON which might actually be glossy enough to use as a whiteboard, although this is untested. There are of course a ton of legs to choose from if you don't like the look of the CAPITA. Regardless of what you go with, if you find a neat solution or found this article to be useful, let us know. Drop a comment, send an email, or tweet us.

Footnote: we get nothing from IKEA and are not affiliated in anyway. We just found their stuff perfect for the task and very affordable.

Scalable Vector Graphics In St. Vital Centre

Functionality
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

When it came time for Fusion and Visual Lizard to relaunch the St. Vital Centre website, one of our goals was to modernize it as much as possible. This meant using up-to-date web standards, creating a responsive layout, and replacing Flash-based elements with CSS and JS alternatives. Doing so would ensure the site worked smoothly on current web browsers as well as mobile devices. The biggest challenge ahead of us was going to be the directory map.

The original directory map was built using Flash. Though it operated smoothly, it couldn't be seen on iOS devices, which currently account for nearly a quarter of the website's traffic. However, St. Vital Centre wanted to maintain the general functionality: being able to zoom in/out, panning in four directions, as well as clicking and highlighting individual stores. A static image wasn't going to cut it.

After some research and experimentation, we decided to build the new directory map with scaleable vector graphics (SVG).

The big gains using SVG is that it loads fast, looks great on high-density displays like the new Retina iOS devices and Macbook's, allows for direct manipulation through CSS and JS, and it works on modern mobile browsers like iPhone's Mobile Safari. Two main problems are that it has spotty support in many browsers, and that it has zero support in older browsers like IE8 and IE7. Not ideal.

Luckily, we didn't have to do anything too fancy with SVG for our directory map. Basic support was all that was needed, with some sort of fallback for those browsers that couldn't handle it. We accomplished this by using SVGWeb, a javascript library designed to provide support to as many browsers as possible and allow for a Flash-based fallback for everything else.

Fusion created the directory map as a vector graphic, to be used in printed material as well as the website. We were able to convert that vector graphic into SVG markup by importing it into Inkscape. Inkscape automatically groups paths and assigns ID attributes, but you can use its provided tools to do some general manipulation. For instance, we made sure the amenities on the map (washrooms, telephones, etc), were assigned ID attributes with similar prefixes so we could target them specifically.

SVGWeb documentation recommends keeping the SVG markup as a separate file and calling it in using an object tag. This would allow browsers to cache the file and speed up page load. We decided to include the SVG markup instead, as this allowed us to style it with CSS and assign JS events with jQuery.

Adding zoom and pan tools to the map was relatively simple using jQuery. There are multiple tutorials and libraries you can find through a google search. We also used jQuery to assign hover and click events to the map, making each store a link to the individual tenant's information.

The good thing about building it this way is that SVGWeb applies the full SVG markup and the assigned JS events into the Flash fallback. The panning, zooming, hovering, and clicking all works in the Flash version without having to code a completely separate solution.

One of the accepted tenants of using modern techniques like these are acceptable fallbacks. In older browsers, we see Flash instead of SVG. In some browsers, the popup labels get positioned at the mouse pointer's location rather than above each store. In some browsers, the popup labels don't get the little arrow "tail" on them. Not everyone is going to get the same experience, but not everyone is losing anything important. Everyone is supported in some way, but visitors who have been diligently updating their browsers will get a fuller experience.

Though only partially supported, we expect SVG to start appearing in more and more projects in the near future. With native Flash support being abandoned by mobile operating systems and high-density screens being adopted by device manufacturers, there is a growing place for vector graphics on the web.

Manitoba Lotteries gets a Revamp

Design
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

Manitoba Lotteries has turned to local companies to give an updated look to their branding and web presence. A slick design using some of the latest technology that web standards has to offer. A design by Winnipeg branding company ClarkHuot / Cocoon and website programming by Visual Lizard Inc. has given this Provincial organization a brand new and modern look without having to look outside their own backyard to find the talent to make their site a reality.

The site has been built using standards in HTML5 and CSS3. The advantage to this are some very nice displays for standards compliant browsers while maintaining all of the functionality still needed for those few non-standards hold-outs like Internet Explorer 8 and earlier.

Several of the design elements take advantage of some of the latest styling standards found in CSS3. For instance the hover elements of the navigation have a transition effect associated to them. No cumbersome javascript! The browser itself handles the process rather than relying on javascript to do it which makes the animations far smoother. Use of transparency for design elements is also more prevalent both as CSS transparency and transparent or translucent graphics.

Part of our job is to bring the designs for the client to an interface reality. This is a good example of bringing functionality to the pretty.

Sneaking In SVG

Design
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

Several of us in the office have an iPhone 4 or 4S. I own an iPad 3. Our first retina display Macbook Pro has arrived in the office. So unsurprisingly, a number of us are really noticing the lack of higher resolution graphics on the internet. Any 72 DPI image at its normal dimensions looks fuzzy and blurry next to the browser's crisply rendered text.

One solution I've been exploring lately is using scalable vector graphic (SVG) for some image elements. The advantage of using SVG is that it is an XML markup that gets rendered as vector graphics, so it looks sharp no matter what resolution you are at, no matter how much you zoom in. Most major web browsers have some support for handling SVG markup natively, with only Internet Explorer lagging behind... and even then, IE9 is doing a good job of it. So as long as we're not doing anything terribly complicated with it (such as animations, manipulations with javascript, etc.), it should be an option, right?

As an experiment, we decided to update our branded site lockout page. It is a simple HTML document that gets put onto a live production domain while we build the project out on our development servers. There's nothing too complicated about it, being mostly a polite text message and a link for more information. Our lizard logo, however, looked disappointedly blurry on retina display screens. We wanted to replace it with an SVG image instead.

I first installed Inkscape, a vector graphics editor with full support for the SVG 1.1 standard. It is released under the GNU General Public License, so its free for anyone to use. It is also cross-platform, so I could run it on my Mac under X11. If you've updated to OS X 10.8 Mountain Lion or higher, you'll discover that you don't have X11 available. No worries, you can instead download XQuartz, a free open-source project instead.

Inkscape can import Adobe Illustrator (AI) and Encapsulated Postscript (EPS), so I was able to pull in a vector graphic of our lizard logo. Since it's a vector graphics program, anyone experienced with Illustrator or CorelDRAW or the like will be able to work their way around the toolset fairly quickly. I changed the document size to the pixel width and height of the lockout page's graphic, adjusted the colours (200px tall and 200px wide, in this example), and saved it as a plain SVG document.

I knew using the SVG file as an image would work in most browsers, but I wanted a fallback for older browsers that did not support the vector format. A quick google search turned up a blog article by Peter Gasston, in which he describes a way to do exactly what I wanted using multiple background images in CSS.

div.class {
background-image: url('image.png');
background-image: none,url('image.svg'), url('image.png');
background-size: 100% 100%;
}

The long and the short of it is that the browser will use the normal image file (a PNG in the example above) in all browsers, including our older Internet Explorers. Then, in more modern browsers that support multiple backgrounds in CSS, it will try to override that, using our new SVG graphic, then falling back to the PNG file again.

Multiple backgrounds in CSS are supported in Firefox 3.6 and up, Safari 1.3 and up, Chrome 10 and up, and Internet Explorer 9 and up. So in essence, if the browser supports multiple backgrounds in CSS, it'll support rendering SVG natively as well.

As Peter notes, there are a couple of issues to keep in mind. If the SVG graphic has a transparent background, you'll be able to see the PNG background behind it. For our lockout page, this wasn't a big deal, though. I just set the background of the SVG graphic to the same hexadecimal colour code as the HTML body element. Since the browser renders the SVG natively, it will render both colours exactly the same, blending the two seamlessly and covering up the PNG completely.

Best of all, the final result looks perfectly crisp on retina displays. Check it out, either on your high resolution screen or just use the browser's zoom-in feature. Fantastic :)

This example worked best because the graphic we made as an SVG file was not complicated. A couple of easy paths and solid colours. No gradients, no animations, nothing complicated. Over the next couple of weeks, we will be converting portions of our Visual Lizard site with the same technique, providing SVG files for as many of the background-image graphics as we can manage.

Doing our part to make the internet pretty for all you retina display users ;)

The Instagramification of GrajewskiFotograph.com

Functionality
Lauren Zacharias
Lauren Zacharias Programmer
Visual Lizard
work
1 (204) 957-5520 ext:156
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Lauren Zacharias Database Detective

Recently, we were asked by Jerry Grajewski to add an Instagram feature to his website. For those not familiar with Instagram, it is a mobile app which applies filters and effects to your photos and then shares them on your Instagram account, Twitter feed, and other social outlets.

Instagram makes integrating their data fairly easy via an API (Application Programming Interface). You sign up as a developer, then get a client ID and access token. This allows you to authenticate yourself to the API. To help out even further, Instagram offers an API console that lets you test out API calls ahead of time.

Instagram API Console

We used the API to pull down the 30 most recent photos from Jerry's Instagram account. With multiple resolutions for each photo, we then applied the lightbox effect used throughout Jerry's other galleries.

Check it out here: grajewskifotograph.com/instagram

Economic Development Winnipeg gets a new coat of paint

Design
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

Economic Development Winnipeg has just relaunched their site with a minor redesign and a major change to how they present the plethora of documents they provide. The changes to the design were both aesthetic and presentational.

Aesthetically speaking there was some honing to the colour palette and a sharpening to the fonts by our friends over at Doowah Design. The largest of the display change appeared on the home page of the site where there was a change to how the promotional elements were displayed. These are now smaller banners which can be swapped out and run over set periods of time. The former version of this promotion functionality was more prominent in the display, taking up the majority of the home page. The new design has changed the focus from those large promotions to the core behind EDW. EDW provides statistics and information about business in Winnipeg, the home page now provides more immediate access to the latest business and economic development news. It also presents instant access to the latest EDW publications for the visitor who is interested in the economic outlook of this city.

One of the features from the old version which has now been expanded is the feature drop menus. A visually appealing piece of functionality which the visitor can use to find the information they want within the site. Short concise titles of internal pages allow the visitor quick access to the information in which they are most interested.

The presentation of information has changed slightly as well. Each page of the site will now display documents associated to the topic of that page. Also, the addition of a right side column to the presentation of the internal pages provides corresponding contact information for the people at EDW most appropriate to discuss the information presented on the page that the visitor is viewing. Instead of having to go to a long list of people and description of their job titles in order to find the individual that a visitor would want to contact, the new presentation makes that information available right there.

From a functionality standpoint, there have been a couple of big changes. Firstly, in discussions with EDW, it was decided that administratively it was in the best interest of the site's development to include a central place for the management of all of the documents that are presented on the site. There is now a central place to do this, and once a document is uploaded, it is assigned to any and all categories to which it may belong, and then the administrators can assign the document to any page or as many pages in the site they wish. There is no longer a need to upload a document many times in order for it to appear in many places.

Secondly, we were asked to create an Associated Contacts piece of functionality. As described above, this piece allows the administrators to assign contacts to pages throughout the site based on the individual's expertise.

All of the development work done for the latest design and functionality was built on the Catalyst administration CMS while the site was still live and was able to draw on current data so there was no reason to worry about keeping data synchronized. This specific situation allowed for a seamless transfer from old to new. This isn't always the case, but it's nice when it happens this way.

Winnipeg Comedy Festival gets a Facelift with Responsive Design

Design
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

Visual Lizard loves The Winnipeg Comedy Festival! We have been proud supporters for the past 6 years and 2012 was no exception. After the 2011 festival ended, we met with the fine folks that make it all happen and put together the wish list for next year. The list included an alumni area, a better mobile experience and faster speed. We loved the list and made it all happen.

The first step was to upgrade their aging Catalyst CMS to our latest version. The upgrade went smooth as silk and the data transfer completed without a hitch. There are several advantages to be gained from the upgrade.

First, many of the functionality changes between the old version and the new version allow the administrators more robust control over their content. Since some the folks at the Comedy Festival are also administrators of another website that uses Catalyst version 4, they would automatically be familiar with the new interface.

Second, the new version of the system also allowed us to implement some of the latest coding features for HTML and CSS. For people using standards compliant browsers some of the new CSS3 display features would become apparent, but for those who don't, the design gracefully degrades to the CSS2 standards.

Working with guppy design, we wanted to employ the use a Responsive Web Design to the 2012 site. Guppy's overall design was flexible enough for us to make some simplifications to the primary design in order to allow them to work with the smaller screens on most moble devices.

One of the things we learned with this Responsive Design functionality was the interesting difference between your standard computer interface and the touch-screen interface. For years we have been using the pseudo-class :hover to visually indicate that something in the display is a live link. This doesn't work with a touch-screen. The physical interaction of a finger or stylus with the touch-screen makes the hover functionality impractical as the screen needs the physical interaction to know where your finger is. Without some sort of proximity technology, the hover state never gets seen on the touch-screen devices.

That's not to say we do not use hovers in our design implementations, but we have to consider alternatives to that functionality when we are coding for touch-screen devices. For instance, sub-menus that drop-down or fly-out based on a hover will not work. We had to build a second piece of navigational functionality that was based on touching to open rather than a hover state.

The more we work with Responsive Design, we are finding we have to rethink interface functionality, and help our design partners recognize the interface issues that come with these limitations. For instance our initial version of the menu you see in the screen shot to the right did not have a close button as part of the menu. During development with the client it was brought to our attention that they didn't know how to close the menu to see what was underneath. We felt shame for not catching this but quickly corrected it by implementing a close menu option for the mobile version(s).

The solution is simple as you can see in the open menu screen shot, but when you are not in a touch interface headspace during development, you have to make sure to remember this.

Thanks to the introduction of Media Queries in CSS3, we no longer have to build a completely separate set of styles for these mobile devices. This makes our CSS coding more efficient without having to add programming to our HTML in order to sniff out devices, and browser dimensions. It just uses the internal browser specifications to recognize the browser dimensions and use the appropriate set of styles based on the queries.

We are enthusiastically looking forward to using more responsive design in our future work. Oh, and did we mention we love the Comedy Festival? This year was one of the best yet. We cannot wait for 2013 ... if the world doesn't end.

Style It Share It Win It

Business
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

St Vital Centre's Spring Share contest was so popular last year that they asked Fusion Advertising and us to put together another one for this year. We've worked feverishly over the last couple weeks, looking over what we built in 2011 and putting together an even better version. The contest offically went live earlier this week on the St Vital Centre site and it's Facebook page.

The contest hooks together with Open Graph functionality, allowing us to log participants in through Facebook and, given permission, personalize their contest entries with their names and profile picture. This also allowed us to build the contest as a small Facebook application, allowing St Vital Centre to add the contest as a distinct tab on their page.

This year's contest is proving as popular as last year, with over two hundred people already participating and building their own Spring Style boards. Give it a try while you can!

Trying Out Timeline for Facebook Pages

Functionality
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

With Facebook rolling out the timeline interface to Pages, we decided to to make the upgrade a bit early to better get acquainted with the new look and feel. So with a flip of a switch and a couple image uploads, we polished up our Visual Lizard Facebook Page and learned a couple things on the way.

First of all, the new profile image (which is our green square icon) is used on the page and as your profile icon whenever you make a post. When uploading a new one, it must be 180px tall by 180px wide. It gets scaled down to 125px tall by 125px wide on the Timeline, and scaled down to around 32px tall by 32px wide as news feed icons. I haven't seen it ever used at the full 180px square format and I wasn't allowed to upload anything smaller, nor was I able to upload a different image for the smaller sizes (ideally optimized for those dimensions), so you'd better make sure your profile image scales up and down as cleanly as possible.

The large cover image is 315px tall by 851px wide, but you can upload a larger one if you want. You are given the chance to move the larger image within the confines of the cover space after uploading.

One of the bigger updates is how the apps work. They are no longer a small list on the side, but instead a series of prominent rectangles below the cover image. By default, all third-party apps will use the app's default icon, which is square, but Page admins have the choice to replace those. To the right of the row of rectangle app icons, there is a down-pointing arrow.

Click that, then hover over an app's icon's top-right corner to reveal a pencil icon. Clicking that will give you a number of options, the important one being "Edit Settings". In there, you can not only give the app a custom name unique to your Page, but also upload a properly rectangular icon at 74px tall by 111px wide.

In that same place you can either remove the app from your Page or swap its position with any of the others. Two unfortunate points you'll discover are that you can only have four apps up there prominently, all others being more-or-less buried away, and you cannot move or delete the photos app, so you only really have places for three others.

Some nice changes are the amount of room each app can now have. When in an app's own space, developers can now use a full 810px wide area to develop, as opposed to the old 520px. Also, most of the rest of the elements, both of Facebook and of your Page, are tucked away up top. This gives the apps so much more breathing room, no longer fighting for attention like they did on the previously busy layouts! As you can see, we've already updated our own custom-built apps, allowing us to automatically update our Facebook Page right from our website's Catalyst admin screens.

We're going to keep experimenting with Facebook's new Timeline and how apps interact with them. So far, I like what I've found, and am especially interested in building a few Timeline Apps. You can keep an eye on our Page to see how that turns out ;)

Launch Of The New ManitobaMusic.com Website

Functionality
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

Originally launched way back in 2002, the www.ManitobaMusic.com website has been an invaluable resource for both the Manitoba Music organization and for musicians throughout the province. We were happy to help establish their site online way back when, we were overjoyed to work with them again in 2006, and now we are proud to revamp and relaunch the site for 2011!

ManitobaMusic.com Homepage

Working closely with Manitoba Music and Guppy Design, the new site takes many of the popular elements of the previous iteration and makes them easier to get at, easier to navigate, and easier to enjoy. A light-weight design and a robust-but-simple layout allows the site to not only look great in modern-day browsers, but on your mobile device as well. Go ahead, try it on your iPhone!

ManitobaMusic.com New Music Releases

With the rise of social media, it only made sense for ManitobaMusic.com to take advantage of many of the great tools and functionality being made available today. From updating Twitter feeds in their sidebar and Facebook-powered commenting, to freely available RSS and ICAL feeds, ManitobaMusic.com is a site that connects with you and helps you stay connected with all your favourite local talent!

ManitobaMusic.com Live Music Calendar

Manitoba Music site admins not only have access to a great deal of data, but thanks to a carefully constructed administrative system, they can access and share that data however and wherever they like all over the site. An audio track can appear on a band's profile, as a downloadable track, and on the streaming radio in a matter of moments!

ManitobaMusic.com Member Profile

The best part is how the site encourages both its visitors and its members to engage online. Many of the same tools available to site admins are now at the fingertips of the organization's members, allowing them to add images, audio tracks, online video, news stories, and social media to their profiles.

ManitobaMusic.com Join Form

Visual Lizard and Guppy Design continues to work closely with Manitoba Music, refining an already great site. Thanks to a responsive layout, a clean modern design, and a powerful admin system powered by our Catalyst CMS, both ManitobaMusic.com and her sister site AboriginalMusic.ca are on the road to another great couple of years on the web!

OS X Lion Block A Fix for Safari and Chrome

Functionality
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

aargh-font-issue-lion-lrg-29082011

Yup. I'm still getting those nice little boxed letter A's on some of my sites since upgrading to OS X Lion. CNet has a very detailed article about the issue.

It turns out that the new sandboxing (which is a safety feature) in WebKit (Safari, Chrome, many more browsers) can't find certain fonts from time to time so it defaults to the last resort option. This last resort font option is a horrible bunch of A's in boxes. Follow the CNet write up by Topher and you should be able to find at least one method for correcting this.

Welcome Back NHL

Functionality
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

I'm not sure if you have heard the news or not yet, but Winnipeg got an NHL team back. True story! Of course this has had us all talking about the name of the team, which is the Jets, the logo, which is pretty damn classy and the coming of this 2011-2012 NHL season. With all that, we wanted to build a little something for everyone. 

Enter http://www.welcomebacknhl.net as a little project we put together for kicks. Go there and grab the JavaScript code. Drop it into your website and a handy little Jets logo will appear in the top right corner. The logo is linked to the Jets website, making it easy for you to keep track of all the latest news. 

Did we mention that we can't wait for the start of the 2011 NHL season? Don't get us wrong, we love summer. But winter this year is going to be awesome. Enjoy!

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.