updated. JavaScript: Fade a Element Fixed a Google Chrome bug. See the tip at bottom to StackOverflow on a interesting JavaScript Google Chrome issue.
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. the Story of Cupid and Psyche. Hoover annotated words to see its annotation highlighted.
some selection of other stories and essays with annotation:
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
You can download this extention http://forums.mozillazine.org/viewtopic.php?t=72994
note: the page looks lousy and dated, but the tool works.
once installed, go to menu 〖Tools ▸ Keyconfig〗.
by default, there's no key setup for prev/next tab. You can add it, by clicking on the “Add a New Key” button. Here's the code:
gBrowser.mTabContainer.advanceSelectedTab(1,true);gBrowser.mTabContainer.advanceSelectedTab(-1,true);Once you added, click on the key box and press the key you want.
Also, be sure to click Apply.
Then, it'll work. No need to restart after changing keys.
reference. http://superuser.com/questions/145280/firefox-can-i-change-the-keyboard-shortcuts-for-tab-switching
6 hours, much improved the JavaScript app for Unicode. See for example: Unicode: Arrow Symbols ← → ↑ ↓
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 fair and square.
updated. CSS Linear Gradient Examples
this animated gif says everything about CSS. Humor: CSS Experimental Pain, Window Blind
updated. HTML Form Example
few new articles from my Programing Blog
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
wow, Google Reader is going away. Seems the writing's been on the wall since past couple years when blog sites are going down left and right. http://googleblog.blogspot.com/2013/03/a-second-spring-of-cleaning.html
Note: Safari also removed RSS feature from their browser a year or 2 ago.
end of a era.
with Google Reader going away, i think it'll have a major impact on blog reading. Many users of Reader, will probably not bother and more or less stop reading many blogs.
… now now… it comes to me, that this decision by Google must be strongly influenced by g+ too. With Reader gone, blogs reading will be significantly reduced, and g+ would benefit.
… am trying to think of some consequences… impact of this. I suppose Google FeedBurner (a RSS tool for publishers) will be shutting soon too. Then, i am thinking Google Blogger's fate is also uncertain, within a year or 2. (maybe not, because Blogger run Google ads)
by the way, if you don't already know, many other major RSS aggregator or site services shut down few years ago, citing reduced users.
also, Google shut down Google ads in RSS Feeds few months ago. (or announced it)
which browser still has RSS service? I know Firefox still does. IE too i think. And Opera, but nobody's using Opera. Does Thunderbird support RSS?
but in a sense am glad it's gone. Because it was a blood sucking thing, like Google image search and others, taking other's people's work into Google. Without, the control returns to people, to the spirit of internet, where people take a more active role in choosing and visiting sites, with bookmark or browser based RSS Reader, not centrally controlled.
revamped my CSS home page design. Xah's CSS Tutorial Only half done. More to come. Also updated: Complete List of CSS Color Names
wrote a JavaScript app. Goto Unicode Emoticons, Faces 😸, hover your mouse over (or click if you are on tablet). Unicode name and codepoint 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
linkedin bug or feature. If you try to post the following, when you click the Share button. Nothing happens.
𝔉𝔬𝔯 𝔞 𝔩𝔦𝔱𝔱𝔩𝔢 𝔣𝔲𝔫 𝔱𝔬𝔡𝔞𝔶, 𝔦 𝔴𝔯𝔬𝔱𝔢 “𝔯𝔢𝔭𝔩𝔞𝔠𝔢-𝔩𝔞𝔱𝔦𝔫-𝔞𝔩𝔭𝔥𝔞𝔟𝔢𝔱-𝔱𝔬-𝔤𝔬𝔱𝔥𝔦𝔠”. 𝔗𝔥𝔦𝔰 𝔴𝔦𝔩𝔩 𝔯𝔢𝔭𝔩𝔞𝔠𝔢 𝔞𝔩𝔩 𝔈𝔫𝔤𝔩𝔦𝔰𝔥 𝔞𝔩𝔭𝔥𝔞𝔟𝔢𝔱 𝔟𝔶 𝔊𝔬𝔱𝔥𝔦𝔠 𝔳𝔢𝔯𝔰𝔦𝔬𝔫 (𝔞𝔨𝔞 𝔅𝔩𝔞𝔠𝔨𝔩𝔢𝔱𝔱𝔢𝔯, 𝔉𝔯𝔞𝔨𝔱𝔲𝔯) 𝔱𝔥𝔞𝔱'𝔰 𝔞𝔳𝔞𝔦𝔩𝔞𝔟𝔩𝔢 𝔦𝔫 𝔘𝔫𝔦𝔠𝔬𝔡𝔢 𝔞𝔰 𝔠𝔥𝔞𝔯𝔞𝔠𝔱𝔢𝔯𝔰. ℌ𝔢𝔯𝔢'𝔰 𝔱𝔥𝔢 𝔠𝔬𝔡𝔢. 〈𝔗𝔥𝔬𝔲 𝔖𝔥𝔞𝔩𝔱 𝔘𝔰𝔢 𝔈𝔪𝔞𝔠𝔰 𝔏𝔦𝔰𝔭〉 http://ergoemacs.org/misc/thou_shalt_use_emacs_lisp.html
it seems, they tried to filter spammers who use Unicode to bypass spam filter. (☛ Spam Text Collection: Unicode-Obfuscated Spam, 2012)
wow, Konqueror sucks major A.
corner bracket added using CSS “:before” pseudo-elements.protocol://user:password@www.example.org:port/folder/filename.extension?…. OK, fine, i'll type in the search box then, but there's no search box in sight.I'm running Konqueror 4.8.5 on xfce. Am seeing these illusions because i'm not in proper KDE desktop, or is this the norm?
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. https://twitter.com/imikay)
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!
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 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!
for my site ergoemacs.org (on emacs):
For xahlee.info (programing and math), Internet Explorer is higher:
For non-technical sites { xahlee.org ◇ wordyenglish.com ◇ xaharts.org ◇ xahmusic.org ◇ xahsl.org ◇ … }, Internet Explorer is higher still:
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.
Auto-Resize Image, Progressive JPEG, CSS Window Size Trick
There's this hurricane site with interesting tech: 〔Hurricane Sandy Bears Down on East Coast @ Source 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:
There are spam selling followers on Twitter, Facebook, G+. The Chinese ain't falling behind on this.
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/. 求关注! 求粉丝! 😸
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.
Parse JSON in PHP and Python
quick way to pretty-print json string using PHP and Python
<?php // can be some complex, page-long JSON data $jsonString = <<<'HHHHH' {"some":"thing"} HHHHH; var_dump(json_decode( $jsonString )); ?>
#python 2 import json # can be complex page-long JSON data jsonString = '''{"some":"thing"}''' jsonObject = json.loads(jsonString) print json.dumps( jsonObject, indent=2)
thanks to https://twitter.com/yud1z and agu monkey
HTML5 Custom Data Attribute
discovered custom data attribute in HTML5. In HTML5, you can have custom attribute. Their name starts with data-. Here's a example used by twitter:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="xah_lee">Tweet</a>
read more HTML5 Custom Data Attribute
If you are using Opera browser, here's 2 special config. Type them in the URL bar.
opera:gpu
opera:config
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.
revisting a old topic: Micropayment On The Web
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.
Here's two most popular sites in China, of pirated movies and TV shows. You'll find latest Batman etc there.
Update: grayer and grayer. Web Design: Say No to Grey Text on White Background
I propose we rename the Internet to Misanthropolis.
—, @jayewells
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 〔.htaccess〕 in lit dir.
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/
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 Standard Split
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. @ Source 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}
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.
Adde CSS3 syntax: CSS 2.1 and CSS 3 Selector Syntax
test your browser: HTML5 Canvas Example
updated. Added a practical example at bottom. Functional Programing in Javascript.
much updated Xah's Javascript Tutorial
Complete update: Xah's CSS Tutorial. More to come.
Stop shrinking my screen! Twitter's direct message UI. User Interface Design: Peepshow Windows
As i wrote a blog about spammer that sell twitter follower, another spammer commented right there peddling their selling of followers. Spamlicious: Buy Twitter, Facebook Followers, and YouTube Views
New discovery. Contrary to the austere and stern W3C spec, if you have a id tag with value “ααα”, it passes W3C validator as valid!. See: W3C HTML Validator Invalid.
Twitter Conversation Spam
Current twitter spam technique: find conversations and spam the shit out of it.
Right now, they are spamming at a rate at least 20 spam per 30 seconds. (estimate based on twitter's search and auto-refresh)
Updated with screenshots: Chinese Fonts Comparison; 中文字體比較 ◇ Comparison of Chinese Fonts Displaying English
New index page of articles: Web Tech Gossip Articles.