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

I wanted to be able to output errors from PHP in the HTML that could then be displayed in an eye catching way, but also use the same method to display errors from JavaScript. This way you have one method for displaying errors to your users, rather than a mix of inline, alerts and error pages.

The solution will run once the DOM is ready and search for elements with the class, “ssError” (server side error). If it finds them it will remove them from where they are and add them to a generic error div at the top of the page, which will then be animated so the user notices it.

This code requires various parts of the YUI library, which must be included before the error.js file. To display server side errors, just add the class ssError to them, and to output client side error just call the function PBdisplayErrors(‘Your Error here!’) with you error as a string.

Click here to simulate an error!

There is an example of the error message and a link to the js file here.

This is the first time I have used the YUI libraries, they are a little confusing at first, but show great examples of best practice. Previously I used prototype, which gives you more finished animations, whilst the YUI is a little more raw. I do really like the event model though, which is really useful for hijax and dealing with XML header requests.

Last night I spent about half an hour I should have spend a long time ago, installing a plug in to display my recent links from del.icio.us (social bookmarking).

It was fairly easy, I downloaded a script for displaying RSS feeds, changed the link and called if from inside an un-ordered list on my side bar. Job done.

However I have to say I am slightly un-impressed with it. Currently it seems to only update every now and again, obviously you wouldn’t want to delay my site loading whilst it fetched an RSS feed from another server. Especially not every time you refresh the page.

It seems that instead it downloads the XML to a temp folder and uses that. However its really annoying when I want to see up to the minute info on my links.

So I gathered that the solution to this problem is to overlay what I currently have with a client side script which gets the feed from the site directly after the initial page has loaded.

In effect this allows up to date information, and also has the cashed information to fall back on (Hijax-styli)… however I am yet to implement it ;)

Personally I come from an SSADM background at university and XP is more or less the complete other end of the spectrum.

I feel SSADM is a fantastic basis for a developer and many products such as Logical Data Modelling and its conversion to ERDs have provided invaluable in almost any project I have been involved in. However a lot of the time SSADM is an over kill, and smaller projects or updates of new functionality just don’t fit in. (for example I researched XP for my solo final year project where I was working closely with my client)

With XP you have a method that is more or less exactly how I have found myself developing in recent times. Our environment at work is, I’m sure, nothing like the UK government office that conceived SSADM and therefore not best suited. However I also feel that some aspects of the complexity of our projects also fall outside the scope of XP, for example, where the sentence, “Design and code for today and not for tomorrow.”, would send shivers down my spine.

I think that starting off development with a good analysis and understanding is vital but I also feel user feedback and prototyping is very important in delivering exactly what the client wants.

Unfortunately this isn’t always the goal of a development team as some products are sold upfront, where changes throughout the development will undoubtedly increase the time and cost. Instead some developers find themselves grinding out the minimum requirements of a spec to increase revenue forcing the client to pay extra for features they believed to be standard.

I would love to work in an environment where projects were developed in simple increments. So rather than developing a full blown dynamically driven web-site with hundreds of bells and whistles, from scratch for a pre arranged fee, we could instead develop a web site, then a CMS to sit under it, then a bell here, a whistle there (perfect for Hijax). However this isn’t always possible, and sometimes you find yourself learning the hard way. Which is why I think having experience in different methodologies, and knowing when to use them, or even aspects of them is vital when working in our industry.

Well that or its midnight and I’m babbling crap again… ;)

I recently wrote some JavaScript to look at a links href attribute to detect if the link was external or not (the existence of HTTP:// would show it was external). The problem was that Internet Explorer showed the absolute href rather than the text content of the attribute in the DOM. Therefore it meant that every link had HTTP:// in it’s href attribute.

I discovered that you could pass a section option in the JavaScript for .getAttribute that would force IE to return the value of the href in the DOM rather than how it saw it. This was found via Glenn Jone’s post on Internet Explorers getAttribute href bug.

Another day another IE work around… sigh

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!

After looking on the wiki it appeared that there was no way to turn the thing off once you had started it other than reloading the page. You could for example want to turn it off after an hour or when a user clicks a button.

So I came up with this code which uses a normal updater which on complete waits for a set amount of time before calling another function. This function checks a global variable to see if the updater is on or off and depending on the outcome either updates again or does nothing (stops it).

The code is below and also includes some Hijax to convert a normal link into our toggle button.

var global_updater_status = 'on';

function apply_toggle_updater() {
	// In your HTML you need a button or anchor like; Toggle Updater with the id relating to below
	// You also need to run this function onload
	if( document.getElementById('toggle_updater') ){
		var theButton = document.getElementById('toggle_updater');
		theButton.onclick = 	function(){
										toggle_updater(); return false;
									};
	}
}

function toggle_updater(){
	if(global_updater_status == 'on'){
		global_updater_status = 'off';
	}else{
		global_updater_status = 'on';
		Updater();
	}
}

function Updater() {
	var url = 'ajaxGetStatus.php';
	var pars = "id=8";
	var target = "status";
	var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars, asynchronous:true, evalScripts:true, onComplete:function() { setTimeout('Periodical()',2000); } });
	// This one updates every 2 seconds as long as the global variable is set to on
}

function Periodical(){
	if(global_updater_status == 'on'){
		Updater();
	}
}

Hope this helps!