Issue #94 (createComment(), JS Libs, Build Tools, Productivity)
The Document interface allows for the creation of all sorts of stuff you might not normally think could be created. And, admittedly, many of them are probably of little use. Nonetheless, one example is the Document.createComment() method. This does exactly what the name says — it creates an HTML comment that you can then insert into the page wherever you want.
Again, I'm not entirely convinced this is of much use, but crazier things have been found to be of value. Here's an example:
var comment = document.createComment('comment text');
console.log(comment.textContent); // produces: "comment text"
(JS Bin demo)
The method itself returns the full comment object that was created, demonstrated in the line that logs it. I'm using the textContent property to display the text I inserted into the comment. I could also check the nodeType, reference its parent node (although that would be null at this point), or do all sorts of other things I could do with any HTML element.
The last line is where I actually add the comment to the page. You can inspect the live DOM in the page in the demo to see the inserted comment. You could use appendChild(), as I did, or maybe insertBefore() or something else. It's just like inserting any other node.
Support for this goes back to IE6, so it's safe to use. There's a little more info on createComment() on the Dottoro reference.
|Did you like this JS/DOM tip? I've collected 70 previous tips into an E-Book:
Now on to this week's tools!
"A cloud gaming framework that eases the creation, publication and monetization of casual games for the new web,"
"A high-performance, 5KB (gzipped) DOM library for modern browsers. Sprint notably shines on bandwidth and resource constrained devices such as phones and tablets."
"A minimal skeleton for building testable React apps using ES6."
"Simple AngularJS Boilerplate to kick start your new project with Sass support and Gulp watch/build tasks."
Deploy, Tasks, Build Tools, etc.
"A super-fast Jekyll framework. Supports live reloading (BrowserSync), Less, HTML minification, inlined stylesheets and more."
"A build tool from Google that builds code quickly and reliably. We use it to build the majority of Google's software, and it's specifically designed to handle our huge source code repositories."
"Monitors gulpfile changes and reloads gulp."
For OSX. "A floating browser window that allows you to watch media while you work. Your content will never fall behind your other windows even as you switch tasks."
Chrome extension that shows summarized versions of long articles.
"A simple little 'app' that enables safe keeping of data/code/html snippets in simple JSON format — you can hook up any system of your choice, or manually edit the JSON."
"Reply to an evening email reminder with what you did that day. The next day, get a digest with what everyone on the team got done."
Dropbox for Gmail
Beta Chrome extension. "Send and preview Dropbox files and links without leaving your Gmail window."
A fast and secure way to start a team video chat, no account required, no plugins needed.
"The easiest way to create reminders. Just email or text Reminder Hero what and when. It'll do the rest."
A Tweet for Thought
Dudley Storey shares an illustration that pretty accurately describes how websites work vs. how websites are built.
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...
Here is a completely ridiculous game called Real or Fake?, based on Product Hunt, where you have to guess if the product or service described is real or fake. Not easy!
Thanks to all for subscribing and reading!