Xah Web Dev Blog Archive 2016-11

Date Object

Date.prototype

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

Date Tutorial

Date Constructor (new page)

Date.parse (new page)

Access Property (updated for ES2015)

Object.create (new page)

ES2015 Object Literal Expression Extensions (new page)

Object Literal Expression (new page)

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.

Function.prototype (new)

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

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

vote at

• https://twitter.com/xah_lee/status/806299247549124608
• https://plus.google.com/+XahLee/posts/UNDbPLGChwh

Object Object (new)

Reflect

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/

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

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 ES2015. But Object.prototype.toString() behavior is kept. see 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 [2016-11-23 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.

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.

Object Object (new page)

Determine Type of Object (updated for ES2015. More work to do.)

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

JS: introduction to Symbol (JS2015) Symbol Tutorial

ES2015 Object Literal Expression Extensions

the Map Object Tutorial

my js ES2015 in depth is coming along nicely. 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

<!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 () {body})()

let Declaration

3 articles to read. probably all excellent.

[A Study on Solving Callbacks with JavaScript Generators 2013-06-05 By James Long. At http://jlongster.com/A-Study-on-Solving-Callbacks-with-JavaScript-Generators , accessed on 2016-11-05 ] This article too bleeding edge to be practical for consideration now. rather, just focus on understand ES2015 “promise” and generators.

[Optimization killers 2016-09-18 By Nick S Plekhanov. At [ https://github.com/petkaantonov/bluebird/wiki/Optimization-killers ] , accessed on 2016-11-05 ] The topic is too esoteric, and generally not needed. when you need to pay attention these things, it means the language have lots problems.

for-of Loop

Arrow Function (new page)

let Declaration (new page)

starting to work on ES2015 features.