Xah's Web Dev Blog

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

Buy Xah JavaScript Tutorial.

HTML5 Video Tutorial (more update)

HTML5 “contenteditable”

In HTML5 any element can be editable.

<div contenteditable="true">yay yay</div>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

JavaScript: Most Frequently Used DOM Methods (major update. Added “hasAttribute”, “removeAttribute”, listing attributes, and much more)

JavaScript: Set a Element's Attribute (minor update)

JavaScript: Get a Element's Attribute Value (minor update)

Web Design: Say No to Grey Text on White Background (repost)

“I have a 20″ screen, but my software forces it to 2″ screen.”. User Interface Design: Peepshow Windows (repost)

computer language char distribution 2015-04-18
Computer Languages Characters Frequency (now you can enter your own source code and get punctuation usage statistics)

SVG Coordinates, Viewport, viewBox (minor improvement)

JavaScript books definitive guide vs good parts
JavaScript Definitive Guide amazon vs JavaScript: the Good Parts amazon 〔photo by J L Hamilton, . Used with permission. Source

JavaScript & Ruby Books by David Flanagan, and the Man-made Complexity in Computer Language

HTML5 Tutorial: figure, figcaption (rewrite)

JavaScript Date Object (new. Tutorial + Complete Reference)

New version of JavaScript tutorial is out. Buy. Thanks. JavaScript Tutorial: Understand JavaScript in Depth.

svg clock
SVG Clock

JavaScript Math Object & Methods (new. complete.)

CSS3 HSL (Hue, Saturation, Lightness) Color Samples (major update)

SVG: Coordinate Transformation (updated with combined transformation)

the controversy of html5 「figcaption」 tag

What's good design? HTML5 has figure and figcaption. By spec, the figcaption must be first or last child of figure element.

〔➤ HTML5 Tutorial: figure, figcaption

now, controversy! see https://www.w3.org/Bugs/Public/show_bug.cgi?id=12835

Google Chrome still doesn't support CSS animation, in the year of our load 2015 CSS: Animation Tutorial

SVG Tutorial: Basic Examples (minor update)

CSS: Understanding CSS Units (major update)

CSS: Text Shadow, Glow/Outline Effects (minor update)

CSS: Tag Matching (Selector) Tutorial. updated, for CSS beginner.

CSS: Round Corners: border-radius (major update)

Urban Legend Debunker Site Snopes Runs Spam Services to Spread Urban Legends?

Cleaned up index page: Xah Web Dev Tutorials

HTML5 Canvas vs SVG (repost)

JavaScript: Array vs NodeList vs HTMLCollection (minor update)

JavaScript: What's the difference between textContent, innerHTML, innerText, nodeValue? (added examples. On its own page.)

JavaScript: Checking, Getting, Setting, Cookies (minor update)

JavaScript: Web Storage Tutorial: localStorage, sessionStorage (minor update)

JavaScript: Add & Remove Event Handler (minor update)

JavaScript+DOM: What Does Live Object Mean? (minor update)

JavaScript: List/Add/Remove Element's Class Attribute (new)

JavaScript: Navigate DOM Tree (major rewrite)

JavaScript: How to Create Tooltip (better JavaScript code)

JavaScript: Format Number

Now, JavaScript tutorial and DOM scripting tutorial have separate index pages.

JavaScript: How to Change Element's Content (updated)

JavaScript: Stopwatch (complete rewrite)

JavaScript: What Are Allowed Characters in Identifiers (Variable & Function Names)? Unicode? (minor update)

JavaScript: How to Remove HTML Element? (added a functional programing technique to eliminate variables.)

JavaScript: Create & Insert HTML Element (minor update)

JavaScript: How to Change CSS (minor update)

JavaScript: Fade a Element (minor update)

JavaScript Tutorial: Clock (minor update)

JavaScript: Pop-up New Window (minor update)

JavaScript: Image Rollover (minor update)

JavaScript: Class Attribute: Determine the Kind of Object (updated)

this showcase all the complexities of JavaScript. JavaScript: How to Convert Array-Like Object to Array? (updated)

JavaScript what's the max array index? 2^32-1 ? wrong❕ JavaScript: Understanding JavaScript Array

JavaScript: The non-standard __proto__ property seems to be in ES6, and is here to stay. Updated: JavaScript: How to Find Object's Prototype/Parent?

Understanding JavaScript Object System (updated)

JavaScript Tutorial: Object Basics (major update)

JavaScript Tutorial by Example (minor update)

JavaScript Tutorial: Array Basics (minor update)

JavaScript Example: map, forEach (minor update)

How to Run JavaScript (new. on its own page)

Douglas Crockford on JavaScript using this 2015-02-05
Douglas Crockford on using JavaScript this.

webm video format is getting popular. HTML5 Video Tutorial (updated)

What Language Does Google Facebook Twitter Paypal Wikipedia … Use? (minor update)

Google Chrome Browser Special URL

Firefox still doesn't support ruby annotation. HTML “ruby” Annotation Example

How to Delete Flash Cookies (minor update)

The Words Synchronous & Asynchronous Should be Ban'd

am going to stop blogging for the next 4 days. Start again on next Monday,

HTML: Allowed Characters in id Attribute (minor update)

HTML Tutorial: Definition List: dl, dt, dd (minor update)

JavaScript: Douglas Crockford the Better Parts: the Bads Parts Reconsidered

What's wrong with Angular.js By Daniel Steigerwald. @ https://medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903

JavaScript Array Speed vs C Array

spambots talking to themselfs

twitter spambots chat 2014-10-16
looks like spam bots mentioning my name are talking to themselfs now, on twitter.

Web Spam, Scam, Blackhat SEO Collection

JavaScript: the Property Named "constructor"

New Trend: favspam on Twitter

Google Chrome to Replace Gtk+ with Its Own Aura

old news from

announcement by Elliot Glaysher at https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/Zpu9801pPRc. Quote:

We aim to launch the Aura graphics stack on Linux in M35. Aura is a cross-platform graphics system, and the Aura frontend will replace the current GTK+ frontend.

discussion on reddit http://www.reddit.com/r/linux/comments/207zr3/google_to_replace_gtk_with_its_own_aura_in_chrome/

Google Chrome to Kill Plugin

netscape back in 1990s created a plugin API architecture, called NPAPI. That's what allows you to have (Macromedia) Flash, Apple's QuickTime (for video), display MathML, use Java applets, and hundreds of others. Now, Google is killing it, and pulling it out of Google Chrome.

This means, no more Java Applets. By the way, the Flash bundled with Google Chrome isn't using NPAPI.

Google cites security reasons for killing NPAPI.

Saying Goodbye to Our Old Friend NPAPI By Google. @ http://blog.chromium.org/2013/09/saying-goodbye-to-our-old-friend-npapi.html

some discussion on chromium-dev here: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/xEbgvWE7wMk

A new version of my JavaScript Tutorial is out. Much update in past month. Buy at By Xah's JavaScript Tutorial. Thanks.

If you already bought before, i'll email you update this weekend.

JavaScript: How to Create Object with Specified Parent? (on its own page)

JavaScript: How to Find Object's Prototype? (on its own page)

What do Microsoft, Apple, Mozilla, say about Dart?

Do Not Use Dart or CoffeeScript

Do not use Dart or CoffeeScript. Just use plain JavaScript. If you must use something fancy, use TypeScript.

Dart is basically JavaScript with Java syntax & semantics. Java is bad. Goole do it because Google can't divorce Java.

CoffeeScript is no good because it's a layer of complexity, with ad-hoc syntax, and benefit isn't big enough. It will never be standard.

TypeScript is acceptable, because it's JavaScript compatible, with benefit of type system (math foundation❕),not hacker whims of idioms & styles & patterns & OOP crud.

Major rewrite of JavaScript basics section. They are separated into their own pages.

How to Write a JQuery Extension/Plugin? (on its own page)

JavaScript: How to Remove HTML Element?

how to get max value of a array? JavaScript: Array How To

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

Google Chrome Browser Special URL

browser extension development explained: Google vs Firefox

for Google Chrome, you go to their tutorial, in 20 min, you know how to write one, how to pack it, and have a good overview of the API. Pure JavaScript HTML CSS.

for Firefox, there are meta-guide old and new on mozilla blogs, then there are 3 frameworks, one requires to download a SDK that runs python that it asks you to run its random bin/activate fk bash script with instruction about how to untar a tarball, and one is “bootstrap” fk, and another is XUL fk, each fk has their own introduction page, with one thousand links & jargons & guides & warnings & preface & idioms guides. In 1 hour, u still dunno a thing about it.

randomize a html list

took me 3 hours to write a trivial 15 lines JavaScript code to randomize a list. See result here. Vocabulary: Words in Olympia Reader (view source to see the code)

i blame the besotted nature of the DOOM. NodeList, HTMLCollection, live vs not live, readable vs not readable, whitespace nodes, … truely hell.

but no, i did not subjugate myself to the lure of jQuery.

implemented Fisher-Yates shuffle. JavaScript: Random Range, Randomize Array

Past Articles by Date

2014-092014-082014-072014-062014-052014-042014-032014-022014-012013-122013-112013-102013-092013-082013-072013-062013-052013-042013-032013-012012-112012-102012-092012-072012-052012-042012-032012-012011-082011-062011-042011-012010-072010-01