Xah Web Dev Blog Archive 2014-07

JS: Find Window Size

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)

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: What's a CSS Pixel? What's Reference 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. 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 Coordinates

Xah Web Dev Blog Archive 2014-03

DOM: Remove HTML Element

How to write a jQuery extension/plugin?

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

JS: Allowed Characters in Identifier (updated)

DOM: 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. JS: Access Property, List 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

JS: Test Equality of Objects

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

DOM: Node Type, Node Name, Node Value (updated)

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

JS: Function Declaration vs Function Expression

JS: Intro to Event-Based Programing (updated)

JS: Event Delegation

JavaScript Trick: Import Export Global Names

JS: Get Cookie, Set Cookie (updated)

JS: 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

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

JS: x.y.z Associativity, Right or Left?

JS: var/function Order (updated)