Posts Tagged ‘company’

Greetings! From the Ai UX & Design crew

The Ai (Alexander Interactive) Visual Design & UX crew. Including Josh Levine, Meg Widman, Mayor Jack Reynolds and ...

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

Ai

The Importance Of Having A Fast Computer For Coding

MX_Revolution_02.jpgA 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?

Ai

Tie Tuesdays at Ai

Yesterday was the third successful Tie Tuesday at Ai HQ.
What, pray tell, is Tie Tuesday? tietuesday.pngAs 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….)

Ai

Save Time Launching Programs By Using A Launcher, Quick Launch Or The Superbar

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.
quicklaunch.jpg
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.
amarok.png
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.
clip_image004_thumb.jpg
Methods like these help trim off time during development, leaving more time to focus on writing code.

Technology

An Idea Is Born, And Kept Alive.

nurture375_7i59.jpg

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.

  1. Ways to kill and ways to help an idea: A good list of what to say and what not to say.
  2. How to kill an idea, or help it grow: More suggestions.

If you have any other tips on helping an idea succeed, please share them with us.

Ai

Reuse Code And Write Reusable Code

reuse-code.jpgBefore 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.

Technology

Steiner Sports: player search ads

Ai and Steiner Sports rolled out a great context-aware ad panel that presents product search results based on page content on espn.com.
steiner-espn.pngThe 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

Ai

Fenda Equipment (12″ #FFFFFF Label Mix)

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.

dj.gif

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.

  • Headsets:

    • Sony MDR-V700DJ Studio Monitor Series
    • Sony MDR-EX85LP Buds when I’m on the go
  • Microsoft Natural Ergomic 4000 Mixer
  • Microsoft Laser 4000 Tabletop
  • Dual 20″ Samsung SyncMaster 204BW Multimedia Players
  • Notepad++ Media Controller
  • Photoshop CS3 EFX-1000
  • Custom Mods/Add-ons
    • Web Developer
    • Firebug
    • HTML Validator
    • Tails Export
    • Operator
    • WAVE
    • Yellowpipe
    • YSlow
    • Pixel Perfect
    • Screengrab
Ai

How to get hired

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:

  1. Read the job posting twice. If you’ve found a good job and are questioning whether you’re a good fit, sit on it. Leave your browser for an hour, then come back and read the want ad. The right jobs will become obvious. Those are the ones you should reply to.
  2. Follow instructions. If the ad asks for a cover letter, write one. If it asks about foosball proficiency, as one of ours famously did, mention it. This is your first deliverable: get it right.
  3. Do your homework. Googling a company takes minutes and gives you a huge advantage. More than once we’ve been swayed to interview a candidate based on a love of dogs and an appreciation of Jack. One guy even sent us a photo of his dog. (We met him, too.)
  4. Customize. Write a cover letter that speaks to the position you’re replying to. A resume geared toward the position helps, too.
  5. Don’t spray and pray. I have received any number of responses to our IA position–a targeted, talent-focused role–from IT executives, software developers and designers. This position is wrong for all of them. “Getting the resume in front of the hiring manager” doesn’t work, because I’m not filing good resumes away for future reference; I’m marking them as not doing #1 on this list.
  6. Don’t be pushy. Related to #5. Why did I receive 11 calls from placement firms when our ad says, “No recruiters, please?” Because they all believe in the no-no above. Sorry, guys, but we made our preferences explicit, and all you’re doing is ignoring our request.
  7. Be respectful. Showing up a few minutes early for an interview is a great first impression (and at Ai, it often means we’ll start early, too). If you’re running late or have to cancel, call us–we’re people too, and we understand. Standing us up or rolling in late is much worse.
  8. Ask good questions. Everyone likes to feel like they’re interesting, and interviewers are no exception. Don’t you want to know more about our company? Our client types? What all those photos on the orange wall are for? Immerse yourself and show us you want in.
  9. Be thankful. Not grateful, silly; just send a thank-you note. A few sentences in an email is plenty. Just let us know that you’re paying attention and you’re still interested. It’s not a decision-maker, but it adds to our overall impression.
  10. Smile. Enough said.
Ai

Dissecting the Green Key Marquee

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 Frame

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 sides

Each of the background images have a white outset to allow for the clipping to display correctly.

Zoomable Touts

gk_zoom.jpg

Keepin’ it cross-browser

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.

Transparency

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

Areas of Expertise Menu

gk_menu.2jpg

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.

See for Yourself

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.

HTML


<!-- #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 -->

CSS:


/* #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; }

Technology