Through some not very scientific testing, I found that 100-300 DOM elements is my sweet spot (though IE really needs it towards the low end of that range). Any higher and the browser noticeably chugs during rendering. I was surprised that once rendered, the browser didn’t seem to perform any worse during scrolling or resizing. Another thing I noticed was that Firefox visually added each element to the page iteratively (taking much more time), whereas all other browsers immediately showed all of them after the initial CPU churn.

Images

using images for custom typography doesn’t necessarily have a negative impact on a site’s performance and search engine optimization. If file size is carefully considered, and the proper alt text is used, typographic images can be a good solution. Of course, this technique should only be used for short bits of text, like page headings, pull quotes, and drop caps. I will argue that there are better options available today, but at the end of the day, images are a perfectly valid option.

Flash

The value of embedding fonts in your SWF files cannot be overlooked. Although it would be considered bad practice to utilize flash for only this purpose, if Flash is going to be used anyways, one of it’s major benefits is the cross-browser pixel perfection and ability to embed dynamic type.

Web Safe Fonts & the Font Matrix

The list of “web-safe” fonts is very limited. Normally, most web designers don’t stray too far away from Helvetica, Verdana, and Georgia. This list from 24 Ways helps expand that list to fonts that are common across many computers, operating systems, and installed software. Used correctly in font stacks, developers can target most computers that have software like Office and Creative Suite. Check out the list, you might be surprised by how many fonts are available.

sIFR

It’s worth mentioning sIFR here, although many developers have abandoned this technology in favor of Cufon, which I will talk about later. sIFR (which stands for Scalable Inman Flash Replacement) is a flash replacement technology. The philosophy here is creating the ability to bring rich typography to web pages without compromising accessibility or semantics. Additionally, one of the great advantages of sIFR was it’s fallback to plain text if Flash is not supported. Although it’s been criticized as hard to implement and somewhat buggy, this was the first real jump forward for web typography, and is still very popular to this day. sIFR laid the foundation for many great resources for custom web typography.

Cufon

The best way to describe Cufon is a next generation sIFR which is built with Javascript rather than Flash. This method has it’s benefits like not requiring the Flash plugin – good news for Apple devices. It’s also extremely easy to implement, and has very good performance, even for large amounts of text. You upload font files (with the proper licensing) through the Cufon site, and convert’s the file to SVG format. Then, the SVG file is converted to JSON which can be added to your site through simple Javascript. One downside to using Cufon is that many custom font licenses do not permit usage on web pages, so check the license or use a great free or open source typeface. There are many good ones out there.

If you’re looking for some high quality free fonts, Smashing Magazine is a great place to start your search.

Font-Face

This is by far the easiest method to integrate custom typography on the web. Using the @font-face property allows you to access fonts via CSS, and host the files on your web server. Of course, the same licensing issues remain, so make sure to chose a good typeface with no constraints. From there, you can use @font-face to access that font file for use with any CSS property. Add the font name on the top of your font stacks, and that’s it. There are a few hoops to jump through, mainly to accommodate Internet Explorer. IE requires a .eot file (Embed-able Open Type) to render custom fonts. Luckily, there are a few good online converters that will take common font files (.ttf and .oft) and convert the fonts to .eot. On a side note, I wrote a recent blog post about getting @font-face to work correctly in all major browsers.

TypeKit

TypeKit aims to take all of the hassle out of setting up @font-face, and they do a killer job at it. For as little as $25 per year, you can use fully-licensed fonts which are hosted on TypeKit. All of the licensing issues as well as the compatability woes are taken care of, and in turn you get an incredibly easy-to-use and extremely large font library at your fingertips. It’s definitely work a second look.

Google Font API & Font Directory (beta)

In the same veins as TypeKit, Google recently introduced their font API and font directory. Google hosts fonts that are licensed and ready to go, you just have to target these fonts on your site, and Google will do the rest. Their library is currently very conservative, but hopefully this will grow in the near future.

Some of the apps listed are pretty standard and some not so much. We are always interested in exploring new apps so, please recommend away!

Jeff Toll – Creative Director

Photoshop - “Open and running every day, all day.”
TextEdit – “I get grief for using this but it’s lightweight and simple, simple, simple. I’ll start using a more robust text editor sometime soon. I use it for writing quick storyboards and concept explanation etc. ʻPagesʼ is upon the horizon…”
xScope- “Covers my ass for screen resolution guides at the very least.”
iChat- “Communicating with our Seattle office and random jackasses.”
iCal -“I’ve been getting better and better with my organization.

Robert Reinhard- CTO & Partner

Pages - “I haven’t touched MS Word in over 2 years and haven’t looked back. I love how it handles styles, it’s like easy CSS in a word processor.”
OmniOutliner - “For taking notes on conference calls.”
MAMP Pro - “Powers My LAMP dev environment. Makes it easy to setup additional testing vhosts (test dev rather than local host).”
TextMate – “When is 2.0 gonna come out?! I’ve been flirting with switching to Coda, but I miss some of the hotkeys.”
Socialite -“Aggregates feeds from Facebook, Twitter, Google Reader, and Digg all in one place, plus allows me to post comments/tweets.”

Scott Thiessen – Flash Developer

Safari -“The Activity Window and Web Inspector alone are enough to make me feel like the king of the Internet.”
TextMate - “Lots of power for so little toolbar.”
Sequel Pro – “This is phpMyAdmin’s gorgeous, sophisticated sister. Unbelievable that this app is free!”
Spot Color + Developer Color Picker - “Slick way to grab colors from the screen, tweak them in your favorite gamut, and spit out hexadecimals.”
Quick Look - “Not really a stand-alone app, but I’ve definitely forgotten what it’s like to use a computer without it.”

Matt Aebersold – Flash Developer

Flash + AS3 - “Although thereʼs a steep learning curve, learning object-oriented AS3 has opened up so many doors, and is such an intricate and expansive programming language. Itʼs allowed me to create some kick-ass web designs.”
Coda – “Once a site project is completely set up, the complete integration is incredible, and so intuitive. Once I made the switch I’ve never looked back.”
MAMP - “Helped me do PHP dev on my local machine. Extremely helpful in every way.”
Things - “Awesome to-do app. Easy to set up and manage. So simple, and It’s what’s not included that makes it great. plus syncing over dropbox has make this invaluable. That said…”
DropBox – “Awesome cloud storage. If I point my apps there, than they sync on all my computers (iTunes, Things, etc…). Plus online file recovery is very easy.”

Sean Monahan – Flex Developer

Eclipse w/Flash Builder 4 Plugin - “Paraphrasing a Josh Reddin-ism, ʻItʼs a text editor for fully grown men.ʼ Upgraded from Flex Builder 3 stand alone and my opinion of Eclipse has greatly increased. Eclipse also has plugins for PHP dev, Unfuddle (our ticket tracking software) and Ant (for oneclick builds)- all this allows for a one-step development environment for Elastic.
Calculator -  “Boring, I know, but good for doing quick math. I use this a lot when programming Uls. Bonus: it has a “programmer” view for doing fancy binary math.”
Last.fm – “I like its music picks better than Pandora and the artist bios and photo streams are freaking sweet.”
Photoshop – “What doesnʼt it do?”
Adium - “A slick IM client that supports just about every IM service in existence.”

Aaron Egaas – Web Applications Lead

Chromium - “Browser of choice, nightly version of web inspector is as good as firebug without the performance hit.”
TextMate - “Code keeps me paid, and TextMate keeps me sane.”
iChat - “Remote communication, PM requests.”
MailPlane - “Multiple Gmail accounts? Like to keep ‘em separate? Notifications? Native web app feel with label and everything? Gets me into GCal, too.”
Terminal - “I gotta ssh into servers to push code, so I use some sweet aliases to keep it all organized.”

Dave Brown – Senior Interactive Producer

Adium
OmniOutliner - “Great for taking notes.”
FontLab Studio - “Converting fonts.”
Justinmind Prototyper - “Havenʼt really used this yet, but Iʼve heard great things.”
Adobe Media Player - “Checking/watching native flv.”

George Plendl – Front End Developer

Linkinus - “Best IRC client for a mac. irc.freenode.net, #jquery is a great place to learn and ask questions.”
Alfred - “Quicklaunch application for which aims to save you time in searching your local computer and the web. Replaced ancient Quicksilver app!”
Snippley - “Basic text and organization app.”
Beyond Compare - “Easily compare files, folders, images, anything. Itʼs great!”
TextMate - “The best text editor for Mac and a powerful abbreviation engine for HTML and CSS. Saves hours!”

Shelby White – Design Intern

DropBox - “Best app for managing projects between projects. I also use it for freelance in getting assets.”
Adium/iChat - “Adium manages contacts better but iChat actually sends files.”
Coda - “My favorite app with FTP for html/css.”
Wordpress - “ Where I’ve spent most of my last year and a half.”
TweetDeck - “Nice for managing my tweets…”

Joe Leoni – Producer

TweetDeck - “Best way to stay informed of Chad Ochocincoʼs daily workouts or Snoop Doggʼs ʻbreakfast activitiesʼ.”
iChat - “Instant messaging: extreme convenience and extreme inconvenience all wrapped up into one.”
Garageband - “Now anyone can be a MC, and youʼll probably be better than 99% of radio hip-hop.”
Pages - “Iʼd rather be using Word, but close enough.”
Solitaire - “The best way to play with yourself.”

Veronica Skarshaug – Administrative Assistant

Stickies - “Nice way to save on physical sticky pads, and info that I need on a daily basis is easily accessible.”
TaskMate - “Great for keeping my to-do’s in order.”
Numbers - “I like to make spreadsheets, I’m a total nerd.”
Preview - “Makes things easy, easy, lemon squeezy.”
iChat - “Because, duh.”

The Hit List – “Awesome and free GTD app to keep my days/life organized.”
Transmit – “Gorgeous UI and experience to easily upload my files.”
Adium – “My favorite chat client especially when used with the iPhone message style.”
Cicero – “Dashboard widget that fulfills my Lorem Ipsum needs. Used and abused daily.”
Photoshop – “There is a light on under this icon all day. Content aware fill has come in handy on more than 1 occasion.”

1) Follow these instructions from Rocket Theme to the letter.  I didn’t need to deal with any of the “Possible Issues” section.
2) Go into “/Applications/MAMP/conf/apache/ssl.conf” and add a new vhost within the <IfDefine> blocks at the end of the page.  This vhost will mirror the settings of the vhost you would have already setup in MAMP:

<VirtualHost test.dev:443>
DocumentRoot "/Path/to/document/root"
ServerName test.dev
SSLEngine on
SSLCertificateFile /Applications/MAMP/conf/apache/ssl_crt/server.crt
SSLCertificateKeyFile /Applications/MAMP/conf/apache/ssl_key/server.key
<Directory "/Path/to/document/root">
Options All
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

3) That’s really it.  Restart MAMP and you’re good to go.

One of the largest drawbacks to flash content is it’s relative invisibility to search engines and accessibility programs. The criticism is true when talking about Flash as a closed platform. The code written is compiled into a SWF, and then embedded online. This makes searching an indexing flash content extremely difficult for most search engines. Accessing Flash content is also a problem for screen readers and other accessibility programs.

These issues, combined with the popularity of the Apple devices, create a lot of hesitancy for companies to fully embrace Flash content in their projects and sirs. I’m going to talk about a few key principals that will help Flash gain visibility and accessibility across multiple platforms, and at the same time make Flash content easier to update and maintain.

Does it need to be Flash?

The first step, of course, is to figure out what content needs to be in Flash, and what does not. There’s no point to constructing a site using flash if the same design can be achieved using more open, standards-compliant code. Once the decisions have been made as to what content will be built in Flash, than it’s time to start thinking along the same lines as proponents of web standards.

Use the Principals of Web Standards

The primary rule in web development today is the separation of content from presentation. The same principal can be applied to Flash projects. Separating the content from the design means updating and maintaining the Flash site will be much easier if the code doesn’t need to be recompiled and edited every time a change needs to be made. Making things like the navigation, links, and photos flexible and external are all great steps to create clean, smart, and flexible projects.

Smart Degradation

If the Flash content and design are properly separated, than re-purposing the content is extremely easy. If the content is in XML format, it can be applied to an XML site-map which will help search engines index the site’s content much easier. In addition, there are browser and platform detection scripts which could allow you to display the XML content in regular HTML format if the browser or device isn’t compatible with Flash. (iPad anyone?) You can also detect older browsers and Flash players. Content can then be delivered in the most efficient way possible to all users.

For example, head over to the BKWLD site on an iPad or iPhone, and you will see that the features on the homepage are still visible and interactive. This helps serve the most people possible the site’s content, no matter what environment they are using to visit the site.

Hybrids

There is also the option of creating hybrid sites, which are very popular because they combine flash elements with standard HTML markup. This allows the user to have a rich experience, as well as giving search engines easy access to the site’s content. Making use of flashvars and XML/JSON add to the flexibility of the site by allowing Flash to communicate directly with the rest of the site.

SWFObject & Deep Linking

Making use of programs like SWFAddress and SWFObject allow the Flash content to be more transparent and visible to search engines. SWFAddress will create a specific URL for each page in a full-browser Flash experience. Knowing what section the user is on, and showing that section in the browser’s address bar allow search engines to look at specific pages, and create extremely accurate analytical reports.

SWFObject is a way to create valid code though the W3C Validation tools. Also, SWFObject has the ability to replace Flash content with a static image, which maintains the visual design if the user doesn’t have flash enabled.

Conclusion

It’s ultimately about choosing the right tool for the right project. Flash has many advantages, which need to be carefully weighed against the areas in which Flash falls short. The ideas described here can certainly help Flash communicate better with browsers, search engines, analytical tools, and accessibility programs.

I have been playing around with a handful of social integration utilities for Wordpress and so far the Simple Twitter/Facebook Connect plugins from Otto are by far the easiest, most feature useful and stable that I have found.

You will see that this post was simply, and easily posted to our FB Fan Page – http://www.facebook.com/BKWLD and tweeted (http://twitter.com/BKWLD)

The plugins have some really fun features – like automagically grabbing any “@” handles and linking them back to twitter – @BKWLD

Do you guys have any other favorite Wordpress plugins or add ons you find endlessly useful?

This is because the debate is centered around technologies and programming languages. This strife is very prevalent in all areas of the web design industry. Should you use Flash or Javascript for that slideshow? Should we connect to this MySQL database, or this SQL server over here? .NET or PHP? There are some very opinionated groups, which is too bad because all of these technologies are amazing in their own right.

At the core of every project is an idea, and that is by far the most important thing to consider. Once the creative idea has been set, realizing that idea can happen any number of unique and innovative ways.

When figuring out how to produce the project, it’s all about what technology is best suited for the design. How much interactivity will it have? Of course you’re not going to utilize Flash for a site that is just plain, static text, and you’re not going to link up to a database when your site consists of two pages.

After these things have been sorted out, then pick the technology that you are most comfortable and efficient with. For example, I work really well in Flash and Actionscript. I am very comfortable with the language, and it comes naturally to me. That doesn’t mean that Flash should be used for everything, but in at the end of the day it’s all about the idea being produced, —not what technology was used to make it. If you need a slideshow, it can be written in Javascript, Flash, or hell even Lingo, as long as you end up with a killer slideshow.

It’s also not about the newest technology; it’s it’s about the best technology. My old college instructor is a professional type designer for a 1st-class graphic design agency. She stands by Freehand as the best tool out there for type and letterform design. It’s not a new program by any measure, but it works for her, and she produces some incredible work.

So we need to relax about the technology debates, and focus on making kick- ass designs, and have fun doing it.

I initially went about including the Like button the wrong way.  In the demos they showed at the F8, it appeared that they would expect each deep linked article page in a blog to have a unique Like button, like how CNN is implemented.  So I did this:

However, when you click Like, it adds a link in your profile section on Facebook for that specific deep link.  For example, check out the article link added here from CNN:

You could imagine that very quickly this area would be cluttered with all the articles a person had liked on news sites and blogs.  Then I noticed this suggestion from the Open Graph Best Practices:

Make only real-life things into objects. Users don’t want news articles and other transient content as objects on their profile.

This advice makes sense, though it’s inconsistent that Facebook would tout their partner (CNN) whose implementation contradicts this.  Thus, I moved the Like button into the footer, making it site wide, and added a Digg link in it’s place.

Ideally, users clicking the Like button would be added to the BKWLD Facebook page (we previously had a group, which we’re deprecating).  So far, I’m not seeing this happen; users who Like our Facebook page and users who Like us on the BKWLD site appear to be dropped into separate buckets.  The Social Graph markup doesn’t have a field to specifically relate the object (our site) with a Facebook Page.  I assume that Facebook uses some black magic to join the references to BKWLD in the Social Graph metas with the BKWLD references in our Facebook Page.  Possibly this isn’t working because our Facebook page is so new.  Or possibly something got confused during my initial implementation that was per blog article.  It also doesn’t appear that the “fb:admins” meta tag is having any effect.  I’m curious to see if this generated page will be automatically merged into the official BKWLD Facebook Page in the next few days.  Or if a person Likes a site on the Facebook site and that site has Open Graph markup on the home page, does Facebook read it and pull that info in?

In sum, I think the social plugin and Open Graph standard are pretty great in terms of functionality for users that can be added with minimal effort by developers.  I hope some clarification comes from Facebook about how (or if) merging works between different pages.

Recently we were interviewed by .net Magazine and one of the questions was what sort of things we felt made an online/web game successful. I enjoyed the question, and thought I would expand on it a bit in a blog about what Robert and I shared with them.

We basically boiled it down to four points we felt made for fun and success.

1. Competition & Recognition
If there’s one thing Twitter, Facebook and frankly, this blog proves, it’s that people love attention. Even while I am typing this, I am hoping you are enjoying reading this! So it’s not a surprise that people love to see their name at the top of a scoreboard, or to blast on their ‘wall’ that they just gained a level in Farmville. A game that doesn’t allow someone to ‘tell a friend’ about their score and challenge that friend to beat them is missing out.

2. Variables
I remember about 4 years ago we made a game for the California Tourism Committee that had you skiing against Governor Schwarzenegger down a mountain. Almost immediately, every high score on the board was “14 seconds”, because once you figured out the best path, that was the absolute best score you could get. Not very fun.

So by adding in some crazy score multipliers or jackpots, and things that might only show up in 1 out of every 100 games, you’re easily injecting not only variability, but also giving players a reason to keep trying.

Additionally, throwing in ‘bad’ items like point subtractions also helps make the game not about just trying to gobble up every item on the screen, but gets a little strategy into play.

3. Incentives
This is probably the most obvious of them all, but when someone is playing for an iPod/Corvette/cheeseburger, they are going to play. And play. And play. And tell their grandma to play too.

I think giving stuff away should be two pronged though – give something to the best, but also just give something randomly. In other words, you can give the Corvette to the person with the highest score, but also have 2nd and 3rd place prizes, and even a ‘boobie prize’ where any person who plays, has a chance to win that cheeseburger.

4. Keep it simple stupid
There’s a time and a place for an 80 hour epic gaming adventure. And that place is certainly not in a 300 x 250 banner on yahoo.com. If ever there was a time for a game to be ‘pick up and play’ it’s when it’s a banner or a minisite game. I think a good rule of thumb is if you need more than one page of instructions, it’s going to be too complicated for a ‘casual gamer’ and not complicated enough for a ‘hardcore gamer’.

Overall, there’s plenty of examples however where a game shines in just ONE of these categories, and that’s enough to keep people playing. But if you try to intertwine all of these into your next game (and let’s not forget about the actual ‘design’ of the game) you should have a winner on your hands.

We love making games, and for a while we always had at least one in development.  The demand has waned in the past year as companies focused on more direct kinds of marketing.  Here’s hoping we get more excuses opportunities to make games in the new year!

PS – here’s some of my faves we’ve done over the years.

• http://funnevergrowsold.com/game/
• http://www.whodouwant2b.com/game/
• http://yourcowtown.com/game/index.htm
• http://bkwld.com/work/indiana-jones-the-staff-of-kings
• http://www.firstbank.bkwlddev.com/728×315.php

Fortunately there is a fairly easy way to implement this feature for yourself. All you need to do is setup two event listeners and two properties.

The two properties you need are “isMinimized” and “isMaximized”. Both are booleans, the first indicating the application is … drumroll … minimized and the section maximized. While you could get away with just one of these having both offers more flexibility in the future should you need it. For example: it is possible for an app to be neither maximized nor minimized.

The two events you need to listen for are NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING and InvokeEvent.INVOKE. The first event is dispatched when the application’s display state changes (i.e., when maximized or minimized). The second is dispatched when the dock icon is clicked.

With those few things all you need to do now is a few start up things:

/**
 * Event handler for the application's creationComplete event
 */
private function init():void
{
         // Check to see if we have a dock available for clicking
         if (NativeApplication.supportsDockIcon)
         {
               // Wire up a listener for the dock icon's invoke event
               NativeApplication.nativeApplication.addEventListener(InvokeEvent.INVOKE, onDockIconClick);
         }

         // Effectively, listen for minimize and maximize event.
         this.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, onChanging);
}

/**
 * Event handler for display state change events
 */
private function onChanging(event:NativeWindowDisplayStateEvent):void
{
      switch (event.afterDisplayState) // <-- our new state
      {
	case "minimized":
		isMaximized = false;
		isMinimized = true;
		break;

	case "maximized":
		isMaximized = true;
		isMinimized = false;
		break;
	}
}

/**
  * Called when the dock icon is clicked.
  */
private function onDockIconClick(event:InvokeEvent):void
{
	if (isMinimized)
	{
		// If the app is minimized call this
		stage.nativeWindow.restore();
		isMaximized = true;
		isMinimized = false;
	}
}

In the above code it’s assumed that init will be called by the app’s creationComplete event. init then checks to see if the platform on which the app is running supports dock icons (that is, is Mac OS). If it is we add an event listener for the InvokeEvent which is dispatched when the app’s dock icon is clicked. After that init wires up a second event listener, this time listening for the NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING event. This event is dispatched when the app is minimized or maximized.

onChanging is our event handler for the display state change event. We use this method to keep track of whether our app is maximized or minimized. onDockIconClick is our event handler for the app’s InvokeEvent that will be dispatched when the dock icon is clicked. This method checks to see if the app is currently minimized, and if it is it calls the window’s restore method.

First, the Differences

In Windows menus belong to each window. So File, Edit, View and such are items in each open window of an application. In AIR this corresponds to the menu property of a NativeWindow.

In Mac OS the corresponding menu is called an application menu and there is only one for all windows of the application. In AIR this corresponds to the NativeApplication’s menu property.

So what you say? AIR has features that let you handle Windows vs. Mac menu differences quite easily. This is true, a quick check of the docs will reveal how quickly this can be accomplished. However, you’ll notice in the above screen grab that application menus on Mac OS list the application name in bold. There is nothing in the AIR docs about how to accomplish this.

What To Do?

You can just ignore this and create a menu like the (quite nice) SQLite administration tool Lita. Note Lita has “Lita” in the menu but it’s not bolded.

Or you can not even bother with the application name like the (also extremely useful) MonsterDebugger.

Both of these approaches are completely valid. After all both Lita and MonsterDebugger are incredibly useful applications that make my life as a developer much easier and lacking a proper Mac OS application menu doesn’t detract from their utility in any way. However it’s also quite simple to create application menus that look identical to a true native application.

Creating Seamless Application Menus For Mac OS

It’s so simple to create seamless application menus on Mac OS that you don’t even have to do anything! That’s right, just create an application and AIR makes one for you:

Everything you see above you get for free (note: adl is the AIR debugger. If I were to publish a release build and install the application you’d see the name set in the application descriptor xml file). You might now be saying that this is all good and well but what if you want to customize the menu at all? The good news is you can, it just take a tad more work.

To start you’ll need to note that AIR gives us three menu items in addition to the “Application Name” item (the bold one). For this example I’ll assume you’re only interested in keeping the app name item so we’ll just get rid of everything but that one.

First you’ll need to get a reference to the application’s menu:


// Get a reference to the NativeApplication's menu, if this is Mac OS
// Note: you'll need to handle menus differently if you are on Mac OS or Windows.
// See the AIR docs related to creating native menus for details.
if (NativeApplication.nativeApplication.supportsMenu)
{
var appMenu:NativeMenu = NativeApplication.nativeApplication.menu;
}


If you were to loop over this you’d see all of the menu items from the above screen grab. You’ll also notice that each of the items is a NativeMenuItem (more on this later). Since we only want the first one we can now remove all the others:


// Get rid of our unwanted menu items
// The app name item is the first one
while (appMenu.items.length > 1)
{
menu.removeItemAt(menu.items.length - 1);
}


At this point our menu consists of one item: the application name menu item. This menu item is pre-populated with some standard elements like “About” and “Quit”. If you’re happy with this as-is, you can now freely add your own menu items. If you need to customize this application name menu item a bit simply take advantage of the fact that it’s a NativeMenuItem and go nuts.

Using this method you’ll now see your application’s name (that is, the name you set in the application descriptor xml file) up in bold when you publish a release build and install. Here at BKWLD we’ve recently used this technique and here are the results:

Some of the sites I use at work and on a personal level are perfect examples, GitHub and Basecamp.

But how is this technically feasible? Sure, you are probably thinking just gather all the data you need and loop through it. Right? No, I will explain why. I didn’t understand this for the longest time, and I hope to help solve any your questions about using them.

With Garrett and Larry both having many comments, messages and connections, we already have the data we need.

Problem is we need to sort them accordingly (by date) and keep all associations tied. It is harder than it sounds.

In this case we have 3 datasets, some comments, some messages and some connections. If we were to put all 3 collections in a list in order of when we gather them, they will be out of order. What we need to do is make one collection that references any type of data we need to list out. What makes this useful is we can also track other information that is helpful to users and not possible if we loop through the actual data. That is what a Polymorphic Association is.

Within the Feed model we need to keep track of the model it will reference, the actual reference to the specific item within that model, and any other information you would like to have. I like to keep track of it’s action, as well as the user who performed that action.

How would this look like in the database?

For this example I will use Ruby to try to show you how easy it is to display a dashboard like interface for your users.

Within the view you can loop and render a custom template for each item, this will give you the desired look that simulates the dashboard feel.

I am going to leave this here, you can create the views however you want. I have this repo stored on GitHub so you can clone it and mess with it however you like. I have uploaded a demo on Heroku for you to see as well.

It is often difficult to find useful applications for these new technologies. Luckily, BKWLD was recently approached by .net magazine and was asked to write 2 articles. Jeff Toll, who’s article can be seen in this month’s issue, worked with me to come up with a design for a facial recognition application that will be featured in an upcoming issue of .net magazine. Together we came up with an idea for a virtual window, where the users can essentially fly through a 3D flickr gallery.

For the true experience you can visit the following link (you must have a web cam): http://bkwld.com/headtracking/. If you do not have a web cam, I have uploaded a demo video onto Vimeo at the following link: http://vimeo.com/7092048.

Here is the source if your feeling adventurous.
HeadTracking.zip

There are a couple things to note about the source code. First, this was developed using flex, so if you want use it in flash you will have to set HeadTracking.as as your document class. Second, I did not leave my Flickr API key in the source for obvious reasons. So, you will have to apply for a Flickr API key if you don’t already have one and enter it in the init function of the HeadTracking.as class file where it says “Enter your API key here”. If you find any errors in the source code be sure to yell at me in comments.

The following resources were used:
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/
http://www.quasimondo.com/archives/000687.php
http://www.youtube.com/watch?v=Jd3-eiid-Uw

• The VPN is of the Cisco type, but using their linux software was a dead end.  I couldn’t get it to compile, it needed kernel headers and patches and on and on.  Eventually, I was directed to using VPNC.  There are scripts that convert pcf files to the format VPNC uses.  Also, you can store the VPN password within the config file, which is perfect for my situation.  If I feel like enduring further pain, it may be useful to get this working locally and stop using the Cisco Mac client altogether.
• It turns out you need to be running as root to use VPNC.  Thus, for the users that would be running this, I had to add entries to the sudoers file.  I made it passwordless because I knew I’d be calling it from PHP.

• I had to allow /usr/local/sbin as an open_basedir in php so that I could call VPNC.
• From exec(), I needed to use the full path to VPNC.

• Lastly, and this was particularly painful because I knew I was sooo close at this point, I had to comment out “Defaults requiretty” within sudoers.  When this is on, it prevents you from running sudo outside of the command line.

This was a very frustrating journey so hopefully this helps someone else.  Or me in the future.

SODA's Click 2009 - 10/01/2009

This past thursday (10/1/09) our creative directors, Jeff Toll and Demetre Agres and I had the pleasure of attending the Click 2009 SODA event at the Art Directors Club in NYC.  There we got to hear from amazing boutiques like Unit9 (particularly loved them), Syrup, and Poke, as well as from some of the agency juggernauts like Goodby, CP+B, JWT, and Ogilvy, all introduced and hosted by the after-hearing-him-talk-I-truly-get-why-he’s-such-a-likable-force-in-the-industry Michael Lebowitz (which I am pretty sure I learned is “lEbowitz, not lEEBowitz) from the infamous Big Spaceship.

The topic and discussion points varied from more granular subjects like “Branding with numbers” (which I found surprisingly intriguing) to more general monsters like “What is the future of entertainment”.

First off I have to say what a pleasure it is to hear from such talent in one room, on one day, and in person.  I mean Jason Zada, Lebowitz, and Mike Geiger to name a few…truly a pleasure.

Of all the nuggets of wisdom I can take away from the discussions, what is interesting to me is that despite agency head-counts, annual billings, specific focus, country of origin, or AOR vs. project-based orientation, we are all facing similar issues; digital agencies finding their autonomy from the traditional ones, an ever-changing set of tools, an even more-changing option of techniques and services we have the option to render should we decide to, and a myriad of ways we can manage the whole damn thing.  But here in-lies the beauty, though facing the same obstacles and issues, the lot of us are choosing completely different approaches to the hurdles, and its working.

We have the luxury of working in an industry that is defining itself each day, and that works for me.  After all, what are we if we are not problem solvers?  At the end of the day we are simply choosing what tool we want to solve the problem with.  So I welcome and embrace the luxury of being able to re-define, re-shape, and re-focus. What fun it is after all.

So after a wonderful day with our peers, and a couple others enjoying an amazing city with good colleagues and friends, I am glad our industry is a kid.  It has many options, and oh so much potential.  Im not sure if its the couple cups of coffee, or the Where the Wild Things Are soundtrack I am listening to as I type this, but I love this kid and want what’s best for him too.  So let’s keep talking.

Art Directors Club NYC

people
- id (int)
- name (varchar)
- sort (int)

Here’s how you can populate that sort column with integers that, when ordered by, put the results in alphabetical order:

SET @i=0;
UPDATE people
INNER JOIN (
SELECT id, @i:=@i+1 AS i FROM people ORDER BY name ASC
) counter ON counter.id = people.id
SET people.sort = counter.i;

The SET command initializes a variable.  The subquery orders the list and adds a new column (i) that counts off each row effectively.  Then the outer query joins on this by the PRIMARY id so that we match the ordered row from the subquery with the outer query.  And lastly, we store the i value back in the table.

Not to recant on my previous post regarding Twitter’s penetration – and after re-reading it, I realized that I sounded as if “your mom having a twitter” was a bad thing. Quite the contrary, it’s a fabulous thing for the web and for my industry. For at it’s most basic level, anything that keeps people using and talking about the internet is good for interactive shops.

That’s why I was especially stoked to see this New York Times article talking about how small businesses are using Twitter to get their name out there and connect with other customers and businesses.

One quote I found particularly poignant was the following from Anamitra Banerji, who manages commercial products at Twitter:

“We’re finding the emotional distance between businesses and their customers is shortening quite a bit.”

I think this is the real value in Twitter – immediacy & intimacy. Whether it’s breaking news spreading like wildfire through the “Twitterverse” (please slap me for using that term) like Michael Jackson’s death, or an impromptu Dave Chappelle appearance turning into a gathering of thousands of people, to much smaller scale things like that New York city street vendor broadcasting his location and menu items for that day, there’s nothing fresher on the web than a tweet.

Whereas Twitter in these cases is harnessed for its immediate ability to break and trend a story, there’s also a very intimate side to Twitter that exists between friends who tweet to each other their banalities, and even more so, between celebrities and their followers.

For instance, consider how you used to get updates from your favorite bands, actors, artists etc. Maybe you followed their ‘news’ section, maybe even signed up for an RSS feed. But more than likely, you read about them on another entertainment site like Perez Hilton or Defamer. Why Twitter is so great for celebs is now there’s no filter, no ‘official release’, no bullshit (for better or worse). As powerful as tweets are, they are also completely flimsy, flippant and often shallow. It’s these off-the-cuff and behind the scenes views into our fascination with celebrity that adds to its success.

It’s really as if Twitter is a trident of functionality:

1. As a new business and news tool
2. As a celebrity/entertainment/artist ‘club’ for fans
3. As an ‘I just ate a sandwich & watched Lost’ granulator amongst friends and family

So when I hear people who only claim Twitter is only one of these (especially #3), I’m surprised there’s still a level of confusion as to who and why someone would tweet. Assuming that Twitter wondered the same thing, they’ve just released a “Twitter 101” guide showing how businesses big and large have something to gain from Twitter.

Bottom line, if you’re a business looking into Twitter, read that document! It says exactly what I posted about earlier regarding giving your followers inside info, deals/coupons and creating a dialogue. But don’t let it replace your website, it’s a supplement to your site.

And if you’re an artist or a celeb, keep tweeting from your concert or that the sushi at Nobu is great – inquiring minds want to know.

And finally if you’re a ‘joe-schmo’ like me, you can bet I will keep tweeting about my wife, my children and occasionally act like I know something about the internet.

So before this post becomes any more of a ramble, I’ll just say this: keep tweeting while it’s free. One of these days after we’re all enslaved and addicted to Twitter, throwing them $5 for a ‘pro’ account will seem like no big deal. I mean hell, they certainly deserve it.