Xah's Web Dev Blog Archive 2010-07

Restore Last Session in Safari, Firefox, Chrome. (tutorial)

HTML5 Canvas vs SVG (thoughts; tutorial)

Using Unicode in HTML Attributes.

Google Webfont Tutorial.

HTML link does not allow a way to embed access date, or author, etc. For detail, see: Emacs Lisp: writing a url-linkify.

Pure CSS GUI icons

Nicolas Gallagher created a interesting, extreme, CSS hack. See: Pure CSS GUI icons By Nicolas Gallagher. At nicolasgallagher.com.

nicolas gallagher CSS icons
Nicolas Gallagher's no-images CSS icons.

He created 80+ icons. No images are used whatsoever, not even in CSS file. They are done by combining layers of several border, background. Each layer is specifically positioned, z-indexed, and with width and height spec, then using CSS3 features of rotating or otherwise transform them. The final result is the icon you see. A very advanced hack.

Though, hack they are. In practice, it's much better to use Unicode characters (See: Computing Symbols in Unicode) or images. (more than half of the icons he created doesn't exist as Unicode chars.)

To help me understand how he did it, i copied and reduced and created a much simpler file with just 2 icons. See: CSS Hack to Create Icons.

To understand it, you'll at least need to understand:

Google Propaganda on HTML5

20thingsilearned.com. A fancily designed website, that is a kinda educational article for the general public that teaches them what is the web and web technologies, together with some opinions mixed in. A sorta propaganda, from Google. However, it demonstrates what HTML5 can do.

The site seems to be created sometimes this month (2010-11) (or, opened to public), and it's just about 20 pages of content, but the site's already ranked 21k in the world. 〔➤ alexa.com〕 For context, my site xahlee.org is ranked world's 68k, and has about 8k daily visitors. A quick estimate seems to indicate the site gets 286k visitors per day.

Using iframe to Embed Youtube Videos (tutorial)

HTML5 Video Tutorial (tutorial)

Functional Programing in JavaScript (tutorial)

JavaScript Execution Order; HTML5 Asynchronous JavaScript (tutorial)

Asynchronous JavaScript: Using JavaScript to Insert JavaScript (tutorial)

You can add alternate style sheets for readers to choose from. Like this:

<link rel="stylesheet" type="text/css" href="myStyle1.css">
<link rel="alternate stylesheet" type="text/css" href="myStyle2.css" title="venus">

The one with rel="alternate stylesheet" will be available under View menu for user to choose.

In Firefox, you can choose a style from the menu 〖View ▸ Page Style〗. In IE8 and Opera, it's 〖View ▸ Style〗. But Chrome and Safari does not seem to support it.

JavaScript Encode URL, Escape String (tutorial)

3 Twitter Facts You'll Never Forget

JavaScript: Get Elements by ID, Tag, Name, Class, CSS Selector (tutorial)

Updated today: JavaScript Floating Box Following Scroll

URL Shortening is BAD

Should You Declare JavaScript Variable with “var”?

Variables should be declared using “var”. When declared with var, it is a variable in the current scope (⁖ local to the function). If not declared, JavaScript will search the variable in outer scopes, until it reaches the global space.

Variables declared with “var” can be deleted using delete myvar;, but variable not declared with “var” cannot be deleted.

So, you should always declare variable with “var”, even for global variables.

See: JavaScript Basics Tutorial by Examples.

Want to Add a XahLee.org Searchbox?

Want to add a search box to xahlee.org? You can add a HTML snippet to your site or blog, so you can easily search the 4 thousand articles. Get the code at bottom of this page: Subscribe To XahLee.org Site Feed.

To view your Firefox cache location, type “about:cache” in the URL bar.

7 Things You Need to Know About SEO

How to Add a Comment System to Website

Am thinking of selling my website xahlee.org. It's ranked by alexa http://www.alexa.com/siteinfo/xahlee.org# at 74.5k in world, or 40.2k in US.

Anyone in the SEO business of buying/selling sites? Or, please tell a friend. I need advice. I need to know, how much is my domain name worth. Or, how much is the whole site worth (domain name + site content). If i sell the whole site, can i sell it while still keep copyright of the content? (i.e. simply selling domain name plus non-exclusive license for the content.)

If you are interested in buying, please let me know too.

# yearly income based on daily revenue
#    daily           year
print 10 * 365  #   3.650 * 10^3
print 20 * 365  #   7.300 * 10^3
print 40 * 365  #  14.600 * 10^3
print 50 * 365  #  18.250 * 10^3
print 100 * 365 #  36.500 * 10^3

Here's some data from Google Analytics for the past 30 days:

275,790 Visits
244,491 Absolute Unique Visitors
518,093 Pageviews
1.88 Average Pageviews
00:01:14 Time on Site
72.76% Bounce Rate
85.50% New Visits

Currently, one guy is offering me 16k. By my own estimates, the site is sellable for at least 32k.

Following are estimates from various sites. The estimate goes from 8k to 400k. Their data is not reliable.

*** http://www.websiteoutlook.com/www.xahlee.org
Daily Pageview 14764
Daily: $46.53
worth: 33.967 * 10^3
factor: 2

*** http://www.websiteaccountant.com/www.xahlee.org

Daily: $48
worth: 36.480 * 10^3
factor: 2.08219178082

*** http://www.markosweb.com/www/xahlee.org/
worth: 394.468 * 10^3

*** http://pagestat.com/www.xahlee.org
worth: 126.927 * 10^3
daily: $118
factor: 2.94699326678

*** http://www.realwebsiteworth.com/xahlee.org
Daily Ads Revenue:$19.41
Daily Visits:5,829
Daily Pageviews:8,452 (1.45 per visitor)

CSS: multi-column (newspaper) Layout

myspace.com, used to be #1 trafficked site, is now at 30. lol. http://www.alexa.com/siteinfo/myspace.com.

In early 2000s, the top 5 are amazon, ebay, and Google or yahoo or apple or msn. Amazon is now 15. Ebay is 21. Yahoo is 4. Am quite surprised how yahoo hasn't fallen. Its services, sites, are among the worst with really annoying ads. (except flickr, which yahoo bought)

Baidu.com, the search engine for Chinese, is at 6. qq.com, a chinese portal, is at 10. taobao.com, a online shopping site for chinese, is at 13. Sina.com.cn, another chinese portal, at 16. While Google china is at 18.

Now let's look at porn. I vaguely recall, the top first porn was youporn.com, at 69, about 2007 when i first learned about it (while doing this traffic check!). But now, xvideos.com, is at 54. pornhub.com at 60. Youporn is at 73.

See: http://www.alexa.com/topsites. Let the wheel of fortune spin!

Discovered a “white-space:pre-wrap” CSS. Useful when you have computer code that has long line comment. See: CSS: Line Wrap Tutorial.

Fixed-Layout vs Flowed-Layout (commentary)

More Than One Class for HTML Tag (tutorial)

Why Does Google Give SEO Advice? (commentary)

Google introduced encrypted search: https://www.google.com/.

It keeps hackers from knowing what you are searching and results. For detail, see: Source support.google.com.

If you don't know already, when you use the browser, anything sent and received by your browser is sent in the open. That means, any hacker can trivially listen in. Unless the URL is “https”, which means its encrypted (typically the login/password page is https, or banking sites).

This means your Facebook, blog, are all sent in the open. Some IM chat such as AOL, MSN, Yahoo offer encryption, but you have to turn it on. Skype skype.com chat is ALWAYS encrypted. 〔➤ Skype Chat Encryption and Screen Sharing

Also, if you are worried about privacy, you can turn off cookies in your browser. Or, in your browser start Privacy mode. Though, note that all it does is things like turning off cookies and stop saving browsing history. These are useful if you are in a public computer such as library. But at your own computer at home, it is basically not relevant.

Note that if you use Flash (⁖ youtube, video sites, game sites), the Flash will store cookies separate from your browser's cookies. Sites with Flash can track you. You can turn it off here: macromedia.com, but it is a pain to do. I really hate Flash. Don't use it if you can.

Also, today there are so many technologies that even if your are a pro web programer, nobody actually knows well all these techs. For example, HTML5 and tech on mobile devices, see: http://arstechnica.com/apple/news/2010/09/rldguid-tracking-cookies-in-safari-database-form.ars.

If you are really paranoid, one thing you can do is to turn off JavaScript (besides cookies). Turning off JavaScript will prevent vast majority of privacy problems, but it also means that many interactive sites will not work.

Google Ice Cream; Can Google Be Trusted?.

What's the Difference Between Google's “following” a Blog vs Subscribe?

HTML6: Your JSON & SXML Simplified

Google Earth KML Validation F�ckup (essay)

Opera Pain; Opera Browser Problems.

Google Search Problems & Alternative Search Engines.

Google's nofollow Rule (commentary)

Have problems with your dns server? use google's! Google has a public dns for this purpose. “” and “”. See: http://code.google.com/speed/public-dns/.

Discovered a Firefox extension that lets you spell check the window (whole window, not just inside input text boxes). This is useful when you are developing a website. https://addons.mozilla.org/en-US/firefox/addon/11259/.

Complete rewrite: CSS1 and CSS2 Differences.

what's the use of “kbd” tag?

Discovered the <kbd> tag. It's similar to the “i”, “b”, “strong”, tags, but for keyboard input. It is also supported in HTML5. I now used it to markup keyboard keys, ⁖ 【Ctrl+x】.

I used to use:

<span class="key">Ctrl</span>

But that's more verbose. Now i use emacs to make the change on about 100 files on my site. (See: Emacs Interactively Find and Replace String Patterns on Multiple Files)

The CSS i use is this:

kbd {border:solid 1px #c2c2c2;background-color:#f0f0f0;

CSS “first-letter” and “first-line” Example (tutorial)

CSS Example: How to use “:before” and “:after” pseudo-elements.

How to Create and Update a Sitewide Logo (Favicon).

CSS Margin vs Padding.

How to Enable HTTP Server gzip Compression.

Added another example to: How to Embed Video with Valid HTML.

Intro to Video Streaming & Codecs (exposition)

Google Analytics Asynchronous Tracking Code (advice)

blog comments powered by Disqus