Xah Web Dev Blog Archive 2018-02

String.prototype.split (major rewrite)

Reflect.get (updated)

Function Parameters

Create Object with Parent X (updated)

js quiz. Get max boundary in a plane

JavaScript quiz. You have const tt = [[t1,[x1,y1]],[t2,[x2,y2]],...]; write a function, that returns [min x, max x, min y, max y].

String.prototype.replace (updated)

Map Constructor (new standalone page)

the Map Object Tutorial

Convert Object to/from Map 🚀 (updated)

Array.prototype.copyWithin (updated)

google is introducing new search console, retiring the old. (that is, you can put a google search box on your site for searching your site) But now, no thanks.

RegExp Tutorial (updated)

Understand JavaScript Class Like a Mathematician (updated)

Show Prototype Chain (new)

Array Constructor (updated)

to read today

https://github.com/google/incremental-dom/

http://exploringjs.com/es6/ch_symbols.html#_examples-of-name-clashes-in-javascripts-standard-library

Replace All Children, createDocumentFragment (repost)

Chrome 68 will mark all HTTP sites as “not secure”

Chrome 68 will mark all HTTP sites as “not secure” https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html

google chrome marking http insecure means, info will be more centralized to big mainstream sites only. if google did this 10 years ago, we might think it's trying to do good. Today, it's more like tighten the noose on info control.

Prototype and Inheritance (updated)

JavaScript: insertAdjacentElement

Browser Window Object (updated)

JavaScript: DOM Scripting Tutorial (major reorganization of topics)

Buy JavaScript in Depth

Get my JavaScript In Depth book. The best JavaScript book + reference that exists. Free update for 2 years.

JavaScript tutorial today.

every time you try functional programing in JavaScript, you run into a problem.

JavaScript is truly a abomination.

( true ? (let t = 3) : 4 );
(function (exports, require, module, __filename, __dirname) { !( true ? (let t = 3) : 4 );
                                                                             ^
SyntaxError: Unexpected identifier
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

These pages are updated.

updated.

Canvas vs SVG (major update, with identical examples in each.)

JavaScript: List/Add/Remove Class Attribute (update)

js update today

JavaScript in Depth Updates Today, Navigating DOM and Add/Remove Event Handler

HTML: Custom Tag (Custom Element)

History of Angular.js

How Modern JavaScript Framework Do DOM?

can any explain to me how modern javascript framework do dom?

I'd appreciate very much if any could explain, SPECIFIC to my question.

here's my question.

first here's a bit my background. I know js the language, and the dom methods well. But i do not know any framework such as backbone angular ember react vue etc. I do not know any of those. And it is

HOW THEY DO THINGS OF WHAT DOM METHODS DO

, is the thing am interested learning.

so, as far as i know, the situation is this:

normally, with dom methods, to insert a element for example, one write

const ff = ((event) => {
     const newNode = document.createElement("p");
     newNode.appendChild(document.createTextNode("hi"));
     event.target. insertAdjacentElement("afterend", newNode);
    });

document.getElementById("id59131").addEventListener ("click", ff);

as you can see, those methods calls are not readable.

Another approach, much easier to read, is innerHTML

const ff = ((event) => {
     event.target . innerHTML = "<p>hi</p>";
    });

document.getElementById("id66669").addEventListener ("click", ff );

but innerHTML can't solve all the problem. example: can't use it to appendChild without overwriting other child of a html element.

so, am interested how modern framework does this. From the little i've read, i don't see them having corresponding method names. They kept talking model/view stuff... so in my effort so far, i did not understand what's going on or what they are talking about, because my mindset is still looking for their corresponding function to insert/add/change each html element/attribute.

i do understand about how any change to the page's rendering is expensive. So, even with plain dom call, we have document.createDocumentFragment(). We create a html and attach to this fragment node first, then, in one shot, we replace the dom element on the page with the “fragment”. So, 1 shot rendering change.

but again, that's just dom stuff. The modern framework probably use this too, but still, what i don't understand is some basic idea what they are doing?

any ideas about my question? Thanks.

a question i posted to reddit https://www.reddit.com/r/Xah/comments/7sle75/how_modern_javascript_framework_do_dom/

answer there please. thanks.


a friend David Capello on twitter answered my question.

here's the url https://twitter.com/davidcapello/status/956131233255346177

here's his answer.

I don't know the details of each framework, but I guess they work in a similar way to this:

  • 1 you have a “model” (a simple JS object or array w/data)
  • 2 you have a template (some text w/a special format similar to html w/tags to refer to the “model” data fields)
  • 3 there must be some code in the framework to convert that special template (a chunk of text) + the “model” data into actual HTML using document.createElement() calls etc.
  • 4 must be a way to update the HTML when the model is modified (this can be automatically like in angular)

Array.prototype.fill (better examples from yesterday. Refresh browser)

[how browsers work By Tali Garsiel. At http://taligarsiel.com/Projects/howbrowserswork1.htm ]

saw that some 5 years ago. Only today am reading it. Rather disappointed on how beginner it is. Perhaps due to i've studied parser since, and lots similar articles during.

See also: How Compiler Works

it is truly a crime, that WHATWG killed xml and promoted the wildly complex and growing complex html5

most useful array methods

updated today.

JavaScript typed functional programing languages

of these, i think purescript will not go anywhere. elm is questionable due to new. reasonml of ocaml and facebook is probably the winner long term.

added the following:

to the svg tutorial panel at Practical SVG Tutorial

JavaScript in Depth, update today. Style guide and function bind method.

JavaScript in Depth update today.

plain JavaScript

thinking of starting a subreddit of plainjs. javascript/DOM tips/tricks/news without any lib.

vote here https://twitter.com/xah_lee/status/953791637741748224

JavaScript in Depth update today. Understand Set.

xah reddit channel

been posting to my reddit r/Xah. see https://www.reddit.com/r/Xah/

just trying it out. If you are reddit user, find my post on reddit as convenient, vote up my posts. If i don't see much user, i'll stop doing it.

also, since i have blogs on emacs, JavaScript, programing, and other topics, do let me know what you want to see, so i can shape up what kinda things i post there.

js update today.

today's JavaScript In Depth update.

CSS there's still no simple way to create list with hanging indent.

updated.

JavaScript in Depth update today: JSON

Those stringify and parse methods i still need to work on, on optional args.

the JSON[Symbol.toStringTag] is interesting one, new in ES2015. To understand it fully, see Determine Type of Object

new JavaScript insight. Do not use .every() or .some() for the purpose of loop with break, just cuz you like functional programing. In js, every and some semantics is loop anyway. But the syntax makes it 10 times harder to read.

all updated or rewritten.

JavaScript semicolon war again

semicolon war all over again. See @BrendanEich has to say. But Douglas Crockford will probably disagree.

context https://twitter.com/BrendanEich/status/951554266535141377

what i want is the property that newline is equivalent to 1 space, STRICTLY, so auto formatting is possible. So, am for ;. but in practice, ; is a pain in editing code cuz UNAVOIDABLE mix of OOP/FP styles. So am undecided. js is truly an abomination u've done! 😁

to which BrendanEich replied: why thank you!

see https://twitter.com/xah_lee/status/951677715840512000

lol.

if you don't know semicolon issue, see Semicolon Rules

updated

updates

JavaScript in Depth updates

ask Xah, 2018-01-07

https://www.patreon.com/posts/16282546

js update today.

JavaScript in Depth Updates Today.

updated or new pages for today.

how soon would you have difficulty reading your own code?

js update today.

JavaScript update today.

today's JavaScript updates.

JavaScript es2015 tutorial updates

worked 10 hours on my tutorial JavaScript in Depth

here's 6 new or updated pages:

  1. Object.prototype.__proto__
  2. Get/Set Prototype
  3. “in” Operator
  4. Spread Operator
  5. Iterator
  6. Array.prototype.entries

Patreon me. https://www.patreon.com/xahlee Thank you.