Xah Web Dev Blog Archive 2014-08

JS: Fade a Element (minor update)

JS: Find Window Size (minor update)

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

JS: Array-Like Object to Array

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)

JS: Random Range Function (updated)

reviving the JavaScript raining hearts β™₯πŸ’•πŸ’“πŸ’”πŸ’–πŸ’—πŸ’˜πŸ’πŸ’žπŸ’ŸπŸ’™πŸ’šπŸ’›πŸ’œ of 1999. JS: Falling Snow Effect

JS: 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. JS: Understand JS Array

JS: 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: Line Wrap Tutorial (updated. With link to spec.)

HTML5 Killed the β€œbig” Tag? (updated)

CSS: Absolute Position (new)

Completely rewrote: CSS Position: static, relative, fixed, absolute. 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: Units

Declaring Character Set in CSS File (updated)

Full Page Screenshot in Browser

JS: Image Rollover (updated)

Xah Web Dev Blog Archive 2014-04

JS: β€œthis” Binding (updated)

HTML5 Video Tutorial (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: Image Sprites Tutorial

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.

Google Plus css sprites
Google Plus CSS sprites

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: Image 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 Triangle and CSS: 2D Transform.

CSS can't really draw. All it can draw is borders and round corners. Transform (rotation, scale, shear, …), 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: Computer 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, Rolling Images (updated)

Firefox memory usage report

in Firefox, type this about:memory in the url field.

for beginner: CSS: Selector Tutorial (updated)

DOM: Basic DOM Methods (updated)

CSS: HSL Color (updated, with a random color generator)

CSS Color Tutorial (updated)

CSS Color Names (updated)

pure CSS: Image Rollover

CSS: Multi-Column Layout for Text Flow

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)

JS: Browser Window Object, Document Object Model

Ask me question on patreon