Xah Web Dev Blog Archive 2014-07
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, 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))
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)
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
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 (updated)
DOM: Node Type, Node Name, Node Value (updated)
Is “implied global” different from true global variable? JS: var Name Scope (updated)
JS: Intro to Event-Based Programing (updated)
JS: Get Cookie, Set Cookie (updated)
$_ to refer to last result.
$0 refers to the currently inspected element.
thx to Simon Wicki
Put Use Strict Inside Function Wrapper
when you use
JS: var/function Declaration Order (updated)
Ask me question on patreon