Xah's Web Dev Blog

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

Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

my JavaScript tutorial is on the 8th page of Google search. First few pages are all big commerical sites with money to burn. Help me move it to top. Share on social networks, or link from your blog. Thank you. Xah JavaScript Tutorial

CSS: Transition Tutorial (major update)

Javascript Random Number: Random Range, Random Integer, Random Element (updated)

reviving the JavaScript raining hearts ♥💕💓💔💖💗💘💝💞💟💙💚💛💜 of 1999. JavaScript: Raining Hearts

JavaScript: What's Array-Like Object? (on its own page)

how many people have JavaScript disabled? in 2010, it's about 1 to 2 percent.

How many users have JavaScript disabled? By Nicholas C Zakas. @ https://developer.yahoo.com/blogs/ydn/many-users-javascript-disabled-14121.html

Posted by mistake yesterday, but now the first traft is complete. JavaScript: Understanding JavaScript Array

JavaScript: Defining Function with Optional Parameters/Arguments (updated)

Google Chrome now supports CSS 2D Transform. That leaves Safari the only one not supporting it. CSS 2D Transform Tutorial

CSS Text Flow Around Image (updated. With link to spec.)

CSS: Line Wrap Tutorial (updated. With link to spec.)

HTML5 Killed the ‹big› Tag?! (updated)

CSS: Absolute Positioning (new)

Completely rewrote: CSS Position: static, relative, fixed, absolute. Now based on CSS spec. (linked at bottom)

Who inverted CSS?

It's Håkon Wium Lie and Bert Bos. Both were working at W3C.

While working with Tim Berners-Lee and Robert Cailliau at CERN in 1994,[2] he proposed the concept of Cascading Style Sheets (CSS) As an employee at W3C, he developed CSS into a W3C Recommendation with Bert Bos.[3] As a showcase and testbed, he integrated CSS into the Arena web browser.[3] CSS is one of the fundamental web standards, with profound impact on typography, aesthetics, and accessibility on the web.

Håkon later on joined Opera Software (of the Opera browser).

My JavaScript tutorial is now just $14.99. I take 1 year to write it. You take 1 week to read it. Competitively priced. Buy it. Thanks.

The default font size in browsers is 16px. That is, 1em is 16px. CSS: Understanding CSS Units

Declaring Character Set in CSS File (updated)

Take Screenshot in Firefox sans Plugin

to take a screenshot in Firefox, press 【⇧ Shift+F2】, then type screenshot filename. The file is saved in your download folder.

thanks to Manuel Strehl

JavaScript: Image Rollover (updated)

Xah's Web Dev Blog Archive 2014-04

JavaScript: What's the value of 「this」 Keyword? (updated)

HTML5 Video Example (updated)

There's a popular website, titled: On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

at first i was impressed. Until reading in detail. The test actually specifically compare Data URI to CACHED IMAGES, and with a test image that's a WHOPPING 17k bytes in size. The article is Completely misleading, and the title is blatantly a LIE. Looks good on hackernews though.

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

the simplest CSS sprites tutorial. CSS: Image Sprites Tutorial

CSS=Pain. What Would be a Alt Layout Language Design Like?

CSS is truely a abomination. I recall, when CSS was proposed, there were several alt proposals. Suddenly, i wonder what they are.

it's interesting to think about a alternative to CSS. Note that CSS is cascading. A very interesting concept, but i couldn't think of another system in programing that's cascading in a non-trivial way as CSS.

so, what'd be a alternative system like? One is SVG, which is fixed layout (and lots similar such as postscript). However, fixed layout system is rather trivial to design. But i can't think of a system that allow fluid layout, as CSS allows.

so, there's 2 things interesting about CSS. 1. Cascading. 2. fluid layout.

but the CSS we have is incomprehensible and inprecise and complexity pain in the ass.

so, the question is, what would be a alternative layout language design like, that also allows fluid layout at least, and be able to cascade.

ultimately, the question is, is CSS pain inherently due to the fluid layout feature, or cascade, or both, or just due to its own incompetent design result (as it's also heavily influenced by social issues such as browser war and or design-by-comittee, as is most tech.)

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

The Hacks of Web Dev: CSS Sprites, Shapes, Font-Awesome

there's a thing called font-awesome. 〔Font Awesome: The iconic font and CSS toolkit @ http://fortawesome.github.io/Font-Awesome/〕It's a extremely popular project. What it is? you know how websites need lots icons? such as arrows left/right, home icon, refresh, return, link, video, upload/download, photos... etc.

Google Plus css sprites
Google Plus CSS sprites

How to do these? normally, you use a image. But for each image, means a http request. In the name of efficiency, that's not good enough for some. So, lots hacks have cooked up.

the most popular is using so-called css-sprites. Basically, make all your icon images into one big image. Then, when you need to show one, use CSS with size and position properties, essentially just showing a small part of the big image. This is the most popular method, used by basically all the top 1000 most trafficked sites. (counting google, facebook, twitter)

you can see examples here CSS: Image Sprites

image sprites is a hack.

then, another method to speed up is by encoding the image files directly in CSS file. This is called Data URI Scheme.

Data URI Scheme is not exactly a hack, but is very ugly. see CSS: Data URI Scheme, Base64 Encoding

another method is to use CSS 3's 2d transform and various techniques to actually “draw” the icons. for example, see CSS Triangle, CSS Shapes and CSS 2D Transform Tutorial.

CSS can't really draw. All it can draw is borders and round corners. Transform (rotation, scale, shear, …), thickness, coloring, etc are used to hack it up into all kinds of icons. CSS Shapes is a major hack.

now, font-awesome. What is it? basically, it uses either css shapes, or generates fonts as icons. a major hack.

if you wonder why industrial programing is so extremely complex, wonder no more.

but actually, that's what engineering is all about. Not just programing. All engineering is like that. Engineering is dirty.

what is the proper solution? One proper solution is Unicode with proper font. For example, see: Unicode: Computer User Interface Icons ⌖ ⌚ ⌛ ✍ 🔋 🔒. For proper font of these characters, for example, a solution is Google Webfont. Unfortunately, as far as i know no Google Webfont support these Unicode characters.

Another real proper solution is SVG. see Xah SVG Tutorial. This is not popular yet, but is on the rise.

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

CSS: Add Icon to Links (updated)

CSS: protocol-relative URL Format (updated)

HTML Marquee: Scrolling Text, Rolling Images (updated)

Firefox memory usage report

in Firefox, type this about:memory in the url field.

for beginner: CSS: Tag Matching (Selector) Tutorial (updated)

JavaScript: Most Frequently Used DOM Methods (updated)

CSS3 HSL (Hue, Saturation, Lightness) Color Samples (updated, with a random color generator)

CSS Color Values (updated)

CSS Color Names (updated)

pure CSS: Image Rollover

CSS: multi-column (newspaper) Layout

What Happened to XHTML5?

there's no more XHTML5. Instead, you have a abomination called “polyglot markup”. Long live XML, the eXtensible Meta Laugh.

see http://dev.w3.org/html5/html-polyglot/html-polyglot.html

see also Google HTML/CSS Style Guide: Good Style or Bad Taste?

CSS tip: when using id, you don't need to include the tag name. Example:

/* do this */
#x5 {color:red}

/* do NOT do this */
div#x5 {color:red}

Because, the ID attribute by definition is unique per HTML file. It is redundant to specify a tag name.

CSS: Tabbed Menu Tutorial (updated)

JavaScript: Browser's Window Object, What's Browser Object Model (BOM), Document Object Model (DOM)

New version of Xah JavaScript Tutorial is out. Why this tutorial? It's concise, example based, no jargon talk, no idle chat, story telling. Best of all, each example can be verified in your browser, or checked with link to spec.

Buy, reshare. Thanks.

Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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

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

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

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.

SVG: Coordinate Transformation (first version)

Xah SVG Tutorial, now on its own page.

SVG Tutorial: Basic Examples (updated)

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

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

tablet friendly website, responsive design, css3

CSS Pixel Ruler

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

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");

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;}}




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)


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

Past Articles by Date