Web Tools Weekly Issue #77 (appendData(), Testing, Productivity, Deployment)

Issue #77 (appendData(), Testing, Productivity, Deployment)01/08/15

The appendData() method is one of many lesser-known features for manipulating text nodes in the DOM. There are many alternatives to this method (for example, simply using += along with innerHTML will often do what you want), but appendData() deals strictly with text content in the DOM node specified.

For example, say we have the following HTML:

<p>Example text #1 <button>ONE</button></p>
<p>Example text #2 <button>TWO</button></p>

Here we have two paragraphs, each with a text node, then a button element. We'll attach click events to each of the buttons to "append" text content using appendData():

var pars = document.querySelectorAll('p'),
    btns = document.querySelectorAll('button'),
    text;

btns[0].addEventListener('click', function () {
  text = pars[0].firstChild;
  text.appendData('TEXT ONE ADDED ');
}, false);

btns[1].addEventListener('click', function () {
  text = pars[1].firstChild;
  text.appendData('TEXT TWO ADDED ');
}, false);

(JS Bin demo)

Note here that for each button click, we first store the text by accessing the text node using firstChild. The first child of each paragraph is the text. In a real application, you might have to first test to see if the first child is in fact text.

Also, if you keep clicking the buttons, the text will continue to be added. Clearly, this example isn't extremely practical, but you can probably imagine how this might work in a more realistic example. But this should suffice to demonstrate this simple method. Note also that if you add text after the button, then this will constitute a separate text node altogether, so the text appended will always be before the button.

Support for this method is IE9+ so it's pretty safe to use in many projects.

Now on to this week's tools!

Testing and Debugging Tools

UX Check
"Chrome Extension that helps you identify usability issues through a heuristic evaluation."

Monitority
A free website uptime monitoring service that can send you a tweet, SMS, or email when your site is down.

Chrome Devtools Code Snippets
Code snippets for running in Chrome's dev tools for performing various testing and debugging tasks.

Nightmare
"A high level wrapper for PhantomJS that lets you automate browser tasks"

Slowy
Mac OSX app that's a "real-world connection simulator and bandwidth limiter." Unfortunately, it won't ever compatible with OSX 10.10 Yosemite, because of a new system limitation.

JsAutoTesting
"Allows you to create automated crawling tests to see if your site is reachable and working properly."

grunt-photobox
Grunt plugin for creating website screenshots at different sizes for comparing and ensuring your layout is not broken.

Support Web Tools Weekly: 384 pages of CSS for $7

Productivity Tools

Tab Snooze
"Lets you put off tabs until later and returns them to your browser automatically, so you can focus on what's important now."

PolyBrowser
A new browser that attempts to improve the browsing experience with panoramic navigation, zooming, and the ability to resize windows, which are essentially "stitched" together in a sort of endless canvas view.

copy-code
A Firefox add-on that lets you copy and paste code blocks without having to select the text.

Markticle
Chrome extension that lets you mark your reading progress in articles, so you can continue where you left off later. You can also add notes and tags for filtering.

Dashlane password manager
"The password manager, perfected."

uBar
"The Dock replacement for Mac."

hn_collapse
"Chrome extension to collapse comments on Hacker News."

Cyph
Web-based, privacy-oriented chat app with military-grade encryption and authenticated messaging. Works on desktop, tablet, and mobile.

Support Web Tools Weekly: 384 pages of CSS for $7

Deployment Tools, etc.

dev-tools
"A Docker container with common tools for web development."

Stout
"A reliable static website deploy tool."

Springloops™
Lightning-fast deployment, version control with Git and Subversion, collaboration features, and more.

Este
"Robust and comfortable dev stack for isomorphic web apps. Mobile first, offline first, frontend first."

Bowery
"Set up your development environment in 30 seconds flat."

A Tweet for Thought

James Halliday tweets a link that apparently will always point directly to the latest stable version of Chrome.

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...

In this Hacker News thread developers share their experiences building and maintaining "profitable little free web tools". Might provide some inspiration to create something that might bring in a little passive income.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly