This-morning I had to quickly run up some questions for someone’s second interview. We were looking for someone with good front end knowledge, so I knocked up some questions to ask them. I found these were very good at getting them talking, and gave them a lot of potential to show they had a strong knowledge in the field.

Let me know if you think there are some other good questions that will provoke some good discussions!

HTML Questions

• What is a doctype?
• What different versions of HTML are there, what’s the difference between transitional and strict?
• What do you know about HTML 5, and do you think you will use it?
• What are the advantages and disadvantages of using web standards.
• Do you know what the trinity of web standards are? (Separation of, structure, behavior and presentation)
• What is the concept behind the semantic web, and why does it matter?
• Do you know what micro formats are?
• What related blogs or websites to you read?

Accessibility Questions

• What is accessibility and why does it matter?
• What should you put in alt text for presentational images?
• Why are, “click here” links bad to use?
• Why do people use skip to content and skip to navigation links?
• How can CSS aid accessibility?
• How can you test for accessibility compliancy? Why do automated tests not guaranty accessibility.
• What related blogs or websites to you read?

CSS Questions

• What is the difference between using inline CSS and using an external CSS file. When would you use inline CSS?
• What browser do you develop in?
• What browsers do you test in?
• What is the ACID2 test?
• Who or what is WASP?
• What are CSS hacks and what are they used for?
• What related blogs or websites to you read?

SEO Questions

• What would you said the main 4 search engines are?
• What would you say the most important element in the head of an HTML document are?
• What would you say the most important element in the body of an HTML document are?
• How do search engines treat content inside an IFrame?
• How can you convey information in an image to a search engine.
• How can you convey information in a flash movie to a search engine.
• What is keyword stuffing?
• What is cloning?
• How should you re-direct traffic from http://pixelbox.net to http://www.pixelbox.net ?
• What related blogs or websites to you read?

JavaScript Questions

• What is ECMAScript?
• What is the DOM?
• What is unobtrusive JavaScript? Why is it important? What is HIJAX
• How would you add a JavaScript event to a link or button, and why?
• What are the advantages and disadvantages of Frameworks?
• What would you do if a framework could not provide the functionality you needed?
• What frameworks have you used and why did you choose it?
• What is browser sniffing and where would you use it? (trick question… never!)
• What is Comet? What sites use it?
• What is JSON? Why would you use JSON over XML?
• What sites do you think use JavaScript well?
• What industry blogs do you read?
• How do you debug JavaScript
• What problems have you had with IE when DOM scripting and how have you overcome them?
• What related blogs or websites to you read?

Tools Questions

• What software do you use to develop in and why?
• What are the advantages and disadvantages of using WYSIWYG development tools?
• What browser do you use to develop in and why?
• What browser do you use on a daily basis, and why?
• What is any, plugins or bookmarklets do you use?
• What browsers do you test you work in?
• What operating systems do you test your work in?
• Do you use source control, if so what, if not why not?
• Do you develop locally or on a remote server?
• Do you know how to set up a web server, apache, MySQL etc

This isn’t great and seems a little bit hacky. So I did some research and found a couple of solutions (solution one, solution two). These have been around for a long time, I guess I must have just missed them?!

These both work, although the second is slightly more solid than the first. In at attempt to understand them further I made a demo page or each method, which should explain how they work.

Absolute positioned div

The first example based on Hicksdesign’s solution uses a div positioned 50% down the page with a negative bottom margin, set to half the height of the element you want to center. The second uses the same technique but with only one element.

The problem with both these methods is that content is lost at the top of the element if you make the browser window too small.

Absolute positioned div method
Absolute positioned div method 2

Spacer div

This example based on d-graff’s idea uses a floated div with a height of 50% and again a negative bottom margin, set to half the height of the element you want to center. The content is then set to clear the floated element.

This seems to be more solid as it works nicely with scroll bars.

Spacer div method

One problem with both these methods is that the content in the centered div has to be known and set by the CSS. In order to have higher(taller) content you will have to use overflow auto (as in the examples). Or use JavaScript to mod the height in your CSS/HTML.

Today I noticed that Google have also implemented this feature as part of one of the themes on the google personalized home page. The theme selector seems to only be on the .com url for the moment but the weather changes with the postcode you enter.

It’s kind of cool, and it’s nice to see google moving forward with the personalized home page, which I think is great, mainly for my links (cross browser) and my Digg top 10.

Check it out and let me know what you think

I recently came across a post on Andy’s website suggesting I should write you a letter to ask for a copy of the book, CSS Mastery for Christmas.

Not knowing much about the book I decided to do a little research and discover if I really did want it…

The book is entitled CSS Mastery: Advanced Web Standards Solutions, from which I assume it takes developers through the best practices in order to developer websites that are valid, accessiable and up to the W3C’s standards.

I personally wrote my dissertation on the subject of developing with web standards and interviewed Andy during the process, so would be fascinated to see how he tackles the subject.

I am currently doing a lot of front end work on a very large website due to launch in the new year. I believe I have tackled it in the best way, and used many techniques I learnt through Zeldman, Cederholm, Clark and Keith books. So have another frame of reference would be fantastic.

The book starts by setting the foundations for front-end web development. This is something thats importance I can’t stress enough. Even now I am still getting to grips with how the flow works and the more I understand the less I feel the distant urge to sod it and hack away with tables and spacer gifs. So when I saw the second chapter was about the visual formatting model I was even more excited. From having previously meet Andy I’m sure the book will also cover the trinity of web standards, something I am deeply passionate about.

Latter sections of CSS Mastery cover hacks and bug fixes, which I assume will help developers support browsers that are not as CSS compliant, such as Internet Explorer. This again is something that I often see tipping developers over the edge and resorting to hacky and browser spercific methods.
I also spotted that the book also has two case studies, More Than Doodles and Tuscany Luxury Resorts. The first thing you notice is that both of these sites look fantastic, and have lots of modern web design styles and techniques that I would love to learn more about. They also look like full sites, rather than those small, rushed and often rather ugly sites you get with most other CSS books.

Andy was helped with the book by Cameron Moll and Simon Collison, both some what web development celebrities, whose names I’m sure you have heard before and can only add quality to the book. The book is also publised by Friends of ED, who have also published one of my faviourite development books by Jeremy Keith on DOM Scripting.

A great looking sample chapter of the book can be downloaded from the webiste CSS Mastery: Chapter 7 Layout. You can also get the examples used in the book and view the example sites.

So in conclusion it looks like a great book, so if your still doing your shopping santa, I hope I can give you a hint. (You can even get CSS Mastery from amazon so you dont have to leave the house ;) )

Thanks, Rob

Anyway I found that Internet Explorer can’t add style content through setAttribute and also can’t seem to set the class name and then apply the class from the CSS.

After a bit of digging on the web I found that you can use setAttribute(“className”,”clearAll”); to do the same in IE. This works fine but be sure to remember that if Opera or Camino are pretending to be IE they wont add the class name through className so it’s worth adding a class in too, just as a back up. (Why can’t browsers pretending to be IE not have another navigator element saying their true identity)

Thanks to quirksmode

for the info on this!

Being back on the front end train I have strived to gets some things perfect and armed with my new love for the DOM and Hijax I have started to seen new potential solutions to problems.

The one I had today was a design issue where by an ordered list on a website had the potential to contain an item that would wrap onto more than one line. Consequently breaking the nice look and feel of a page.

I found my self with potentially three options to solve this problem.

1. Do it back end in the CMS
2. Use CSS to limit it’s width
3. Use DOM Scripting to truncate the node content

Doing it in the back was a bad idea. Firstly its more work in the back end which is already overflowing with work and secondly we would loose content for something which is related to a front end style.

Therefore I decided to go front end on it and had to choose between CSS and JavaScript to perform the truncation of my text.

CSS has the advantage of speed over JavaScript, mainly because you need to wait for the DOM to load before you can edit it meaning that you could potentially see the content disappear before your very eyes.

With CSS we can set the list item in the ordered list to have a set width and no visible overflow. This works well but has no evidence that something has been truncated, and may lead to bad results. Also when you supply overflow: hidden; to a list item in an ordered list the item number is hidden… great! However my list items needed to be links, giving me an anchor tag to apply the overflow:hidden to.

The next problem was to add the … onto the end of the truncated item. This can be done with the CSS pseudo-element :after which can add in content. However there is no way to apply logic to say only apply the content if it has an overflow.

So the next way to do it was with JavaScript and the DOM, the advantage here was you could apply the changed with logic. You can vary the max size on elements through HTML attributes, apply truncation only when needed, move the full version into another element and if it doesn’t work you can still use the CSS to back you up.

Here I used a construct function to call my script on page load, and also used a method to get elements by class name, there are lots on the web you can use!

Let me know what you think or if you have any other options!

The problem with this is that the Definition list its self has no height, and anything after it won’t be able to see it’s floating content. The result is as follows:

This can be easily fixed by making anything directly following it a clear:left property. The problem with this is, it’s very hard to give the same margin below your element, apart from spercifically adding padding or margin to the element below.

In the past I have gotten arround this by adding in paragraph into the HTML with a clear:both property. This gives a solid element below all our floats that any following element can see, resulting in correct margins once again.

This is great but it means adding styling though HTML and meaningless content. Not great and useless if you change your design or are viewing in a browser that can’t use CSS.

The answer to this problem came to me through Position is everything’s: How To Clear Floats Without Structural Markup. By using the CSS 2 property: after: you can add content and then make that conent clear anything above it. Replacing my presentational HTML.

.dl:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

I changed the “full stop” to a space and it seems to work fine. There are also some little hacks to make it work in old IE too :)

The more I have been getting into using JavaScript the more I have seen the benefits of using Behavioural Separation. The concept is simple, separate your behaviour from your structure/content just as you do your style (spaghetti code is bad people!).

Although at first it seems much harder to use the DOM to apply listeners to buttons and links, after a bit more development you have the fantastic advantage of having all your code in one place and the ability to re-use it across your site.

This has lead me onto using Hijax, Jeremy Keith‘s buzz word for graceful degradation of Javascript and of-course AJAX. The concept is simple:

1. First, build an old-fashioned website that uses hyperlinks and forms to pass information to the server. The server returns whole new pages with each request.
2. Now, use JavaScript to intercept those links and form submissions and pass the information via XMLHttpRequest instead. You can then select which parts of the page need to be updated instead of updating the whole page.

You now have an application that can’t fail. If you have a user with a browser that can’t use JavaScript (a mobile phone for example) or a user that has turned it off (because JavaScript is often used to harass users) the site performs normally. If they have a compatible browser they get super buzz worded version of your site. You also have the added benefit that any bugs in your JavaScript won’t fail your site as if the JavaScript stops working so does the ” return: false; ” on your links meaning they are followed as normal.

The result is a super stable web app, that is extremely easy to manage and maintain.

For more information on Hijax, click here, and click here for more information on Behavioural Separation. You can also find out more about Jeremy Keith and his book, DOM Scripting here

In the most basic form you can just add this to the top of your CSS page

    * {
    padding:0;
    margin:0;
    }

But this then leaves you a bit stuck with some elements which need padding and margins (especially form elements!)

So in order to reset a few values so they all pretty normal (but importantly the same in all browsers!) add this too:

    * {
    padding:0;
    margin:0;
    }
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
    li, dd { margin-left:5%; }
    fieldset { padding: .5em; }

For more info on this check this site out (where I nicked the code from!)

http://leftjustified.net/journal/2004/10/19/global-ws-reset/