Web Tools Weekly
What a Tool!

Issue #287  (adoptNode(), React, JSON/Data, Mobile)01/17/19

I've previously discussed DOM features that are specifically designed for dealing with cross-frame JavaScript, where you're accessing another page's DOM.

Another one that I recently came across is the document.adoptNode() method that allows you to move elements from an iframe to the parent of that iframe, or vice versa.

For full details, you can check out my article:

The article includes a couple of demos that demonstrate how to use this cross-browser feature with some possible use cases.

Now on to this week's tools!

Buy my brand new JS/DOM e-book in EPUB, PDF, MOBI format!

JS & DOM Tips Volume 3 >

Includes 54 tips plus 3 long-form articles/guides
JavaScript E-Books

React Tools

React Redux
Official React bindings for Redux, now at version 6+ (details).

Beautiful and accessible drag and drop for lists with React, now at version 10+ (details).

React Countdown Clock
HTML5 canvas countdown clock as a React component.

A simple React component capable of building HTML forms out of a JSON schema and using Bootstrap semantics by default.

InfiniteLoader component inspired by react-virtualized but for use with react-window.

React component to save data to localStorage during the render phase safely.

Use Hooks
A collection of reusable React Hooks.

A modern, flat, UI library built for React that has first-class support for ES6/JSX and works effortlessly with SSR.

Reactions Component
Declarative version of React.Component. Because sometimes you want a lifecycle or some state but don't want to create a new component.

React Motions
Compose React animations using higher-order functions or components.

Wes Bos is Having a NEW YEAR Sale on all Courses:

JSON, GraphQL, Databases, etc.

An open source GraphQL server that allows you to turn websites into GraphQL APIs.

POST data points to the cloud and then GET them back in JSON format. Store thousands of data points for free.

A TypeScript to GraphQL conversion tool without losing type information. Better TypeScript + GraphQL experience.

JSON Generator
Online JSON generation tool to generate random data with the power of agile templates with the option to save the data to their servers for later use.

GraphQL Editor
Visual GraphQL editor. Makes understanding GraphQL schema a lot easier. Plan by linking visual blocks and the editor will transform them into code.

Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language.

Simple document database made for infinitely scalable globally distributed reads.

An online version of GraphiQL. Manage headers easily. Test your GraphQL servers.

GraphQL Modules
A toolset of libraries and guidelines dedicated to create reusable, maintainable, testable and extendable modules out of your GraphQL server.

A tiny localStorage and sessionStorage helper library.

A relentless key-value store for the browser.

Turbocharged JSON.parse for type stable JSON data.

Recommended Reading for Developers
Vue.js in Action   Get Programming with JavaScript Next   Progressive Web Apps
Have you written a book for developers that's available on Amazon? Reply to this email and let me know. I'll consider including it here. No charge.

Mobile Tools and React Native

A JavaScript editor for your phone, in JavaScript.

A beautifully designed, open source React Native framework for building Android and iOS apps.

Portable and lightweight cross platform application development framework with advantages over other similar frameworks.

An elegant, interactive and flexible charting library for mobile.

React Native Spotlight Input
Simple drop-in replacement for React Native `TextInput` that makes devs happy.

Simple, lightweight, and blazing fast React Native tooltip.

RN Material Kit
A set of UI components that introduce Material Design for apps built with React Native.

Allows you to scroll a React Native View into the visible screen via a port of the DOM's scrollIntoView() method.

JavaScript library for handling Force Touch, 3D Touch, and Pointer Pressure on the web, bundled in one library with a simple API.

A simple declarative API for React Native animations, using hooks.

A Tweet for Thought

This might be a good guide for your inbox. Or maybe not.

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...

The Plain Contract is an easy to customize freelance contract template, written in plain language.

Thanks to all for subscribing and reading!

Keep tooling,