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 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)

• JS: Class

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)

JS: insertAdjacentElement

Browser Window Object (updated)

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

• JS: Get Element's Attribute Value
• JS: Set Element's Attribute Value

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

• JS: Create and Insert HTML Element
• JavaScript/DOM: Remove an Element
• DOM: textContent, innerHTML, innerText, nodeValue

These pages are updated.

• JS: Get Element by ID, Name, Class etc
• String.prototype.codePointAt

updated.

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

JS: List, Add, Remove Class Attribute (update)

js update today

• Understand JS Array
• Sparse Array

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

• JS: Get Element Parent, Child, Sibling
• JS: Add, Remove Event Handler

• Array.prototype.slice
• Array.prototype.splice

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://x.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 2011-08-05 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

• Array.prototype.pop
• Array.prototype.push
• Array.prototype.shift
• Array.prototype.unshift
• Array.prototype.splice

updated today.

JavaScript typed functional programing languages

• reasonml https://reasonml.github.io/
• purescript http://www.purescript.org/
• elm http://elm-lang.org/

• REASON is basically OCAML in JavaScript syntax.
• PureScript is based on haskell, with haskell-like syntax.
• elm is its own new lang.

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:

• Canvas vs SVG
• Learn Canvas in 10 Minutes
• Canvas Tutorial: Halma Board Game
• HTML Canvas Demo: Raycaster

to the svg tutorial panel at Practical SVG Tutorial

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

• Xah JavaScript Style Guide for Functional Programers
• Function.prototype.bind

JavaScript in Depth update today.

• Number.parseInt
• Map Object

plain JavaScript

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

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

JavaScript in Depth update today. Understand Set.

• the Set Object Tutorial
• Set Object
• Set.prototype.keys
• Set.prototype.entries
• Set.prototype[Symbol.toStringTag]

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.

• DOM: NodeList vs HTMLCollection
• DOM: Live Object

today's JavaScript In Depth update.

• Map.prototype
• Map.prototype.entries
• JS: Map.prototype[Symbol.toStringTag]

• Jargon Polyfill

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

• How to Use Browser Console
• x.y.z Associativity, Right or Left?

updated.

JavaScript in Depth update today: JSON

• JSON
• JSON.stringify
• JSON.parse
• JSON[Symbol.toStringTag]

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.

• Array.prototype.every
• Array.prototype.some

• JS: Property Key "prototype"
• JS: Function.prototype

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://x.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://x.com/xah_lee/status/951677715840512000

lol.

if you don't know semicolon issue, see

• JS: Semicolon
• JavaScript Semicolon war

• Function.prototype.constructor
• Set.prototype
• Set.prototype.values

• RegExp Object
• Regex Functions

updated

updates

• JS: Array-Like Object to Array
• JS: Object Literal Expression
• JS: Get Set Property

JavaScript in Depth updates

• Function Call, Apply, Bind
• Number Constructor
• JS: Get Element Parent, Child, Sibling

ask Xah, 2018-01-07

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

js update today.

• the Global Object
• Unicode Escape Sequence
• Character, Code Unit, Codepoint

JavaScript in Depth Updates Today.

• JS: appendChild (Append Element as Child)
• Reflect.deleteProperty
• Functional Programing

updated or new pages for today.

• Array.from
• Array.prototype.keys
• Array.prototype.values

how soon would you have difficulty reading your own code?

• lisp → 5 years
• python → 5 years
• java → 5 years
• JavaScript → 1 month

js update today.

• Add Method to Prototype
• Property Key "constructor"
• JS: Insert After an Element

JavaScript update today.

• encodeURIComponent
• RegExp Constructor
• Check Property Existence

today's JavaScript updates.

• String.prototype.search
• String.prototype.match
• RegExp.prototype.exec

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.