Web Tools Weekly Issue #81 (HTML Comment Nodes, JS Libs, Mobile)

Issue #81 (HTML Comment Nodes, JS Libs, Mobile)02/05/15

In 3 of the last 4 issues, I've demonstrated 5 different methods that can be used to manipulate text nodes in different ways. Interestingly, every one of these methods can also be used to manipulate the text in comment nodes.

Here's the HTML we'll manipulate:

<body>
  <!-- Comment node: -->
  <!-- Comment node: -->
  <!-- Comment node: -->
  <!-- Comment node: -->
  <!-- Comment node: -->
</body>

Notice there are 5 comment nodes inside the body tag. Let's do a separate manipulation on each comment node.

var db = document.body,
    c1 = db.childNodes[1],
    c2 = db.childNodes[3],
    c3 = db.childNodes[5],
    c4 = db.childNodes[7],
    c5 = db.childNodes[9];

c1.appendData('1 ');
c2.deleteData(1, 13);
c3.insertData(15, 'inserted ');
c4.replaceData(1, 13, 'new text ');
db.innerHTML += c5.substringData(9, 4);

(JS Bin demo)

Clearly this isn't efficient code. It would be better to loop through the elements looking for comment nodes by testing that a given node's nodeType is equal to "8". In this case, I'm just selecting the nodes I know are comment nodes, which is every 2nd node, to account for white space nodes.

Of course, you won't see any of these comments visibly, since comments exist only in the source. But you can view the result of the above actions by inspecting the page with your browser's developer tools or using some other method to view the generated source.

So the HTML from above, after the code is run will look like this:

<body>
  <!-- Comment node: 1 -->
  <!--  -->
  <!-- Comment node: inserted -->
  <!-- new text  -->
  <!-- Comment node: -->
  node
</body>

Check out the archives in case you missed the other issues describing these 5 methods.

Now on to this week's tools!

JavaScript Libraries and Frameworks

JSnoX
"Enjoy React.js, but not a fan of the JSX? JSnoX gives you a concise, expressive way to build ReactElement trees in pure JavaScript. Works with React v0.12 and above."

Suave UI
"Designed for web-applications based on AngularJS." It consists of CSS definitions, directives, and services that help build your UI quickly and efficiently.

VisSense.js
"A utility library for observing visibility changes of DOM elements. Immediately know when an element becomes hidden, partly visible or fully visible."

snabbt.js
Still in early development, a minimalistic and light (<4kb min/gzip) JavaScript animation library.

Libscore
Not a library per se, but a site that contains stats on JavaScript libraries. It scans the top million sites on the web to collect stats on JavaScript library usage.

TouchstoneJS
"React.js powered UI framework for developing beautiful hybrid mobile apps."

DefineJS
"A JavaScript module loader, an implementation of AMD (Asynchronous Module Definition)."

dstore
"Manage client-side data using an elegant, expressive data framework providing consistent APIs and multiple default store types."

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

RWD and Mobile Tools

RICG Responsive Images
A WordPress plugin that brings "automatic default responsive images to WordPress."

ResponsiveSlides.js
"A tiny jQuery plugin that creates a responsive slider using elements inside a container."

parse-srcset
"A JavaScript parser for the HTML5 srcset attribute, based on the WHATWG reference algorithm."

Mobile-Friendly Test
A tool from Google that "will analyze a URL and report if the page has a mobile-friendly design."

Flickity
Touch-friendly, responsive, flickable galleries, carousels, and sliders.

Touchy
"A highly configurable jQuery plugin. It exposes event data (velocity, etc.) for longpress, drag, pinch, rotate and swipe."

Am I Responsive?
A RWD testing tool that also comes as a one-click bookmarklet.

ViziApps
"Online mobile platform that lets you visually design your app’s user experience and use of backend data."

Productivity Tools

ReadApp
Tag, organize, and read new articles from your Chrome bookmarks. Gives you access to all your saved articles on any device.

Seekr
Chrome extension that lets you click a button to see discussions about the current URL from Reddit, Hacker News, Twitter, Facebook, or Google+.

Koala
"A new time tracking system to help developers easily track time spent on different projects—without using a timer."

Thought Plan
"A minimalistic tool for planning projects, organizing your thoughts and storing simple documents."

TeamDoList
"Create your to-do list and share it with anyone. Once you share it, your team can see your updates immediately, in real time."

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

A Tweet for Thought

I'm hoping Luke Wroblewski was just trolling with this tweet comparing e-books to print, but if not, the responses were spot on.

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 have kids, you'll want to check out Piggybank, an app built by two dads that re-imagines the concept of giving out allowance money.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly