Web Tools #491 - el.before()/after(), JS Utils, Testing, React Native

Advertisement

There are lots of different ways to inject content into the DOM with JavaScript. Some of such methods have been around what feels like forever – since the days of IE5. Over the years though, the DOM spec has added other more practical methods that are designed for specific use cases. Or in some instances, methods have been added for simplicity.

Take for example the Element.before() and Element.after() methods. These two methods have been supported in all modern browsers for some time now but aren't exactly 'legacy' methods like some of the others we use to inject content.

Each of these methods allows you add a comma-separated set of nodes or string objects at the desired location. If you're using Element.before(), then the content will be inserted before the specified element (that is inside its parent, as an immediate sibling). If you're using Element.after(), the content will be added after the element.

Here's some code to demonstrate:

The above assumes a parent element and is purely to demonstrate. This wouldn't be a very practical example. As you can see, I'm able to pass in multiple parameters and they can either be element references or strings of text. The above code, however, would produce a strange and likely broken HTML experience.

For a more practical example, try out this CodePen demo. You can use the buttons on the page to inject the content at the specified locations defined in the JavaScript.

Some things to note about these two methods:

• The number of comma-separated elements and/or strings you can pass in as arguments is unlimited
• If you insert strings, each one you insert is included as a separate text node, even if they're adjacent
• The methods don't return any data or objects
• If in some rare case the node cannot be inserted, you'll get something called a HierarchyRequestError (i.e. a type of DOMException)

JavaScript Utilities

What’s the Biggest Development Trend for 2023?
Did you know that web developers are gradually settling for a smaller number of frameworks as they stop experimenting with a wide range of tools? Take part in the most complete survey Developer Nation has ever created, share your thoughts and win amazing prizes!     SPONSORED  

idle-task
A wrapper around requestIdleCallback() to improve your website performance by executing JavaScript during a browser's idle periods.

Maska
An input mask for form inputs, to force an input format depending on the type of field, for vanilla JavaScript and Vue.

undefined
A Node.js utility to convert a file of JSON responses into TypeScript types.

watching-you
A JavaScript library for building animations that watch anything in the DOM. The demo example is a pair of eyes following the mouse around the page.

BlockNote
A Notion-style block-based extensible text editor built on top of ProseMirror and Tiptap.

Snow.js
Add a script to any web page to add an animated snow effect to the page's background.

CSV To Markdown Table
An older project that's a simple JavaScript-based CSV to Markdown table converter.

Legend-State
A super-fast and powerful state manager for JavaScript apps that's easy to use. It works as a vanilla JavaScript tool but it's built for React apps as well.

BookmarkFS
A 'dumb' project that exploits what seems to be a flaw in Chrome's bookmark sync service that allows you to store files for free.

Blocky Editor
A block-based editor that's small and fast enough to be embedded in Notion-like apps, doesn't depend on any heavy editor framework, and handles complex text-editing details for you.

📢 On the Release Radar:

• Bootbox.js – Bootstrap dialogs now at version 6+
• OverlayScrollbars – Custom scrollbars now at version 2+
• Trix – Rich text editor now at version 2+
• Linkify – Utility to convert plain text links now at version 4+
• ow – Function argument validation now at version 1+
• fast-copy – Fast deep object copier now at version 3+

Testing and Debugging Tools

Powerful Video Editor SDK for Web
With client-side processing, full customization and powerful editing tools Video Editor SDK lets you effortlessly add video editing to your web app. All with just a few lines of code.   SPONSORED  

Free Website Speed Test
From DebugBear, includes higher-quality data than PageSpeed Insights and a detailed request waterfall for debugging.

MLab Speed Test
A library to test your download and upload speed using Measurement Lab's speed test tool.

xv
A fast zero-config test runner that's simple, works with TypeScript, and only exports test functions without hiding console.logs, raw errors, etc.

LocatorJS
A Chrome extension that lets you click on any component in the browser to open its code in your IDE. Also available as a library for React, Vue, Svelte, Preact, and Solid.

Jam
Chrome extension for bug reports that lets you capture your screen plus developer logs in one click. Has a decent free plan for solo developers.

Stroo
An open-source web app to publish and share software structures, as a helpful visual addition to documentation.

hypertest
A Go-based test runner for the command line that lets you run tests in the background while coding, and get immediate live feedback.

WorkerBox
A secure sandbox to execute untrusted user JavaScript in a web browser without any risk to your own domain/site/page.

Eleven
A CLI to create code sandboxes with automatic HTTPS and long running processes in your cloud provider account.

SadServers
A SaaS where users can test their Linux troubleshooting skills on real Linux servers in a "Capture the Flag" fashion.

📢 On the Release Radar:

• capture-website – Screenshots via Puppeteer now at version 3+
• Requestly – All-in-one network requests toolkit now at version 1+
• TestCafe – End-to-end testing suite now at version 2+

React Native and Mobile Tools

Powerful Video Editor SDK for Web
With client-side processing, full customization and powerful editing tools Video Editor SDK lets you effortlessly add video editing to your web app. All with just a few lines of code.   SPONSORED  

STF
A web application for debugging smartphones, smartwatches, and other gadgets remotely from the comfort of your browser.

react-native-share
A simple React Native library that adds the ability to share files and messages with other apps.

react-native-context-menu-view
Use native context menu functionality from React Native, for iOS 13 and above and Android.

React Native Elements
A React Native UI toolkit with customizable components for building cross-platform applications.

Quick SQLite
Fast SQLite for React Native that embeds the latest version of SQLite and provides a low-level JSI-backed API to execute SQL queries.

OsmiCSX
A utility framework for React Native for rapidly building custom user interfaces, similar to Tailwind CSS.

React Native Drag Text Editor
A 60FPS dynamic text editor powered with Reanimated for no-code, photo editor cases.

Expo Router Preview
A preview of the new router for React Native apps, currently in beta and not recommended for production use, but the repo can be used for early bugs and feedback.

redash
A toolkit for implementing React Native Reanimated and GestureHandler.

pixels-catcher
A JavaScript/TypeScript library for testing React Native UI components and screens.

Interactable
An old project looking for maintainers that's an experimental implementation of a declarative API for handling fluid user interactions with views at 60 FPS in React Native (e.g. swipeable cards, drawers, etc).
 

Commercial Apps and Classifieds

A Tweet for Thought

Jack Forge explains why all tech workers need all three operating systems.
   

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

This is pretty amazing: Harvard CS50 – Full Computer Science University Course is a 25-hour YouTube video that offers "an introduction to the intellectual enterprises of computer science and the art of programming", from Harvard University.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly