|
|
|
|
Issue #160 (Node.wholeText, JS Libs, JS Utils, Mobile)08/11/16
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"
console.log(b.firstElementChild.childNodes.length);
// We split the child text nodes
b.firstElementChild.firstChild.splitText(15);
// Now the length is "2"
console.log(b.firstElementChild.childNodes.length);
// Read the text as a single text node
console.log(b.firstElementChild.childNodes[0].wholeText);
// It's still 2 nodes
console.log(b.firstElementChild.childNodes.length);
// Then we can normalize as needed
b.firstElementChild.normalize();
// Back to "1" text node
console.log(b.firstElementChild.childNodes.length);
|
Demo
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!
JavaScript Libraries and Frameworks
MetricsGraphics.js
"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."
Dio
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.
NX
"A next generation client side framework. NX has all the features expected from a modern framework, like data binding and routing."
Aurelia
Now at version 1.x. "A JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity."
Just
Angus Croll's "library of dependency-free utilities that do just do one thing."
PlayCanvas
"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."
Monkberry
"Blazingly fast, small 1kb and simple JavaScript library for building web user interfaces."
Anime
"A flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects."
Inferno
"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."
JS++
"A programming language for high-quality web and mobile development. It extends JavaScript with classes, modules, type checking, and more."
JavaScript Utilities and Mini Libraries
React Worker Dom
"React is fast, thanks to the VirtualDOM ...Using webworkers to perform the calculations can make React even faster."
RE-Build
"Build regular expressions with natural language."
Uppy
"A JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations."
allora
"Promisify everything in less than ~50 lines. It can be used to use promises on any JavaScript object."
DPicker
"A framework-agnostic minimal date picker."
Cleave.js
Formats HTML input text content while the user is typing, based on credit card type, country phone patterns, dates, numbers, and more.
Slate
"A completely customizable framework for building rich text editors."
Algolia Places
"Provides a fast, distributed and easy way to use address search autocomplete JavaScript library on your website. It has been designed to improve the user experience of your HTML forms."
Switch
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."
Mobile Tools
imperio
"JavaScript library that enables developers to build web applications that harness the power of mobile devices communicating sensor and gesture data to other devices in real-time."
Dropsource
"A powerful automated development platform for creating native iOS and Android apps. Build, test, and deploy production quality apps from scratch."
ZingTouch
"A modern JavaScript touch gesture library. Allows developers to configure pre-existing gestures and even create their own using ZingTouch's life cycle."
NativeBase
"Native Environment to build Native Apps. Get truly native look and feel with platform specific design for Android and iOS over the same JavaScript code-base using NativeBase."
Pepperoni
"A free and open-source blueprint to kickstart your mobile product development for Android and iOS, powered by React Native."
Postlight Mercury
"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."
Eruda
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."
iphone-inline-video
"Make videos playable inline on the iPhone (prevents automatic fullscreen)."
React Fastclick
"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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
