Xah's Web Dev Blog

updated with new syntax coloring, a formal language approach to computer language tutorial ＆ documentation.

• JavaScript: Navigating DOM Tree
• CSS: Transition Tutorial
• CSS Color Transparency/Opacity
• CSS: Text Shadow Examples, Glow Effect, Outline Effect

do you understand the lang well before you use frameworks?

JavaScript Example of Functional Programing: Normalize Vector

// JavaScript. By William James. Modified by Xah Lee
function normalize( vec ) {
var div = Math.sqrt(vec.map(function(x) {return x*x}).reduce(function(a,b) {return a+b}));
return vec.map(function(x) {return x/div});
}

console.log(normalize([3,4,5,6]));
// [ 0.3234983196103152, 0.43133109281375365, 0.539163866017192, 0.6469966392206304 ]

see Vector Normalize Function in Mathematica, APL, Haskell, Ruby, Python, Perl, Lisp, JavaScript, Java, …

JavaScript, example of array splice, 3 arguments form

// example of array splice, 3 arguments form
var uu = [0,1,2,3,4,5];
var rs = uu.splice(2,3, "a");   // start at index 2, removed 3 items, add "a"
console.log(uu);                // [ 0, 1, 'a', 5 ] the new value
console.log(rs);                // [ 2, 3, 4 ] removed items

for detail, see JavaScript Array Methods

spent the past 3 months studying JavaScript in depth. The following are entry points.

• JavaScript Tutorial by Example (for beginner)
• Understanding JavaScript Object System (advanced)
• Xah's JavaScript Tutorial (index)

JavaScript object system is very different from Java or Python. So it takes some used to, yet it's rather much simpler than Class/Object based system. However, the language itself is a bit convoluted.

I'll be keep updating these pages in coming weeks. I hope you like it. If you do, help spread it. Thanks.

JavaScript function has a .length property. Its value is the number of parameters declared in the function.

var ff = function (x,y) {return x + y;}
console.log(ff.length);         // 2

see more of her and a video of her fighting the bad guys at Internet Explorer Anime Girl

JavaScript: Using Map with Second Argument for Function's Object Context

Some array methods, such as ‹array›.map(‹f›, ‹o›), takes a optional second argument ‹o› as the context object. That is, the object ‹o› becomes the value of this keyword in the function ‹f›. Here's a example:

// example of using map with a second object for function's context

var ff = function (x) {
    this[x.toString()] = x+1;   // add a property to the object this function is context of
    return x+1;
}

// new object
var oo = {};

// array
var a1 = [1,2,3];

// map ff to a1, with context oo
var a2 = a1.map(ff, oo);

// new array value
console.log(a2);                // [ 2, 3, 4 ]

// oo is changed
console.log(oo);                // { '1': 2, '2': 3, '3': 4 }

JavaScript Array Methods (updated)

Example of JavaScript Sort Method Using Custom Predicate

// array sort example
var aa = ["a1", "a70", "a8", "A2"];

// default sort. element compared as string
aa.sort();
console.log(aa);                // [ 'A2', 'a1', 'a70', 'a8' ]

// sort by comparing as numbers after first char
aa.sort(ff);
console.log(aa);                // [ 'a1', 'A2', 'a8', 'a70' ]

function ff (x,y) {

    var nx = parseInt(x.slice(1)); // remove first char. consider rest as number
    var ny = parseInt(y.slice(1));

    if ( nx < ny ) { return -1; }
    if ( nx > ny ) { return 1; }
    if ( nx == ny ) { return 0; }
}

JavaScript Array Methods (updated)

apparently, the delete operator in JavaScript can now delete global objects, regardless it's declared with var or not. Example:

var xx = 3;
delete xx;
console.log(xx);      // gone

yy = 4;
delete yy;
console.log(yy);      // gone

this is in contrast to what David Flanagan says in his book. 〔☛ JavaScript Book by David Flanagan〕

above is tested in Google Chrome and Firefox and node.js as of 2013-10-30

Google Evil

here's another example how Google is becoming evil ass.

now, g+ will tell you things like “be the first to comment and plus one”.

what's wrong with that? it is a message towards brainless consumerism, just like all the annoying marketing stuff. It is what creates the so many great ills of American life.

Google, in their beginning, wasn't like this. But now, everything about Google is like this. Another good example is Google Doodle. when done occasionally, it's fun, creative, and also helps the company to market itself, in a good natured way, as a cute girl being cute naturally. But now, Google doodle is doodling in every conceivable opportunity, and multi-faceted, catered to every country. (it has a version for USA, UK, China, etc, for every holiday or the country's events. See: List of Google Doodles in 2013) (not to mention the hundred thousand Google products all push marketing like that) That would be like a trollop with gaudy makeup and skimpy outfit, just in case you didn't notice what she sells.

Google, since its beginning in late 1990s, has become so successful. From a company know by people, us, as a don't be evil company. It's a wonder. Is it true that powerful always becomes evil? Compared to many large companies, i think Google is not too bad, but certainly isn't what it used to be.

See also: All About Google

reshash some old articles, related to screen size and design.

• Screen Density and Web Design Problems
• Phone ＆ Tablet Screen Density Comparison
• Screen Size Comparison: DVD, iPhone, iPad, MacBook, Blu-ray
• Web Design 2012: Minimal Windows Width of Popular Sites

Google's Blogger Comment Linked to Google Plus

if you use Google's Blogger, it offers a unified comment linked to your g+. However, there's a sinister aspect. If you turn it on, people who don't have g+ account won't be able to comment.

this is where Google is evil.

jwz wrote a rant against today's web design.

〔Mobile web design: The reign of morons, indeed. 2013-10-03 By jwz. @ www.jwz.org…〕

here's my comment.

web designers have always been idiots, since 1990s. The fashion and design mantra kept changing.

flash, animation, popup, used to be hated, but today is embraced and can't be turned off. If one turns off JavaScript, many sites today show blank page.

and, i can't help but think part of this is being the consequence of open source ideology (or related, such as “info wants to be free”). How are content creator make money while every joe can copy and refry and post again with ads? and, lots coders use ad blockers. Venerable mag such as time mag now becomes gossip and celebrity photo gallery too, just like every other site.

and, to get back to some hacker spirit, you, jwz, my friend, can't help but putting g+ facebook buttons on your site, and with a black background that's a visual shock even the ars technica and lots geeks have stopped doing.

PS sadly, he seems to have censored it.

Google Declined to Fix HTML Injection in Gmail, WTF?

a very good story about Google. This guy, reported to Google about a GMail security problem. That is, it failed to escape HTML. And Google engineers replied saying it's not a critical problem and doesn't even fix it, until the guy said he's going to publish it.

Why you should not trust emails sent from Google: HTML injection in mails sent from Google Scholar 2013-09-10 By Tom Van Goethem. @ vagosec.org…

Xah's note extempore #13232, info source of the future

the web is becoming such that sites are dispersed out…

it used to be, there are just few popular sites. For example, for programing, there's slashdot, for open source software, there's soureforge and freshmeat.

today, there are still big sites, such as reddit, hacker news, and the common twitter facebook etc.

however, it seems that, things are getting quite dispersed. often, you get links to a site you never heard of. And some of the sites that was the number one site for a field, but is almost never heard anymore.

i tend to think this is a inevitability. As new sites come in the number of thousands a day, info gets copied, most trying to make money…

my context of this post is that of futurism. That is, what happens to info in a decade or two. For example, will it be from a few sites, or at the opposite extreme where most info you get are from sources you never heard of.

so far, i tend to think it's going to tend to the latter. We'll have a society where info is kinda diverse and incoherent. Kinda like some dystopian dilapidated future in some scifi genre (⁖ 12 Monkeys, Blade Runner). You'll have millions of disparate communities.

as i mentioned before, programing field, web dev, is becoming so incomprehensible. For example, let's say Ruby. Many probably never touched it. But, once you decided to go into it (or JavaScript or other new tech), you realized the space there is huge, and one wonders omg how come i never heard of this…

it's going to be that way, and worse.

in a similar way is gaming communities. For example, you probably never played Second Life. But once you are in for a few months, you realize, there are hundred thousand people in it, and within many different type of communities. They have their own jargons, understanding… quite amazing. Same with say other games such as WarCraft.

so, as a philosopher, or someone who observes society, it's becoming a incredible hard job. This makes sense too, as there are 7 billion people on this earth, and growing, and different countries, cultures. one cannot know, and know relatively less and less of humanity.

this is not surprising actually. Since, for example, if you are American, and never lived in China, India, Arabic countries, you are pretty much ignorant of humanity. Likewise for someone in other country.

and to trace this thought, we have few thousand years of history. Who actually have a basic understanding of it? The language, the culture, the arts, the science, in the past in different regions? that rules out 99.9999% of population. Even professional historian, can only know perhaps less than 0.1% of it.

but the thing is, most of us are not aware of this fact. We go on about our lives, concerned with whatever that's of immediate interest such as current government, smart phones, cars, health. Occasionally reading some link from social network of something from the past and we go wow i learned something today yet never realize that you know shit.

there's superheros with imagined power, such as knowing anyone's thoughts, or knowing everyone's secrets, or vampire that lives thousands of years. And in quite a few scifi. The bottom line of these is knowledge. That's quite interest a topic by itself. For example, from science aspect, is there a limit in our brain to know, the mechanism… then there's philosophy aspect of what will happen if we suddenly know that much? will it change our thinking completely? (and there's the borg of Star Trek, where everyone knows every other's thoughts and entire collective's knowledge. And there's highlander, where you chop off another's head and you immediately obtain all he knows) And also, if say you suddenly know let's just say just Chinese and Spanish and have “read” entirely of these 2 lang's literature in existence, what happens?

there's a lot to say… will stop typing now.

Failure of Firefox and Google Chrome's Web Developer Inspector

If you haven't heard, Firefox just killed the venerable “blink” tag. JWZ's blogging about it 〔http://www.jwz.org/blog/2013/08/a-light-has-gone-out-on-the-web/〕

Note that blink also doesn't work in latest Google Chrome.

however, jwz's site still have blink. How did he do it?

When you use inspector, you'll see that it doesn't show as CSS. Is it JavaScript? Is it animated gif? Is it Adobe Flash (gasp)?

After going thru the ordeal, i'll let you do the discovery.

Answer (rot13): vg jnf PFF, navzngvba hfvat 「@xrlsenzr」. Fbzrubj, obgu Sversbk ＆ Tbbtyr Puebzr'f vafcrpgbe snvyrq gb fubj vg. Zbeny bs gur qnl: oebjfre'f vafcrpgbe pnaabg or gehfgrq 100%. Onpx g gehfgl rznpf jvgu enj fbhepr pbqr.

Firefox kills JavaScript Option

Firefox latest version (version 23, 2013-08-06) killed the preference option to disable JavaScript. Now, it's official, that website is not supposed to work without JavaScript.