Issue #287 (adoptNode(), React, JSON/Data, Mobile)
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
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.
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.
Declarative version of React.Component. Because sometimes you want a lifecycle or some state but don't want to create a new component.
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.
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.
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.
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
Mobile Tools and React Native
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.
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!