Xah Web Dev Blog Archive 2014-07

Find Window Size

CSS: Length 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)

Practical SVG Tutorial, now on its own page.

SVG: Basic Examples (updated)

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

CSS: How Large is a CSS Pixel?

tablet friendly website, responsive design, css3 http://xahlee.blogspot.com/2014/07/tablet-friendly-website-responsive.html

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 (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. At http://chipersoft.com/p/why-I-still-prefer-prototype/ , accessed on 2014-07-16 ]

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: viewBox, User Coordinate

Xah Web Dev Blog 2014-03

JavaScript/DOM: Remove an Element

How to write a jQuery extension/plugin?

Add Method to Prototype

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

Allowed Characters in Identifier (updated)

JavaScript: Get Element's Parent/Child/Sibling, Navigate 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. Access Property (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: Test Object Equality 🚀

Use Object.create to Emulate Constructor

JavaScript/DOM: What is Node, Node Type, Element (updated)

Is “implied global” different from true global variable? var Name Scope (updated)

Function Declaration vs Function Expression

Intro to Event-Based Programing (updated)

Event Delegation

Get Cookie, Set Cookie (updated)

Function Parameters

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 https://plus.google.com/+simwicki/posts]

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: What is Strict Mode and How to Determine Strict Mode?

x.y.z Associativity, Right or Left?

var Declaration Order (Name Hoisting) (updated)