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.

Yesterday I had a problem with Gmail where I couldn’t get to my in box. I though this would pass but it didn’t and other people in the office were getting on fine.

I started by clearing my cache and flushing my DNS but it still didn’t work on Safari, Firefox, Flock or Omniweb, even adium and Google notifier didn’t work…

When I got home I still had the same problem, even after re booting and clearing stuff out again.

This morning I tried google’s help page and it told me I should log out, then clear my cache and then try again. Which I am happy to say worked!

The question is, what caused this??? and why would it effect all my applications?

I see others are having the same gmail problems

So this gave me opportunity to play around with the API and add some fun logic on top of that, with BigKid being a creative agency this seemed to fit really well, and added one of those little easter eggs you see and think wow that’s really cool and they don’t even promote it. Hopefully we can add more when the opportunity is there :)

Just recently I came up with a problem where by I needed to only perform an update if values have changed, as the action taken was quite complex and took a bit of time. Firstly I updated my PHP page to only perform the action if the class’s values had changed. This was great but my front end had no idea of the PHP script’s findings and consiquently didn’t know how to react. Should it start looking as though it was doing to time comsuming update, or should it just do nothing?

With no way of knowing, my front end would start an animation as though it was waiting for the timely update but as it wasn’t taking any time at all it would try and perform the finished animation too soon, resulting it a horrid looking car crash of an animation. I solved this by moving all new animations to the back of a queue () but it still didn’t actually need any animations at all.

I then decided that in order to get my JavaScript in line with my PHP, I would need to do a client side check to detect changes to my form. In steps… Form.serialize(), using this function to quickly get the values of a form I could detect change just like with my PHP classes by performing a classic before and after comparison.

So when I first get my form using AJAX I quickly update a global variable with the results from Form.serialize($(‘the_id_of_your_form’). Then later when I am about to use AJAX to send my PHP script the new form values I perform the same function again into a new variable.

Now I have two variables with the contents of the form, both before and after allowing me to compare them and perform the AJAX call only if needed (as well as the subsquent animation effects).

// In the AJAX get form, on complete function do this: global_form_data = Form.serialize($('options_form')); (don't forget to set up the global variable outside your function first)

	function save_form_values() {
			var pars = Form.serialize($('form'));
			if ( global_form_data != pars ){
			    // Enter AJAX call here with new values in the pars variable
			}
	}

Hope that helps someone out there!
Find out more about Form.serialize() on the script.aculo.us Wiki

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!