Xah Web Dev Blog Archive 2014-07
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))
- WebVTT#WebVTT
- http://dev.w3.org/html5/webvtt/ https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format
tablet friendly website, responsive design, css3
http://xahlee.blogspot.com/2014/07/tablet-friendly-website-responsive.html
in the year of our load 2014, W3C CSS validator doesn't support Data URI Scheme. W3C HTML Validator Invalid
CSS: Media Query (updated)
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
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)
JS: 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
Is “implied global” different from true global variable? var Name Scope (updated)
Intro to Event-Based Programing (updated)
Get Cookie, Set Cookie (updated)
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: JS: Strict Mode
var Declaration Order (Name Hoisting) (updated)