Xah Web Dev Tutorial

Xah's Web Dev Blog

Tutorials, expositions, commentary, on diverse topics related to web development. Tech on language, tools, standards. Commentaries on W3C, SEO, blogging, web hosting, monetizing, ecommerce, internet policies, etc.

Web Browser Rendering Behavior: Image Border Inside Link

MegaUpload Crime Boss

update: Google and Wikipedia SOPA Blackout = Lame!

Think Twice Before You Donate to Wikipedia

A Introduction to the #SEO Sphere

“Hitler Hears About Google Search Plus Your World”

Now, if you are not in the SEO community, you won't understand how funny this is. Every name mentioned in this video is a SEO bigwig. For those of you outsiders, at least you get a glimpse of how contentious the SEO sphere is... every movements, every droppings from web dignitaries... but the issue isn't that complex really. It all came back down to something we all understand: $$$.

via +Robert Scoble

Machine Generated Spam

To SOPA or Not to SOPA? Stop Online Piracy Act

Where Do Spammers Came From?

New index page of articles: Web Tech Gossip Articles.

Why I'm Removing Tech Blogger Celebrities and Googler on G+

2 minor updates:

Xah's Blogs Reminder

✍

CoffeeScript or Dart, Javascript Replacement?

CSS tutorial, now on its own page: Xah's CSS Tutorial.

It's a pity. With HTML5 and all advances, it seems midi file is still not supported. Test here: HTML5 Audio Tag Midi File Test.

Steve Yegge's Google Platforms Rant

A Story of Web Tech Politics: The Evolution of Javascript's Script Tag

Yesterday, i removed all type="text/javascript" on my site. That is:

<script type="text/javascript">

becomes

<script>

This is a story of political chaos of the web.

In the beginning of time, a time of Netscape kingdom, ~1996, it was just <SCRIPT>. Then, with Microsoft's meddling, with JScript and VBScript, it became language="JavaScript" or language="JScript". By ~1999, a entity called W3C emerged, over-peering correctness on earth, it declared that the attribute should be type="text/javascript", and is required. However, in practice, both the “language” and “type” are always optional, and no browser's parser actually give a flying fuck about it. Then, around ~2007, the standard body changed its mind and thought that the type really should be type="application/javascript" or type="application/ecmascript". (See: Internet media type) Nobody in their right mind ever used that. Then, in our glorious HTML5 era, ~2009, ruled by Google and Apple, in their HTML5 spec, it's back to <script>.

✍

Semantic Web: Emerging Practice of Including Language Name in Embedding Computer Language Source Code on Web Pages

There's a new practice since HTML5 about embedding computer language source code on web pages.

Normally, you just use “pre”, like this:

<pre>
x = 5
print x
</pre>

However, there's no indication of what language it is. Indicating a language is desired because search engines and other tools can get that info and process it accordingly (such as syntax coloring tool). (this is the idea of semantic web.)

So, it appears, there's this practice of introducing the language info, by embedding a “code” tag with “class” set to “language-‹name›”. Like this:

<pre>
<code class="language-python">
x = 5
print x
</code>
</pre>

However, there's no standardized string for the language string.

Overall, this practice seems ad-hoc and questionable, but a mob-standard might be better than none.

What's the problem? For example, the semantic of “class” tag isn't designed to be used to encode language names. Also, having “code” nested inside “pre” is a redundant hack. A improvement might be:

<code class="language-python" style="white-space:pre;display:block">
x = 5
print x
</code>

But this throws-off intuition, because most people are much more familiar with “pre” tag. So, perhaps we can do:

<pre class="language-python">
x = 5
print x
</pre>

All of the above are hacks in using HTML Microformat as a way to embed info for semantic web. A proper solution is a dedicated tag in XML, but XML is going the ways of dinosaur. Among the HTML microformat hacks above, i can't say which one is superior.

For the politics of HTML5 and XHTML, see: Are You Intelligent Enough to Understand HTML5? ◇ HTML6: Your JSON and SXML Simplified ◇ HTML5 Doctype, Validation, X-UA-Compatible, and Why Do I Hate Hackers.

For pratical tips on syntax coloring source code on the web, see: Emacs: Syntax Color Source Code in HTML ◇ Syntax Coloring with Google-Code-Prettify.

✍

Updated: Xah's Javascript Tutorial.

some font related articles. The Chinese Fonts Comparison one is new.

Non-Javascript Web Sites Are Now History

It used to be, that when a website requires javascript, and if your browser had it turned off, the site would warn you, and optionally giving you directions about how to turn it on. (similar with cookies)

I noticed, in recent months, that many Google sites don't do this anymore. The site simply fail without giving any reason.

Worse, even for some Google sites that never required js, but now ceased working. Google translate, Google image search, are 2 examples i recently experienced. (but i haven't done detailed investigation)

So what does this mean? some quick thoughts:

① Web has come to the point that javascript is accepted as integral part, cannot be done without. Those academic, static, sites, are now considered history.

② Google of course relies on dynamic web to survive, thus js. They, for political reasons, must push js, and HTML5. Vast majority of their product, their bread n butter, depends on js. So, the gesture of simply dropping error messages for non-js browser is a reflection of this.

While we can think about political motives, but i think it's actually a reasonable move. For those who know what javascript is and would take the trouble to turn it off, are like those who choose to lead a unusual life style. It is not necessary to tell these people that their javascript is off; they KNOW! Separately but more importantly, coding dynamic websites to take care of both javascript version and none-javascript version (e.g. using basic HTML forms or other server based tech) is a pain and tremendous time drain. It's much more efficient for dynamic websites to assume that javascript is part of the platform. Also note perhaps 99.9 sites are dynamic websites today. One can still write static HTML if one wants, and it has nothing to do with this issue.

✍

Project Gutenberg Founder Died (Michael S Hart, 1947‒2011)

Michael S Hart (1947‒2011) died on Sept 6th. Cause of death is not mentioned.

Here's the news sources:

I benefited from Project Gutenberg. Specifically, i used it to get the original text for the following 3 annotated work:

✍

Are Googlers the Minions of Google Marketing?

Women in Tech: Today's G+ Recommendation? You Decide.

Website Ads in 2011: javascript popups

Steve Jobs Presenting the Apple Circle Building

Google: “Don't Be Evil” vs “Don't Do Evil”

✍

The Google+ Rap

“The Google+ Rap”

Added to What is Google Plus and Google+ Songs (humor).

Google Chrome Reports a Malware Infested Site

Here's a Google Chrome screenshot, reporting that a site has been hacked.

Google Chrome stuckincustoms malware warning 2011-08-18
Google Chrome warning on the site 〔stuckincustoms.com〕, captured on 〔2011-08-18T15:07:21-07:00〕.

The site belongs to a popular photographer Trey Ratcliff Trey Ratcliff on g+.

If you need a invite to g+, click on this plus.google.com

If you don't know what is g+, see: What is Google Plus? (humor).

✍

TV Has Arrived on The Web

SEO: Underscore vs Hyphen: How Google Webmaster Advices Hurt Quality Writers

What is Google Plus? (humor)

Grayhat SEO Use Translation as a Method to Generate Inbound Links

Facebook Disclosing Phone Numbers

it looks like you can now see all the phone numbers of your Facebook friends in one page. Go to 〖Accounts〗 on the upper right corner. Then 〖Edit Friends〗. Then, 〖Contacts〗 on the left. I'm seeing about 40 mobile phones of my friends.

✍

Google Shutdown its Dictionary Service

Insider Look of Google Search with 3 Top Google Engineers

A very enjoyable video that gives a insider look at Google's search engine and how the team works.

It is in a format of a interview, featuring the well-known Google search quality engineer Matt Cutts, and engineer Ben Gomes (the man behind Google Instant and UI) and Amit Singhal (the “brain” of Google search engine). Danny Sullivan, of the searchEngineLand.com fame, is the moderator, and he asked great questions.

“2011-08-03 Inside Google's Search Office: Matt Cutts, Ben Gomes, and Amit Singhal”

The video is ~90 minutes long, but very enjoyable and informative, easygoing.

✍

What Your Google Plus Strategy Should Be?

Adjust your Google Ad preferences, or Opt Out

Researchers Expose Cunning Online Tracking Service That can't Be Dodged By Ryan Singel. @ Source www.wired.com

Added to: Cookies, Super Cookies, Your Privacy.

Why Does HTML5 Kill the ‹big› Tag?

Google+ Which Circle to Put Your Friends In; Google+ Real Name Account Debate

HTML5 {meter, progress} Tags

HTML Table Examples with colgroup and col

HTML Table Examples with thead, tbody, tfoot

HTML5 “ruby” Tag (tutorial)

HTML5 “time” Tag (tutorial)

HTML5 Page Article Tag and Page Structure Tags (tutorial)

HTML5 Tags.

Browser Support of HTML “q” Tag for Quotation.

Amazon Closes CA Affiliate Program. (online marketing news)

Google has finally killed their old search API

I had a old Google search code, like this, from i think ~2001 or so:

<div class="xahlee-search">
<form method="get" action="http://www.google.com/custom">
<div>
<a href="http://www.google.com/">
<img style="border:none" src="http://www.google.com/uds/css/small-logo.png" alt="Google">
</a>
<input type="hidden" name="domains" value="xahlee.org">
<input type="text" name="q" size="31" maxlength="255" value="Search XahLee.org here" onclick="javascript:select();">
<input type="submit" name="sa" value="Search">
<input type="hidden" name="sitesearch" value="xahlee.org">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;">
<input type="hidden" name="hl" value="en">
</div>
</form>
</div>

About 2 weeks ago, Google killed it. When you use that to search, it returns:

We're sorry...

... but your computer or network may be sending automated queries. To protect our users, we can't process your request right now.

See Google Help for more information.

The proper way to add a Google search box is to use their new API. I've written how and updated it here: Adding Google Search to Your Website.

Adding a XahLee.org Search Box to Your Site

You can also add a XahLee.org Search Box to your site. For the code, see bottom of: Subscribe To XahLee.org Site Feed.

✍

Citation Problems on the Web

Discovered a website webcitation.org.

This is nice if you often needs to cite links. Citing links, especially in academic contexts, is problematic due to link rot. The destination link become a dead link, or it may change content to something you didn't expect, or the domain owner can change hands and all things fly (e.g. sold to porn sites).

So, it comes Webcitation.org. Apparently, Wikipedia is starting to use it. I might too.

✍

A Egregious Case of Twitter Spam.

Using Google Chrome Sync Feature and What Google Knows About You.

HTML5 Doctype, Validation, X-UA-Compatible, and Why Do I Hate Hackers.

Update: Adding Google Custom Search Widget.

HTML strike-thru tag: “s” vs “strike” vs “del” and HTML5.

Firefox 4 for PowerPC Mac

Firefox 4 does not support PowerPC Macs. You can download TenFourFox, which is Firefox compiled for PowerPC. Download at: http://www.floodgap.com/software/tenfourfox/. Alternative choice is Camino.

Apple no longer supports PowerPC Macs. So, its Safari is stuck at version 4, while current version is 5. Similarly, the last version of Opera that support PowerPC Mac is 10.6x. Current version is 11. (See: History of the Opera web browser.) Google Chrome doesn't support PowerPC.

With your PowerPC being obsolete, can't you install Linux? Well, Ubuntu no longer officially support PowerPC neither. Unless you are prepared to spend days, and days afterwards to maitain it, the best choice is probably stay-put with your Mac OS X 10.4.x or 10.5.x, and hope to buy a new machine soon.

✍

Twitter's URL shortner t.co

Old news. Twitter is now using “t.co” to shorten URL posted thru twitter.com. However, URL will be displayed as the original following ellipsis.

For example, go to this page: http://xahlee.org/sl/lsl-script_count.html, click on the tweet button. Then, twitter generates a link like this 〔http://t.co/BAPV0SJ9〕, but when viewed in twitter.com, it is displayed as 〔xahlee.org/sl/lsl-script_…〕. And when you copy the text, the shortened URL is copied.

According to twitter, quote:

Twitter's link service (http://t.co) is used on all links included in Direct Message notification emails …

If you just use twitter.com to post a normal tweet, it's not shorterned. For example, if you post 〔http://google.com/〕 or〔http://xahlee.org/Periodic_dosage_dir/skami_prosa.html〕 it'll come out as is.

See:

✍

Modern Browsers Will Display Gziped File Directly

Discovered that in latest version of all major browsers, they will display a gzip compressed page directly (instead of asking you to download). For example, check: perl_Ilya_Regularly_Expresses_2000.html.gz.

The browsers with this feature includes: IE9, Firefox 4, Google Chrome 11, Opera 11.1. The only browser that doesn't is Safari (v5.0.5 on Windows.)

Btw, that gziped article is mentioned in these articles: Text Processing: Emacs Lisp vs Perl ◇ Perl Books Survey 2002.

✍

Unicode Font Comparison: Arial Unicode MS vs DejaVu Sans.

HTML, CSS, javascript, Web Tech and Browser Timeline. (web history)

A/B Testing, Google, Visual Design

Learned the term A/B Testing. It can be applied to lots of areas. For example, web page design. Suppose you are not sure larger font or smaller font is best in attracting readers. You alternate the 2 designs on different days, and check your readership. (something like that) This can be applied to lots of other things. Basically, you have 2 choices, you test them both out, and check the data to see which performed better. Here's a Wikipedia quote:

A/B testing, split testing or bucket testing is a method of marketing testing by which a baseline control sample is compared to a variety of single-variable test samples in order to improve response rates. A classic direct mail tactic, this method has been recently adopted within the interactive space to test tactics such as banner ads, emails and landing pages.

Significant improvements can be seen through testing elements like copy text, layouts, images and colors. However, not all elements produce the same improvements, and by looking at the results from different tests, it is possible to identify those elements that consistently tend to produce the greatest improvements.

But here's the interesting part:

Companies well-known for using A/B testing

Many companies use the designed experiment approach to making marketing decisions. It is an increasingly common practice as the tools and expertise grows in this area. There are many A/B testing case studies which show that the practice of testing is increasingly becoming popular with small and medium businesses as well. [1]

While it is widely used behind the scenes to maximize profits, the practice occasionally makes it into the spotlight.

And the most juicy part is the mention of Google, which traced to this very interesting article:

Goodbye, Google By Douglas Bowman @ Source stopdesign.com

In general, i'm spiteful of so-called “designers” in the arts area. They are like semi-beings between craftmen and technician. If soft-porn is crippled sister of porn, then visual designers are soft-artists.

✍

Google's Blogger went down in the past couple of days, alone with it some comments. e.g. i have some user comments at http://xahlee.blogspot.com/2011/05/portishead-glory-box.html but now it's gone.

Disqus javascript Code. (online comment module; tech tips)

Customize Internet Explorer 9 (IE9): Turn on Menu; Put Tabs in Separate Row.

CSS's “float” is really hard to understand. How many people in the world really understand it? I'm guessing it's less than 2 thousand.

Here's a test page. html css float left right test page.

http://stackoverflow.com/questions/5615567/css-float-left-right-clear-problem-large-gap

✍

Looking For a Tool for HTML/XML Validation

In Firefox, there's a Extension called “Html Validator”. It adds a little indicator icon at the bottom right corner of your window. When a page you visit isn't valid, it lights up. You can click on it to see the errors. The really important feature of this extension is that it does not make a connection to W3C's validator. The same validating SGML parser used by W3C is bundled. This means, it validate any local HTML files. (this is most important use for me, as i do web dev with manually coded HTML files. Each time i preview my HTML in browser, i will know whether it has HTML errors.)

Is there anything similar in Google Chrome, Opera, Safari, or even IE9? As far as i checked in the past years, all other validator i've seen simply send the current URL to W3C's validator site.

I'm looking for a *local* tool to validate html. Command line program that can do batch checking will be best. In the past years i've spent a few hours with “html tidy”, and i don't think it's a solution for me, because i have problems using it to check missing tags. I don't need any cleaning up of my source file. All i want is it to tell me if i have missing tags or mis-matched tags, and tell me the line number. (if you really think Tidy does the job, please let me know the exact options. Again, all i need is for it to tell me any missing tags or mis-matched tags.)

http://stackoverflow.com/questions/5615088/is-there-a-built-in-html-validator-in-chrome-opera-safari

✍

Web Browsers Unicode Support; Firefox 4 Sucks?.

HTML Title Tag

Learned a great tip. The “title” tag is supposed to be meaningful even without context. Here's a quote from Source dev.w3.org:

The title element represents the document’s title or name, and should be meaningful even when read out of context.

So, for example, my article on functional programing: What's List Comprehension and Why is it Harmful?, the title element would better be: “Computer Programing: What's List Comprehension and Why is it Harmful?”. Note that you should keep it under 200 chars.

See also: Google Search Ranking Ingredients (SEO secrets).

Past Articles by Date