Xah Web Dev Blog Archive 2014-08
Find Window Size (minor update)
Fade a Element Using CSS Transition (minor update)
news from 2012. Adobe removed Flash for Android from Google Play store. Your Android probably have it pre-installed. But if you deleted, it'll take some geeking to get it back.
my JavaScript tutorial is on the 8th page of Google search. First few pages are all big commerical sites with money to burn. Help me move it to top. Share on social networks, or link from your blog. Thank you. Xah JavaScript Tutorial
CSS: Transition (major update)
Random Integer Function 🚀 (updated)
reviving the JavaScript raining hearts ♥💕💓💔💖💗💘💝💞💟💙💚💛💜 of 1999. Raining Hearts
Array-Like Object (on its own page)
how many people have JavaScript disabled? in 2010, it's about 1 to 2 percent.
[How many users have JavaScript disabled? By Nicholas C Zakas. At https://developer.yahoo.com/blogs/ydn/many-users-javascript-disabled-14121.html , accessed on 2014-08-24 ]
Posted by mistake yesterday, but now the first traft is complete. Understand JS Array
Function Parameters (updated)
Google Chrome now supports CSS 2D Transform. That leaves Safari the only one not supporting it. CSS: 2D Transform
CSS: Text Flow Around Image (updated. With link to spec.)
CSS: white-space Line Break (updated. With link to spec.)
HTML5 Killed the “big” Tag? (updated)
CSS: Absolute Position (new)
Completely rewrote: CSS: Position Property. Now based on CSS spec. (linked at bottom)
Who invented CSS?
It's Håkon Wium Lie and Bert Bos. Both were working at W3C.
While working with Tim Berners-Lee and Robert Cailliau at CERN in 1994,[2] he proposed the concept of Cascading Style Sheets (CSS) As an employee at W3C, he developed CSS into a W3C Recommendation with Bert Bos.[3] As a showcase and testbed, he integrated CSS into the Arena web browser.[3] CSS is one of the fundamental web standards, with profound impact on typography, aesthetics, and accessibility on the web.
Håkon later on joined Opera Software (of the Opera browser).
My JavaScript tutorial is now just $14.99. I take 1 year to write it. You take 1 week to read it. Competitively priced. Buy it. Thanks.
The default font size in browsers is 16px. That is, 1em is 16px. CSS: Length Units
CSS: Declare Charset (updated)
Image Rollover (updated)
this Binding (updated)
HTML Video Tag (updated)
There's a popular website, titled: On Mobile, Data URIs are 6x Slower than Source Linking (New Research)
at first i was impressed. Until reading in detail. The test actually specifically compare Data URI to CACHED IMAGES, and with a test image that's a WHOPPING 17k bytes in size. The article is Completely misleading, and the title is blatantly a LIE. Looks good on hackernews though.
comment at https://plus.google.com/+XahLee/posts/Fq81BxX17bm
the simplest CSS sprites tutorial. CSS: Sprites
CSS=Pain. What Would be a Alt Layout Language Design Like?
CSS is truely a abomination. I recall, when CSS was proposed, there were several alt proposals. Suddenly, i wonder what they are.
it's interesting to think about a alternative to CSS. Note that CSS is cascading. A very interesting concept, but i couldn't think of another system in programing that's cascading in a non-trivial way as CSS.
so, what'd be a alternative system like? One is SVG, which is fixed layout (and lots similar such as postscript). However, fixed layout system is rather trivial to design. But i can't think of a system that allow fluid layout, as CSS allows.
so, there's 2 things interesting about CSS. 1. Cascading. 2. fluid layout.
but the CSS we have is incomprehensible and inprecise and complexity pain in the ass.
so, the question is, what would be a alternative layout language design like, that also allows fluid layout at least, and be able to cascade.
ultimately, the question is, is CSS pain inherently due to the fluid layout feature, or cascade, or both, or just due to its own incompetent design result (as it's also heavily influenced by social issues such as browser war and or design-by-comittee, as is most tech.)
comment at https://plus.google.com/+XahLee/posts/dupUEYcN2xM
The Hacks of Web Dev: CSS Sprites, Shapes, Font-Awesome
there's a thing called font-awesome. [Font Awesome: The iconic font and CSS toolkit At http://fortawesome.github.io/Font-Awesome/ ] It's a extremely popular project. What it is? you know how websites need lots icons? such as arrows left/right, home icon, refresh, return, link, video, upload/download, photos... etc.
How to do these? normally, you use a image. But for each image, means a http request. In the name of efficiency, that's not good enough for some. So, lots hacks have cooked up.
the most popular is using so-called css-sprites. Basically, make all your icon images into one big image. Then, when you need to show one, use CSS with size and position properties, essentially just showing a small part of the big image. This is the most popular method, used by basically all the top 1000 most trafficked sites. (counting google, facebook, twitter)
you can see examples here CSS: Sprites
image sprites is a hack.
then, another method to speed up is by encoding the image files directly in CSS file. This is called Data URI Scheme.
Data URI Scheme is not exactly a hack, but is very ugly. see CSS: Data URI Scheme
another method is to use CSS 3's 2d transform and various techniques to actually “draw” the icons. for example, see CSS Shapes and CSS: 2D Transform .
CSS can't really draw. All it can draw is borders and round corners. Transform (rotation, scale, shear, etc), thickness, coloring, etc are used to hack it up into all kinds of icons. CSS Shapes is a major hack.
now, font-awesome. What is it? basically, it uses either css shapes, or generates fonts as icons. a major hack.
if you wonder why industrial programing is so extremely complex, wonder no more.
but actually, that's what engineering is all about. Not just programing. All engineering is like that. Engineering is dirty.
what is the proper solution? One proper solution is Unicode with proper font. For example, see: Unicode: User Interface Icons 🗑. For proper font of these characters, for example, a solution is Google Webfont. Unfortunately, as far as i know no Google Webfont support these Unicode characters.
Another real proper solution is SVG. see Practical SVG Tutorial. This is not popular yet, but is on the rise.
link at comment at https://plus.google.com/+XahLee/posts/VRwP7qdnVsn
CSS: Add Icon to Links (updated)
CSS: protocol-relative URL (updated)
HTML: Marquee, Scrolling Text (updated)
Firefox memory usage report
in Firefox, type this about:memory in the url field.
for beginner: CSS: Selector Tutorial (updated)
JS: DOM Methods (updated)
CSS: HSL Color (updated, with a random color generator)
CSS Color Syntax (updated)
CSS Color Names (updated)
pure CSS: Image Rollover
What Happened to XHTML5?
there's no more XHTML5. Instead, you have a abomination called “polyglot markup”. Long live XML, the eXtensible Meta Laugh.
see http://dev.w3.org/html5/html-polyglot/html-polyglot.html
see also Google HTML/CSS Style Guide: Good Style or Bad Taste?
CSS tip: when using id, you don't need to include the tag name. Example:
/* do this */ #x5 {color:red} /* do NOT do this */ div#x5 {color:red}
Because, the ID attribute by definition is unique per HTML file. It is redundant to specify a tag name.
CSS: Tabbed Menu (updated)