Web Tools #430 - JS Libraries, React Tools, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #430 • October 14, 2021

Advertisement
Retool - Build Internal Tools 10x Faster
Retool gives you a powerful set of building blocks: tables, lists, charts and more. Integrate with any datasource, REST API, gRPC, or Firebase and customize your app with JS. Save hundreds of hours.

Try Retool for Free
Retool

The DOM API includes another interesting method that I just stumbled across that's relatively new to the spec: Element.replaceWith(). In brief, this method allows you to replace an element with a new element and any children nested inside it. It also accepts a DOM string.

Here's some code demonstrating three different ways to use it:

// replacing element with element
par1.replaceWith(par2);

// replacing element with text
par1.replaceWith('Some example text');

// replacing element with tags as escaped strings par1.replaceWith('<div>More example text</div>');

You can try a real interactive example in this CodePen demo. It will help to look at the code to see what's happening, but note a few things about the three ways you can replace the main paragraph element in the code above and the demo:

  • The lone argument passed into replaceWith() can be a single HTML element object with optional nested children. Those child elements will be preserved. So technically you're passing in a node tree.
  • When passing in a DOM string, you wrap the argument with quotes or pass it in as a previously defined string object. Again, the full string will replace the element so that the original element completely disappears.
  • My last example in the code above includes HTML tags in the string value. These won't be recognized as tags but will be escaped as part of the string to display on the page. You can try this using the interactive demo by entering HTML characters or other special characters in the input field.
  • In the live demo, notice the paragraph being replaced also has a child element (for the italics). This element also disappears when the parent is replaced.
And that's pretty much all there is to this method. It's handy because it's much like innerHTML() but instead of replacing the child elements of the targeted element, it replaces the element directly while passing in any accompanying children.


Now on to this week's tools!
 

 

JavaScript Libraries and Frameworks

Retool - Build Internal Tools 10x Faster
Retool gives you a powerful set of building blocks: tables, lists, charts and more. Integrate with any datasource, REST API, gRPC, or Firebase and customize your app with JS. Save hundreds of hours. sponsored 

Imba
Not exactly a JS library, but a new web language that compiles to JS that features speed via a time-saving syntax and memoized DOM.

Vizzu
A free, open-source JavaScript library for creating static data charts and animated data stories and visualizations.

Motion One
A new performance-first animation library built on the Web Animations API and includes features like selectors, individual transforms, timeline sequencing, and more.

Mechanic
An open source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser.

Theatre.js
A JavaScript animation library with a GUI that that animates the DOM, WebGL, and any other JavaScript variable. Some nice examples on the home page.

Theatre.js

Mafs
A library of React components to build interactive, animated math-based visualizations with declarative code.

Wasp
A language for building and deploying modern full-stack web apps with less code. Describe high-level features with Wasp then write the rest of your logic in React, Node.js and Prisma.

Ultra
A web framework based on Deno and React, with no build or bundle, that embraces modern native browser features like ES Modules, Import Maps, and Web Streams.

Blockly
A library for teaching code concepts that allows web and mobile apps to include a visual code editor for any of the five supported programming languages.

Cornerstone
JavaScript library to easily build interactive medical imaging web applications.

On the Release Radar:

React Tools

Tech Jobs for Good
Tech Jobs for Good helps connect developers to job opportunities at organizations working on pressing issues such as improving educational outcomes, eliminating barriers to mental health, and providing pro bono legal services to those in need. Find out how you can use React to make a difference today.  sponsored 

react-horizontal-scrolling-menu
Horizontal scrolling menu component for React.

react-monacoeditor
React component for the popular Monaco embeddable code editor (which is the engine that powers VS Code).

React Carousel Minimal
Easy to use, responsive, and customizable carousel component for React projects.

React Image Pan, Zoom & Rotate
A React library to add provide rotate, zoom, drag, pan, move, etc., functionality to an image on the page.

kbar
React component to add a fast, portable, and extensible CMD+K interface to your site.
 
kbar

react-hook-form-jsonschema
Lightweight project that exposes an API for easily creating customizable forms with built-in validation based on a JSON Schema.

react-stickynode
A performant and comprehensive React component to add a sticky element to a page.

react-model
A next-generation state management library for React with support for TypeScript, Class and Hooks API, and compatible with Preact, React Native , and Next.js.

Filemanager
A React-based file manager component for the browser and Node.js.

react-tracking
Declarative tracking and analytics for React apps, built by the NY Times open-source team.

react-apple-signin-auth
Apple sign-in for React using the official Apple JS SDK.

React Social Login Buttons
A simple package to provide a front-end for social login buttons using React, on top of already-existing functionality for auth/login.

On the Release Radar:

The Uncategorizables

Tech Jobs for Good
Use Tech Jobs for Good to find front-end developer jobs at organizations working on pressing issues such as fighting misinformation online, improving access to social services, and reducing carbon emissions.  sponsored 

Xplorer
A customizable, modern, and cross-platform File Explorer built with Electron and available for Mac, Windows, and Linux.

Cryptomator
A free and open-source cloud encryption tool for Dropbox that creates a "vault" for your cloud files.

Leapp
An open-source, cross-platform app designed to manage and secure your cloud credentials in multi-account environments.

Featurebase
Capture, organize and analyze what your users have to say through public feedback boards to make better product decisions.

Docbloc
API documentation tool that simplifies the creation and distribution of REST API documentation.
 
Docbloc

Fake Word Generator
Might come in handy if you're trying to come up with a new name for a product service. Even lets you 'mutate' words to see related results.

Gust
A WordPress theme built with Tailwind CSS.

btop
A Linux system resource monitor with support for Mac in development.

Waydroid
A container-based approach to boot a full Android system on a regular GNU/Linux system like Ubuntu.

WCAGify
Node utility for people who need to reference the Web Content Accessibility Guidelines frequently and are tired of copying and pasting.

KDL
A document language with XML-like semantics that looks like you're invoking a bunch of CLI commands.
 

Commercial Apps and Classifieds

These are commercial (non-free) tools, paid classifieds, and affiliate links. You can submit a link for consideration or you can buy a classified link (will be marked "ad").

SlashApi - Web platform to build REST APIs fast with no coding.

Frontendor UI Library  - Library of 100+ UI Blocks & 6+ Templates. ad 

Mini Course Generator - Build and share interactive mini-courses.

JavaScript E-Books Bundle - 3 JS/DOM E-Books 50% off at AppSumo. ad 

ProtectPDF.io - Service to add piracy protection to PDF e-books.

All-in-one Domain Tools - Mac/Win/Linux app for domain checking, etc.
 

A Tweet for Thought

Wes Bos recently started an interesting thread that indirectly tackles the apparent disdain that a lot of devs have towards PHP. He makes a good point, that we ridicule PHP but then we get excited when features PHP has had for years get added to our own 'modern' tech stack.

A Tweet for Thought
 

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

StackOverflow Copilot is one of the more humorous projects you'll come across. There's a reason "Don't" is step 1 in the installation instructions.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books / Buy Me a Coffee

Older messages

Web Tools #429 - Frameworks, SVG, React Tools

Thursday, October 7, 2021

Web Tools Weekly WEB VERSION Issue #429 • October 7, 2021 Advertisement Retool - Build Internal Tools 10x Faster Retool gives you a powerful set of building blocks: tables, lists, charts and more.

Web Tools #428 - React Auth, CSS Tools, Bundlers, Angular

Thursday, September 30, 2021

Web Tools Weekly WEB VERSION Issue #428 • September 30, 2021 The following intro is a paid product review for Userfront, a developer-friendly service to add user authentication to your React apps. If

Web Tools #427 - JS Utilities, Jamstack/CMS's, VS Code

Thursday, September 23, 2021

Web Tools Weekly WEB VERSION Issue #427 • September 23, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #426 - Learning Tools, Frameworks, Testing, Uncats

Thursday, September 16, 2021

Web Tools Weekly WEB VERSION Issue #426 • September 16, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

Web Tools #425 - CSS Tools, Media/SVG, React

Thursday, September 9, 2021

Web Tools Weekly WEB VERSION Issue #425 • September 9, 2021 Advertisement Free Guide: The Evolution of JavaScript Tooling Frameworks and libraries have been created to ease the burden of writing

You Might Also Like

Issue 310 - New Autopark looks awesome!

Thursday, March 28, 2024

View this email in your browser If you are just now finding out about Tesletter, you can subscribe here! If you already know Tesletter and want to support us, check out our Patreon page Issue 310 - New

Programmer Weekly - Issue 199

Thursday, March 28, 2024

View this email in your browser Programmer Weekly Welcome to issue 199 of Programmer Weekly. Let's get straight to the links this week. Quote of the Week "Optimization hinders evolution.

wpmail.me issue#660

Thursday, March 28, 2024

wpMail.me wpmail.me issue#660 - The weekly WordPress newsletter. No spam, no nonsense. - March 27, 2024 Is this email not displaying correctly? View it in your browser. News & Articles What's

New attack targets Apple devices

Thursday, March 28, 2024

Eufy's new Mach S1 Pro; Using VR in a car; April solar eclipse FAQ -- ZDNET ZDNET Tech Today - US March 28, 2024 placeholder New password reset attack targets Apple device users - what to do if it

Web Tools #558 - ImageKit Review, JS Libraries, Git/CLI Tools, Jamstack

Thursday, March 28, 2024

WEB VERSION Issue #558 • March 28, 2024 The following is a paid product review for ImageKit's Video API, a developer-friendly toolkit for real-time video optimizations and transformations, to help

An Emmy-winner's guide to AI video

Thursday, March 28, 2024

They built this in 2 months 👀 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

wpmail.me issue#660

Thursday, March 28, 2024

wpMail.me wpmail.me issue#660 - The weekly WordPress newsletter. No spam, no nonsense. - March 27, 2024 Is this email not displaying correctly? View it in your browser. News & Articles What's

Amazon writes Anthropic a $2.75B check

Thursday, March 28, 2024

Amazon has completed its promised $4B investment in the AI company View this email online in your browser By Alex Wilhelm Thursday, March 28, 2024 Welcome to TechCrunch AM! Today we have a giga-round

Airtrain, Pretzel, SpinKube, Glide, GPTScript, and more

Thursday, March 28, 2024

StackShare Weekly Email not displaying correctly? View it in your browser. StackShare Weekly Digest March 28th, 2024 Stop manually typing out what technologies are being used in your repos in README

Web Tools #558 - ImageKit Review, JS Libraries, Git/CLI Tools, Jamstack

Thursday, March 28, 2024

WEB VERSION Issue #558 • March 28, 2024 The following is a paid product review for ImageKit's Video API, a developer-friendly toolkit for real-time video optimizations and transformations, to help