|
|
|
|
Issue #171 (Range API, JS Libs, Data, Testing)10/27/16
The DOM spec describes something called "DOM Ranges", also referred to as the Range API, which allows you to select and manipulate chunks of data inside the DOM tree. Generally speaking, you can do this sort of thing with more commonly known DOM methods but this API gives you some very specific features to make this somewhat easier.
The spec uses an example similar to what I'll show you here. Let's say we have the following HTML:
|
<p>
<img src="cat.jpg" alt="Cat"><br />
Cats don't ride scooters. <em>But they do sit on them</em>.
</p>
|
We'll then run the following JavaScript (assuming no white space between elements in the above HTML):
|
let range = document.createRange(),
btn = document.querySelector('button'),
p = document.querySelector('p'),
em = document.querySelector('em'),
start = p.childNodes[2],
end = em.firstChild;
range.setStart(start, 0);
range.setEnd(end, 4);
range.extractContents();
|
After setting up the range container using the createRange() method, the key lines here are the final three where I'm using other methods of the Range API, namely setStart(), setEnd(), and extractContents().
Using the start/end offsets I've defined which part of the document I want to set as my range, then I extract that portion from the page. In this case I've extracted the text "Cats don't ride scooters. " Upon extraction, the range gets placed into a DocumentFragment, from which I can deal with it accordingly. You can see how the range can extract text that is intermixed with elements.
In this JS Bin I'm using a click event on a button to do the extraction, that way you can see exactly what happens on the page. I'm also logging the document fragment so you can examine it to see what exactly gets extracted.
For more info see Ranges in the DOM spec or Range on MDN. Basic browser support goes back to IE9, but some features are not available in all browsers. Seems pretty safe to use, however, if you're just doing some basic stuff.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
JavaScript Libraries and Frameworks
react-game-kit
"Component library for making games with React & React Native."
Cx
"Framework for data-oriented applications based on React."
regl
"A new functional abstraction for WebGL. Using regl is easier than writing raw WebGL code because you don't need to manage state or binding."
Angular
In case you missed it, the popular JavaScript framework by Google is now at version 2.x.
WhitestormJS
Framework for developing 3D web apps. Made by people who want to create awesome browser games.
Obey
"A library for creating asynchronous data models and rules. The core goal of the project is to provide methods for managing data models both through synchronous and asynchronous validation and alignment using Promises."
pluggable.js
"Lets you make your JS code pluggable while still keeping sensitive objects and data private through closures."
Databases, Content, etc.
graph.cool
Hosted GraphQL backend for your React/Relay apps.
JSON Pretty Print
Web or CLI tool to format JSON data with optional color themes and amount of indentation.
dummi
"The smart way to generate random data for your projects."
Fractal
"A tool to help you build & document web component libraries, and then integrate them into your web projects."
Docparser
"Does your business receive valuable data as PDF documents instead of structured data? Docparser helps you liberate your data, parsing that information to where you need it, and automate your business processes."
Tile38
"An open source (MIT licensed), in-memory geolocation data store, spatial index, and realtime geofence."
jsPDF.
"HTML5 client-side solution for generating PDFs. Perfect for event tickets, reports, certificates, you name it."
Mr. Data Converter
"I will convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML."
Testing and Debugging Tools
TestCafe
"Automated browser testing for the modern web development stack."
SpeedTracker
"Runs on top of WebPageTest and makes periodic performance tests on your website and shows a visualisation of how the various performance metrics evolve over time."
Notification Logger
"Ever wondered why you have to open the console every time you want to want to log a variable? Notification Logger helps provide desktop notification for your console messages."
structure.exposed
"View a website’s skeleton by resetting all styling to browser default."
GeoScreenshot
"Test your website from multiple GeoIP locations worldwide."
Landmarks
"Allows you to navigate a web page via WAI-ARIA landmarks, using the keyboard or a pop-up menu."
A Tweet for Thought
This proposal, apparently from 2008, recently made the rounds on Twitter. So glad it didn't happen.
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...
If you're a playing cards collector, you might want to check out The Design Deck.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
