What a Tool!

Issue #181  (New Design, NodeValue, JS Libs, Productivity, Multimedia)


There are many ways to read content from elements and nodes. Here's another one that allows you to read and write an individual node's value. It uses the nodeValue property of the Node interface. The nodeValue of an element will always return null, whereas text nodes, CDATA sections, comment nodes, and even attribute nodes will return the text value of the node. To demonstrate its use, I'll use the following HTML:

<body class="home">
  <p>Example. <span>Example paragraph one.</span></p>
  <p>Example paragraph two.</p>
  <p>Example paragraph three.</p>
  <p>Example paragraph four.</p>
  <!-- comment text -->
</body>

Now I'll run the following JavaScript to read/write a few of the nodes:
 
let b = document.body,
    p1 = document.querySelector('p');

// reading node values
console.log(b.nodeValue); // null for all elements
console.log(b.attributes[0].nodeValue); // "home"
console.log(b.childNodes[7].nodeValue); // " comment text "

// changing nodeValue of first node inside first paragraph p1.firstChild.nodeValue = 'inserted text<br>';

View on JS Bin

Notice the second console.log is displaying the text of an attribute node. This would be the equivalent of using getAttribute(), with the difference being that getAttribute() acts on elements, whereas nodeValue can be applied to any type of node.

Also notice that I’m using nodeValue to read the contents of an HTML comment. This is one of many ways you can do this. This would be the equivalent of reading the textContent property or data property of the comment node. As you can see from the final line in that code example, I’m able to define the nodeValue of one of the text nodes, so this isn’t read-only.

A few other things to note regarding defining the nodeValue property: Setting nodeValue will return the value that was set, and you cannot set the nodeValue when the nodeValue is null (unless of course you change it to null, which is the same as an empty string that’s changeable later).

MDN’s article on nodeValue has a chart that lists the different node types and what their nodeValue will return.

Now on to this week's tools!
Did you like this quick tip? There's more where that came from...
NEW E-BOOK! Volume 2 of JavaScript & DOM Tips
(EPUB, MOBI, and PDF)

JavaScript Libraries and Frameworks

peasy-js
A middle tier framework for JavaScript. A middle tier framework is code that facilitates creating business logic in a reusable, extensible, maintainable, and testable manner.

Angular Universal
Server-side Rendering for Angular 2 apps.

NW.js
Previously known as node-webkit. Lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies.

BunnyJS
Lightweight native JavaScript and ES6 library and next generation front-end framework. Package of small stand-alone components without dependencies. Simple like jQuery, better then jQuery UI, powerful like React.

JsonLogic
Build complex rules, serialize them as JSON, share them between front-end and back-end.

PurpleJS
A JavaScript application framework running on the Java Virtual Machine.
Combine the power of Java and your existing investments with the simplicity of JavaScript.

Cerebral
Define the state of your application as a single model: a single state tree. This state tree manages all application state, whether from a server, like a list of users, or client side state, like the currently selected tab of a UI.

Tesseract.js
A pure Javascript port of the popular Tesseract OCR engine.
 

Productivity Tools

Chocolatey
A package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need.

Qlutter
The collaboration tool that helps you plan, measure, and reach your long-term goals one step at a time.

Break
An app to help you to use your computer healthily and productively, by reminding you to take a rest every once and a while, in a simple way.

Shift
Tired of Switching between Gmail Accounts? Shift into higher gear with the email client that makes navigating between Mail, Calendar and Drive accounts fast, easy, and beautiful.

Mindful
Chrome extension. Space for your thoughts, ideas and ongoing tasks. It works where you work. In every new tab.

Timer
Works as a tab or Chrome extension. Timer countdown, alarm clock, or stopwatch. Use any YouTube clip as audio alarm.

Winds
An open-source, machine-learning personalized RSS feed reader.

Did you like this quick tip? There's more where that came from...
NEW E-BOOK! Volume 2 of JavaScript & DOM Tips
(EPUB, MOBI, and PDF)

Multimedia Tools

satyr.io
Dummy image generator for prototyping. Variable width and height, mimic performance delays, RWD support, and more.

Wistia
Professional video hosting with analytics and video marketing tools.

bleach
An awesome HTML image loader inspired by WhatsApp image loader.

Zooming
Pure JavaScript image zoom plugin built with mobile in mind. Smooth animations with intuitive gestures. Zoom into a hi-res image if supplied.
Easy to integrate & customizable.

Koto
A D3.js framework for reusable charts.

code2flow
The simplest way to create flowcharts. Turn your workflows, algorithms and manuals into easy to understand diagrams.

mySpeech
A small JavaScript library for including speech synthesis (artificial speech) in web pages.

A Tweet for Thought

Jesse Skinner with a few interesting thoughts on why there's a lack of innovation from developers.
 

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 could be all too real: Tabs versus Spaces.
 


Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly