Issue #473 (append()/prepend(), Frameworks, Testing, Uncats)08/11/22
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.
 |
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.
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.
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.
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.
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
