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.

Hyperlapse

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

A couple of days ago Instagram released a new video app called Hyperlapse. It is pretty awesome to play around with and it works as advertised. Film up to 45 minutes of video and then use the basic speed selection at the end of shooting to pick your hyper-speed. That is all. 

The video is then either shared to Instagram (15 second maximum length), Facebook or Vimeo. It is also saved to your device's camera roll so you can pull it into an editting program and work on it further. The video above took 45 minutes to shoot, 5 minutes to scrub through speeds and render at 12x. Then about 45 minutes to find a decent, open source, song and assemble it in iMovie. Rendering there took about 2 minutes with an upload to Vimeo after that. Total time is in the 120 minute range. Super fast to do.

This reminds me of a project we had around 2002 or so that required us to film the, then new, bike trails that the City of Winnipeg had built. At the time, we had a 486 and a early Pentium and a Pentium II computer, hard drives in the 500 to 5000 MBs range and a compact video recorder. We rigged up a platform on a bike and rode the trails with the camera running. After a few test runs, we realized that physically riding the trails was going to take longer that the camera's battery/tape length combo would allow, so we rented a moped. 

The filming of the trails was the fast part. After that we had to record the video to our hard drives in chunks because of the lack of storage. In fact, I think we ended up buying a case of ZIP disks (remember those?). We then re-assembled the video into a longer video as we finished each of them. After we had the entire trail video in one complete file, we proceeded to compress the number of frames within the video to achieve a hyper-speed trail tour. This took days and over two weeks to get all the video processed for 5 trails. 

Here is a clip we produced for the Assiniboine Park trail. Keep in mind the final video was set for 320x240 and we kept it under 10MBs because it had to be delivered over the internet on dial-up!

This was one of those projects that we loved building, but it got hung up in an election and then red-tape, so it never went live. If we can find the videos in our archives we will post a couple for comparison.

This morning, we produced more video in under 2 hours than we did in 2 days back in 2002. We love technology. 

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
fax
1 (204) 957-5519
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.

Setting up a Springloops Git Repository in Coda 2

Technology
Lauren Zacharias
Lauren Zacharias Programmer
Visual Lizard
work
1 (204) 957-5520 ext:156
fax
1 (204) 957-5519
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Lauren Zacharias Dr. Z

We've been poking around using Git as source control for a few projects and recently ran into a bit of head-scratching while trying to configure a Coda project with a Springloops Git repository. 

We regularly set up Coda 2 with our Springloops SVN repositories, and have even set up GitHub and BitBucket repos in Coda in the past as well. 

The Problem

The problem we ran into was that Springloops usernames are email addresses, and Coda only asks for your Git URL and password. This means your username needs to be included in the URL.

With a GitHub account, this isn't an issue - the URL will look something like https://github.com/yourusername/reponame.git

The Solution

After some trial and error we determined that the trick with a username which is an email address is to URL encode it before inserting it into the repo URL.

Take note that with the Springloops URL the order is hostname, colon, URL encoded email address, rest of repo URL. For example:

Username: youremail@youremail.com
Springloops Git URL: https://slsapp.com/git/yourspingloopsaccount/reponame.git

Coda URL: https://slsapp.com:youremail%40youremail.com/git/yourspingloopsaccount/reponame.git

Happy Coding!

OpenSSL Heartbleed Bug

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

Hello everyone,

If you are online at all you have heard about the bug in OpenSSL called Heartbleed. For the technical details you can visit OpenSSL's news release. If you are interested in an easier to understand write up, you can visit Heartbleed.com. In a nutshell, this bug in OpenSSL allows your encrypted data to be read.

Rest assured, that our security team had our servers patched within hours of this bug being made public. If we are hosting your domain, you are not at risk.

If we are not hosting your domain, you should ask your hosting provider if you are at risk. There are a bunch of versions of OpenSSL that do not have this bug, so it is possible that older infrastructure is running a version of OpenSSL that is immune.

Again, our hosting services are not at risk and have been updated via backporting. To find out more about backporting, you can check out https://access.redhat.com/site/security/updates/backporting/.

Email Templates: Making it Work for Outlook

Functionality
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
fax
1 (204) 957-5519
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.

Dead Switch

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

Happy Monday all. We arrived at the office to a dead network switch this morning. That means all of our office phones are down. Internet is up, so email is the best way to reach us until we can replace the network switch and get voice calls back.

If you do phone, you will be able to leave a voicemail and it will be emailed to us.

Updates

12:02pm - Alex from Precursor is here. Hurray!

1:18pm - We have a borrowed switch in place. Doug and I have phones back, but for some reason (unkown) our remaining phones won't talk to the switch. Grrr... still working on it.

Nov 20, 1pm: Well, that took way longer than it should have. We finally got our Talkswitch phones all back on the network. We had to do the following:

  • Map IP addresses on our Apple Airport Router to each of the Talkswitch units. This is to ensure that they always get the same IP addresses.
  • On the 5 older phones that don't dynamically read the network and figure out where the talkswitch primary units live, we had to manually configure:
  • TFTP server
  • HTTP server
  • SIP server address
  • FTP server
  • Scan through the rest of the settings on the phone looking for incorrect IP addresses that did not match up to the IP addresses assigned to the primary and secondary units
  • Restart all the phones a bunch fo times
  • Highfives!

Good news, we have all phones back and all network related devices are happy as clams.

Safari Push Notifications

Functionality
Wil Alambre
Wil Alambre Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:152
fax
1 (204) 957-5519
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.

Creating Outlook HTML Email Templates

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

We've had to do this from time to time in the past, and recently we were once again asked to create a set of HTML email templates for MS Outlook. When you look on the internet for the steps involved in creating such a template the majority of resources point at creating signatures or stationery. This isn't what we need, and finding the actual steps are extremely hard to come by. We are going to try to rectify that by providing the steps here.

Step 1: Creating your HTML template

Following the rules set out in the Email Standards Project and mentioned in a previous post about email templates you should create your HTML email template as you would any normal HTML page. The rules are relatively straight-forward for this. Use tables and nested tables like you would for a 1998 era web-page. No background images, limited CSS. The cool, fancy stuff you can do with CSS3 is out.

Step 2: Getting your template into Outlook

Once you've built your email template as an HTML document with all of its images and styles you'll need to open that HTML template in Internet Explorer. Once you have it displaying in IE you'll need to send it to Outlook. You can do this by opening IE's File menu and selecting Send. Hovering the Send option will give you the option of sending it as an email. Clicking this will open your new template in an Outlook Email window.

Step 3: Saving your template

This should be relatively straight-forward, however Outlook has an extraordinarily silly quirk when it comes to saving an email as a template. First you must File > Save. Wait, you're not done. Once you've saved the email you can then save the email template. Now you must File > Save As. Select the save as Outlook Template option in the selection list that appears in the dialogue that opens. You have now saved your template and can now use it.

You would think you could skip the first save step, however Outlook has its own way of doing things. You'll just have to live with it.

Xcode 5, Coda 2, and SVN

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

When the office updated to OS X 10.8 Mountain Lion last year, we discovered our Coda 2 applications could not longer access our Subversion repositories. We were able to resolve this issue by installing Xcode from the App Store and then installing Xcode's command line tools.

With the recent release of OS X 10.9 Mavericks came a slew of related app updates through the App Store. Though it had been released a while earlier, one of the apps downloaded to my system was Xcode 5. Unfortunately, the next time I opened a Coda 2 project, this is the error message that appeared:

Coda 2 SVN upgrade error message

Xcode 5 comes with an updated version of Subversion that is not compatible with our Coda 2 SVN repositories. This caused us a couple headaches, but we were able to find some easy solutions.

Option 1

We checked and confirmed that our SVN servers would have no problem with the updated Subversion 1.7.x that Xcode 5 was using now. Therefore, we could go through each of our Coda 2 projects and simply update our working copies with SVN's built-in upgrade command. To do so, you need only:

  1. Open "Terminal" on your OS X system
  2. Change directories to one of your Coda 2 projects on your system. On my system, I kept them in a folder named "Sites".
  3. In that directory, run the "svn upgrade" command.

The command will automatically update the project to your current version of SVN. Now you would be able to open and sync that Coda 2 project with your Subversion servers again. There are several advantages to using Subversioonn 1.7, many of which Apple summarizes in a related developer FAQ.

The only downside is that you would have to do that with each individual Coda 2 project on your system, to convert them all over. If anyone has found a faster way, let us know!

Option 2

It turns out that Xcode did provide an older, compatible version of SVN 1.6. Instead of updating each Coda 2 project to 1.7.x, you can change Coda 2's preferences to point to this 1.6 version of SVN instead. Assuming you've downloaded XCode 5, you can:

  1. Open up the "Coda 2" app
  2. Go to "File -> Preferences -> Files"

  3. Click on the "Choose" button of the "Subversion Tool Path" option.
  4. Browse through the Finder window to: /Applications/Xcode.app/Contents/Developer/usr/subversion-1.6/bin/svn

That's it. Coda 2 will now use this older version of SVN, which should be compatible with the working copies of your SVN repositories. This is a faster solution, as it doesn't require an update of each of your Coda 2 projects, but the downside is that there's no guarantee that a future upgrade of Xcode won't remove this older SVN version.

Hopefully, whichever solution you choose saves you some headaches and gets you back to work :)

Code Camp at Visual Lizard

Functionality
Julian Moffatt
Julian Moffatt CEO / Partner
Visual Lizard
work
1 (204) 957-5520 ext:1
fax
1 (204) 957-5519
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
fax
1 (204) 957-5519
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.

Visual Lizard's Summer Newsletter for 2013

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

Hey there everyone!

If you're a a partner, a friend, or a long time fan of ours, you likely received our very first official email newsletter yesterday. We ran a fun little contest in the newsletter, and we thought we'd share some data with you... as well as let you know who won!

First, lets take a look at the newsletter. We sent the email out through Emediatemail.com, our awesome service for creating and sending electronic newsletters. The numbers over the first 24 hours look like this:

vl-summer-2013-01

  • From our 4 lists under Visual Lizard, we sent to 1,131 contacts.
  • We've had a 34.99% unique open rate.
  • 82 people clicked giving us a 22.84% click rate.
  • Canada accounted for the most opens. USA was second. The Netherlands, third.
  • The top link clicked was more than halfway down, and was about the contest on www.visuallizard.com
  • The link attached to our "lizmouflage" banner at the top was second in total clicks.
  • We had a 1.07% (11 people) unsubscribe rate with 0% marking the email as spam.
  • Our website registered the most visits in a single day for this past year.

Overall, we're pleased with the results we saw from this newsletter. As part of the awareness campaign we're embarking on, we plan to send our newsletter out quarterly. We've set the bar pretty high with this first one!

Someone Said Something About a Contest?

Since summer is such a special time here in Winnipeg, we decided to pick an outdoor activity for our contest. We figured golf (which, admittedly, is not something everyone likes doing) would work for a prize. An all expense paid round was chosen, including beverages and lunch out at the prestigious Elmhurst Golf and Country Club.

The challenge was a scavenger hunt to find the golfball "icon" (clue #1) hidden somewhere on our website. We didn't want to make the contest too easy, so we made the icon subtle. Once you rolled over it there was a tooltip telling you "congratulations, you have found the golfball!". If you clicked it, an email launched with the subject line "I found the golfball".

The secret golfball icon!

We had some really creative answers. Some of the best were:

  • It's the Portage la Prairie School Division logo!!
  • I found it on your map. It's the little green pin golfball thing right? Right??
  • The golfball is on the side of the lizard's head.
  • We also saw several people use the search and look for "ball", "secret", "golf, and a few others.

Three hours after we launched the contest, Russ from MGEU was the first to spot the icon. We had placed it under Services > Email Campaigns. We actually debated putting it there as we thought it would be too obvious. It turned out to be the perfect spot. 45 minutes later, John from MNP also emailed in a correct answer, complete with screenshots and arrows.

Congratulations Russ and John for winning the first ever email contest from Visual Lizard! We're looking forward to an afternoon round in July with you. To our friends and partners, we apologize for the momentary loss of productivity. To everyone else that didn't get a chance to play (or didn't want to win a golf game), stay tuned; we plan on sending out another newsletter in the fall with more fun stuff!

Thanks for reading! If you have any specific questions, please don't hesitate to ask them in the comments, via twitter, or through the contact form.

Interactive Digital Media Tax Credit for Manitoba

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

If you work in New Media, build apps, program, create tools for clients, then you should be paying attention to the changes in the Interactive Digital Media Tax Credit that were announced with the recent Provincial Manitoba 2013 Budget. Our friends over at New Media Manitoba have a great breakdown that you should go read.

As this tax credit pertains to Visual Lizard and our services (listen up clients!) here are the key changes:

  1. The tax credit is equal to 40% of qualifying labour costs related to the production of eligible interactive digital media projects. The maximum tax credit for a project is $500,000.
  2. The Interactive Digital Media Tax Credit, which was set to expire December 31, 2013, is extended to December 31, 2016.
  3. An eligible product that is developed under contract for an arm’s-length purchaser does not need to demonstrate the product will be resold or licensed by that arm’s-length purchaser

Points 1 and 2 are terrific in that they allow us a little more flexibility with our internal projects, some client projects, and we now have another 3 years to possibly receive help when needed. That is awesome.

Point 3 is the cherry on top for us. More often than not, when our clients come to us, they are looking for our expertise in helping them build tools that their staff and clients or customers can use. These tools range from simple web tools all the way up to online logistics systems. In MOST of the projects we have produced over the years, there has never been any intention to resell the work/project once it is completed. Therefore our clients were never eligible for the Interactive Digital Media Tax Credit under the old terms.

With the new wording it means that MOST of our projects would now have a chance to qualify for the credit. There is the possibility of recouping 40% of the cost of the project in credits up to $500,000.

Visual Lizard has already put some calls out to get some further clarification on the new wording. Rest assured though, this is all positive stuff for our industry. Regardless of how the tax credit plays out over the next 3 years, we will still be here, building great things with great people. But keep this in mind when we talk. We might be able to think even bigger than we already do!

Finding Sub-Domain Stats in Google Analytics

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

We here at Visual Lizard have some clients who have multiple sub-domains that they would like to track the Google Analytics statistics. The issue that we have come across in the past is that we might not want to set up a completely different account for those sub-domains. It is helpful to keep the overall statistics together for a full report on the domain as a whole.

For those of you who only make their way into Analytics on an infrequent basis looking for general visit and pageview numbers the statistics in the content breakdown area for a site can be a bit daunting to work your way through. Especially if you are looking for only a few specific statistics on a single sub-domain. The other day we were asked to find just that. I personally hadn't done that before, so I had to spend some time trying to find a way to display only the sub-domain statistics that I wanted. Below are the steps for doing just that.

  1. Login to Google Analytics
  2. Select the Site
  3. Select Content Under Standard Reports
  4. Open Site Content and Select All Pages
  5. Set dates in the top right of the right column (statistics for specified period)
  6. Below the graph set the Secondary dimension to Hostname
  7. Click Advanced next to the search field
  8. In the available field type the subdomain (subdomain.example.com)
  9. Click Apply

Once you have the statistics you are after, you can bookmark the results like our client did. After that it will display the up to date information of that sub-domain and you won't have to go through hastle of setting up that search again.

The Continuing Struggle for Email Standards

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

Last week we were made aware of a display issue specifically with the rendering of an HTML email template in the Yahoo Mail browser. According to the Email Standards Project the Yahoo Mail Browser currently has a status of "Excellent". Initially we could not replicate the issue that had been brought to our attention and we could not give an explanation to why it was happening. Upon asking for further technical details about the person's computer we learned that it was only happening in his Safari browser.

It turns out that there are a couple of potential issues with Yahoo Mail in Safari. The first is the level of security. By default in newer versions of the browser these security settings are preset and shouldn't be an issue, however in older versions of the browser the user will likely have to change the security settings to be at least 32 bit encryption. The second and the more likely reason for our particular issue has to do with the Flash plugin.

The combination of several elements causing this issue are like a "perfect storm" of technology working together to make your life miserable. However the issue did cause enough problems to have a decent knowledge base of how to deal with the issue. According to the research I did while looking into the issue, the following steps should be followed to make sure that your Yahoo Mail will work in Safari.

  1. Update to at least Safari 5.1.1 (Latest version as of this date is 6.0.2)
  2. Update to at least Adobe Flash 11
  3. Clearing the Flash Cache: Go to System Preferences, select Flash Player, then under Storage tab, click "Delete All..." button and then click "Delete Data" button.
  4. Restart Safari.

The above steps were taken from an Apple discussion about people having issues with Yahoo Mail not displaying email in their Safari Browsers. While this may not be the answer to every issue with Yahoo Mail, it is likely that if there is an issue, it will have to do with the software's interpretation of the HTML, not the HTML itself.

The goal of the Email Standards Project is to have a consistent standard of display of the HTML used in emails regardless of the rendering engine being used to display the email. By doing this, the intended design to represent branding in e-Newsletters or e-Stationery by a company is represented accurately no matter what platform or email client is being used.

MacBook Pro 17" For Sale

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

Visual Lizard has 2 laptops for sale with the following specifications:

  • MacBook Pro 17-inch, Mid 2009
  • Processor: 2.8 GHz Intel Core 2 Duo
  • Memory: 4 GB 1067 MHz DDR3
  • Graphics: NVIDIA GeForce 9400M 256 MB
  • 500 GB SATA Disk

2 - matte screen

These machines have been formatted and restored to factory bootup with OS X 10.6 ready to roll. They have been our trusted work machines for the past 3 years. They are in excellent condition. We would love them to have a nice, new home rather than collecting dust.

If you are interested, please use the contact form below or give us a call at (204) 957-5520 and ask for Julian or Doug.

UPDATE: SOLD! 

How to Force Spotlight to Reindex A Volume

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

If you use Apple hardware and run OS X, you may encounter a mildly annoying Spotlight issue from time to time where it will not find a file, or an app.

To correct this issue, there are two things you can try. The first is described in this post (http://support.apple.com/kb/HT2409) by Apple. They tell you to use System Preferences > Spotlight > Privacy (tab). If you drag a folder or hard drive to the Privacy tab, then remove it from there, Spotlight will reindex that item. Sometimes this works.

The second option, which gives you a lot more control, is to fire up the trusty command line found in Applications > Utilities > Terminal and run a couple of commands. The command in question is:

sudo mdutil -E

The -E flag forces Spotlight to erase (hence E) the indicated volume information. If you want to be more specific, such as a folder with your writing in it, or your Applications, you can tailor mdutil as follows:

sudo mdutil -E /volume/path/to/folder

As with all things run in the terminal, when they work, there is no feedback. You just end up back at the command prompt wondering what's up.

For more information on the mdutil functions, you can hit up the Apple Developer documents on mdutil

Note: This is advice on the internet, use at your own risk.

Scalable Vector Graphics In St. Vital Centre

Functionality
Wil Alambre
Wil Alambre Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:152
fax
1 (204) 957-5519
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.

The Instagramification of GrajewskiFotograph.com

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

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

Duplicate Content and Canonical URLs

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

There's usually no need to include the same content in multiple places on your website. After all, the whole point of HTML is to link from one place to another so it's always possible to have only one instance of the content in question. The only times when it's necessary to have two distinct URLs for the same content is when the surrounding navigation, headers, etc. need to change depending on the path the user took to get to it.

For example, when users are browsing through an online store by category it's a better experience when links to the category they were just browsing appear on the page showing information for a product. That allows them to quickly get back to look at other products. In cases like this, having only one URL for the product and keeping track of what the user was viewing in their session quickly gets out of hand. The user can, and often will, have more than one tab open viewing the same site and tracking which links were clicked from where can be complicated. From a programming perspective, it's far easier to have multiple URLs that show the same product, with the different URLs triggering the different navigation display.

But what effect will taking the easy route have on SEO? In the past, not much. For Google, however, this has changed somewhat since the Panda update in February of 2011. That update targeted "low quality" sites, specifically content farms that often have copy-pasted content matching a wide variety of search results and link farms set up to boost another site's SEO by linking back to it with specific keywords. Both of these types of farm site would frequently have largely identical content available at multiple URLs and multiple domains.

Prior to the Panda update, the main "negative" effect of having more than one URL for a given piece of content was that Google would list only one of them in their search results. After Panda, duplicate content pages lost a small amount of Page Rank. Google hasn't specified specifically how much or from what areas, but from what I've read the effect is largest when the duplicate content occurs across domains. It's also likely that keywords in the alternate URLs will not be used for ranking. The actual effect on non-malicious duplicate content, however, should be small. Sites with multiple domains should be redirecting the aliases to their main domain. They should also be using basically the same keywords in all of the URLs that reach a specific page.

However, if your site will have a significant amount of content that can be accessed from more than one URL, consider using rel=canonical. This is a method of indicating which URL you want search engines to use for the duplicated content. The main requirement is that one of the alternative URLs needs to be selected as the canonical one. All of the other URLs will then include a link tag in the page head pointing to the canonical url.

	<link rel="canonical" href="http://example.com/path/to/item" />

There is no need to include a rel=canonical link on the canonical page itself. This is a common occurrence, and likely won't have any negative effects since the search engines know to account for it. Specifically, Google has indicated that their crawler handles this case without issue, whereas Bing has indicated they prefer to not see rel=canonical on the canonical page although it doesn't really hurt your ranking if it happens.