I moved desks, Upgrade? Strangely yes.

Posted in development by Kris Gray on September 23rd, 2009

At Salesforce, we have a 3 building setup here at One Market, there’s two gray ugly towers, and one nicer brick building. The towers are named Spear and Steuart for the streets they are on, and then the nice brick building we call Landmark, I’m not exactly sure why. The Development teams were spread out over two of the buildings Spear and Landmark and someone decided it would be good to get the teams as close together as possible. It was decided that all us devs would consolidate to the Landmark building, which meant I had to move from my Spear tower desk. Here’s a picture of spear here (Its the taller one on the right).

The Spear Tower

I had a nice spot too, a pretty good view, quick access to the beer fridge, and close to the team. Here’s my desk.

Desk in Spear Tower

Yes its one small side desk with two gigantic 24″ monitors on it, and I’m in a small corner with a large palm. But it has a nice view!

Spear Tower View

I was a mixed bag of emotions. I did have some nice perks; good view, was sitting right next to the important members of my team, and then there was that I wasn’t sure where we were headed. But since I had about 10″ of desk space after all my computer equipment, I figured the trade off might be worth it.

We ended up on the 3rd floor of the Landmark building at One Market Plaza in San Francisco, which you can’t deny is a sexier building.

Landmark at One Market

Here’s my new desk.


And my new view! Yay! (Sarcasm!)

Landmark View

As you can expect, being here only a half dozen months the re-org was able to give the better window seats to the more senior developers, though I would expect nothing less especially if I was one of those senior developers myself.

The move turned out much better then I imagined. I’m amazed that any company gets anything like this right when presented with an opportunity, but Salesforce did a really good job. The manual labor was provided for us, all we had to do was box and label our personal items, computer equipment and chairs and it showed up at our designated cubes the next morning with our computer equipment already setup.

The Landmark building was as big a character upgrade inside as it was outside. Its colored better, its got exposed brick walls, and its just a better feel.

Our desks are great, they went from an ugly gray (or white in my case) to a nice speckled wood color, the cubicle walls are a bit lower so you can see peoples top of their heads but looking around doesn’t weird anyone out and make them stop working. Also with the open desk layout vs enclosed cubicles, we have a tendency to converse from our chairs and break out in random friendly conversations a bit more. We still get just as much work done so its not at the expense of work, but I think its more efficient conversation time.

So even though I lost out on my nice view, a larger desk, an office with some character, a much better color scheme and better cube layout won out.

No comments

Adding your logo to the page in an SEO optimized way.

Posted in development,Markup,SEO by Kris Gray on September 19th, 2009

Everyone has one, either your name, your logo or some cute picture you use to discern that the user has landed on your little piece of the web. Here’s mine just for reference.

But there is a specific optimal way to include it on your page.

The things to concern here.

  • Any images you add to page that are not content related but are theme related pollutes your markup with un-necessary elements and makes it harder to re-skin in the future.
  • Search engines can’t read text from an image, so your primary identification doesn’t get indexed.
  • If images aren’t loaded (hey it happens, really!) they the visitor doesn’t know where they are. There is the alt text of the image that doesn’t load, but its size in comparison to the rest of the page is very poor.
  • What if you want to change your logo based on the page your on, or user activity, you’ll need to change the img src, meaning script, or markup changes per page.

There’s probably a few more, but you get the idea, beyond the Happy Path, using an image for your logo starts to cause problems.

The solution is actually beautiful in its simplicity, here’s the markup you’ll want to generate.

  1. <a id="logo" href="[Your Site Address Here]" title="[Your Site Name Here]">
  2.         <h1>
  3.             [Your Site Name Here]
  4.         </h1>
  5.     </a>

and then you can pair this with some simple CSS to add our logo image.

  1. a#logo { display:block; width: '[logo width]'; height: '[logo height]'; background: url('[logourl]') no-repeat; }
  2. a#logo h1,
  3. a#logo h2 { display: none; }

And then your pretty much done, here’s what I would end up with for my site.

  1. <a id="logo" href="http://www.justise.com" title="Kris Gray">
  2.         <h1>
  3.             Kris "Justise" Gray
  4.         </h1>
  5.     </a>
  1. body { background: maroon; }
  2. a#logo { display:block; width: 185px; height: 63px; background: url(http://www.justise.com/wp-content/themes/justise/images/headerLogo.png) no-repeat; }
  3. a#logo h1,
  4. a#logo h2 { display: none; }

Why is this markup preferable?

If we render without images, and CSS, we still get a very big peice of text that lets the user know where they are.

What the Logo Looks like without CSS

What the Logo Looks like without CSS

We also use an H1 or an H2 (more on that later) to mark our logo text so that search engines realize that the text is important and they should give a large amount of weight to that text.

It was a question of mine at some point writing this if Search Engines really do index text that is hidden with display none? So I went and looked it up, and according to this SEO optimization post on “Do search engines index that” the answer is Yes, so lets move on.

We attach the image of our logo to the background image of the logo link, so we still have the flexibility of changing our logo at any time by just updating the CSS, while also being able to change the logo link based on its context in the document, such as a different parent class.

We will obviously want our logo linked back to the main page, its just a common standard, and so you’d need pretty much the same amount of markup if you were going to just insert an image.

Lastly, this w3c article on using the H1 tells us that we want to mark the most important text on the page with the H1 element. Since on the main page, that is most likely our logo this is fine, but on sub pages, we’ll probably want the title of each blog post as the H1, so we’ll want to make our logo now an H2. With the technique we are using here, it requires no change to the CSS, just a simple markup change.

No comments

There’s a Javascript Magazine, and its really good!

Posted in development by Kris Gray on September 15th, 2009

The magazine for Javascript Developers.

I stumbled upon the JSMag website and decided to sign up and try out the trial PDF.

The magazine is put together by Michael Kimsal, who also does GroovyMag and he compiles articles from writers in the JavaScript community to publish in this online only magazine (is it an e-zine then?).

In the trial PDF your topics are

  • JazzRecord: JavaScript Databases Made Painless
  • The Red Pill: Functional Programming in JavaScript
  • Using Object Literals to Organize your Features
  • Community News

I’ve long been interested in Functional JavaScript programming, and so the article is pure candy. Its written well, I don’t feel like I’m being talked down to, but I’m also able to keep up on a subject that is a shift from traditional programming concepts. The article was written by Robert Fischer, and I’ve gained a healthy respect for him from it.

The only real negative is the price, typically, I’ll sign up for magazines and they will cost about 20 for a subscription, but JSMag actually costs $59.88 for a years worth of soft copies. Granted, you get a magazine devoid of advertisements, making it pure content, but its still a heavy price to pay for a magazine.