Issue #152 (Node.isSameNode(), JS Utils, JS Libs, Uncats)
(Skip to the tools section below)
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:
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'),
moduleTwo = document.querySelectorAll('.module');
// 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!
A simple library that allows you to monitor mouse position and predict user actions and input.
Promise-based setTimeout and setImmediate for modern browsers and Node.
"Reuse the same promise that's returned from a function until it's resolved."
"A simple promise maker which creates promises out of normal functions when you need asynchronous run of the functions."
"A simple functional and immutable color manipulation library."
"The functional Redux-like flux alternative for complex reusable components."
The world's most popular library is now at version 3.x and includes a "slim" build that excludes Ajax and effects.
"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."
"Efficient web-based tool for creating HTML5 games."
"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."
"Automatically enable HTTPS on your website with EFF's Certbot, deploying Let's Encrypt certificates."
"Download the entire Wayback Machine archive for a given URL."
"Create an awesome support center. Generate a beautiful FAQ & help site in minutes."
"One click ad generator. With AdLush you can create beautiful ads for free in just a few clicks. No Photoshop or technical skills required."
"Search for open source code simply, easily and effectively. Find functions, classes, libraries and more written in the most popular open source repositories."
"The PageSpeed modules are open-source server modules that optimize your site automatically."
"Your personal army of programmers. Email us a programming task and we'll finish it in 48 hours."
"Helps you create, share, and automate a living visual style library of your brand."
"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!