tablet friendly website, responsive design, css3

my website is now tablet friendly. More specifically, in portrait mode, the side bar doesn't show.
here's a sample page. 〈Xah CSS Tutorial〉 http://xahlee.info/js/css_index.html

for this to happen, it's very simple. See:
〈CSS: Media Query (Responsive Design)〉

however, took me about 5 hours. Why O Why? that's how things are. We are not talking about old browsers or Internet Explorer 8. I'm designing only for “real modern” browsers. But, still, the pain won't go away. Why my paragraph width got shrinked on this modern Motorola Xoom super Android cynogenmod browser? Then, download Google Chrome browser, seems to work there. Then, try to find a way to determine just what browser is that one running in cynogenmod. Then, try CSS variations, then, try to read the spec. Then, try CSS variations, then, try to read the spec, more carefully. Then, rub ya gloss. Then, rub ya eyes. Why O Why this isn't expect. You know what i mean?


GLONASS (Russian: ГЛОНАСС, IPA: [ɡlɐˈnas]; Глобальная навигационная спутниковая система), acronym for “Globalnaya navigatsionnaya sputnikovaya sistema” or “Global Navigation Satellite System”, is a space-based satellite navigation system operated by the Russian Aerospace Defence Forces. It provides an alternative to Global Positioning System (GPS) and is the only alternative navigational system in operation with global coverage and of comparable precision.


What's the Use of the ▤ Menu/App Key?

Perm URL with updates: http://xahlee.info/kbd/whats_the_use_of_the_menu_app_key.html

the ▤ Menu key is just fantastic. Now, in Firefox, you can press 【▤ Menu c】 to copy, and 【▤ Menu p】 to paste. Also works in terminal, desktop (file manager) to rename, etc.

this is particularly nice when your keyboard has a nice positioned ▤ Menu key. For me, on the Truly Ergonomic Keyboard, that's the left space bar.

or, you can make your Caps Lock to be the ▤ Menu key.

and, of course, in my emacs setup, some 90% of my commands calls are all assigned to a key sequence, starting with the ▤ Menu key. 〔☛ Ergoemacs-vi Mode


Can you install Linux on Chromebook

am looking to buy a laptop.

Apple's out, because the price/meat ratio is about 3 times higher than competitors.

so, that leaves Chromebook and normal Windows laptop.

first question about Chromebook is, can i install full Linux? am not much interested in ChromeOS. Am gonna use this for dev, python ruby database, html, javascript, node.js etc.

Can you install Linux on Chromebook?

yes, but not the normal way.

You have to go thru unsupported hackery process such as turn on developer mode, which adds 10 secs to boot time, then other hackery process to get going. Or, another option is booting up with Chrome OS and run Linux on top, again, not good.

you can read about the complexities here:

Running linux on Chromebook, tech detail https://wiki.archlinux.org/index.php/Chromebook

Horror stories of running linux on chromebook. After a ChromeOS update, your Linux is screwed. Good luck recovering your data. October 19th, 2013. http://ubuntuforums.org/showthread.php?t=2181898

Asus X200CA-HCL1104G 11.6 inch Touch Screen Laptop (Windows 8, 4GB Memory, 320GB Hard Drive, Black) amazon

Acer C720 Chromebook (11.6-Inch, Haswell micro-architecture, 2GB) amazon


emacs's “describe-” commands

emacs's “describe-” commands

emacs has describe-function command, and many other that starts with “describe-”. They are in general giving you help or info.

by default, there are 2 keys to invoke them, 【F1】 or 【Ctrl+h】. ⁖

  • describe-function → 【Ctrl+h f
  • describe-function → 【F1 f

〔☛ Emacs Keys Overview: How's Emacs Keys Organized?

here's my own usage, ordered roughly in frequency of use. (with my own keys, plus a few of my own commands)


<menu> h f      describe-function
<menu> h k      describe-key
<menu> h 3      man
<menu> h 9      lookup-word-definition
<menu> h 8      lookup-wikipedia
<menu> h 7      lookup-google


<menu> h 4      elisp-index-search
<menu> h c      describe-char
<menu> h m      xah-describe-major-mode
<menu> h v      describe-variable
<menu> h e      view-echo-area-messages


<menu> h a      apropos-command
<menu> h l      view-lossage
<menu> h s      describe-syntax
<menu> h 0      lookup-all-dictionaries


<menu> h C      describe-coding-system
<menu> h F      Info-goto-emacs-command-node
<menu> h I      Info-goto-emacs-key-command-node
<menu> h L      describe-language-environment
<menu> h S      info-lookup-symbol
<menu> h b      describe-bindings
<menu> h d      apropos-documentation
<menu> h i      info
<menu> h n      view-emacs-news
<menu> h p      finder-by-keyword
<menu> h r      info-emacs-manual
<menu> h w      where-is

if you are new to emacs, here's some emacs terms explanation:

  • point → cursor position (beginning of file is 1)
  • frame → window
  • window → a pane/frame, as in split window
  • buffer → a opened file, or working area like “tab”.
  • mark → a cursor position, that begin text selection.
  • region → text selection
  • transient mark mode → a preference setting, to have text selection highlighted
  • cua-mode → a preference setting, to have standard copy/cut/paste/undo keys

if you want my elisp commands:

The 【▤ Menu】 key is chosen because it's a easy starting key, right under thumb on the Truly Ergonomic Keyboard. See Ergoemacs-vi Mode


JavaScript: never use 「delete」 to remove element in array

Note: splice is the general way to add/remove elements. You should never use 「delete」 to remove elements in a array, because that creates a sparse array.

// example of how delete creates a sparse array
var aa = ["a", "b", "c"];
delete aa[1];
console.log(aa);                // [ 'a', , 'c' ]
console.log(aa.length);         // 3

see JavaScript Array Methods


where is socket.io client library at?

decidedly frustrated with socket.io.js.

let me detail the issues.

first, there's no clear indication what it's supposed to be. Sure, it's clear it's a lib on top of WebSocket protocol, with added feature that if browser doesn't support WebSocket, it'll automatically use other means (aka transports) such going thru Flash, XMLHttpRequest, hidden iframe, etc.

but, Does it require Node.js? There's a server and client part. How are they related?

the home page is extremely simple, but those simple examples hide a confuse ball. Nowhere it tells you it's relation to Node.js, or how server/client are related, or independent. And its FAQ, or its github pages, don't say neither. (instead, it has one hundred other links, none of which answers)

Answer: socket.io is 2 JavaScript libs, socket server and socket client. But also, it is a protocol, on top of WebSocket. So, other langs can implement it too without using Node.js or JavaScript.

Answer: socket.io has socket server lib and socket client lib parts, and can be used independently. The socket server lib depends on Node.js (obviously), but the socket client lib do not necessarily need Node.js, but can use Node.js. That is, If your web server that uses the socket client is also running on Node.js. (for example, you have 2 servers, A and B. A is running Node and is the socket server. B is running Apache on another domain name and needs to talk to server A. So, B is your socket client, and you can use socket.io.js the client lib part. But if A and B are the same domain/server, then things are simpler. The socket client can load the same file the socket server is using (thus is using Node.js).)

Now, the first thing to do is actually to get it. The doc says: npm install socket.io -g. That gets you ≈600 files.

you see, all i need now is a socket client. As with most js lib, typically it's just a minimized file. How do i know which of the 600 files is it? Note that these 600 files includes README, build files, and also includes other libs such as Redis database interface, etc. It's essentially the same as from git. Hello?? why would i need npm install if i can just git clone the source code? npm is suppose to be a package manager, not giving me the source code junks.

the home page shows real beautiful simple examples, such as:

<script src="/socket.io/socket.io.js"></script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    socket.emit('my other event', { my: 'data' });

but there's no such dir as “socket.io”? If you do a simple Google Search “Where is the socket.io client library?” You find several hits on StackOverflow. Clearly, lots people are confused. SO's answers isn't very good neither.

Answer: again, there are 2 libs, one for socket server and one for socket client, and can be used independently.

For socket server part, you need Node.js, of course. And, the file is: 〔/node_modules/socket.io/lib/socket.io.js〕

for the socket client part, if it is running on the same server as the socket server, you an also load that same file, because that file will somehow find the client.

but, if your socket client is not using Node.js, then, the client file you need to load is this:

<script src="http://example.com/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.min.js"></script>

just exactly which of the 600 files are the minimally required for server and or client? i haven't found out yet.

at this point, i'm dithering whether to ditch socket.io, and just use WebSocket in plain old JavaScript.

sometimes i wonder, why software industry is such a hell? the guy who wrote socket.io.js, clearly is a smart guy, and expert at js and Node.js. And, his lib API is quite simple. Just a handful of functions. As his examples on his home page shows. And, i've seen his writings. Typically, programers don't know how to write, such as unix man page idiots or python idiots or perl. But, this guy knows how to write well.

So, why is such a simple API socket.io home page have so confusing doc?

is it not clear, first thing people need to do is load the file? and you didn't specify which file?

also, no where on the home page says: Documentation or Manual. You have to grok, and eventually something like a API doc is in the description page of the github page.

no where says that the client/server libs are separate projects. (yes, the client part actually has its own github repo. The server lib seems to include the client repo in its repo.)

is it not clear, when people follow your npm install socket.io example, they get 600 files, and none has the dir you showed in your simple examples on your home page?

i'm a beginner of Node.js. If something is incorrect, or if you know some answer, please comment. Thanks.


mixed Chinese and English writing and punctuation


When writing mixed Chinese and English, i realized that, it's hard to have a uniform rule for using English punctuation or Chinese punctuation. Perhaps, a solution is then to always use English punctuation, or all Chinese punctuation.


emacs moving to git, we hope!

ground-breaking news. It seems, emacs repo would move to git in the near future.

thanks to, the controversial head Eric S Raymond. See the thread here: http://lists.gnu.org/archive/html/emacs-devel/2014-01/msg00005.html

every time i dip into emacs dev list, it pains me to see the utter inefficiency and arguments there. Everybody argues. Argue, and argue, philosophy waxing, and argue, and you see one hundred weird utterly stupid wild ideas (excuse me) on everything, from dinosaurs of the 1980s insisting their ways, to clueless FSF fanatics who haven't wrote a single line of code but is gung-ho about emacs. In between is every cock who think only he knows how things should be, meanwhile, those who have written respected software or contributed tons of elisp, are treated just like nobody — a complete egalitarian dystopia.

emacs, sucks the weirdos of the world. Count me in.

On this, we must also thank John Wiegley, who daringly and humbly pushed for git 9 months ago. See http://lists.gnu.org/archive/html/emacs-devel/2013-03/msg00776.html

Mac OS X File Resource Fork Changes

Mac OS X 10.7 (released in 2011) deprecated the command line syntax to access file resource fork. Before, you do ls -l filename/rsrc but that no longer works. The new syntax is ls -l filename/..namedfork/rsrc.

see Mac OS X Resource Fork and Command Line Tips

thanks to Marius Piedallu van Wyk