Xah Web Dev Blog

JavaScript Object Ontology!

JavaScript es2015 objects ontology
JavaScript Object Ontology!

JavaScript regex is modeled after perl5 by spec, but it doesn't have the decency to name it regex instead of regexp.

video format support

as of 2017-02-22

on Windows
Google ChromeFirefoxedge
mp4yesyesyes
webmyesyesno
on Linux
Google Chrome Firefox
mp4yesyes
webmyesyes

Xah JavaScript in Depth, New Version Out

Buy Xah JavaScript Tutorial

New version is out. Update sent to previous buyers.

If you don't have it, check it out. Link to it, tell friends, buy it. Thanks.

JavaScript: Default Charset/Encoding (new page on its own. updated for ES2015)

JavaScript: Object.prototype.toString (new page)

JavaScript: Determine Type of Object (major rewrite)

JavaScript: Prevent Adding Property (updated for ES2015)

JavaScript: Delete operator (new page, on its own)

JavaScript: Property Descriptor (new page, on its own) And all pages about property are updated for ES2015.

JavaScript: Property Key, updated to ES2015.

JavaScript: Property Overview (in depth). Updated to ES2015.

JavaScript: Access Property, List Properties (updated for ES2015)

Compatible Fonts for Linux and Windows

Font is a major pain.

here's a tip to solve diff font on diff OS problem, if you don't want to use Google web font that require users download.

they have the same metrics.

The Liberation fonts are on Linux. The Arial and stuff are available on Microsoft Windows 10 and Mac.

〔➤see Meaning of Font Size and Em Height

See also: Best Unicode Fonts for Programer

Firefox is sucking major ass in everyway. for some reason, on window 10 intel i5 cpu, it's still installing 32 bits.

node.js bug. Object.setPrototypeOf returns wrong thing

// node.js bug. this should print “Object {}” but prints “Function {}”
var hh = {}; console.log ( Object.setPrototypeOf ( hh, Array ) );

JavaScript: Convert Object to Map Data Type (new)

The Condition of JavaScript Transpilers

condition of javascript transpilers 2017 02 09
The Condition of JavaScript Transpilers 2017-02-09

Xah Edu Corner Extempore! episode № 20170209054751, 〈the Saga of JavaScript “Compilers”, 2017〉

there are many JavaScript compilers, so-called transpilers. They compile latest version of js spec to older version so they run in browser.

so you try TypeScript. But no go, cuz if you use ES2015's Map datatype, it can't compile it to ES5. What's the meaning of compiler then??

so you try babel.js. But it doesn't work if u use ES2015's Map datatype. You need require(), but require() isn't in the spec. What's the meaning of compiler then?

JavaScript transpilers should be called monkey-do-pilers.

following pages all updated. Each methods on its own page.

JavaScript: Map.prototype.forEach (new standalone page.)

JavaScript: Iterate Over Map Object (new standalone page.)

TypeScript doc is pretty simple and short. If you are starting out, i recommend you read all of it in one shot. Save you time puzzling later.

wow, building javascript spec requires installing 111 packages.

build js spec 2017 02 01

JavaScript ECMA2016 is Released in 2016 June

very odd. JavaScript Array.prototype.includes is not in the spec at http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.indexof but is in spec here https://tc39.github.io/ecma262/2016/#sec-array.prototype.includes

oh wow. Found answer. JavaScript Array.prototype.includes is not in ECMA2015 because it is in ECMA2016, and it's already out! ECMA2016 is released in 2016 June.

JavaScript: Array.prototype.find (ES2015) (new in ES2015)

JavaScript: Array.prototype.fill (ES2015) (new in ES2015)

JavaScript: Function.prototype (updated for ES2015)

JavaScript: Array How-To (updated)

JavaScript: Math Object. Updated for ES2015. Added 15 new functions.

Firefox, a Dying Breed

browser stat 2017 01 30
web browser stat 2017-01-30. Firefox, a dying breed.

JavaScript old rant on Socket.IO. Got a comment, looks like nothing changed. probably nobody's using it today. Where is Socket.IO Client Library At?

JavaScript: String is 16 Bits Unit Sequence (expanded)

JavaScript: Check Property Existence (updated for ES2015)

JavaScript Spec, Term “instance” is Not Defined

JavaScript oddity! is length a property of String.prototype?

in JavaScript ES2015 spec, it sometimes distinguish properties of prototype and properties of instance.

For example, for String.prototype, it doesn't list length as one of its property, but it is listed as a property in a separate section of “string instance”.

see ECMAScript 2015 §Text Processing#sec-properties-of-string-instances-length

however, in code, if you list properties of String.prototype, "length" is there.

console.log ( String.prototype.hasOwnProperty ( "length" ) ); // true

console.log ( Reflect.ownKeys ( String.prototype ) );
// has length

what gives?

JavaScript: String Constructor (new page)

new pages.

new pages.

JavaScript: Iterable (new)

JavaScript: Interface (new)

A Brief History of JavaScript By Sebastián Peyrott. @ https://auth0.com/blog/a-brief-history-of-javascript/

JavaScript creator on JavaScript history. 〔Popularity By Brendan Eich. @ https://brendaneich.com/2008/04/popularity/

one of the most annoying thing about css is that there's no way to control size of font across browsers, unless you download web font.

〔➤see Meaning of Font Size and Em Height

JavaScript: Date Object

JavaScript: Date.prototype

the JavaScript date object reference page is now completely rewritten. Updated for ES6.

JavaScript: Date Tutorial

JavaScript: Date() Constructor (new page)

JavaScript Date.parse() (new page)

#JavaScript new Date.prototype properties in es6

removed:

JavaScript: Access Property, List Properties (updated for ES2015)

JavaScript: Object.create (new page)

JavaScript: ES2015 Object Literal Expression Extensions (new page)

JavaScript: Object Literal Expression {…} (new page)

JavaScript: Function Constructor (new page)

#JavaScript quirk of the day. Function.prototype is a function by spec. takes any number of args, returns undefined. others, e.g. Object.prototype, Array.prototype, are not functions.

JavaScript: Function.prototype (new)

JavaScript quiz. what does this return Function.prototype()

million dollar JavaScript quiz. what does this return Function.prototype()

vote at

JavaScript: Object Object (new)

JavaScript: Reflect Object

JavaScript: Getter/Setter Properties (major update)

console.log() not in any standard

the critical function console.log() in browser console doesn't seem to be defined by any standard, but whatwg is taking steps. see

https://console.spec.whatwg.org/

JavaScript: Array Object new.

how to build a local copy of whatwg html spec

finally got a local copy of whatwg html spec working. thx to Anne van Kesteren https://twitter.com/annevk and Ben Schwarz https://twitter.com/benschwarz

here's what you have to do.

  1. clone the git repo at https://github.com/whatwg/html
  2. clone the git repo at https://github.com/whatwg/html-build
  3. follow the instructions at https://github.com/whatwg/html/blob/master/CONTRIBUTING.md . You'll need curl, grep, perl, unzip. You do not need to install the “Whattsi” tool. (the “Whattsi” tool is written in pascal, and requires pascal compiler.)
  4. go to the “html-build” directory, run ./build.sh
  5. It'll ask you for full path of html source to build from. The full path is the git you cloned from https://github.com/whatwg/html. e.g. on my machine it's /home/xah/git/html/
  6. After done, the output is in directory output

After this, technically you are done. You have this directory structure:

build html spec local copy 2016 11 24

The embedded image in the html files are not relative paths. They use a server root path, like this:

<image xlink:href=/images/abstract.jpeg width=326 x=72 y=85 height=177></image>

and other assets:

src: url('/fonts/Essays1743-Italic.ttf');
<script src=link-fixup.js defer=""></script>

So, these asset won't work in your local copy. You need to fix it.

You need to use a good find/replace tool to replace them with ../ prefix, particularly for files in the multipage directory.

(for emacs users, you can use Emacs: xah-find.el, Find Replace in Pure Elisp )

after that, you are done.

however, note that the asset file links still refer to other full URLs, for example:

<script defer="" src=https://resources.whatwg.org/dfn.js>
<link rel=stylesheet href=https://resources.whatwg.org/standard.css>

You'll have to do a search on “http”, and for those CSS or JS etc files, you might download and replace with a local copy.

building whatwg html spec requires pascal compiler!

now in order to build whatwg html spec, you need to install pascal compiler. https://github.com/whatwg/wattsi EXASPERATION. i can never understand

ES2015 removed internal slot [[Class]]

js es5 has internal slot [[Class]]. That's removed in es6. But Object.prototype.toString() behavior is kept. see JavaScript: Determine Type of Object

web development pain, local copy of multi-page html spec

  1. tried to update my local copy of html standard spec. after 2 hours, no luck.
  2. i vaguely recall last year whatwg has download/build-from-git of the multi-page spec https://html.spec.whatwg.org/multipage/ but can't find it now
  3. on whatwg's git https://github.com/whatwg/html , no mention of how to build multi-page at all.
  4. then there's a edition for web devs. great. https://developers.whatwg.org/sections.html#sections but
  5. but web dev's version git https://github.com/benschwarz/developers.whatwg.org build process is idiotic. requiring ruby python mercurial! and gem rake whatnot.
  6. i build it, but partly failed wich mercurial and rake issues. the result html does not have CSS.
  7. digging, possibly even seccussful build does not have CSS, after all.
  8. a web page sans css is basically unreadable today.
  9. digging further, it's not clear the git for web dev version is up to date or still maintained. can't find date info or status.
  10. but that web dev edition is apparently still linked at top of https://whatwg.org/ site. so seems legit, but you never know, cuz open source stuff fail silently.
  11. note that w3c has their own html standard. also web dev edition. they too r complex to find, different sites, wiki, git, w3c etc.
  12. all this poor sob want is a local version of multi-page html spec. with haskell, git, hub, google AI in year of our load 2016, no.
  13. in then end, just use a browser, goto a url, press Ctrl+s to save. that'll be your local version, bad link and all. lol.

whatwg javascript spec doc gone

there used to be a doc 〔 https://javascript.spec.whatwg.org/ 〕 which is whawg's take on js spec problems. available as of 2015-08-24. But now it redirects to https://github.com/tc39/ecma262/labels/web%20reality which is a unreadable github issues on tc39/ecma262.

hates that. It should at least put a note from the original page telling readers that the doc is obsolete. even better is to have the note on top and content still remain for history purposes.

JavaScript: Object.prototype (new page)

starting to rework my js reference section. instead of just list of methods, it should list all standard objects and their properties.

JavaScript: Object Object (new page)

JavaScript: Determine Type of Object (updated for ES6. More work to do.)

JavaScript es6 added Map and Set data structures. But remember, they are still the Object data type. The only added type is Symbol.

JavaScript: introduction to Symbol (ES2015) JavaScript: Symbol Tutorial

JavaScript: ES2015 Object Literal Expression Extensions

JavaScript: the Map Object Tutorial

my js es6 in depth is coming along nicely. JavaScript: the Set Object Tutorial

browser rendering of h1 in nested section

#html h1 tag inside nested <section> gets increasingly small, by browser css. but not h2, h3 etc.

example

nested section h1
nested section h1
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>section {border:solid thin blue; margin:1ex}</style>
    <title>test nested section h1</title>
  </head>
  <body>
    <section>
      <h1>xyz 1</h1>
      <section>
        <h1>xyz 2</h1>
        <section>
          <h1>xyz 3</h1>
          <section>
            <h1>xyz 4</h1>
            <section>
              <h1>xyz 5</h1>
              <section>
                <h1>xyz 6</h1>
                <section>
                  <h1>xyz 7</h1>
                </section>
              </section>
            </section>
          </section>
        </section>
      </section>
    </section>
  </body>
</html>

death of multi-page web design

throughout the 2000s, there's multi-page style web sites. That is, a article is split into 2 or more web pages. You have to click next page to read other parts of the article. That practice is dead today few years ago. End of a era.

JavaScript es2015 is so great. No longer we have to do this abomination just to have local vars (function () { … })()

JavaScript: let Declaration

3 articles to read. probably all excellent.

An incomplete history of language facilities for concurrency By Andy Wingo. @ http://wingolog.org/archives/2016/10/12/an-incomplete-history-of-language-facilities-for-concurrency

A Study on Solving Callbacks with JavaScript Generators By James Long. @ http://jlongster.com/A-Study-on-Solving-Callbacks-with-JavaScript-Generators〕 This article too bleeding edge to be practical for consideration now. rather, just focus on understand es6 “promise” and generators.

Optimization killers By Nick S Plekhanov. @ https://github.com/petkaantonov/bluebird/wiki/Optimization-killers〕 The topic is too esoteric, and generally not needed. when you need to pay attention these things, it means the language have lots problems.

JavaScript: for-of Loop

JavaScript: Arrow Function (new page)

JavaScript: let Declaration (new page)

starting to work on es6 features.

CoffeeScript is no good, because it's a superficial surface syntax, bringing its own problems.

TypeScript is no the answer. It is a superset of js, so doesn't fix the real problem, that is, the bad parts of js.

DartLang isn't the answer. Because it is Java in semantics and syntax. Quite strange beast, and isn't a good lang by itself.

DartLang = dead horse breathing.

The main thing we need to fix is the many js's bad parts. JavaScript: the Bad Parts

JavaScript lib method definition style, in object curly bracket or outside object?

when you write a JavaScript lib, which style do you prefer:

vote at

Result:

js method def style poll google plus js method def style poll twitter
JavaScript method def style poll results.

JavaScript: Browser JS Console Object Syntax Error

Firefox is at 10% of browser market share

pretty sad. today, Firefox is at 10% of browser market share. Muscle man Chrome is 50%. Mozilla could be gone in a flash.

but Firefox quality has gone pretty bad for 5+ years now, for just basic browsing. Slow as hell.

for my website xahlee.info , mostly read by programers, chrome is 62%. Firefox 14%. Safari is 13%. IE 4%, Edge 1%

Meaning of Font Size and Em Height

The State Of JavaScript, 2016

The State Of JavaScript By Sacha Greif. @ http://stateofjs.com/2016/introduction/

A survey, of js compilers, langs, frameworks, etc.

there's a new js framework, vue.js. New js framework just keeps popping up. Amazing.

JavaScript quiz: will this work x[f](a)[g](b)

don't just guess. try it.

var s = 0;

var x = {

    f : function (a) {
        s += a
        return x
    },

    g : function (a) {
        s += a
        return x
    }
}

x["f"](4)

console.log(s)

////////////////////////////////////////////////////////////////
var f = 'param_f';
var g = 'param_g';
var a = 'Hello,';
var b = 'World!';
var x = {
    param_f: function(param_a){
        return {
            param_g: function(param_b){
                console.log(param_a + ' ' + param_b);
            }
        }
    }
};

x[f](a)[g](b);

HTML: Allowed Characters in id Attribute (updated)

in HTML5 the id attribute string can be any char except space. e.g. it can start by digit, or #, or ♥

HTML XML Entities (old page, new url)

Xah JavaScript tutorial, 2016-07 update

New version is out.

Buy Xah JavaScript Tutorial

Lots things has been updated. Several page have been re-written from scratch.

Most of the DOM scripting tutorial are re-written. And am working on more complete tutorial of DOM scripting.

Also working on ES6 features.

If you bought it already, you'll receive update.

if you don't have it it, give it a shot! Thanks.

The Sad State of Web Development

You see the Node.js philosophy is to take the worst fucking language ever designed and put it on the server.

The Sad State of Web Development By Drew Hamlett. @ https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f

history of CSS: The Languages Which Almost Became CSS

The Languages Which Almost Became CSS By Zack Bloom. @ https://eager.io/blog/the-languages-which-almost-were-css/

Xah Web Dev Blog Archive Index

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.