Xah's Web Dev Blog

Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

Functional Programing in JavaScript
Understanding JavaScript Object System
JavaScript demo, Unicode tooltip and search. Unicode Characters ☢ ☯ ☭ ∑ ∞ ♀ ♂ ♥
JavaScript + SVG demo: Computer Languages Character Distribution

2014-07-31

JavaScript: How to Find Screen/Window/Viewport Width ＆ Height

2014-07-30

CSS: Understanding CSS Units (complete rewrite, based on CSS spec.)

2014-07-30

CSS3 new units: root em 「rem」 and viewport width 「vw」

CSS3 introduced the unit rem, which stand for root “em”. It is the size of font relative to root. (em is size of font relative to parent element.)

all latest versions of browsers support it. (not Internet Explorer 8 or before.)

CSS3 also has vw and others. “vw” is 1 percent of view port NOT including the scrollbar width (if any). When browser window changes size, vw also changes.

see: http://dev.w3.org/csswg/css-values/#font-relative-lengths

2014-07-29

Google Chrome WebP image format support

Google has a new image format the WebP, developed since 2010. Open source.

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

It also supports animation like gif, but with 24-bit color instead gif's 8-bits (256 color). It boasts 64% size reduction when converted to lossy, or 19% when converted to lossless.

Supported natively in Google Chrome, but, unfortunately, not yet in Firefox or Internet Explorer.

2014-07-26

SVG: Coordinate Transformation (first version)

2014-07-25

Xah SVG Tutorial, now on its own page.

2014-07-25

SVG Tutorial: Basic Examples (updated)

2014-07-25

Firefox introduced WebVTT. (a video subtitle format (which is just a text file with time stamp for each line))

https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format

HTML5 Video Example

2014-07-25

Screen Density and Web Design: What's a CSS Pixel?

2014-07-25

tablet friendly website, responsive design, css3

2014-07-25

CSS Pixel Ruler

2014-07-24

in the year of our load 2014, W3C CSS validator doesn't support Data URI Scheme. W3C HTML Validator Invalid

2014-07-24

CSS: Media Query (Responsive Design) (updated)

2014-07-23

SVG: Style Attributes

2014-07-23

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

2014-07-23

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

2014-07-22

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/

2014-07-21

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

2014-07-20

Xah's Web Dev Blog Archive 2014-03

2014-07-20

JavaScript: How to remove a HTML element?

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

2014-07-19

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/

2014-07-18

JavaScript Prototype: Define Your Own Methods

2014-07-18

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

2014-07-17

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

2014-07-17

JavaScript: Navigating DOM Tree (updated)

2014-07-16

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

2014-07-16

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

2014-07-15

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

2014-07-14

JavaScript: How to Test If 2 Objects Are Equal?

2014-07-12

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

2014-07-11

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

2014-07-10

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

2014-07-10

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

2014-07-09

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

2014-07-09

JavaScript: Event Delegation

2014-07-08

JavaScript Trick: Import Export Global Names

2014-07-07

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

2014-07-04

JavaScript: Defining Function with Optional Parameters/Arguments

2014-07-04

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

2014-07-03

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?

2014-07-02

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

2014-07-01

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

2014-06-30

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

2014-06-28

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

2014-06-27

HTML/XML Entities List

2014-06-25

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

2014-06-18

JavaScript: Property Names Are Strings

2014-06-18

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

2014-06-17

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

2014-06-17

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

2014-06-17

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

2014-06-16

JavaScript: Convert Between String ＆ Number

2014-06-07

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

HTML: Character Sets and Encoding (updated)

2014-06-02

updates:

2014-06-01

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

2014-05-26

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

2014-05-26

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〕

2014-05-26

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.

2014-05-26

JavaScript Operators (new page)

2014-05-26

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

2014-05-26

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

2014-05-26

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

2014-05-25

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

2014-05-11

CSS: Letter Spacing, Word Spacing

2014-05-10

CSS: Font Weight, Bold

2014-05-10

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

2014-05-01

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

2014-05-01

CSS: Match first-letter and first-line

2014-04-26

SVG tutorial: SVG Coordinates, Viewport, viewBox

2014-04-25

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

2014-04-18

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

2014-04-16

Facebook Scam

2014-04-14

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

2014-04-14

CSS: Media Query

2014-04-13

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.

2014-04-12

JavaScript: Add ＆ Remove Event Handler (updated)

2014-04-12

JavaScript: Detecting Browser; Browser Sniffing (updated)

2014-04-12

JavaScript: Create ＆ Insert HTML Element (updated)

2014-04-12

JavaScript: Stopwatch

2014-04-11

JavaScript Tutorial: Clock (modernized)

2014-04-10

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