Issue #78  (delete/insertData() and Learning Tools)


(Skip to the tools section below)


Last week I discussed the appendData() method for manipulating text nodes, so let's look at two more methods for dealing with text nodes in the DOM: deleteData() and insertData().

Here's the HTML we'll work from:
 
<p>But haven't the sweetest idea <button>DELETE</button></p>
<p>To me buzz is <button>INSERT</button></p>

We'll use the two methods to do two simple things with this HTML: (1) Remove the word "idea" and (2) insert the word "onomatopoeia". Here's the JavaScript:
 
var pars = document.querySelectorAll('p'),
    btns = document.querySelectorAll('button'),
    text;

btns[0].addEventListener('click', function () {
  text = pars[0].firstChild;
  text.deleteData(25, 4);
}, false);

btns[1].addEventListener('click', function () {
  text = pars[1].firstChild;
  text.insertData(14, 'onomatopoeia ');
}, false);

(JS Bin demo)

As with last week's demo, this code on its own is pretty useless, other than to demonstrate how the methods are used.

deleteData() takes two arguments: the starting point of the deletion, and the number of characters to delete. The insertData() method takes the insertion point as the first argument and the content to be inserted as the second.

Things to be aware of:
  • These are text nodes we're manipulating, so anything you "insert" will appear as text. This means if you add HTML to the inserted text, it will be inserted as entities to appear on the page.
  • Arguments that take an index will throw an error if the index doesn't make sense (i.e. "30" in a text node that's only 20 characters long).
  • You'll get unexpected results when dealing with certain funky characters. See this demo for example. If you're up for it, Mathias Bynens explains.
  • Both methods supported in IE9+.

Now on to this week's tools!

 

Interactive Tools and Tutorials


XSS Game
From Google: "In this training program, you will learn to find and exploit XSS bugs. You'll use this knowledge to confuse and infuriate your adversaries by preventing such bugs ... in your applications."

JS Coercion Tool
"This tool will try to show you what happens when JavaScript applies coercion rules for regular equality comparison (==)."

CodeFightClub
"Users can start new code-fights in a huge range of languages and templating syntaxes, as well as comment and vote on code-fights across the site."

Pixactly
"An online tool that tests how well you know your pixels. Draw a box that matches the dimensions given and receive a score based on how close you are."

RGB Challenge
"Try to guess the right color for the RGB code shown."

JavaScript Battle
"JavaScript Battle is a fun and engaging web application intended to make artificial intelligence (AI) design accessible to all."

ngMario
"Learn AngularJS playing Super Mario Brothers."

Sit the Test
"Test your authority on web development skills like HTML, CSS, and JavaScript."

Functional Programming in JavaScript
"An interactive learning course with exercises you fill out right in the browser."

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

Books


Atomic Design
By Brad Frost. "An e-book about crafting effective interface design systems."

Designing for Performance
By Lara Callender Hogan. "Helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical."

JavaScript Application Design
By Nicolas Bevacqua. "Introduces JavaScript developers to techniques that will improve the quality of their software as well as their web development workflow."

Canvassing
By Seth Vincent. "Learn to use JavaScript and the HTML5 canvas tag for games, art and other creative coding."

Ruby on Rails Tutorial
By Michael Hartl. Now in 3rd edition, a book and screencast series to "teach you how to develop and deploy real, industrial-strength web applications "

Sublime Text Power User
By Wes Bos. "Investing in your text editor skill set will not only improve the quality of the code you write and cut down on silly errors, but increase the speed and productivity at which you write it."

The Book of CSS3
By Peter Gasston. 2nd edition. "Distills the dense technical language of the CSS3 specification into plain English and shows you what CSS3 can do now, in all major browsers."

Pro Git
By Scott Chacon and Ben Straub. 2nd Edition. "Now fully updated for Git version 2.0, as well as including an indispensable chapter on GitHub."

The Truth About HTML5
By Luke Stevens. 2nd edition. "For web designers, web developers, and front-end coders who want to get up to speed with the why and why not of HTML5 in 2015."

Third-Party JavaScript
By Ben Vinegar and Anton Kovalyov. "Teaches intermediate JavaScript developers the art of third-party scripting."

Human JavaScript
By Henrik Joreteg. "Build powerfully simple browser apps."

ng-book
By Ari Lerner. "The in-depth, complete, and up-to-date book on Angular. Become an AngularJS expert today."

 

Video Courses


Angular Course
"Learn AngularJS from an ex-Google developer. When you're done, you'll have a full web app built with AngularJS, Firebase, Twilio, and Zapier (over 7 hrs of HD video)."

Your First Meteor Application
"A Complete Video Training Course for the Meteor JavaScript Framework."

Testing and Prototyping JavaScript Apps
"Being a productive front-end web developer can be challenging at times. In this course we will uncover how the front-end can be unit tested, mocked, and rapidly prototyped separate from the back-end."

Discover DevTools
"Explore and master Chrome DevTools."

Frontend Masters
"Expert front-end training. Master building quality web interfaces."

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

A Tweet for Thought

Jake Archibald expresses something I think we can all relate to.

 

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 want to keep up with what Chrome and Internet Explorer are adding in upcoming versions, you can check out Browser Platform Status Tracker.

Thanks to all for subscribing and reading!

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

Email Marketing Powered by MailChimp