|
|
|
|
Issue #94 (createComment(), JS Libs, Build Tools, Productivity)05/07/15
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"
document.body.appendChild(comment);
|
(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:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Now on to this week's tools!
JavaScript Libraries and Frameworks
WiMi5
"A cloud gaming framework that eases the creation, publication and monetization of casual games for the new web,"
Svidget.js
"A JavaScript framework for creating immersive and fully interactive SVG widgets."
Sprint.js
"A high-performance, 5KB (gzipped) DOM library for modern browsers. Sprint notably shines on bandwidth and resource constrained devices such as phones and tablets."
Babylon.js
"A complete JavaScript framework for building 3D games with HTML 5 and WebGL."
rot.js
A set of JavaScript libraries for "ROgue-like" development, with prototype enhancements, pathfinding, turn scheduling, Canvas-based ASCII display, and more.
Brisket
From Bloomberg, "a framework for building single page web apps using isomorphic JavaScript."
Essential React
"A minimal skeleton for building testable React apps using ES6."
T3
"A client-side JavaScript framework for building large-scale web applications. Its design is based on the principles of Scalable JavaScript Application Architecture."
skit
"A pure JavaScript frontend for building better web clients. Featuring nearly 100% shared server and client-side code, zero configuration, automatic static resource bundling, and built-in server-side rendering."
Globalize
"A JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data."
AngularJS-Boilerplate
"Simple AngularJS Boilerplate to kick start your new project with Sass support and Gulp watch/build tasks."
Vectorious
"A generalized n-dimensional matrix and vector library written in JavaScript, which can be used both in node.js and the browser."
Deploy, Tasks, Build Tools, etc.
webpack
"A bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."
Almace Scaffolding
"A super-fast Jekyll framework. Supports live reloading (BrowserSync), Less, HTML minification, inlined stylesheets and more."
Bazel
"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."
Shipit
"Universal automation and deployment tool written in JavaScript."
cult
"Monitors gulpfile changes and reloads gulp."
GhostRunner
"JavaScript task runner... that when installed on a server allows the web based management of JavaScript files."
Code Beautify
A slew of online tools to beautify, validate, minify, and convert JavaScript, HTML, JSON, CSV, and lots more.
Productivity Tools
Helium
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."
TLDR
Chrome extension that shows summarized versions of long articles.
simpulsnip
"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."
iDoneThis
"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."
JumpChat
A fast and secure way to start a team video chat, no account required, no plugins needed.
Reminder Hero
"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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
