Or “So you want to be a Front End Developer”

I received an introductory email via Linkedin from a Google recruiter asking if I had interest in working for the Big “G”. I wasn’t looking for work at the time but thought that if anything it would be a great learning experience and see how they handle their hiring practices. I graduated with my BS in Computer Science from Georgia Southern, far from the ivy league expectations that I had heard about Google’s hiring practices but the recruiter was legit and I started the process. After narrowing down the field to Google Front End Engineer, she quickly quizzed me with 3 questions over the phone to move on to the next phase of the interviewing/testing process. I did not sign any confidentially agreement, so I can reprint them here for any would be tech recruits looking to work for the Google.

Included after the questions are links to the most correct/in-depth responses from my knowledge and some basic link you could find the information on the web.

#1. What is a HTML DOCTYPE (DTD) and what is it’s purpose.

Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page.

DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
http://www.alistapart.com/articles/doctype/

Follow up – why is validation important?

1. Validation as a debugging tool
2. Validation as a future-proof quality check
3. Validation eases maintenance
4. Validation helps teach good practices
5. Validation is a sign of professionalism

http://validator.w3.org/docs/why.html

#2 What is the difference between the CSS properties Visibility: hidden and Visibility: none?

‘display: none’ means that the the tag in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other tags.

‘visibility:hidden’ means that unlike display:none, the tag is not visible, but space is allocated for it on the page.

http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone

Some additional information on the display property http://www.quirksmode.org/css/display.html

What is a Javascript JS Closure?

A “closure” is an expression (typically a function) that can have free variables together with an environment that binds those variables (that “closes” the expression).

http://www.jibbering.com/faq/faq_notes/closures.html

I did well on questions and 2 and completely blew question #3. In hindsight I knew plenty about closures but not enough to define them on the spot and I chocked. I assumed 66% was not a great score and I would not move on the next phase, which was an at home test that had to be completed in under 3 hours. I was wrong, I will write a post about that Google Front End Engineer – Coding home test that I completed.

Follow up (04-13-09) | I have recently been on some more interviews, here is the ever growing list of potential employer questions I get.

Define/describe the CSS box model

The CSS box model describes the boxes that are formed around elements of content in a Web page. Every element in a Web page is in a box or is a box, even if it’s an image of a circle. The boxes on Web pages are constrained by rules defined by the box model.

Parts of the CSS Box Model: The CSS box model is made up of four parts:

• margin
• border
• padding
• content

What is the difference between absolute and relative positioning?

Absolute positioning is relative to the page itself, relative positions relative to the object it is within, it’s starting position. position: absolute; tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document – it won’t affect how the elements before it or after it in the HTML are positioned on the Web page.

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

What is !important mean and what does it do within a CSS class

An “!important” declaration (the keywords “!” and “important” follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain “!important” declarations, and user “!important” rules override author “!important” rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

What are sprites/sprite collections?

This is a simple technique used for page load performance purposes. Since HTTP requests are the most expensive thing you can do in regards to front-end performance, you strive for making as little requests as possible. So instead of having the browser download 4 rounded corner images for example, you create one image that has all four. Then you use CSS background-position to only show the part of the image you want.

What is semantic code?

Basically, it’s a way of writing your HTML in a more meaningful, structured and to be honest, sensible way. It’s all about using your header tags (H1, H2, etc) for yep, you guessed it – headers, instead of bolding the text and increasing the font size with the old <i>span</i> tag. For paragraphs, use the <p> tag rather than sizing the font and adding hundreds of line breaks, for lists use the <li> tag, and so on.

If you want to add an image, you use the <img> tag because it’s the tag for inserting images, so it stands to reason really that when you’re adding a heading, list, etc, you use the correct tag, not some sort of bodge.

So why use Semantic HTML? What are the benefits? Why can’t I just do things my way? Well you can just do things your way if you want, but I’d probably not advise it. The biggest benefit of using Semantic Code is that you’ll be adhering to the Internet standard. And the benefit of that is that when things change and progress as they like to do on the Internet, the stuff that makes your site work isn’t going to get left behind.

http://boagworld.com/technology/semantic-code-what-why-how

~ H