nginx

Apache

The first answer seemed like the wrong approach, having to add -webkit-transform-style: preserve-3d to every element and having the browser transform all the elements to a 3D state which would seemingly add more work for the browser. Not good, next answer.

The next answer was thought out more and seemed a bit more logical. Although for my build, both the header and footer have a fixed position. Header to the top, footer to the bottom, both of them pinned to the full width of the browser, no wider so it didn’t make sense as to why it was still flickering when the answer said it will happen if the elements are wider than the window itself.

The first approach I took was just to take out the header and footer CSS to see if it’d still flicker. It stopped! So something within the CSS must be causing this. I added the styles back in and only kept the styles for the actual wrapper for both the header and footer, still no flickering, so I was on the right path. After adding all the CSS back in and digging some more, I noticed the navigation, logo and some footer links had text-indent: -999em;. Taking this out preserved the header and footer completely during the animation and had no flickering. So I found the problem, the text itself was adding onto the headers width in the browsers eyes.

In the end, the simple fix was to add span tags around the text that I was negative indenting and hide that specifically rather than using text-indent all together. You probably wonder why I go into great depth on such a simple problem, but this has happened to be quite a few times before, and it is great relief that I know now what was causing it and how to fix it. I hope anyone who has had this problem before or are currently dealing with it find this article so you can move forward in your development and keep on making awesome things.

I’ve created a simple example for you to check out and see what happens. Simply roll over the rounded square in the middle of the page and let the flickering begin. Remember, only for Safari does this happen.

Another thing to keep in mind, is it also only happens if you have z-index on the parent element where the text is overflowing. I created another example to demonstrate this, the only difference between the 2 examples is this one doesn’t set a z-index on the header, which prevents it from flickering. Although for this build, heavy z-indexing is required.

Just copy the settings.yml file to config/settings.yml, then copy the settings.rb file to config/initializers/settings.rb. Once you’ve done that, restart your server and you’ll have access to all your settings.

You have your default configuration that you setup, then all your environments listed below that override any settings set in defaults. You’ll also need to create additional environment keys for any for other environments you may have.

I’ve found an elegant solution to this (in my opinion) by creating an object for each image, and to store information about the image in that object, including an instance of the loader. Let me show you.

Example

//counter to keep track of unique items in the array
var counter:Number = 0;

//base array with paths to the images
var images:Array = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];

//blank array which will be filled with objects that contain image data
var imageObjectArray = [];

for(var i:uint = 0; i < images.length; i++) {

	//create blank object with appropriate properties
	var imgMeta:Object = {imgPath: null, holder:null, loaderInst: null};

	//push the object into imageObjectArray so we can access it later
	imgObjectArray.push(imgMeta);

	//set the properties we know
	imgMeta.imgPath = images[i];
	var imgHolder:Sprite = new Sprite();
	imgMeta.holder = imgHolder;	

	//load the image here
	var l:loader = new Loader();
	l.contentLoaderInfo.addEventListener(Event.COMPLETE, onDoneLoading);
	l.load(new URLRequest(imgMeta.imgPath));
}

//function called when each image is done loading
function onLoadComplete(e:Event) {

	//use counter here to make sure we're getting the correct imageObject
	//we need to call each unique loaderInst here, so each image is unique
	addChild(imgObjectArray[counter].loaderInst);
	counter++;
}

This of course can be classed out and abstracted, but the basic principal here is being able to reuse the loader code each time through the for loop, and displaying each unique image when it’s done being loaded.

An additional benefit to this is being able to use the object again anywhere in your code, since all the information for all of the images is stored in imgObjectArray.

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.

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.

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.

• 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.