Blog for March 2012

Daily Links

Daily Links

Trying Out Timeline for Facebook Pages

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 ;)

Daily Links

Daily Links

Daily Links

We Have Augmented Catalyst to Accept Emails for Our Daily Links

If you visit visuallizard.com with any regularity, you know that we post up interesting links for each other in the Daily Links portion of our blog. A little while ago, we were discussing what we could do to make the posting of these links easier. Posting a link wasn't complicated, but we wondered, "Could we make it easier? How about faster? Maybe both?"

Never ones to shy away from a challenge, we set to work armed with the following goal: how can we make this simpler?

Our current process goes something like this:

  1. login to Catalyst
  2. visit the blog area of admin system
  3. find Daily Links section
  4. add a new link and fill in the required fields
  5. save

In reality, this only takes 3 or 4 minutes at most. But given our nature, we wanted to try to shave it down to 60 seconds or less. How?

With the above process, no matter what we do, we will always have to do Step #4. There is no way to provide a link without providing some data. Over the years, we have distilled the information needed for links down to a bare minimum: link title, URL, image (optional), description (optional), and appearance date (auto set to the current day). The appearance date is only there so we can cue up Daily Links in the future if we know we are going to be away. This leaves us with the required minimum of a title and a URL in order to post a link.

Our highly technical flowchart showing our old link-posting process.

The next thing we discussed was how most of us consume the web. Of the seven of us in the office, everyone has a smartphone of some sort, five of us have tablets, and all of us have laptops. Since we have ready-built tools for posting from our laptop, and we all have smart/mobile devices of some sort, we decided to concentrate on posting from our phones. What would be the fastest way?

Text messaging would be quickest, and given that we have a good partner in Twilio, we explored this. The problem is the 144 character limit. That is not enough space for some URLs even, let alone a description and title.

Email seemed the better choice. In order to facilitate this, we needed to ensure we had the php-imap functions enabled. Once those where in place, we decided to test our plan by creating a new mailbox that would collect the emails for our Daily Links. Email is pretty simple by nature and we wanted to retain that simplicity as much as possible. We used the subject field as the title, the first line of the body as the URL, and everything after as the description. The final piece is a little secret code for each of us, that when paired with our at-visuallizard-dot-com mail accounts, act as a the security check and allows the post to be published onto the site.

Once we tested everything, we setup a cron job that runs our "read inbox" routine and writes the contents of valid, security-checked emails over to our database. Voila! Quick Daily Links can now be posted from wherever you consume the web.

In our extremely-rough calculations, we have seen link posting times of around 60 seconds with this email routine versus the 180-240 seconds observed with the login-navigate-post routine. That might not seem like a big gain on the surface, but over the long haul you could end up saving an hour here or there, which really adds up.

A few things to keep in mind if you are going to try this on your own:

  • Hosting your own stuff certainly helps, as not all hosts will allow you to add functions to php and create virtual paths in your hosting setup.
  • Ensure you have at least 2 security checks to validate the emails before you post them. Restricted from-addresses, secret codes, or even manual approval processes.
  • Be aware that spelling, sloppy grammar, typos and the like are part and parcel of email, so you should have another tool for editing posted links. We do in our Catalyst CMS, but you shouldn't look to email posting as your only avenue.
  • Never publish the email address you want to send these links to. Never!
  • Be prepared to destroy and reset your mailbox if/when the spammers find it. This would of course mean modifying all your scripts as well.

If you are a client of ours and you use our Catalyst CMS, we now have a pretty awesome method for posting to it through email. Contact us if this is something you are interested in and we can make it happen. If you aren't a client of ours but would like to be, we are happy to talk to you about anything you might need.

Daily Links

Daily Links

Daily Links

Some Visual Lizard iPad Wallpapers

I recently upgraded to a third generation 16GB wifi iPad, which sports an amazing high definition screen. Everything looks absolutely amazing and crisp on it. Everything except all the 1024 pixel by 1024 pixel wallpapers I had downloaded previously. WIth the new iPad's retina display having double the pixels onscreen, they looked scaled up and blurry.

So I figured, if I had to replace my iPad lock screen wallpaper anyway, I may as well create my own. A vector-based EPS file of our lizard mascot and some work in Pixelmator, I made the following...

Click on any of the thumbnails above to download a 2048 pixel by 2048 pixel PNG file perfect for use as lock screens on normal or retina display enabled iPads. I haven't bothered to optimize the images though, so they are each around 4Mb; make sure you're connected through wifi if you're downloading them onto your iOS device.

Enjoy! :D

Daily Links