Web Tools Weekly
What a Tool!

Issue #183  (innerHTML problem, Mobile, JS Utils, Productivity)01/19/17

An Extendable, Adaptable, Open-sourced Platform to Sell Anything
WooCommerce lets you create a storefront on WordPress in minutes, and it's totally free. Get 30% off extensions until the end of January.
Find out more here!
Web Tools Weekly

At the top of the MDN article for the innerHTML property, you'll find a note that indicates what happens when you use innerHTML to grab the content of an element that contains HTML entities like > or &. This is particularly noteworthy when those entities are not escaped.

For example, let's consider the following HTML:

<p>> format C & celebrate</p>

Notice inside the paragraph there's a greater-than symbol (&gt;), used here to indicate a mock command prompt. There's also an ampersand character (&amp;). Neither of these is using its HTML entity equivalent, so they're a bit risky to use in this way. However, due to HTML parsing rules, they will still appear correctly on the page.

If I grab the content of the paragraph element using innerHTML then insert it into another element using the textContent property, this is what will appear on the page:
&gt; format C &amp; celebrate

This is probably not what I want. To get around this, I would want to avoid using innerHTML, if possible. Instead, I can use textContent, which would display the paragraph of text in the way I want it to appear, like this:
> format C & celebrate

You can see the difference in this JS Bin demo where I'm displaying the contents of the paragraph inside three output elements. The first uses innerHTML to grab the paragraph content and the second uses textContent.

The third example uses innerHTML to grab the paragraph content but it also uses innerHTML instead of textContent to display it inside the new element. This works as desired. It will depend on what you're trying to do in any particular case, but it's good to keep in mind the differences.

Of course, if there were other HTML elements inside the paragraph, then using textContent may not be the right solution, because the HTML wouldn't be preserved. In that case, I'd probably have to grab all the nodes in the paragraph individually and only use textContent on the text nodes.

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

RWD and Mobile Tools

The responsive form builder. Pick your responsive framework, select and add form fields to your custom form template,  then download your form code ready for your website.

Online virtual device lab for testing responsive designs.

A QR code scanner component for React Native built on top of react-native-camera.

Responsive Boilerplate
An older project that I recently came across. Includes a simple grid system, PSD file, and Sublime Text snippets.

Mobile UI Components, based on Vue.js and ionic CSS.

Mobile forms reimagined. Create simple and intuitive conversational chatbots.

Realm Mobile Platform
A flexible platform for creating offline-first, reactive mobile apps effortlessly.

A small, dependency free library crafted to power your web app's pull to refresh feature. No markup needed and highly customizable.

JavaScript Utilities and Modules

Zero-overhead markdown in your React components.

A lightweight (only 1kb gzipped) carousel plugin with no dependencies and no styling.

Easily add drag-and-drop sorting to your data tables without jQuery.

A JavaScript implementation of Python's range() function.

A data layer for JavaScript applications. Allows you to organize a simple interface to asynchronous APIs.

Allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events.

a JavaScript library for manipulating strings. Offers helpful functions to make string manipulations comfortable.

An efficient cross platform serialization library for multiple languages including JavaScript and PHP. It was originally created at Google for game development and other performance-critical applications.

A library for predicting what element a user will interact with next.

Dependency-free library for lazy loading iframes.

Productivity Tools

Curate, organize & share content in one place. Skore uses knowledge flow optimization to connect people to content that matters.

Organizes all links shared on Slack so you can focus on enjoying them.

A modern browser without tabs. Designed to be fast, efficient, and uncluttered. It has the most compact interface of any web browsers.

System Monitor
Browser extension to monitor CPU and memory status in Chrome and Opera.

Chrome extension that expands short URLs so you can see where they lead.

My Hours
Free time tracking tool for your projects and tasks. Start or stop timer with a single click, switch timings between tasks in seconds or pause for a coffee break.

Delayed Gratification
Every time you tab into a time-eating website, this Chrome extension gives you 15 seconds to make sure you actually wanted to do that.

Flexible full text browsing history search in Chrome. Press f, then space or tab, in the omnibar to start searching your previously visited websites.

Chrome extension. Free screen, voice and webcam recording service that lets anyone create, send, and track video.

A GUI tool that helps you manage long-running processes in macOS, so you don't have to maintain multiple windows/tabs/tmux sessions in your Terminal.

A Tweet for Thought

David Newbury shares a map of the internet from May 1973. Yep, it fits on a single piece of paper.

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

Front-end Curated is a list of lists, so to speak. That is, curated tools and resources for designers and front-end developers.

Thanks to all for subscribing and reading!

Keep tooling,