MathCurvesSurfacesWallpaper GroupsGallerySoftwarePOV-Ray
ProgramingLinuxPerl PythonHTMLCSSJavaScriptPHPJavaEmacsUnicode ♥
Web Hosting by 1&1

Xah's Web Dev Blog

Tutorial on {HTML, CSS, JavaScript, …}, plus gossip on Google, Internet, SEO, Spam, ….

Google Plus UI tiny comment box 2013-05-17
new Google Plus interface, featuring the claustrophob box. 〔☛ User Interface Design: Peepshow Windows

updated. JavaScript: Fade a Element Fixed a Google Chrome bug. See the tip at bottom to StackOverflow on a interesting JavaScript Google Chrome issue.

The Unfortunate Fate of Music MIDI File

MIDI is really a great tech, but unfortunately, it never picked up in computer.

MIDI is tiny in size, especially great for piano music. For example, a 5 minute piano piece is only 11k bytes.

10 years ago, i'd expect by now that on each computer we have high quality sampled sound library for MIDI, so that perhaps just a 100 mega bytes you'd have entire collection of piano music in history, recorded by professionals. Not so.

Today, on the web, MIDI isn't supported in html5 audio. 〔☛ HTML5 Audio Tag Example〕 〔☛ HTML5 Tags〕 And it won't play on Linux by default.

Here's entire collection of Bach's 〈Well Tempered Clavier〉, just 529k. Music: MIDI Collection of Bach 🎶

The “pre” tag idiocy. Programing Language Design: Syntax Sugar Problem: Irregularity vs Convenience

updated with HSL color values. Complete List of CSS Color Names

New JavaScript Toy: Literature Annotation Popup

new JavaScript toy. the Story of Cupid and Psyche. Hoover annotated words to see its annotation highlighted.

some selection of other stories and essays with annotation:

JavaScript: Fade a Element

JavaScript: Array vs NodeList vs HTMLCollection

CSS Trick: Display Language Name in Code Snippet

first, look at this page: Python, Ruby, Perl: Print Version String from Script

The language name at bottom right are done with CSS. Like this:

pre.python:after
{content:"Python₂";
position:relative;
bottom:0ex;
right:1ex;
float:right;
color:gray; background-color:hsl(0,0%,95%)}

more massive update. Added array methods, and lots others. JavaScript Basics by Example

JavaScript Function Constructor

JavaScript Variable Scope

updated. learn JavaScript in 3 hours

JavaScript: How to Create Tooltip/Balloon

JavaScript Prototype: Define Your Own Methods

Customize Firefox Key Shortcuts

6 hours, much improved the JavaScript app for Unicode. See for example: Unicode: Arrow Symbols ← → ↑ ↓

updated. JavaScript: Insert HTML Element Example

discovered vanilla-js.com, its use surpasses JQuery. Amazing.

via Craig Lennox

there are lots JavaScript libs and even alternative js langs. For example, CoffeeScript, Google's Dart, Microsoft's TypeScript. My recommendation is, don't use any of it. Master JavaScript+DOM fair and square.

CSS 2D Transform Examples

new. CSS Radial Gradient Examples

updated. CSS Linear Gradient Examples

this animated gif says everything about CSS. Humor: CSS Experimental Pain, Window Blind

new. CSS Transform: Rotate

updated. HTML Form Example

few new articles from my Programing Blog

Tech Humor: Apache vs Node.Js vs Nginx

facelift. Xah's JavaScript Tutorial

recently discovered the CSS display:inline-block. It's relatively new. It basically is like float:left but you don't have to worry about side-effects on the rest of the page, such as stopping float by clear:both. For a example of using display:inline-block, see Second Life Screenshot Gallery

updated. Pure CSS Table

updated. CSS: Flowing List

updated. CSS: z-index

Google Plus Favicon Change

Google Reader RIPS

CSS: Text Shadow Examples

revamped my CSS home page design. Xah's CSS Tutorial Only half done. More to come. Also updated: Complete List of CSS Color Names

CSS Triangle

JavaScript App for Unicode

wrote a JavaScript app. Goto Unicode Emoticons, Faces 😸, hover your mouse over (or click if you are on tablet). Unicode name and char number will show.

also created the following pages.

Can CSS z-index be negative?

yes.

Can JavaScript var name contain hyphen?

No.

Internet Explorer 10 is now available for Microsoft Windows 7. Download at http://windows.microsoft.com/en-us/internet-explorer/download-ie

html close all the tags cartoon
Google HTML/CSS Style Guide: Good Style or Bad Taste?

Linkedin Spam Filter Collateral Damage

Linux, KDE: wow, Konqueror Sucks Major A.

I ranted about Web Design: Say No to Grey Text on White Background. And now discovered there's a site dedicated to this.

contrast rebellion By Zoltán Gócza, Richard Gazdik. @ contrastrebellion.com…

(thx to Mikay Gao)

btw, i remember reading more than one blog, by supposedly design gurus, who tell us that we should use low-contrast, because, they say, in nature nothing is in high-contrast. LOL.

this is like, Hacker Fads & Fashions: Is XML Syntax the Stupid Brother of Lisp? Hey, Check Out Their Young Sister HTML5!

Unicode Icons for Food and Drink

Unicode Icons: Food, Drink

On my Microsoft Windows 7 machine, only Firefox display them well (missing just 2 characters).

All other browsers, Google Chrome, Safari, Opera, Internet Explorer 9, got nothing.

I do have Unicode 6 fonts installed (Symbola, Segoe UI Symbol). Somehow these browsers are not picking it up. 〔☛ Best Unicode Fonts for Programing〕 〔☛ Unicode 6 Emoticons and Supporting Fonts

On Linux, default setup of Ubuntu 12.04, none of them shows up in Firefox.

What's your experience? (tell me your OS, browser, their versions, and whether you have installed special fonts yourself.)

Needs to be said again: User Interface Design: Peepshow Windows

Needs to be said again: Web Design: Say No to Grey Text on White Background

Google AdSense Ban

Google is banning me left and right. Now, this page 〈GNAA Weev Troll Song (Kesha — TiK ToK)〉 http://xahlee.org/music/gnaa_weev_song.html , they say is violating their AdSense rules.

Here's other moral-sensitive songs. 〈Sensitive Songs Index〉 http://xahlee.org/music/music_index_sensitive.html

I started to put Google ads in 2005. Within one month, they ban'd me, probably because i say f�ck George Bush in front page. See: 〈Google AdSense Ban on XahLee.org〉 http://xahlee.org/Periodic_dosage_dir/tr/google_adsense_ban.html

So, since 2005 to 2011, i did not run any ads.

In 2012 July, i separated out my articles to different domains, so that all my none-controversial articles (which is about 95%) can benefit from ads.

Then, Google ban'd my xaharts.org for ads. See 〈Google AdSense Ban on Ancient Asian Goddess Sculpture Page〉 http://xahlee.info/w/Google_AdSense_ban_on_ancient_sculpture_2012-09-02.html and now is warning me about that troll song.

the moral here is, if you wanna make money, stay in line! Or, be one of those unscrupulous ad-ridden SEO site or a spammer!

Browser Stat 2012

for my site ergoemacs.org (on emacs):

For xahlee.info (programing and math), Internet Explorer is higher:

For non-technical sites { xahlee.orgwordyenglish.comxaharts.orgxahmusic.orgxahsl.org ◇ … }, Internet Explorer is higher still:

software jargons & tech 2012: blackbox/whitebox testing, Jenkins, Puppet, Selenium

Ruby tutorial update: Xah's Ruby Tutorial

Learned Ruby in 2 days. Here's a draft version of tutorial. Ruby Language Basics

The next few days i'll be getting onto Ruby on Rails.

Ruby experts, please hit me with comment and suggestion.

photo. Ruby Creator Cooks Python; Matz and GitCafe

Emerging Web Tech: Web Intents

JavaScript Basics Tutorial by Examples

CSS3 HSL (Hue, Saturation, Lightness) Color Samples

updated: complete list of HTML5 Tags.

Auto-Resize Image, Progressive JPEG, CSS Window Size Trick

There's this hurricane site with interesting tech: 〔Hurricane Sandy Bears Down on East Coast @ nation.time.com…

here's a few interesting things:

what JavaScript trick, lib, or CSS trick are used to achieve these? Can you create a simple HTML page example with these features?

A joke. But check out the use of CSS to render that. A Dialogue Between a Guy and a Girl: Should I Bring the Glove?. View source.

Started to use Chinese micro-blog Sina Weibo. In 2 days, i already got 2 spams. This one is funny:

chinese sina weibo selling followers
Ad of Chinese spammer selling Sina Weibo followers

There are spam selling followers on Twitter, Facebook, G+. The Chinese ain't falling behind on this.

Intro to Public-key Cryptography for Sys Admin; What's HTTPS, SSH, SSL, TLS, AES, SHA-1, MD5, …

China's Sina Weibo vs Twitter GUI Fight

China's Sina Weibo's UI is much better than twitter. You can list all replies to you, or all your replies to others, list mutual follower, and list private chat that also act as INSTANT chat, and pic upload that works, faster too despite lots ads. It's somewhat more like Facebook than Twitter.

+1 for China. Thumbs down on tweeter.

According to Wikipedia, Sina Weibo has 3M users, while Twitter has 5M. Sina Weibo has 1M posts per day, while Twitter 3.4M.

My account on weibo is http://www.weibo.com/xahlee/. 求关注! 求粉丝! 😸

updated: Google Search Problems & Alternative Search Engines

The Pain of Ampersand in HTML

Tip: whenever you want to write the ampersand symbol in HTML/XML, don't use &, use FULLWIDTH AMPERSAND instead. For example:

AT&t
vs
AT&T

Here's how your browser renders it: AT&T vs AT&T

You can set up in emacs to easily type it, or setup a key layout in any of {Windows, Mac, Linux}. See:

See also: Semantic of Symbols: HTML Entities, Ampersand, Unicode.

The Ease of Making Money by Professional Blogging

Firefox Mouse Wheel Scroll Speed, Backspace for Previous Page, Autoscroll, Configurations

IE9 bug: Browser Inline SVG Image Height Weight Scale vs Crop

Microsoft's TypeScript Will Kill CoffeeScript and Dart!

Spam Text Collection: Unicode-Obfuscated Spam

Parse JSON in PHP & Python

PHP & MySQL Documentation Redux, 2012

HTML5 Custom Data Attribute

updated:

Updated: Learn PHP in one day

JavaScript: Most Frequently Used DOM Methods

If you are using Opera browser, here's 2 special config. Type them in the URL bar.

opera:gpu

opera:config

updated: Case Sensitivity in HTML5/XML/CSS/Javascript and Allowed Characters in Attribute Names

How Much You'd Make from Google AdSense

This is my estimate of how much you get from Google AdSense, based on my experience and some web research. Note that the figure could vary a lot.

From search, 1k visits ≈ $2. If from sites like Reddit, 10k ≈ $1.

updated: HTML Basics

Python Tech 2012

revisting a old topic: Micropayment on the Web: It's Only a Matter of Time

Revival: HTML Marquee: Automatic Horizontal Scrolling

YouTube = Porn Fodder? and Larry Sanger Reported me to FBI

Google AdSense Ban on Ancient Sculpture 2012-09-02

JavaScript: Converting Unicode character to/from Codepoint, and Decimal/Hexadecimal

If you have JavaScript off, and you followed a link to Google Plus, it would show blank.

Google Plus now no longer shows blank when you have JavaScript turned off.

Unicode 6 Emoticons List

Popular Pirate Video Sites in China

Here's two most popular sites in China, of pirated movies and TV shows. You'll find latest Batman etc there.

Update: Firefox: How to Unhide/Disable the Auto-Disappearance of Forward Button

Update: grayer and grayer. Web Design: Say No to Grey Text on White Background

Google's sitemap.org Got Hacked?

I propose we rename the Internet to Misanthropolis.

, @jayewells

What Encoding Do Chinese Websites Use?

Obsolete Technologies 1990 〜 2000

Apache Rewrite Problem

a very strange apache rewrite problem.

i'm moving parts of my site at 〔xahlee.org〕 to 〔wordyenglish.com〕. I have this in 〔.htaccess〕:

…
RewriteRule ^PageTwo_dir/Vocabulary_dir/(.*)$ http://wordyenglish.com/words/$1 [R=301,L]
RewriteRule ^lit/(.*)$ http://wordyenglish.com/lit/$1 [R=301,L]
RewriteRule ^lojban/(.*)$ http://wordyenglish.com/lojban/$1 [R=301,L]
…

everything works, except the dir starting at 〔lit/〕. The error is a 404 on the original domain.

no other lines contains “lit/”. There's no “lit” dir in the original domain now.

Turning on rewrite log:

RewriteLog "logs/xx-RewriteLog.log"
RewriteLogLevel 9

doesn't seem allowed or doesn't work with my web hosting environment. When these lines are present, browser returns a server error.

the problem occurs only with that one particular dir. Seems there's some magic with “lit/”.

Solution

the problem went away with this:

Not sure exactly what's the problem. Other dirs that are removed didn't have this problem. Just this dir.

Also, Ansari gave this tip: “the rewrite log rules must go in httpd.conf or your vhost configuration, not in .htaccess”.

http://serverfault.com/questions/408326/apache-modrewrite-fail-on-one-directory/

Displaying Chinese on Ubuntu Linux Firefox Results Ugly Mixed Font

RIP RSS (1999 〜 2012)

Safari 6 is released, but no more Windows version. Also, RSS reading feature is removed.

The fact that Apple removed RSS reader feature in Safari probably means that they've done market research and not many people are using it. I myself never used any RSS reader in browsers.

Popular RSS aggregate sites all went dead a year or two ago. The only one left and won't go away is Google Reader. Technorati seems still alive, though i haven't heard about it in gossips for years.

HTML5 Group Split with W3C

LOL. The WTF group split with W3C. So now there'd be 2 HTML5.

[whatwg] Administrivia: Update on the relationship between the WHATWG HTML living standard and the W3C HTML5 specification By Ian Hickson. @ lists.w3.org…

Welcome back 1999.

If i want a living standard, i can just subscribe to Vogue. I no need Google and Apple telling me what's correct thru their front group.

CSS protocol-relative URL Format

In CSS, sometime you want to do this:

/* adding a pdf icon to pdf file links */
a[href$=".pdf"] {background:url(http://example.org/img/pdf_icon-s.png) no-repeat left center;padding-left:20px}

However, if user is accessing your site using https, then the browser will warn about mixed insecure content «This Page Contains Both Secure and Non-Secure Items».

What you want, is that if user is using https, then fetch using https. You can do that with what's called protocol-relative URL, by omitting the protocol all-together, like this:

a[href$=".pdf"] {background:url(//example.org/img/pdf_icon-s.png) no-repeat left center;padding-left:20px}

See also: Google HTML/CSS Style Guide.

Google Pushes Invalid HTML to the World

JavaScript: Exclamation Before function

I come across JavaScript code like this today:

!function(d,s,id){…}(…);

What does that !function mean?

Turns out, it is equivalent to this:

(function(d,s,id){…})(…);

The exclamation makes the function a expression. (it's the boolean “not” operator.) People do this hack to save one character worth of source code file size. Silly.

Microsoft Classified FSF Donation site as Gambling

There's this piece of news going around:

How Microsoft Threat Management Gateway Classifies donate.fsf.org (self.gnu) By Rebbsitor. @ www.reddit.com…

In summery, a Microsoft security site “Microsoft Reputation Services” classified Free Software Foundation's donation site 〔https://donate.fsf.org/〕 as in the “gambling” category. (but also {Technical Information, Shareware/Freeware})

This means, corporations using Microsoft's services will automatically block visiting such site. More about this is has been written by FSF:

I was curious about what Microsoft thought of my website.

my website xahlee.org is classified by Microsoft as {Pornography, Blogs/Wiki, Shareware/Freeware}. See: https://www.microsoft.com/security/portal/mrs/default.aspx. LOL. It appears, their service is quite off.

Here's a correction i submitted to their site:

hi, your service classified my site xahlee.org as Pornography, Blogs/Wiki, Shareware/Freeware. I think the porn and shareware/ware labels are quite inaccurate.

My site has 5 thousand pages. There are about maybe 10 pages that features explicit images of sex, and is accompanied by social commentary. There are about 20 pages featuring nudity or swimsuit, they are collections of a cultural phenomenon of wearing flags as underwear. And maybe 20 more pages about human sexuality. All in all, less that 100 page has anything to do with sex. Also, my site doesn't host any shareware/freeware. The rest 4 thousand nine hundred pages are about mathematics, computer programing, classical english literature, arts (gallery, some nudity), architecture (gallery), linguistics, as references, tutorials, or essays/blogs.

It's more correct to be: {Education/Reference, Blogs/Wiki, Nudity, Technical Information}.

Thanks for looking at this.

The complete list of their categories and definitions is: http://www.microsoft.com/security/portal/mrs/categories/MRS_Categories.en-us.htm (local mirror)

holy cow. Wikipedia's style sheet is 63 kilobytes. They also embed image files (icons, etc) as base64 strings. Like this:

a.feedlink{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA…) …}

Gmail State-Sponsored Attack Warning

Added CSS3 syntax: CSS 2.1 and CSS 3 Selector Syntax

Popular JavaScript Books 2012

i haven't read any. Have you? which's better?

chrome vs firefox
Chrome vs Firefox. Artwork mimicking a theme from H G Well's The War of the Worlds. Artwork by elfoice

perm url: Google Chrome, SPDY Protocol, Browser War II.

HTML5 Audio Tag Example

updated: CoffeeScript or Dart, JavaScript Replacement?

updated: HTML: Specify More Than One Class Attribute for HTML Element

test your browser: HTML5 Canvas Example

update HTML5 Canvas vs SVG

Google HTML/CSS Style Guide

update, new page: CSS 2.1 and CSS 3 Selector Syntax

JavaScript: Navigating DOM Tree: previousSibling nextSibling childNodes firstChild lastChild parentNode

Confusing Terminology in JavaScript/DOM: tag, element, node, object, attribute, property, method

JavaScript: Get a Element's {Type, Name, Value}

updated. Added a practical example at bottom. Functional Programing in JavaScript.

JavaScript: Set a Element's Attribute/Properties

JavaScript: Get a Element's Attribute/Properties

Update HTML CSS JavaScript DOM, References

much updated Xah's JavaScript Tutorial

Complete update: Xah's CSS Tutorial. More to come.

CSS Linear Gradient Examples

CSS: Box Shadow Examples

CSS: Round Corners: border-radius

CSS3 HSL (Hue, Saturation, Lightness) Color Samples

CSS Color Transparency/Opacity

Updated: CSS Color Basics

does anyone remember, back in 1999, it's seriously thought that Microsoft might disappear in a decade because of Java and Linux?

Google Search Now Requires JavaScript (2012-04-12)

Twitter Spam Technique: Ask Nice Questions, Get Real Interaction, Confuse Spam Detectors

Daily Mail Stealing Images

There are lots of scumbags on the web. Spammers, content farms, and Daily Mail is one of them.

If you don't have time, check out the first 2 articles:

Buy Twitter Followers!

buy twitter followers screenshot 2012-07-17
Buy twitter followers screenshot, taken on , from a website (spam, blackhat seo).

As i wrote a blog about spammer that sell twitter follower, another spammer commented right there peddling their selling of followers. See: Spamlicious: Buy Twitter, Facebook Followers, and YouTube Views.

Internet Explorer 9 UI design tiny window 2012-03-07
Internet Explorer 9 options modal box.

User Interface Design: Peepshow Windows

Internet Explorer 9 UI tabs 2012-04-04
Internet Explorer 9's colorful tabs.

User Interface Design: IE9's Dysfunctional Colorful Tabs

If You Meet a Designer, Whack His Head

if you meet a guy who's a designer and is going over the fine points of design, whack their heads immediately and walk out.

designers in general are the type of guy that's the charlatan types. Language design, website design, architecture, even movie director (⁖ Quentin Tarantino), and verging into the general wishy-washy arts department.

⁖ Larry Wall f���head about language and English. Paul Graham about language design (arc) and “hackers”, and painters! Gazillion website design “lectures” or “guides” all over the web, whose recommendations change with weather. Then UI design hubbub hubbub. Then the writing guilds on style. The entirety of typography idiots who ado about nothing (⁖ Knuth, greatest idiot of this arena among computer scientists who fell for it). Then, art of photography, haute couture, fashion design, …. Then, at the edge of the universe, there comes the real artsy folks who lectured on music composition that doesn't contain a single note, or splash of paint as finest art, in museums all over the world.

Sure, design exists, is necessary, and there's good ones and bad ones, with some science based principles. But, more often than not, designers are just a bunch of losers who have too high a opinion of themselves. The successful ones, sell snake-oil.

Google Blogger Dynamic UI Need Your Cookies!

Google Search Now (2012-04-12) Requires JavaScript

Past Articles by Date

2012-032012-012011-082011-062011-042011-012010-072010-01