Issue #296 (Node.isConnected, Text Editors, JSON/DB, Uncats)03/21/19
The Node interface has another somewhat obscure property that you might find useful in specific circumstances: Node.isConnected. This is a read-only property that returns a Boolean indicating whether the specified node is connected to the context object or not.
In most (if not all?) cases the context object will be Document in a regular DOM example, or the ShadowRoot if dealing with a shadow DOM.
A simple standard DOM example is where an element has been created but not yet inserted into the document:
let myNode = document.createElement('div');
console.log(myNode.isConnected); // false
console.log(myNode.isConnected); // true
Try it on CodePen
As you can see, you don't have to pass in a context object; the context object is assumed. In this instance, it's the Document object, since I'm in the standard DOM. If I created an element to insert into a shadow root, I'd have the same result (i.e. the isConnected property would return false until I appended the node).
Now on to this week's tools!
Text Editors and IDEs
Percy: Automated Visual UI Testing
Replace time-consuming manual QA to catch visual UI bugs automatically. Percy’s all-in-one visual testing platform makes it easy to review visual UI changes across browsers and responsive widths. sponsored via Syndicate
VSCode React Factor
VSCode extension that provides refactor code actions for React developers. Recompose your overgrown JSX without worrying about the given data.
Like CodePen and JS Bin, but works offline.
Helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
Online snippet generator for VSCode, Sublime Text, and Atom.
A code editor that lives in a space between an IDE and a power editor such as Emacs or Vim. It targets maximum ease of customization, extension, and cross platform reliability.
Browser Preview for VS Code
VSCode extension that gives you a real browser preview inside your editor that you can debug.
A Vim color scheme based on GitHub's syntax highlighting as of 2018.
Package that gives Sublime Text 3 rich editing features for programming languages with Language Server Protocol support.
Docker Support for VSCode. Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
JSON, Databases, etc.
Declarative JSON-to-JSON mapper. Parses a mapping file and produces a JSON output from the input data to match the output definition.
A minimal, extensible and promise based filesystem layer for modern browsers.
A fast, easy-to-use Mac database management application for working with MySQL databases.
Extracts the bits that humans care about from any URL you give it. That includes article content, titles, authors, published dates, excerpts, lead images, and more.
Easily insert valid Schema.org JSON Linked Data using the custom `JsonLd` React component.
A serverless, distributed, peer-to-peer database. Uses IPFS as its data storage and IPFS Pubsub to automatically sync databases with peers.
A command line interface for SQLite with auto-completion and syntax highlighting.
Recommended Reading for Developers
A simple self-hosted server for sending and receiving messages.
Online tool to decrypt and encrypt files. Using AES-Encryption and a .cryption file format, your data is encrypted and decrypted securely in your browser.
Presentations as code. Author cool slide decks, text-only, offline-ready, collaborative.
A utility web app that generates pivot tables and charts from CSV files and Excel spreadsheets.
A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
App that lets you collect ideas and feedback from your customers and prioritize your roadmap. Clients like the ideas so you can see which features the majority of them want.
Make your Google Fonts render faster
Online tool that generates some code to improve the performance of your Google fonts.
Countdown timer as a service. Embed an animated GIF or SVG that displays a countdown using a custom IMG/EMBED src.
Reliable analytics for cross-platform consumer products.
A fast, privacy-focused commenting platform.
A Tweet for Thought
An accurate description of the software development process.
Send Me Your Tools!
Made something? Send links via Direct Message on 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 like making paper airplanes, you'll love Fold 'N Fly, which is basically a database or directory of paper plane designs and how to make them.
Thanks to all for subscribing and reading!