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:

• Using the adoptNode() Method with Embedded iframes

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!

React Tools

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

react-beautiful-dnd
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.

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

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

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

Use Hooks
A collection of reusable React Hooks.

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

JSON, GraphQL, Databases, etc.

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

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

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

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

NearDB
Simple document database made for infinitely scalable globally distributed reads.

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

Bin
A tiny localStorage and sessionStorage helper library.

ImmortalDB
A relentless key-value store for the browser.

turbo-json-parse
Turbocharged JSON.parse for type stable JSON data.

Mobile Tools and React Native

myConsole
A JavaScript editor for your phone, in JavaScript.

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

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

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

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

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

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

react-native-animation-hooks
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,
Louis
webtoolsweekly.com
@LouisLazaris