Web Tools Weekly Issue #80 (replace/substringData(), GitHub Tools, jQuery Plugins)

Issue #80 (replace/substringData(), GitHub Tools, jQuery Plugins)01/29/15

In recent weeks I've shown you some different methods to manipulate text nodes. Let's look at two more. They are the replaceData() and substringData() methods. As the names suggest, the replaceData() method replaces a portion of the text node, and the the substringData() method returns it.

Here's the HTML we'll use:

<p>Yes we have no bananas <button>DELETE</button></p>
<p>To be or not <button>INSERT</button></p>

And here's the JavaScript with our two new methods:

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

btns[0].addEventListener('click', function () {
  text = pars[0].firstChild;
  text.replaceData(15, 7, 'papayas ');
}, false);

btns[1].addEventListener('click', function () {
  text = pars[1].firstChild;
  text.insertData(13, text.substringData(0, 6));
}, false);

(JS Bin demo)

When the first button is clicked, we "replace" a portion of the data in the targeted text node using replaceData(), which takes three arguments: the start point of the text you want to replace, the number of characters to replace, and the data to insert in its place.

The substringData() method is used in this example along with the insertData() method, which I introduced in a previous issue. The substringData() method takes two arguments: the start and end points of the data we want to extract from the text node. Then we use insertData() to insert the substring into the same text node where we took the substring from. So in this case, the text "To be or not" becomes "To be or not To be".

If that's confusing, just fiddle around with the demo. You probably noticed that these DOM methods that manipulate text nodes are very similar to some string methods in JavaScript.

Now on to this week's tools!

Git, GitHub, and CLI Tools

StarHub
"Fast access to your GitHub favorites." Just enter any user name and it will list that account's starred repos in a "cards" layout.

Gitcussion
Reviews of GitHub repositories.

Octohub
For OSX 10.10 Yosemite, offering Beta invites. "The missing app for GitHub. Add tags for repositories, make lists of developers, manage/filter activities and much more."

Github Matches Highlighter
A userscript that will highlight all matches of the clicked on word in the GitHub code viewer.

gitfs
"Version controlled file system. Users can now benefit from using a version-controlled environment without having to learn anything new."

Mixed Content Scan
A CLI Script that crawls and scans HTTPS-enabled websites for mixed content.

slacker-cli
"Send messages to Slack from command line."

jsadd
"Easily add old-style browser JavaScript libraries to your small projects."

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

Hosting, Static Sites, etc.

Serum
"A simple extension to make link-blogging to a GitHub-hosted Jekyll blog easy."

Deploy4Me
"A new way to get a fully customized server environment in a few clicks."

Superstatic
"An enhanced static web server that was built to power Divshot. It has fantastic support for HTML5 pushState applications as well as clean URLs and other goodies."

Aerobatic
"Single page app hosting, built for front-end devs. The best place to deploy AngularJS, Ember, and Backbone apps."

coisas
"A pure-JavaScript CMS for multipurpose websites in GitHub Pages."

websrvr
"Manage your websites from your Desktop/Tablet/Mobile using Dropbox."

Webhook
"Provides static site reliability with a cutting edge, real-time CMS that builds itself."

jQuery Plugins

Froala Editor
"A beautiful jQuery WYSIWYG HTML text editor. High performance and modern design make it easy to use for developers and loved by users."

Pushy
"A responsive off-canvas navigation menu using CSS transforms and transitions."

pagePiling.js
"Pile your sections one over another and access them scrolling or by URL."

Wholly
"Used to select the entire table row and column in response to mouseenter and mouseleave events."

Simple.Timer
"A countdown timer plugin."

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

A Tweet for Thought

Remember the "best viewed in IE" and like warnings from 15 years ago? As Brad Frost points out, they're back.

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

Google has begun a project called The Physical Web, described as "an effort to extend the core superpower of the web – the URL – to everyday physical objects."

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly