Xah's Web Dev Blog

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

Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS Tutorial.

CSS: Media Query (Responsive Design) (updated)

SVG: Style Attributes

CSS padding cannot be negative, but margin can. CSS Margin vs Padding

interesting reading. 〔Why I STILL prefer Prototype over jQuery By Jarvis Badgley. @ http://chipersoft.com/p/why-I-still-prefer-prototype/〕

Firefox 31, CSS Variable

Firefox 31 released. new features: https://www.mozilla.org/en-US/firefox/31.0/releasenotes/

It introduced CSS variable. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

here's w3c spec for css variable. http://dev.w3.org/csswg/css-variables/

Nested SVG. fantastic! See bottom: SVG Coordinates, Viewport, viewBox

Xah's Web Dev Blog Archive 2014-03

JavaScript: How to remove a HTML element?

var myEle = document.getElementById("xyz");
myEle.parentNode.removeChild(myEle);

what's jQuery's $.fn?

It is just a alias to the prototype property. You can see it in the jQuery source code:

jQuery.fn = jQuery.prototype = {
    // …
}

Presumably, they aliased so it's shorter to type. But why is it named “fn” and not “pt”? Who knows, perhaps it's because “fn” mean function, and it gives people the right idea of assigning function to it.

〔☛ JavaScript: Understanding Prototype ＆ Inheritance〕

How to write a jQuery extension/plugin?

all you have to do is:

$.fn.your function name = function(){…}

your function shoud return a jQuery object (this) when appropriate, so it's chainable.

for other caveats and tips, see: http://learn.jquery.com/plugins/basic-plugin-creation/

JavaScript Prototype: Define Your Own Methods

JavaScript doesn't do tail recursion. that is, it doesn't optimize linear recursion to loop. meaning, you may get stack overflow.

discussion at https://plus.google.com/+XahLee/posts/Yge6Qmj4R4m

JavaScript: What Are Allowed Characters in Identifiers (Variable ＆ Function Names)? Unicode? (updated)

JavaScript: Navigating DOM Tree (updated)

few years back, it's widely reported that Daily Mail is stealing images, and was sued in court. But now, seems some of the original article are removed. I'm archiving them as history. See: Daily Mail Stealing Images

list all enumerable properties, of a object and its prototype chain. JavaScript: Property, Prototype Chain, Enumerable: Accessing ＆ Listing Properties (updated)

simple image viewer in JavaScript. Use your browser's View Source or Inspect Element feature to look at the JavaScript code. Math: Density Plots of Trig Expressions

JavaScript: How to Test If 2 Objects Are Equal?

JavaScript: How to Use Object.create() to Emulate Constructor?

JavaScript: Get a Element's Type, Tag Name, Text Value (updated)

Is “implied global” different from true global variable? JavaScript Variable Scope: Function Level vs Block Level (updated)

JavaScript: What's the Difference Between Function Declaration and Function Expression

JavaScript + DOM: Intro to Event-Based Programing (updated)

JavaScript: Event Delegation

JavaScript Trick: Import Export Global Names

JavaScript: Checking, Getting, Setting, Cookies (updated)

JavaScript: Defining Function with Optional Parameters/Arguments

in Google Chrome browser, in the JavaScript console, you can use $_ to refer to last result.

and $0 refers to the currently inspected element.

thx to Simon Wicki

see his post at https://medium.com/@zwacky/4-very-useful-chrome-dev-tool-commands-4de67abbc751

comment at https://plus.google.com/+XahLee/posts/HwxytsoCHUB

Put Use Strict Inside Function Wrapper

when you use "use strict"; in JavaScript source file, it's better to put it inside the function wrapper. See: JavaScript: What's Strict Mode and How to Determine Strict Mode?

JavaScript x.y.z Associativity. Right or Left?

fun JavaScript problem. Test your knowledge. Try it out in your browser, or answer before try.

var x = {
    "y.z":function () { return 4;},
    "y":{"z":function () { return 3;}}
};

console.log(x.y.z());

console.log(x["y.z"]());

console.log(x["y"]["z"]());

comment at https://plus.google.com/+XahLee/posts/jGvHXXUyarN

JavaScript: Variable ＆ Function Declaration Order: Name Hoisting (updated)

JavaScript: What's 「this」 in a event handler?

added a ƒ.bind(…). JavaScript: Call Any Function as Method

HTML/XML Entities List

What's the Difference Between jQuery Selector and DOM querySelectorAll()?

JavaScript: Property Names Are Strings

JavaScript: Disallow Adding/Deleting/Writing Object Properties (updated)

You can find any object's constructor by the property constructor. JavaScript: What's Constructor? What Does Keyword “new” Do? (updated)

JavaScript: Creating Object with Object.create() (updated)

JavaScript: String ＆ Number Not Objects, Why Do Primitive Types Have Methods?

JavaScript: Convert Between String ＆ Number

HTML/HTTP's Charset is About Encoding, Not Charset

HTML: Character Sets and Encoding (updated)

updates:

JavaScript: What Are Allowed Characters in Identifiers (Variable ＆ Function Names)? Unicode? (on its own page)

JavaScript, how to get max value of a array?

// get max value of a give array

var x = [3, 9, 2];

var max_data_value = Math.max.apply(null, x);

console.log(max_data_value);    // 9

JavaScript, how to get all keys of a object/hashtable?

// how to get key of a object/hashtable

var obj = {"a": 41, "b": 187, "c": 394, "d": 761};

var keys = Object.keys(obj);

console.log(keys);              // [ 'a', 'b', 'c', 'd' ]

〔☛ JavaScript: Property, Prototype Chain, Enumerable: Accessing ＆ Listing Properties〕

JavaScript, how to get values of a object/hash?

// how to get values of a object/hash

var obj = {"a": 41, "b": 187, "c": 394, "d": 761};

var values = Object.keys(obj).map(function (k) {return obj[k];} );

console.log(values);            // [ 41, 187, 394, 761 ]

〔☛ JavaScript: Property, Prototype Chain, Enumerable: Accessing ＆ Listing Properties〕

JavaScript quiz: why doesn't this work?

// JavaScript quiz. Why doesn't this work?

var obj = { "a":3, "b":7, "c":2, "d":9};

var keys = Object.keys(obj);

var sorted_keys = keys.sort(function (a,b) {return obj[a] >= obj[b]});

console.log(sorted_keys);       // [ 'c', 'a', 'b', 'd' ] ??

ANSWER (rot13): orpnhfr gur fbeg zrgubq'f cerqvpngr shapgvba arrqf gb erghea artngvir mreb cbfvgvir, abg gehr snyfr.

JavaScript Operators (new page)

JavaScript: sum array

// example of writing a sum function
function sum (list) { return list.reduce(function (a,b) {return a+b;} );}

console.log(sum([3,1,2]));          // 6

now complete. Computer Languages Character Distribution (with JavaScript + svg charts)

JavaScript String is 16 Bits Byte Sequence (on its own page)

JavaScript DOM “setAttribute” — the pain in functional programing's neck.

CSS: Letter Spacing, Word Spacing

CSS: Font Weight, Bold

CSS: Text Decoration: Underline, Overline, Line-Through

What's a Letter in CSS's first-letter Pseudo-element?

CSS: Match first-letter and first-line

SVG tutorial: SVG Coordinates, Viewport, viewBox

JavaScript: What Are Allowed Characters in Identifiers (Variable ＆ Function Names)? Unicode? (added explanation of what's “Unicode Letter”)

Google Chrome still doesn't support CSS animation. What year is this? CSS: Animation Tutorial

Facebook Scam

Google Chrome browser is the worst in supporting Unicode, since 2010. See bug 361986 https://code.google.com/p/chromium/issues/detail?id=361986

CSS: Media Query

Complete. This list of DOM methods: JavaScript: Most Frequently Used DOM Methods, is pretty much all you need, that covers practically 90% of what you use DOM for.

JavaScript: Add ＆ Remove Event Handler (updated)

JavaScript: Detecting Browser; Browser Sniffing (updated)

JavaScript: Create ＆ Insert HTML Element (updated)

JavaScript: Stopwatch

JavaScript Tutorial: Clock (modernized)

CSS: What font-size is xx-large, x-large, small, …? (updated)

CSS: OverFlow, Scrolling Box (updated)

JavaScript Floating Box Following Scroll (updated)

JavaScript: Fade a Element Using CSS Transition (updated)

JavaScript: Fade a Element (updated)

JavaScript: Changing HTML Content Example (updated)

JavaScript: Set a Element's Attribute (updated)

JavaScript: Get a Element's Attribute Value (updated)

JavaScript: Changing CSS Style (updated)

emoticon cat faces Twitter 2014-04-08

Emoticons on Social Network: Facebook, Twitter, Sina Weibo (updated)

Case Sensitivity in {HTML5, XML, CSS, JavaScript} (minor update)

HTML: Specify More Than One Class Attribute for HTML Element (minor update)

JavaScript: Array vs NodeList vs HTMLCollection (minor update)

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

JavaScript: Get a Element's Type, Tag Name, Text Value (updated)

JavaScript: Most Frequently Used DOM Methods (minor update)

JavaScript Execution Order; HTML5 Asynchronous JavaScript (minor update)

news. Just today, Twitter started to show emoticons as images.

emoticon smiley twitter 2014-04-02
emoticon on Twitter as of

updated at Emoticons on Social Network: Facebook, Twitter, Sina Weibo

Past Articles by Date