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
document.body.appendChild(myNode);
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.
NS:IDE
A JavaScript IDE for accessing a phone/tablet's native runtime via NativeScript bindings.
CodePan
Like CodePen and JS Bin, but works offline.
EditorConfig
Helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
snippet generator
Online snippet generator for VSCode, Sublime Text, and Atom.
4coder
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.
vim-colors-github
A Vim color scheme based on GitHub's syntax highlighting as of 2018.
LSP
Package that gives Sublime Text 3 rich editing features for programming languages with Language Server Protocol support.
VSCode Docker
Docker Support for VSCode. Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
|
JSON, Databases, etc.
json-ditto
Declarative JSON-to-JSON mapper. Parses a mapping file and produces a JSON output from the input data to match the output definition.
SimpleFS
A minimal, extensible and promise based filesystem layer for modern browsers.
Sequel Pro
A fast, easy-to-use Mac database management application for working with MySQL databases.
Mercury Parser
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.
react-schemaorg
Easily insert valid Schema.org JSON Linked Data using the custom `JsonLd` React component.
OrbitDB
A serverless, distributed, peer-to-peer database. Uses IPFS as its data storage and IPFS Pubsub to automatically sync databases with peers.
AlaSQL
JavaScript SQL database for browser and Node. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.
LiteCLI
A command line interface for SQLite with auto-completion and syntax highlighting.
Storex
A modular and portable database abstraction ecosystem for JavaScript. A minimal storage layer as a foundation for easing common problems around storing and moving data around.
|
|
Recommended Reading for Developers
|
The Uncategorizables
Gotify
A simple self-hosted server for sending and receiving messages.
Cryption
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.
MarkDeck
Presentations as code. Author cool slide decks, text-only, offline-ready, collaborative.
PivotHelper
A utility web app that generates pivot tables and charts from CSV files and Excel spreadsheets.
NestJS
A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
Hey, Listen!
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.
time.plus
Countdown timer as a service. Embed an animated GIF or SVG that displays a countdown using a custom IMG/EMBED src.
SCRIPT-8
A fantasy computer for making, sharing, and playing tiny JavaScript-based retro-looking games (called cassettes).
Avo
Reliable analytics for cross-platform consumer products.
Commento
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
