Issue #30  (stopPropagation(), Testing, Content, JS Utils)


Check out this week's Sponsor:
WAPT Pro WAPT Pro
WAPT is a load and stress testing tool that provides an easy-to-use and cost-effective way to test any web site, including business applications, mobile sites, and web portals. Download a free 30-day trial and test the performance of your website today!

(Skip to the tools section below)

Likely in the past you've used return false to intercept clicks on links, or cancel form submissions. The standard method for achieving this in modern browsers (specifically, since IE9) is preventDefault(), which is now pretty well known.

But it's possible you haven't heard of or used stopPropagation(), which is kind of like the handsome cousin of preventDefault().

In short, stopPropagation() prevents further propagation (or spreading) of the current event. Let's see how it can be used.

If you have a parent box with a smaller box inside of it, you can add a click event handler to the parent box, which will also apply to the child box. But if you use the stopPropagation() method, you can disable the event on the child while letting it remain on the parent:
 
var parent = document.getElementById('parent'),
    child  = document.getElementById('child'),
    op     = document.getElementById('op'),
    op2    = document.getElementById('op2');

parent.addEventListener('click', function () {
  op.innerHTML += '<p>click registered</p>';
}, false);

function stopEvent (e) {
  e.stopPropagation();
  op2.innerHTML += '<p>propagation stopped</p>';
}

child.addEventListener('click', stopEvent, false);

(demo) Here we have a click event on the parent, which will append a message in an output element. We also have a click event on the child element, also with its own message.

When clicking on the child element, the browser would normally also register a click on the parent element. But since clicking the child triggers the stopPropagation() method, the child click doesn't propagate to the parent like it normally would. You can test this by commenting out the last line or by removing the stopPropagation() method. You'll note that I've intentionally used two different output elements just to make it easy to see what's happening for each click event.

If my explanation doesn't suffice, you can read more:
Now on to this week's tools!
 

Testing and Debugging Tools


browser-sync
"Keep multiple browsers & devices in sync when building websites."

Nightwatch.js
"Browser automated testing done easy. Write efficient and straightforward Javascript End-to-End tests in Node.js which run against a Selenium server."

Errator
A Chrome extension that "brings JavaScript errors front and center to your main Chrome toolbar."

Earhorn
"Instruments your JavaScript and shows you a detailed, reversible, line-by-line log of JavaScript execution, sort of like console.log's crazy uncle."

IE NetRenderer
A bit buggy but this free tool "allows you to check how a website is rendered by Internet Explorer 11, 10, 9, 8, 7, 6 or 5.5." It even lets you choose a "vertical offset" so you can see how the page renders below the fold.

Houdini
"Watches you using your site and automatically generates end to end tests that run continuously in the cloud."

Helium
"Allows easier than ever creation of complex web test and automation scripts"

JSONView
A Chrome extension port for the original JSONView for Firefox, which "pretty-prints JSON".

create-error
"A simple utility for creating sub-classed errors in Javascript."

Backbone-Eye
"Firebug Extension to debug Backbone applications."

JSHint for Chrome Dev Tools
This Chrome extension will automatically run JSHint on JavaScript in Chrome's Dev Tools. Uses experimental technologies so you have to install manually.

jQuery Audit
Another Chrome extension, this one "creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects."

 

Document and Content Management Tools


QSlider
"A simple tool to control slideshow on SpeakerDeck, Slideshare, Rabbit and more right on your iPhone, iPod or iPad."

inkpen
A distraction-free writing tool that connects to GitHub Gists and even has some awesome typing sounds (toggle-able of course).

Crowdspell
A script that lets users select a typo on a web page, after which they can "correct" the typo and the site owner gets notified he can fix it.

Decss
"A (mostly) CSS-driven presentation framework."

linkvau.lt
"Easily create secure one-time-use download links." Ideal for e-books sold and intended for a single recipient.

kimono
"Build an API in seconds with kimono to power your apps, models and visualizations with live data without writing any code."

TABLEIZER!
"A quick tool for creating HTML tables out of spreadsheet data." Just paste your spreadsheet cell data and it converts it to HTML. Worked for me in both Excel and Google docs.

Blazon
"The easiest way to create, deliver, maintain, and share beautiful technical presentations."

Telegram Messenger
A free, cloud-based messaging app for iPhone and Android with a focus on security and privacy.
 

JavaScript Utilities and Mini Libraries


Args.js
"Lets you easily create functions with optional parameters, default parameters, parameter groups and named parameters."

highlight.js
A syntax highlighter with support for 71 languages, automatic language detection, available for node.js, and compatible with any JavaScript library.

fit.js
Simply put: fit( theThing, /* into */ theOtherThing );

Tether
"A low-level UI library that can be used to position any element on a page next to any other element."

iScroll
"A high performance, small footprint, dependency free, multi-platform javascript scroller... [that] works on desktop, mobile and smart TV. It has been vigorously optimized for performance and size so to offer the smoothest result on modern and old devices alike."

Schema-Inspector
"A powerful tool to sanitize and validate JS objects. It's designed to work both client-side and server-side and to be scalable with allowing asynchronous and synchronous calls."

WordCount.js
"A client-side JS and Node.js library that counts bytes, words, lines chars, and calculates the longest line of a file using the HTML5 File API."

 

A Tweet for Thought

Two tweets, actually:  

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.

 

Before I Go...

A command-line murder mystery. I haven't tried it yet, but definitely a creative idea.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © 2013 Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp