Xah Web Dev Blog Archive 2014-07
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.
Google Chrome WebP image format support
Google has a new image format the [ WebP ] [ https://en.wikipedia.org/wiki/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))
- [ WebVTT#WebVTT ] [ https://en.wikipedia.org/wiki/WebVTT#WebVTT ]
- http://dev.w3.org/html5/webvtt/ https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format
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 (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
DOM: Remove HTML Element
How to write a jQuery extension/plugin?
Add Method to Prototype
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. Access Property (updated)
Test Equality of Objects
Use Object.create to Emulate Constructor
DOM: Node Type, Node Name, Node Value (updated)
Is “implied global” different from true global variable? var Name Scope (updated)
Function Declaration vs Function Expression
Intro to Event-Based Programing (updated)
Get Cookie, Set Cookie (updated)
$_ to refer to last result.
$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
Put Use Strict Inside Function Wrapper
when you use
x.y.z Associativity, Right or Left?
var Declaration Order (updated)