Web Tools #473 - Frameworks, Testing Tools, Uncats

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #473 • August 11, 2022

Advertisement
Meet Filestack: The All-In-One File Handling Service
Filestack is the premier service designed to meet all your file handling needs, from improving upload speeds by a factor of 3.6 to providing swift and secure delivery. Give your app an instant upgrade today and download for free.

Download Now
Filestack

There are a number of different ways to insert elements into the DOM, depending on what exactly you want to accomplish. For example, one of the most common DOM methods is the node.appendChild() method, which you've likely heard of and used.

But there's a relatively new pair of DOM methods that are more powerful than that older method that you'll definitely want to use going forward: Element.append() and Element.prepend().

Both methods have the following features that differentiate them from the old appendChild():

  • Both methods can insert a single object like the older method, but only the new ones can insert multiple objects.
  • The new methods can insert one or more strings; the old method cannot.
  • These methods have no return value, whereas the older method returns the inserted element.
You can pass in any number of strings and/or objects to append or prepend. The content will be inserted either before the first child or after the last child of the targeted element (i.e. inside the element), depending on which of the two methods you use. Here's the basic syntax:
 
el.append(myEl);
el.append(myEl, myEl2);
el.prepend("String example.");
el.prepend("String example.", myEl);
el.prepend("String example.", myEl, "Another string.");

The above, of course, assumes "el", "myEl", and "myEl2" are references to DOM elements. The strings could be stored in variables also.

For a live example, you can try out this CodePen demo. The buttons activate three different uses of append() and prepend(). You can see the results directly on the page.

As you can see in the demo, you can reference a newly created object or string, or you can grab an existing element on the page. This moves the element from where it started to the new prepended or appended location. So this is an easy way to move stuff around without worrying about duplicate elements.

I referred to the methods as 'relatively new' because they were added to the spec a little later, but they both have modern browser support across the board and have been well supported for a few years now.
 

Now on to this week's tools!
 

Front-end Frameworks

Meet Filestack: The All-In-One File Handling Service
Filestack is the premier service designed to meet all your file handling needs, from improving upload speeds by a factor of 3.6 to providing swift and secure delivery. Give your app an instant upgrade today and download for free.    SPONSORED 

Siimple
An open source and fully customizable CSS toolkit that provides a responsive and minimalistic starting point for your projects. Includes UI elements, helpers, CSS icons, and more.

React Native Boilerplate
An easy-to-use, lightweight, and scalable starting template for React Native projects that includes a simple architecture and compatible with TypeScript.

Open UI
Not exactly a framework but an industry standard set of guidelines to define how developers can style and extend built-in web UI controls, such as select dropdowns, checkboxes, radio buttons, etc.

H5Web
A collection of React components to visualize and explore data, specifically for HDF5 or HDF5-like files.

Ruck
An open source build-less React web application framework for Deno. Incorporates ESM, dynamic imports, HTTP imports, and import maps to avoid build steps like transpilation or bundling.

WebGi Camera Landing Page
A template for building scrollable landing pages with GSAP, ScrollTrigger, and WebGI, with TypeScript and Parcel built in. The demo is pretty cool, albeit very resource intensive.

WebGi Camera Landing Page

SvelteKit Commerce
An open-source, customizable ecommerce template built with SvelteKit, Tailwind CSS, and Shopify.

Tabler React
A set of React components for the Tabler UI admin dashboard template.

TailPress
A starting point for developing WordPress themes with Tailwind CSS and comes with block-editor support out of the box.

Remult
A CRUD framework for full-stack TypeScript that includes a secure API, no boilerplate, is highly declarative, and can work along with any UI framework (React, Vue, etc).

Project Mgmt App

A starter project for developing full-stack apps with GraphQL, Express.js, and React. Based on content from a YouTube GraphQL course.

On the Release Radar:

Testing and Debugging Tools

Morning Brew
There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.    SPONSORED 

HTML Size Analyzer
Enter HTML directly or a URL to analyze HTML size and catch bloat like inline images, large React hydration state, or code duplication.

@puppeteer/replay
A library that provides an API to replay and stringify recordings created using Chrome DevTools Recorder.

pino
A low-overhead, super-fast, and all-natural JSON logger for Node.js.

Ddosify
A high-performance load testing tool, written in Go, for distributed and Geo-targeted load testing.

Ddosify

Reassure
A performance testing companion for React and React Native, to measure the average rendering time of in-app components and monitor these for each pull request.

Japa
An API-first testing framework that focuses only on testing Node.js (backend) applications, thus resulting in a fast, small, and simple test runner.

BITB
Browser templates for "Browser In The Browser" (BITB) attacks. To be used for testing and recognizing the attacks, not for malicious purposes.

Gest
A sensible GraphQL testing tool to test your GraphQL schema locally and in the cloud.

On the Release Radar:  
💡 This week in VSCode.Email:
  • Customizing how VS Code handles whitespace characters
  • "I Stopped Using VS Code"
  • A Guide to VS Code Extension Testing
Check the archives for the latest issue, and subscribe for more!

The Uncategorizables

Morning Brew
There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.    SPONSORED 

Rety
Record typing on one or more editors and replay it at will, to simulate live coding.

APIsList
A curated list of public web APIs categorized in 90+ categories, with info on each API (HTTPS support, CORS support, auth type, etc).

Padloc
An open-source, end-to-end encrypted password manager. The free plan includes unlimited vault items and unlimited devices.

Endpoint Space
An endpoint service to get notifications from forms on your website. Easy to set up and unlimited use.

Endpoint Space

Keyviz
An open-source tool to visualize your keystrokes in real-time, useful for presentations to show the audience what keys and key combos you're using.

IndieAuth
A federated login protocol for Web sign-in, enabling users to use their own domain to sign in to other sites and services. Can be used to implement OAuth-based login.

Wolvic
An open source browser built for XR (eXtended Reality) that opens a portal to the Web including immersive games, videos, and environments built for XR.

Sunmao
An open source framework to integrate custom UI components to create your own low-code tools.

netboot.xyz
A network-based bootable operating system installer, powered by iPXE (open-source boot firmware).

Felt
A collaborative map-making tool with lots of advanced features and support for KML, KMZ, GPX, JSON, and GeoJSON data, currently free for individuals.

mpv
A free, open source, and cross-platform media player as an alternative to VLC.
 

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Tailwind UI Templates – Tailwind templates from the makers of Tailwind CSS.

Fudge – Website performance monitoring that suggests performance fixes.

Refind – 7 links from around the web, tailored to your interests, daily.  AD 

Kreya – Native Mac/Win/Linux app to build and test APIs fast.

Malthus – Generate high-quality prospects and leads for your business.  AD 

Godlike – A production-ready website component and icon library for Framer.

Brevy – Cut your AWS bill with no change to your infrastructure whatsoever.
 

A Tweet for Thought

Speaking of frameworks, you gotta love the accuracy of this meme.

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

Going out and seeing nature in person safely is of course preferred to anything virtual. But if you want to examine some live views of nature from around the world from the comfort and safety of your device, you'll want to check out Explore.org. It includes lots of live feeds of animals, oceans, sanctuaries, and more.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #472 - Media, SVG, React, JSON, Databases

Thursday, August 4, 2022

Web Tools Weekly WEB VERSION Issue #472 • August 4, 2022 Advertisement Powerful Monitoring, Low Overhead! Easily analyze increased response time with intuitive dashboards that help you drill down into

Web Tools #471 - CSS Articles, JS Utils, Git/CLI, Svelte

Thursday, July 28, 2022

Web Tools Weekly WEB VERSION Issue #471 • July 28, 2022 Advertisement Internal Tools Are Built On Retool Build interfaces fast with 100+ pre-built components. Then customize with JavaScript, SQL, HTML,

Web Tools #470 - JS Classes, Tailwind, CSS, SVG, Bundlers

Thursday, July 21, 2022

Web Tools Weekly WEB VERSION Issue #470 • July 21, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #469 - React, Testing, Figma to Code, Uncats

Thursday, July 14, 2022

Web Tools Weekly WEB VERSION Issue #469 • July 14, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #468 - Frameworks, JSON, Databases, JS Utilities

Thursday, July 7, 2022

Web Tools Weekly WEB VERSION Issue #468 • July 7, 2022 Advertisement Build Internal Tools 10x Faster with Retool Retool is the fast way for developers to build and share internal tools. Teams at

You Might Also Like

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 410 - Node.js TSC Confirms: No Intention to Remove npm from Distribution

Thursday, March 28, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 410 - JSDoc as an alternative TypeScript syntax

Thursday, March 28, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular JavaScript news, articles

📱 Issue 404 - Dependency Injection for Modern Swift Applications Part II

Thursday, March 28, 2024

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 404 Release Date Mar 28, 2024 Your weekly report of the most popular iOS news, articles and projects Popular