We have often thought this about many apps that litter the app store that could easily have been done in HTML 5. With a target of the iPhone there is a lot of support and it’s often hard to tell if something is a native app or a web app (pie guy is a great example). In many ways it’s a better idea to do this, as you can then use the same “app” on any device, the BBC mobile news site is a great example, and I’m unsure what valuable extras they could add by creating a native app…

The problem is, the onus is on the developers to tell the iPhone specific things, that can make such a diference. Some are quite complex and would require lots of work, but others are really simple, such as default zoom, and if the toolbar is required (The BBC mobile site always opens slightly too zoomed in!). These are done by simply adding meta tags to the head of your HTML. We then suddenly realised that you could do this using a JavaScript bookmarklet, the same way Drew did way back for changing the home screen icon.

Obviously we quickly created one and it works a treat. Basically you click the bookmarklet on a site of your choice, and when it loads it won’t open in normal Safari and won’t show you an address bar. This is great for apps like Gmail, Google Tasks, Latitude, BBC news, etc etc

Step by step

1. First drag this link to your safari bookmark bar. Convert to WebApp
2. Sync your iPhone (with bookmark sync turned on)
3. Browse to a website you want to make a web clip of through Safari on your iPhone
4. Open your bookmarks and tap the one you just added to bookmark bar (nothing will appear to happen)
5. Then tap the + at the bottom of the screen
6. Select, “Add to Home Screen” and give it a sensible name.

You can see here the diference between the BBC sport website with and without using the bookmarklet:

Default

Saved as WebApp

Enjoy!

UPDATE It seems standard links on the first page open in Safari :( Still works well for Google web apps!

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.

My first port of call was the Object tag, as IE is the only browser that uses it as opposed to the Embed used by other browsers.  We are using swfobject for doing this so I found it strange and also found it even harder to debug as in IE you are unable to view the generated source of a page (even after finding an IE developer toolbar).

I did managed to lock the problem down finally though, and it turned out that it was the id tag. Not having an id tag killed the application in some way and it loaded but nothing really worked. This lead me to notice that the id we were using for our RIA had a space in it, causing the same problem.

Replacing the id without the spaces fixed the problem and it now all works fine, so if anyone else has a problem like this check your id for spaces, or check you have an id at all!

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 :)

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

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 ;)

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!