Overview

This first round of 76design Skunkworks gave us (Jordan Boesch and Shaun Scanlon, both web developers) the opportunity to utilize the Twitter API to create a fun project.

We decided to try to integrate Twitter with Mozilla Jetpack.  According to the Jetpack website, Jetpack is “a newly formed experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play.”

What this means is that Jetpack is an API which allows the average web developer to develop add-ons for the Mozilla Firefox browser using languages they already use on an every day basis.   This was an attractive feature of Jetpack as web developers.

Project Phases

Concept Development / Brainstorm
After some brainstorming we decided to develop an unobtrusive twitter feed add-on in the style of a sports highlight ticker.  This was to be a collapsible bar at the bottom of your Firefox browser which could display new tweets and past tweets.  The tweets were to scroll in a manner similar to a sports or news ticker.

Design Concept
Jordan applied his design skills to develop a concept in Photoshop.

During this phase we came up with the idea of a news flash for new tweets.

Prototype
The work for this phase was shared between us.   It involved taking the Photoshop mockup and converting it to a regular HTML/Javascript/CSS file to be used in a regular browser.    We were able to get the basic logic done in creating the prototype.

Jetpack Integration / QA
We found this was the most difficult phase.   Jetpack has specific JavaScript hooks that are used to set the status bar icon for the add-on and to handle the initial loading of the JavaScript.

Within the scope/context of Jetpack a few of JavaScript’s default variables (such as “window”) were not accessible so we had to look for alternatives.   We also tried to extend the basic functionality of the prototype.   The extension of functionality required a lot of additional quality assurance time.

Challenges

• Jetpack development must be tested in the browser
  • The Jetpack plugin allows for development of the browser which is great because we can use common web development debugging tools
  • All code must be entered within a tiny textarea box on a webpage
  • This is very cumbersome because it is next to impossible to read an entire plugin within the box
  • We had to essentially work in a separate text editor and copy and paste into the box on the website
  • This makes for a frustrating debugging process

• Working on a single JavaScript file in a team environment
  • A Jetpack plugin must be self contained within one JavaScript file
  • The Jetpack library does allow access to the JQuery JavaScript library which allows for easy manipulation of HTML and CSS
  • Even with the ability to use JQuery, this set up does not lend itself well to team development
  • The fact that there is no separation of logic and visual layers into separate files makes it very difficult to contribute to the file without conflicting with teammates’ changes
  • As well, Images must be hosted on a separate server and linked to from the JavaScript
  • This makes for a cumbersome development process
• Jetpack is really only JavaScript-like, it’s not pure JavaScript
  • Because of the scope of being within the Jetpack API we found out the hard way that not all of JavaScript’s built in variables (such as the “window” variable) are accessible
  • This required us to revamp code to work around these unexpected roadblocks

What is next?

We could:

• Extend the current functionality to finish off the “news flashes” feature.
• Add some more spark to the animation and effects.
• Re-brand this type of concept to be used for client projects.    Some clients may be interested in having a Firefox plugin to market their brand.

Conclusion

Jetpack while an excellent concept probably needs some work to allow for easier development.   Editing a huge JavaScript file in a small textarea box on a webpage isn’t very realistic.

Other plug-ins, such as those created for Windows Sidebar or Google Desktop, are comprised of several files (similar to regular web development) and are then added to a Zip archive file.  This concept is a much more realistic development scenario.

We would not recommend Jetpack development for group projects, but could be useful for single developer projects.

All good things must come to end, and it is time to say goodbye to 76design’s beloved cork board homepage. We have launched our new 76design.ca website, and there was no room for the green post-it notes.

In tribute of the bored of cork we constructed a full sized replica in our office with genuine green sticky notes.

The bored of cork will live in the physical world, and on our maintenance pages.

76design is proud to have launched pictureitdowntown.ca late last week during an event which included a submission from Mayor Larry O’Brien.  This campaign calls on Ottawans to share photos of their  favorite activity or destination in downtown Ottawa for a chance to win valuable prizes. The contest offers daily prizes for the next 6 weeks; a Grand Prize package from Henry’s will be awarded at the end of the contest.

Every member of our team has contributed in one way or another to this campaign. A big high five goes out to our entire team for their hard work.  This project was completed with the City of Ottawa, and representatives from Ottawa’s eight business improvement areas.

Campaign Elements:

• Print (Newspaper, Buses & Bus Shelters)
• Radio
• Filming & Production of the neighbourhood walk through videos
• Social Media campaign  including Twitter, Flickr, YouTube and others.
• Public Relations support
• Design and Development of the pictureitdowntown.ca.
• Contest Support & Analytics

Many 76designer’s have already shared photos of the city we live in and love.  So come on Ottawans, get out and picture it downtown.

It’s been a while since we had a demo camp in Ottawa. So long, in fact, that Rob and I decided to corner Mark Stephenson after the last Third Tuesday and see if we could be of any help in getting another one going. Well, a few drinks later, add a few seasoned demo camp organisers, an email thread or two and we can now say that DemoCampOttawa 12 is October 19th at the Clock Tower!

Most of the 76design’ers are going to be in the house that night. It will also be our second time demoing an application. Some of you may remember our last demo: Friendsroll and Toplinks — two wordpress plugins that we developed here at 76design. When we did that demo, someone raised the question of how we’d make money with these plugins. The answer was kind of anti-climactic: we didn’t plan to make any money from them! We developed the plugins with the goal of exploration and hopefully coming up with something to give back to the community. Looking back at it, I think we can consider the plugins a successful experiment: we learned something, put it out there for the community to use at will, and left it at that.

For Monday’s democamp, we have something new in store. Again, it’s not designed to make money in any way, it’s an experiment and part of our 76 skunkworks activities. I think it will make for a fun demo and might end up being something people want to use.

So, come on out to demo camp on Monday. You can even vote for who should MC the event!

What does a retired General, a former Olympian and a man they call “Dog” have in common? If you said they’re all speakers available through the National Speakers Bureau, you’d win the big stuffed narwhal.

For over 35 years, the National Speakers Bureau has garnered a reputation as the source for event speakers. They are the sole agents for over 100 speakers, and they work with over a thousand others in North America and abroad.

They came to 76design with a request, upgrade their brand. This included a new logo and revamping their site. During our analysis of their brand, we felt that their existing website didn’t accurately reflect the class of speakers they had, nor did it “speak” (so punny!) to their great customer service.

76 updated their corporate logo, created a brand new site with a focus on bringing their speakers to the forefront, improving the speakers search functions, and we also created a new interactive module on the homepage. Overall, our goal was to facilitate the user experience, but also motivate potential clients to call one of their reps to assist them through the booking process. The new National Speakers Bureau site launched January, 2009.

Take a spin on NSB.com, and book yourself a speaker or two. On a personal note, I am awaiting the confirmation that Strombo is coming to my Super Bowl party. Fingers Crossed!

For the past week, I’ve been using present.ly at work. Present.ly is a twitter-style “micro-blogging” tool aimed for internal use within organizations, much like TC50′s 2008 Winner Yammer.  Unfortunately Yammer has at least one major flaw: it builds its network based on the user’s organization name/email URL, therefore not allowing to join two organizations that use different emails.

So after no longer being able to cope with Yammer’s pitfalls anymore, Thornley Fallis and 76design‘s CEO Joe Thornley had the insight to give present.ly a try, and actively encouraged both organizations to become part of this community. Here are my thoughts and feedback after our first week of use.

Ease of use

A handful of us are already avid twitter users, so the learning curve was next to none.  Many were newly introduced to Twitter lingo, but after a few tries, it was smooth sailing.

Luckily for all us there are also some great additional features in presently that we got to know :

• Groups are a marvel;
• “Highlighting” when people ask questions (?) or say something urgent (!!!) is quite useful;
• Built-in media sharing.

The web interface is really straightforward, and logical.  In addition to this, present.ly also has a desktop AIR app and an iPhone-friendly interface.

However, things tend to behave just a little differently than they do on twitter, which can lead to some frustrating moments.  The behaviors aren’t bad, but I like my conventions!

• No “delete” option: seriously, we all make typos;
• Unlike Twitter’s web interface, the return key will send a message instead of doing a line break (This seems minor, but without a delete button, it’s a total pain.)
• Another often mentioned issue is that of the confusion on how the “Groups” feature works.  If two users are members of a group, but do not “follow” one another, they don’t receive all the updates destined for that group.  This could lead to people missing out on part of the conversation. And also forces a user to follow pretty much everyone;
• Multiple email activity notifications that are impossible to turn off.

None of these issues are significant enough to stop me from doing what I want to do with present.ly.  But to the folks at present.ly, if you’re listening – hear me out!

Is it all worth it?

After the first day on present.ly, many of us, myself included, questioned if this tool was worthwhile.  The entire day on present.ly had been spent sending silly messages and testing out the features.  It felt like a productivity killer.

I’d say that for the remainder of the week, a good lot of us realized the potential of present.ly and made a conscious effort to make it useful.  A few examples of things we’ve used it for:

• Tracking any internal technical issues with hashtags;
• Sharing news / ideas about development in our devSquad group;
• Sharing business successes;
• Status updates (what you’re working on, where you are, etc.);
• Giving out bonuses (if you’re Joe)!

Overview

All in all, I think Present.ly is a great app, and it seems to have really “hit the nail on the head” in terms of what we needed as a inter-office communication tool.  I also envision it being useful on any “Enterprise” level, as it is reasonable secure and stable.  But as with any collaborative tool or app, we must always keep the ball rolling and choose to make it useful…

What do you think?  I’d love to hear feedback on some solutions that have worked for you, and have allowed you to communicate better at work.