|
|
|
|
Issue #152 (Node.isSameNode(), JS Utils, JS Libs, Uncats)06/16/16
Here's yet another little-known DOM method that I just stumbled across: The Node.isSameNode() method. You might recall way back in Issue #64 I discussed a similar method: Node.isEqualNode(). This one is very similar except it will only check to see if two references point to the exact same node, rather than checking general equality.
Let's assume our HTML looks like this:
|
<body id="myBody">
<div class="module"></div>
<div class="module"></div>
</body>
|
All we have here is a body element along with two identical .module elements, though they are different elements. Let's do some checks with isSameNode() and isEqualNode():
|
let myBody = document.getElementById('myBody'),
otherBody = document.body,
moduleOne = document.querySelectorAll('.module')[0],
moduleTwo = document.querySelectorAll('.module')[1];
// using isSameNode
console.log(myBody.isSameNode(otherBody)); // true
console.log(moduleOne.isSameNode(moduleTwo)); // false
// using isEqualNode
console.log(myBody.isEqualNode(otherBody)); // true
console.log(moduleOne.isEqualNode(moduleTwo)); // true
|
View on JS Bin
As you can see, I've grabbed the body element two different ways, so I have two references to it. That's the first comparison, which logs true using isSameNode(). But when I compare the two div modules, I get false, because they're not the same node.
On the other hand, when using isEqualNode(), both comparisons log true, because they're equal (i.e. same attributes and same content, which is no content), even though they're not the same node.
It turns out, all major desktop browsers support this but Firefox removed support for it about 5 years ago and they've maintained that status, even though it is part of the DOM spec. Their reasoning for removal seems pretty sound though; it's basically the same as doing a == check. So while this might be a nice-to-know sort of feature, you'd probably just be better off doing a simple == comparison instead, especially in light of lack of Firefox support.
Now on to this week's tools!
JavaScript Utilities and Mini Libraries
Push.js
"A compact, cross-browser solution for using the JavaScript Notifications API."
Trial.js
A simple library that allows you to monitor mouse position and predict user actions and input.
Stop.js
Promise-based setTimeout and setImmediate for modern browsers and Node.
bwip-js
A barcode writer in JavaScript, based on a similar tool written in PostScript.
reuse-promise
"Reuse the same promise that's returned from a function until it's resolved."
Promise Runner
"A simple promise maker which creates promises out of normal functions when you need asynchronous run of the functions."
kewler
"A simple functional and immutable color manipulation library."
unwinder
"An implementation of continuations in JavaScript. Includes built-in support for breakpoints (implemented with continuations) and setting breakpoints on running scripts."
fnlux
"The functional Redux-like flux alternative for complex reusable components."
JavaScript Libraries and Frameworks
Horizon
"A realtime, open-source backend for JavaScript apps. Rapidly build and deploy web or mobile apps using a simple JavaScript API."
jQuery
The world's most popular library is now at version 3.x and includes a "slim" build that excludes Ajax and effects.
D3.js
"A JavaScript library for manipulating documents based on data."
Ceilfire
"An online game maker for creating HTML5 games and sharing game assets. Make, play and share games directly in your browser. No programming skills required."
JavaPoly.js
"A library that polyfills native JVM support in the browser. It allows you to import your existing Java code, and invoke the code directly from JavaScript."
Algebrite
"A JavaScript library for symbolic mathematics (actually, mostly CoffeeScript resulting in JavaScript) keeping the code as simple as possible in order to be comprehensible and easily extensible."
DoneJS
"An open source JavaScript framework that makes it easy to build high performance, real-time web and mobile applications."
QICI Engine
"Efficient web-based tool for creating HTML5 games."
frpjs
"Functional reactive programming library for JavaScript."
XRegExp
Now at v3.x. "Provides augmented (and extensible) JavaScript regular expressions. You get new modern syntax and flags beyond what browsers support natively."
The Uncategorizables
Layup
"Web design in the hand of the designer. Create any kind of web publication, with one tool. Ready to be published."
Adobe CC Scripts Panel
"Panel for playing around with scripts in After Effects, Illustrator, and Photoshop. Easily load local & remote script files."
Certbot
"Automatically enable HTTPS on your website with EFF's Certbot, deploying Let's Encrypt certificates."
waybackpack
"Download the entire Wayback Machine archive for a given URL."
HelpSite.io
"Create an awesome support center. Generate a beautiful FAQ & help site in minutes."
AdLush
"One click ad generator. With AdLush you can create beautiful ads for free in just a few clicks. No Photoshop or technical skills required."
Cocycles
"Search for open source code simply, easily and effectively. Find functions, classes, libraries and more written in the most popular open source repositories."
PageSpeed Module
"The PageSpeed modules are open-source server modules that optimize your site automatically."
CodeGophers
"Your personal army of programmers. Email us a programming task and we'll finish it in 48 hours."
Devbridge Styleguide
"Helps you create, share, and automate a living visual style library of your brand."
Huula
"Easy interactive website tours."
A Tweet for Thought
Here's a throwback from Anil Dash: A floppy disk he got that contained a font for Prince's symbol-name thing.
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...
Universal.css is a humorous take on the recent interest in Atomic CSS.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
