psychology dector

Three years ago, there was a lot of excitement surrounding Web Components: everybody talked about them, the frameworks Ember and Angular planned to integrate them or even be based on them, etc. By now, that excitement seems to have died down. This blog post examines what happened to Web Components. Spoiler: they are alive and well and slowly being adopted across browsers. Refresher: Web Components Web Components are a suite of specifications that help with implementing custom HTML elements: Custom elements: an API for registering your own implementations for HTML elements. Shadow DOM: Encapsulates and hides the innards of a custom element inside a nested document. The most important part of Web Components and hardest to polyfill. Templates: enable you to store HTML data inside an HTML document. The content of a <template> element is parsed without interpreting it (no loading of images etc.). HTML Imports: let you import other HTML documents into the current one. That way, HTML d...

This blog post shows how you can use a tagged template to log variables more efficiently. In order to understand it, you should be familiar with ECMAScript 6 template literals and tagged templates. For an introduction, consult chapter “ Template literals and tagged templates ” of “Exploring ES6”. The problem: redundancy If you want to log both name and value of a variable in a traditional manner, there is redundancy: let tmp = 123; console.log('tmp='+tmp); // Output: // tmp=123 Even a template literal doesn’t help: console.log(`tmp=${tmp}`); The solution: a tagged template The solution is to implement a custom tag function called vars . A template tagged with that function eliminates the redundancy: console.log(vars`${{tmp}}`); The object literal {tmp} inside the substitution ${} is an abbreviation for (a so-called “ property value shorthand ”): {tmp: tmp} Accordingly, the tag function vars expects its substitutions to be objects: function var...

A recent trend in the web development world is to use JavaScript on the server to assemble pages there, with the same code that is used to manage them in the client. That lets you initially see content faster, especially on mobile devices and helps with search engines. How are we supposed to call code that runs on either server or client? Michael Jackson doesn’t like a recent proposal : So Charlie Robbins suggested that the term “Isomorphic JavaScript” might be used to describe JavaScript code that “can execute both on the client and the server”. And nobody knew what the hell it meant, but now instead of just writing JavaScript the people were writing Isomorphic JavaScript. Michael proposes the term “Universal JavaScript”. In a comment to his blog post, Matti Schneider defends “Isomorphic JavaScript”: No. “Isomorphic”, in terms of topology, describes the relationship between a transformation applied to an element in one set, and another transformation applied to another element in ano...

This blog post describes five little known facts about ECMAScript 5 (ES5) object literals: ECMAScript 5 has getters and setters Trailing commas are legal You often don’t have to quote property keys You can use reserved words as unquoted property keys Using objects as dictionaries is surprisingly tricky ECMAScript 5 has getters and setters ECMAScript 5 supports getters and setters. You can create them either via property descriptors or via object literals: var obj = { get foo() { return Math.random(); }, set foo(value) { console.log('SET foo = '+value); }, }; Let’s use obj in a REPL: > obj.foo 0.6029663002118468 > obj.foo 0.99780507478863 > obj.foo = 123; SET foo = 123 Trailing commas are legal Starting with ES5, it is legal to put a comma after the last property. That helps whenever you want to rearrange properties, especially if there is one property per line: var translation...

When you have key-value data whose keys you don’t know in advance, it’s generally better to store it in an ES6 Map than in an object. But how do you convert Maps to and from JSON? This blog post tells you. Background knowledge: More information on ES6 Maps: chapter “ Maps and Sets ” in “Exploring ES6”. More information on JSON: chapter “ JSON ” in “Speaking JavaScript”. Arbitrary Maps as JSON via Arrays of pairs If a Map contains arbitrary (JSON-compatible) data, we can convert it to JSON by encoding it as an Array of key-value pairs (2-element Arrays). Converting a Map to and from an Array of pairs The spread operator lets you convert a Map to an Array of pairs: > let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']); > [...myMap] [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ] The Map constructor lets you convert an Array of pairs to a Map: > new Map([[true, 7], [{foo: 3}, ['abc']]]) Map {true => 7, Object {foo: 3} => ['...

Unless you are the late John Leonard , the symphony-of-words book reviewer whose essays and reviews on culture and the life of the mind appeared in literally every major publication in the universe, your collection of reviews assembled in a book will probably gather dust in the remainder bin.   (To find such a bin, you would first need to find a bricks and mortar book store).   Thankfully, critic, novelist, translator and essayist Tim Parks opted to address a particular theme in his latest book, Where I’m Reading From:   The Changing World of Books (The New York Review of Books, 2015) rather than collect his voluminous, challenging, thoughtful reviews from the pages of the NYRB .   And the tome could not have arrived at a better time, seeing that a number of articles have appeared in a variety of publications recently bemoaning the loss of interest in long form journalism and essays.   Everything now must be boiled down to a Twitter post—as few characters as ...

I have written about , and always been a fan of, Joseph Mitchell of The New Yorker .   Now a new book takes a real character from Mitchell’s writing and develops a fictionalized life for her.   That character is Mazie Phillips, chief proprietress of the Venice movie theater in the Bowery in lower Manhattan and the novel is called Saint Mazie (Grand Central Publishing, 2015) by Jami Attenberg.   Mitchell is known for often bending the rules of nonfiction:   compositing characters, condensing time lines, and even injecting a fictionalized version of himself into his work.   However, Mazie Phillips was real, and she is an intriguing and complex character both in Mitchell’s work and in the novel. First, some true-to-life Mazie is in order.   Mitchell calls her “A bossy, yellow-haired blonde” in his piece published on the pages of the magazine in 1940.   She fled her hometown of Boston and the difficult life she had there accompanied by one sister to go...

This blog post helps you to get started with ECMAScript 6 (ES6): It explains how you can interactively try out ES6. It lists ES6 features that are easy to adopt, along with how those features are coded in ES5. Trying out ECMAScript 6 There are three simple ways to play with ES6: Web browser: use the online Babel REPL , an interactive playground that compiles ES6 to ES5. There is nothing to install with this option. Command line: use babel-node , a version of the Node.js executable that understands ES6 (and internally compiles it to ES5). It can be installed via npm. Various JavaScript engines: check the ES6 compatibility table by kangax to find out which ES6 features are supported natively where. More details on options 1 and 2 are given next. The Babel REPL The Babel REPL has four major sections: The top left pane contains the ES6 source code. The bottom left pane shows syntax errors discovered in the ES6 code. The top right pane contains the ES5 code that the ES6 code is compiled...