Xah's Web Dev Blog

Tutorial on {HTML, CSS, JavaScript, …} + gossip on {Google, Internet, SEO, Spam, …}.

Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

Firefox now supports MP3 in HTML5 audio. Now, the MP3 & AAC are the formats supported in all major browsers. Test here: HTML5 Audio Tag Tutorial

massive number of Java applets were killed in the past few years due to global warming created by Apple.

HTML 5: no need for “type="text/css"” attribute in “style” element

when using the “style” tag in HTML page, you can omit the type="text/css" part. Just write <style>…</style>.

#twitter won't display a page unless you have cookies on #howthingsare

Just discovered. if you disable Flash, Facebook's video will cease to work. Good. How to Disable JavaScript, Flash, Java in Google Chrome, Firefox, Internet Explorer, Opera

disable Flash in Google Chrome. How to Disable JavaScript, Flash, Java in Google Chrome, Firefox, Internet Explorer, Opera

remember, today there are super cookies and undying cookis. Even if you have cookies turned off, there are a million ways to track you. The next step is to disable JavaScript. But also, Adobe Flash has similar power to JavaScript. You want to disable that.

also note, incognito mode only doesn'the log your browse history on your local machine, that's all. It doesn't prevent your internet service provider or company from knowing which sites you visit.

if you want true anonymous browsing, use tor browser. Download at https://www.torproject.org/projects/torbrowser.html.en

JavaScript x.y.z Associativity. Right or Left?

online movie sales trend 2013
online movie sales trend 2013. 〔image source http://online.wsj.com/news/articles/SB10001424052702304887104579306440621142958

Xah's Web Dev Blog Archive 2014-07

a long long time ago, when you visit some sites, it'll do popup windows. When you close it, it'll popup 2 more… JavaScript: Open URL 「window.open(…)」

The Unfortunate Fate of Music MIDI File (on its own page)

ancient technology: HTML: Auto Refresh, Auto Redirect

Google #Chrome today has the worst Unicode support. Math Font, Unicode, Gothic Letters, Double Struck, ℤ ℚ ℝ ℂ ℍ ℜ ℑ ⅇ ⅈ#comment-1573915239

JavaScript+DOM: What Does Live Object Mean?

HTML Table vs CSS layout myth

two golden articles:

The Tableless Table By Armin Wagnere. @ http://www.arminbwagner.com/text/the_tableless_table/

In defence of layout tables By Barry Pearson. @ http://www.barrypearson.co.uk/articles/layout_tables/defence.htm

CSS Layout & Layers (minor update)

JavaScript: Fade a Element (minor update)

JavaScript: How to Find Screen/Window/Viewport Width (minor update)

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

JavaScript: How to Convert 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 Tutorial (major update)

Javascript Random Number: Random Range, Random Integer, Random Element (updated)

reviving the JavaScript raining hearts ♥💕💓💔💖💗💘💝💞💟💙💚💛💜 of 1999. JavaScript: Raining Hearts

JavaScript: What's 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. @ https://developer.yahoo.com/blogs/ydn/many-users-javascript-disabled-14121.html

Posted by mistake yesterday, but now the first traft is complete. JavaScript: Understanding JavaScript Array

JavaScript: Defining Function with Optional Parameters/Arguments (updated)

Google Chrome now supports CSS 2D Transform. That leaves Safari the only one not supporting it. CSS 2D Transform Tutorial

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 Positioning (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: Understanding CSS Units

Declaring Character Set in CSS File (updated)

Take Screenshot in Firefox sans Plugin

to take a screenshot in Firefox, press 【⇧ Shift+F2】, then type screenshot filename. The file is saved in your download folder.

thanks to Manuel Strehl

JavaScript: Image Rollover (updated)

Xah's Web Dev Blog Archive 2014-04

JavaScript: What's the value of 「this」 Keyword? (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 @ 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, Base64 Encoding

another method is to use CSS 3's 2d transform and various techniques to actually “draw” the icons. for example, see CSS Triangle, CSS Shapes and CSS 2D Transform Tutorial.

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 Xah 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 Format (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: Tag Matching (Selector) Tutorial (updated)

JavaScript: Most Frequently Used DOM Methods (updated)

CSS3 HSL (Hue, Saturation, Lightness) Color Samples (updated, with a random color generator)

CSS Color Values (updated)

CSS Color Names (updated)

pure CSS: Image Rollover

CSS: multi-column (newspaper) Layout

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 Tutorial (updated)

JavaScript: Browser's Window Object, What's Browser Object Model (BOM), Document Object Model (DOM)

Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

Past Articles by Date