Issue #160 (Node.wholeText, JS Libraries, JS Utilities, Mobile)
Way back in issue #32 I discussed the splitText() and normalize() methods, which can be used to manipulate text nodes. Here's a quick summary: Calling normalize() on an element with multiple child text nodes will "normalize" those text nodes into a single text node, so the node count will be only 1. splitText() on the other hand lets you split a text node at a specified place, to create multiple text nodes.
However, if you want a quick way to treat multiple text nodes like a single text node, simply for the purpose of reading the text content, you can do so using the wholeText property, which is accessed via the text node interface. Below is some commented code, along with a demo so you can see how it works. We'll assume that the main element we're accessing (reference via firstElementChild) is just a simple paragraph of text, with no other HTML inside it:
let b = document.body;
// length of child nodes is "1"
// We split the child text nodes
// Now the length is "2"
// Read the text as a single text node
// It's still 2 nodes
// Then we can normalize as needed
// Back to "1" text node
The comments explain most of what's going on. The lone variable is just a reference to the body element, for brevity, but I could access the text nodes in any number of ways.
You can see the wholeText property used on the fifth line of code (not counting comments). As shown, you need to access it via one of the text nodes. As the spec explains, this property "must return a concatenation of the data of the contiguous Text nodes of the context object, in tree order."
This is similar to what happens when you use the more well-known innerText and textContent properties. The main difference being that this one is accessed on a text node that forms part of the full text (i.e. the "whole text") that you want to access. It should also be noted that wholeText also will preserve white space and only accesses text that is continuous, without any HTML elements interspersed (which of course would create multiple text nodes, separated by elements).
From my research, this lesser-known property is supported in all browsers, including back to IE9, so it seems to be fine to use anywhere.
Now on to this week's tools!
"A library built on top of D3 that is optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive way."
A lightweight (~7kb) Virtual DOM framework built around the concept that any function/object can be a component. Components in Dio share the same APIs as React components with a few additions.
"A next generation client side framework. NX has all the features expected from a modern framework, like data binding and routing."
Angus Croll's "library of dependency-free utilities that do just do one thing."
"The world's first cloud-hosted game development platform. It's a social hub where game developers have a next-generation toolset that focuses on real-time collaboration."
"An isomorphic library for building high-performance user interfaces, which is crucial when targeting mobile devices. Unlike typical virtual DOM libraries ... Inferno uses techniques to separate static and dynamic content."
React Worker Dom
"React is fast, thanks to the VirtualDOM ...Using webworkers to perform the calculations can make React even faster."
"Build regular expressions with natural language."
"A framework-agnostic minimal date picker."
Formats HTML input text content while the user is typing, based on credit card type, country phone patterns, dates, numbers, and more.
"A completely customizable framework for building rich text editors."
An attractive iOS style "switch" component to put in place of an HTML checkbox.
smooth scroll polyfill
"The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling."
"A powerful automated development platform for creating native iOS and Android apps. Build, test, and deploy production quality apps from scratch."
"A free and open-source blueprint to kickstart your mobile product development for Android and iOS, powered by React Native."
"With one line of code, Postlight Mercury readies your publication for Google AMP. Get lightning-fast load times and boosted search results on mobile. And it’s completely free."
A console/inspector tool for debugging on mobile.
Angular Mobile Toolkit
"Makes it easy to build snappy Web apps that load instantly on any device, even without an internet connection."
"Make videos playable inline on the iPhone (prevents automatic fullscreen)."
"Instantly make your desktop / hybrid apps more responsive on touch devices."
A Tweet for Thought
Anselm Hannemann with a thought on mystery icons in your apps.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
This is a really cool Interactive Customer Feedback Form concept by Jamie Coulter.
Thanks to all for subscribing and reading!