Greetings! From the Ai UX & Design crew
Hi!
We are the Ai UX & Design crew and we’d like to wish you all a happy Wednesday! Right on.
Sincerely,
The Ai UX & Design crew
Hi!
We are the Ai UX & Design crew and we’d like to wish you all a happy Wednesday! Right on.
Sincerely,
The Ai UX & Design crew
A fast computer is important for a coder. It may be obvious, although, some people think, “hey, I just code, I don’t do anything that is graphic intensive, I can code fast enough with my 486DX2-66 with 8MB of RAM”.
What they don’t realize is that although the computer is fine for coding once you have your IDE open, it is task switching that can add up to wasted time. Every second spent launching a program counts. For instance, if there is a slight delay in your browser and it takes 10 seconds to launch. You could be looking at 5 minutes or more of wasted time daily. I have an Intel Core 2 computer at work, and although at times
I push it to its limit and have to wait for it to catch up, I know that when my browser opens instantly I am saving time.
Input devices can have a similar impact. Specifically the MX revolution mice series. When I first used a regular scroll wheel mouse I thought, “nice, this is such a time saver”. I didn’t have to press page down or click on the scrollbar arrows anymore. Then recently I tried a revolution mouse. Wow, what a difference. This mouse flies through code or data, slices and dices noisy log files and can completely change gears when you need precision click-to-click control.
A new concept for navigating documents and folders, the MicroGear Precision Scroll Wheel operates in two distinct modes. In free-spin mode, the familiar ratchet-scrolling mechanism retracts, allowing the wheel to spin for up to seven seconds, providing hyper-fast, nearly frictionless long-distance scrolling. In its normal click-to-click mode, the wheel allows users to navigate small distances with great precision, such as individual spreadsheet rows, or small vertical distances in a document or Web page. Switching between the two modes is either done manually or managed automatically by Logitech’s SmartShift technology.
The revolution really does revolutionize mousing making mouse use more enjoyable. Two notes about these mice and Logitech scroll wheels in general. One, be careful not to drop the mouse on the scroll wheel, it will break the tactile feedback on the middle click. I’ve tried to fix the issue but both times it seems like its missing some part. Two, don’t place a wireless router in between the mouse and the receiver. It will cause random pauses while you are moving the mouse. What are you using for coding? Are there any devices that save you time?
Yesterday was the third successful Tie Tuesday at Ai HQ.
What, pray tell, is Tie Tuesday?
As it sounds, it’s when this otherwise ultra-casual office dandies up for a day, and anyone who’s game sports some proper neckwear. Outfits range from tie-and-jeans to full slacks-and-shoes getups, and are worn regardless of client-facing assignments–two of us wore ties to a casual on-site client meeting yesterday.
Tie Tuesday came about naturally, after two of our developers wore ties on a whim in the same week. “Hey,” we thought, “this oughta happen more often.” But one guy wearing a tie does not a movement make, so acting on a tip from this author’s wife, Tie Tuesdays at Ai were born.
We’re doing it until Memorial Day. If you’re in the neighborhood on a Tuesday this spring, just look for the dapper dons on the Shake Shack line. (Shake Shack Tuesday–now there’s an idea….)
Trying to find a program to launch by browsing through the list of programs can be time-consuming, especially if you juggle applications throughout the day. My first suggestion to overcome this is to drag the program on to your quick launch or dock. Your program is now one click away and will save you time next time you have to launch it.

Another method for quickly launching an application is to use a launcher such as Launchy (xp) or Spotlight (Mac). These save you even more time by eliminating the search for the icon on your dock or taskbar as you launch the program by typing instead of clicking.

The third approach is to use the superbar (windows 7). The well thought out new taskbar is very time-saving. You can open an application once, pin it on the superbar and it will always be there when you need it. If it is not open, it opens when you click it, if it is open it goes to the window. It is very intuitive and streamlines the computer use process.
![]()
Methods like these help trim off time during development, leaving more time to focus on writing code.
Like a newborn baby, an idea is sensitive and needs special care. If you are not careful, you can actually kill an idea. On the other hand, if you nurture an idea, you can see it from conception to incubation to realization and application.
Here are some links to guide you through the nurturing process that can help you give constructive feedback.
If you have any other tips on helping an idea succeed, please share them with us.
Before I set out to write a significant amount of code, I search high and low to make sure someone else hasn’t already written it.
There are a few ways to do this:
1. Google Code Search
2. Look in your other projects for similar code.
3. Ask around (co-workers, twitter, IRC etc..).
One main reason for code reuse is that it will usually have less bugs than writing it from scratch. It is also evident that reusing code will save time. For example, why write a user authentication system when you can just download one and install it as a plugin. A few hours of research can save hundreds of hours programming. Another advantage to using pre-existing code is that it is usually more abstract and can fit a wider variety of applications. As a bonus, it usually has more features.
When you do have to write code because the problem you are solving requires more customization than anything out of the box, it is best to make sure it is reusable. For example, avoid naming your variables too specific, such as the_yellow_square_at_the_left_of_the_page, instead, create a function similar to shape('yellow', 'square', 'left'). This will allow you to reuse it for many situations. If you wanted a purple triangle on the right you would just write shape('purple', 'triangle', 'right'). It’s much easier to refactor and reuse on future projects.
Ai and Steiner Sports rolled out a great context-aware ad panel that presents product search results based on page content on espn.com.
The search widget, as we call it internally, receives a search phrase from ESPN when a page is called. The widget checks the steinersports.com database for related products, then shows the top two results on the page. There are also default items in place when the search phrase doesn’t return any relevant results.
The widget is the product of a three-way collaboration between Ai, Steiner and ESPN. Our thanks to ESPN for helping to get everything running smoothly.
A full news item will be posted soon, but in the meantime, try it out: Derek Jeter on espn.com
If you ever wanted to find me in the office just ask for the guy with the big headphones, bobbin’ head, and deep bass lines thumpin’ at a soulful, funky 4/4.

Music has always played a vital and spiritual role in my life, and to be able to have those sounds glisten in my ears while I apply my craft at my desk is purely harmonious.
Since I can’t be at the clubs everyday, I bring the dance floor here. My mixer (keyboard) and turntable (mouse) help in producing some of the most illest, dirtiest 12 inch white label html mixes and css dubs. I’ll even drop some vocals from our javascript guru’s too.
I couldn’t do any of this without the right equipment.
Ai is currently (and rather proudly, in this economy) hiring a few more hands for a busy spring season. We have several jobs posted and have heard from hundreds of people in the past few weeks. We’ve seen many good resumes and have a full slate of interviews this week.
Unfortunately, we’ve also heard from many people who are, to put it bluntly, doing it wrong. As our dear friend Loren has attested, few things about job placement are worse than misdirected or inappropriate contact. So I’ve made a short guide to getting one’s foot in the door properly–and what it takes to do it right. Here’s your 10-point plan for getting a job:
The recent redesign of professional recruiter and temporary staffing firm features an interactive marquee that combines a slideshow, areas of expertise menu kick-out, and zoomable touts highlighting the site’s three key areas: available positions, resume submission and employers portal. This is a dissection of the component’s front-end HTML and CSS architecture, giving a more in-depth look at what’s actually happening under the hood.
The marquee’s frame consists of the following divs:
#marquee – main parent container#marquee_head – transparent png set as the background for the top curve#marquee_foot – transparent png set as the background for the bottom curve#marquee_content – content with a repeating vertical shadow background image#marquee_overflow – wrapping container with overflow set to hidden to clip excess content from appears outisde the curves and sidesEach of the background images have a white outset to allow for the clipping to display correctly.

The challenge here was keeping the tout’s markup within the actual marquee parent container to maintain a nice markup flow. Since IE disallows childen to stack over its parent elements who have an overflow set to hidden, this presented a problem for the hover states on each tout. As seen in the image, the touts overlay the actual marquee frame when hovered over with a cursor.
The solution?
Gotta swallow the geek pride on this one. We have to break the markup’s natural flow a bit and place the hover states, #marquee_touts_active, outside the #marquee div. Fortunately the placement is immediately after the #marquee div so the markup’s “roadmap” is still intact.
No png’s necessary. The tout’s transparency setting is fully CSS-controlled. To cover all bases a few separate browser-specific CSS statements are necessary (see below).
This menu is an overlay kick-out that appears when you hover over its call to action underneath the marquee’s main blurb that lists areas of expertise which are specific to the current division you are viewing.
Below are stripped down versions of the actual HTML and CSS. You can view the marquee live in action at any of Green Key’s divisional sites such as Accounting & Finance.
<!-- #marquee-->
<div id="marquee">
<!-- #marquee_head -->
<div id="marquee_head">Beginning of Marquee</div>
<!-- /#marquee_head -->
<!-- #marquee_content -->
<div id="marquee_content">
<!-- #marquee_overflow -->
<div id="marquee_overflow">
<!--.slide -->
<div class="slide">
<!-- slide content -->
</div>
<!-- /.slide -->
<!-- #marquee_touts -->
<div class="clear" id="marquee_touts">
<div class="tout">
<!-- tout content -->
</div>
</div>
<!-- /#marquee_touts -->
<!-- #menu_areas -->
<div id="menu_areas">
<!-- areas of expertise content -->
</div>
<!-- /#menu_areas -->
</div>
<!-- /#marquee_overflow -->
</div>
<!-- /#marquee_content -->
<!-- #marquee_foot -->
<div id="marquee_foot">End of Marquee</div>
<!-- /#marquee_foot -->
</div>
<!-- /#marquee -->
<!-- #marquee_touts_active-->
<div class="clear" id="marquee_touts_active">
<div class="tout"><!-- tout content --></div>
</div>
<!-- /#marquee_touts_active -->
/* #marquee
---------------------------------------------------------------*/
#marquee {
margin:0 0 0 -10px;
width:961px;
}
#marquee #marquee_head {
background: url(/img/bg/bg_marquee_head.png)
no-repeat scroll 0 0;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_marquee_head.png',
sizingMethod='image'
);
_background: none;
height:43px;
position:relative;
text-indent:-1000em;
width:961px;
z-index:2;
}
#marquee #marquee_foot {
background: url(/img/bg/bg_marquee_foot.png) no-repeat;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_marquee_foot.png',
sizingMethod='image'
);
_background: none;
height: 60px;
width: 961px;
position: relative;
z-index: 5;
text-indent: -1000em;
}
#marquee #marquee_content {
background: url(/img/bg/bg_marquee_content.png)
repeat-y scroll 0 0;
height:391px;
position:relative;
}
#marquee #marquee_content #marquee_overflow {
height:446px;
margin:-25px 0 0 10px;
overflow:hidden;
position:absolute;
width:940px;
}
/* #marquee_touts
---------------------------------------------------------------*/
#marquee_touts {
position: absolute;
top: 450px;
z-index: 1;
background: #236336;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
#marquee_touts .tout {
float: left;
width: 311px;
padding: 23px 0 45px 0;
border-right: 1px solid #77917e;
cursor: default;
height: 50px;
}
/* #marquee_touts_active
---------------------------------------------------------------*/
#marquee_touts_active {
position: absolute;
z-index: 100;
margin: -165px 0 0 0;
}
#marquee_touts_active .tout {
height: 153px;
position: absolute;
}
#marquee_touts_active .tout .tout_content {
height: 153px;
}
/* extra div for ie hasLayout */
#marquee_touts_active .tout .tout_content {
padding: 30px 0 0 0;
background-position: left top;
background-repeat: no-repeat;
}
/* #menu_areas
---------------------------------------------------------------*/
#menu_areas {
position: absolute;
z-index: 2;
top: 235px;
left: 34px;
padding: 33px 0 0 0;
width: 578px;
}
#menu_areas.active {
background: url(/img/bg/bg_menu_areas_head.png)
no-repeat left top;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_menu_areas_head.png',
sizingMethod='crop'
);
_background: none;
}
#menu_areas.active .menu_content { display: block; }