Google Webmaster Tool is a great tool for webmasters who want to see and manage how Google crawls their site(s). If you have a Google ID you can add all the sites that you control to a dashboard. From here you can see intimate details for each site. After adding justaddwater.dk I found that Google was encountering some HTTP errors when crawling our site. This of cause is very important since other users unfortunately also encounter these errors.

When diving into the errors I can see that some links to our site point at stuff that is not there. I unfortunately cant see where these links come from. They could be external or internal I guess, but I have to manually look at my site to see. Adding a “source” for the link would be very easy for Google and be a great benefit to the webmaster.

Besides web crawling problems, the tool also gives loads of other interesting information. I suggest you take a look your self, but to just summarize I quote Google:

Statistics

Top search queries
See which search queries most often returned pages from your site, and which of them were clicked.

Crawl stats
See your distribution info for your site, including the current PageRank for pages on your site.

Subscriber stats
If your site publishes feeds of its content, this page will display the number of users who have subscribed to these feeds using Google products such as iGoogle, Google Reader, or Orkut.

What Googlebot sees
See details about how the Googlebot sees your site.

Index stats
Learn how your site is indexed by Google, including which pages are indexed, and which other sites point to your site.

Links

Pages with external links
See which pages on your site have links pointing to them from other sites.

Sitelinks
See which links on your site have been identified as candidates for appearing directly in Google search results.

Pages with internal links
See which pages on your site have links pointing to them internally from elsewhere on your site.

Sitemaps
Add and manage your sitemaps (including code sitemaps).

Tools

Analyze robots.txt
See whether your robots.txt file blocks specific URLs as is, or with modifications you make. Test against various Google user-agents, too.

Enable enhanced image search
Enable Google’s enhanced search for images on your site, including advanced labeling techniques for images hosted by Google.

Manage site verification
See all verified owners of this site, and optionally reverify them.

Set crawl rate
See statistics about how often Google crawls your site, and optionally adjust that speed if desired.

Set preferred domain
Associate a preferred domain with this site, to always or never show the leading “www.” in Google’s search results.

Remove URLs
Remove content from the Google index, including expediting that removal.

Technorati Tags: Google Webmaster Tools, Google Webmaster Central, sitemap, sitemaps, tool, review, search engines, http errors, accessibility

Saturday evening I put the power plug in the laptop to recharge. I came back to the room (our home office) 10 minutes later and saw the computer not charging. I noticed a high frequent sound and traced it to the power supply, which was incredibly hot, and smelled bad. I immediately unplugged it.

I have no exact temperature for the power supply, it felt like holding on a hot cup of coffe. Also the cord itself felt softer than usual because of the hot temperature. I have marked on the cord a mark, where the weight of the power supply pressed a mark into the cord.

I am convinced that if I had not seen what happened, the power supply would have set the entire room on fire.

For some strange reason, the power supply is working again the day after.

Technical details from the power supply and PC

• Lenovo AC Adapter 90W 20V rev H
• Serial number: 11S92P1107Z1ZD2L73W8P6
• P/N 92P1108
• PA-1900-08I
• (used for my Lenovo Thinkpad T60p widescreen type “8742-CTO”, S/N “L3-A8843 07/04″, Product id “8742Y18″)

Question for Lenovo:

How can you convince me that it’s safe to use the power supply and put it back in the wood shelf in my home office?

Is this periodical error something that could potentionally happen to the other power supply I use?

Thanks in advance for taking time to answer my questions professionally and seriously.

/Jesper Rønn-Jensen

We need to get a smoke alarm in our home office. From saturday on, all electronics is turned off at home when sleeping. This includes the wireless internet connection, printer, and also the telephone which is connected to the same power plug.

To everybody with a similar power supply: Unplug the power supply when unattended!

Related info:

• Lenovo Problem: No Wireless Reconnect After Standby (Jul 25)
• New Laptop With Better Defaults (May 17)

Technorati Tags: lenovo, laptop, burning, fire, danger, hazard

Before you start, get Firebug for Firefox (if you haven’t got it already).

1. Press F12 and the Firebug window appears below in the browser window
2. Start the HTML inspector and mouse over any element, you want to learn about.
   
3. Now, you can see the HTML, the hierachy,and the CSS rules. For me it has been very useful, that overridden CSS rules are marked with strikethrough text. That’s a very handy information when CSS specificity plays in with a trick or two.
4. Press escape to stop inspector mode, and move mouse down to CSS rules.
5. Mouse over the CSS rules reveal a small icon to toggle the line. See screenshot animation below.

This trick will probably completely replace my use of “edit CSS” in Webdeveloper toolbar, the nifty CSSViewer add-on, and the mouseover DOM inspector bookmarklet.

Related info:

• Justaddwater: Web developer’s collection of browser tool (November 2005)
• Firebug keyboard shortcuts

Technorati Tags: css, debug, debugging, style editor, css view, firefox plugin, firefox add-on, modi2, slayeroffice, firebug, productivity

Very funny that there is an error message telling me “no error message found”.

I purchased an upgrade ACDSee license almost 2 months ago, but this is what happens when I try to follow the link in the invoice.

One good thing, however. Very handy for the developers and tech support to have an error codes shown. In this way, error messages are more traceable if an error happens.

I’m considering using this on a current project I’m working on. But we will probably end up hiding the technical error codes initially (but possible to show on a click on “technical info” link).

Technorati Tags: acdsee, website, errors, error messages, usability

And I thought this would never happen!

(2 minutes later the service is up and running again)

UPDATE: Two things happened after going online again.

I found out my mail was actually sent before the server went down (so I ended up sending the mail twice)

According to the chat window in GMail, I’m now logged out. But I can still view, send mail and perform any other action in GMail. See screenshot below.

Technorati Tags: google, mail, gmail, downtime, uptime, server, failure

Recently I was called out to debug some javascript code that did not perform. There was really not a big problem in Firefox, but Internet Explorer hung using 20 seconds or more each time the script was activated by the user.

It was one of those applications where you click on a little plus to expand a list of units in a subgroup. The list that caused the trouble contained 1,416 rows.

The subgroup was invisible and already rendered. On click a display style property changed from

to

. Unfolding the list took 19 seconds in IE. WHAT?

A first look

A brief investigation hinted something was wrong:

• Content/markup ratio: 23%/77%
• Page contained 27,000 elements in the DOM
• W3C HTML Validator unable to validate
• Firefox HTML validator gave 6 HTML errors and 15,700 warnings
• No JavaScript errors, though

There were plenty of transparent spacer gifs, and the spacer gifs were used in empty table cells. A brief count in the DOM revealed that 5,400 of the 7,200 images were transparent gifs. Uh oh.

Most important pitfall: TOO many elements in DOM

JavaScript really was not the problem here, because there was nothing but an innocent

statement. The problem had to be rendering related and I got suspicious as the hidden list contained:

• One giant table element with
  display:none
• Inside that 1,416 rows
• Each of the rows had a table cell with one new table inside it.
• Each nested table had 15 cells (four of which contained only transparent spacer.gifs)
• Tables nested six levels deep on the page

All this equals bloated HTML and 27,000 total HTML elements on the page. Here’s how we got down to 11,000 elements without removing any content:

Strategy for reducing element count

These were my recommendations for reducing element count and thereby improving performance:

Avoid JavaScript. We found that in this situation, the javascript performance had big variations on different browsers (and on the same browser, with different people logged in). In this case, we were able to avoid JavaScript, which is not always the case.

Remove validation errors and warnings. Browsers are coded after the HTML specifications, HTML specifications tell browser vendors how their code should interpret valid HTML. If the code is not valid, sometimes browsers guess what they think the source code means. The only thing specified in the HTML standard is how valid code behaves. Invalid code is left for the browser to do whatever it pleases. If, for instance, a

element is nested directly in a

element, it’s not allowed. But what will the browser do about it? Render the element? Or silently ignore it? Can you submit forms at all from the page? If your form cannot submit, it can be a big risk to use HTML that does not validate.

In this particular case, there were 6 errors and 15,700 warnings (all of which could be easily fixed).

Remove elements without content. Originally each of the 1416 rows had its own table element. Additionally, a lot of transparent images were placed in empty table cells. All of this clutter was removed. We ended up using six table columns in the parent table, compared to originally 15 columns in each of the 1416 child tables. This really adds up when you consider that in our baseline example we had 1416 rows. All in all we reduced HTML footprint with 40%.

Result

Long-term findings

• Don’t use JavaScript for general page layout rendering. Think really really hard if it can be done without JavaScript. One example: Print should be done with CSS
• If there is no way around it, use standard JavaScript libraries were browser bugs, etc are hidden for the programmer
• Tables used for layout are evil. Use tables for table-based content ONLY
• HTML code is really messy and hard to maintain. Should be cleaned up to avoid similar situations in the future. Clean up nested tables, table cells with transparent gifs. Use CSS where appropriate could shave up to 50-70% of HTML footprint
• Many HTML validation errors. Code improperly nested, forgotten end-tags: Ideally, the pages should have no validation errors. It’s an achievable work worth the effort and very educational way of working with the code

Long-term benefits

In general, several benefits could be gained by raising the knowledge of HTML, CSS, Javascript, web standards, and browser issues.

• Include easier maintenance
• Lower risk of change
• Lower risk of browser incompatibilities
• Lower risk of browser crashes

Browser tools

These tools I used for quick investigation of the HTML page:

• HTML validator Firefox extension by Marc Gueury
• Firebug Firefox extension by Joe Hewitt
• Content/markup ratio with pageinfo bookmarklet by Slayeroffice (Steve Chipman) who has a cat named Javascript!
• Counting of HTML elements with JavaScript shell bookmarklet by Jesse Ruderman:
  document.getElementsByTagName(‘*’).length

  could be done dicectly from the browser address bar by typing:

  javascript:alert(document.getElementsByTagName(‘*’).length);

More info on my firefox extensions in the article: Web developer’s collection of browser tools (Nov 30th, 2005).

Technorati Tags: webstandards, w3c, browser errors, code, performance, javascript, html, dom, spacer.gif,

Today I was updating my profile photo on Technorati (the current one was of the little fellow in the top banner of this site, and the new was the same that I use on this blog).

So I went to Account -> Your Photo at Technorati, clicked the “Browse” button, located the photo on my hard drive and clicked “Upload”. But apparently something went wrong and I got the following error message:

As you can see my old photo was still there and the error message read “Photo upload failed. Please try again in a few minutes.”

I then waited and tried again, but with the same result. I finaly gave up.

But suddenly I saw the following on our blog front-page on Technorati:

Hey! This is the new picture – not the old one. But how? Didn’t the error message just tell me otherwise?

In their eager to display error messages in every problematic situation Technorati might have overdone it a bit ;)

Technorati Tags: technorati, error messages, error message, usability, profile, photo, upload