Web Tools #390 - Frontend Frameworks, Testing Tools, Media

Promotion

An easy way to get the data entered into a form withJavaScript is using a constructor you may not have heard of before: FormData().

This constructor allows you to create a FormData object that consists of key/value pairs representing form fields and their values. Here's a code example that populates the FormData object using a specified form on the page, then loops through to display the key/value pairs:

As mentioned, the above code uses the FormData() constructor, which takes one optional argument. Without the argument, the FormData object would be an empty object that you can then manipulate.

The optional parameter, when included, should be a form element on the page, which then exposes the FormData interface which has a number of different methods. In this case, I'm using the entries() method as part of a for...of loop that displays the key/value pairs for the form.

You can try a full demo on CodePen. Be sure to open the console in CodePen or in your browser's developer tools to see the output.

Notice a few things about this feature:

• The form controls that get included need to have a name value present to get recognized
• For radio buttons or checkboxes, only selected values will be included in the key/value pairs
• Disabled controls aren't included

Now on to this week's tools!

Front-end Frameworks

Frontendor UI Library
A UI library to build beautiful and professional landing pages. Includes 100+ UI Blocks & 6+ Templates. Add HTML/CSS blocks by simply copying and pasting snippets to build fully-styled pages and prototypes. promoted 

Radix Primitives
An open-source React-based UI component library for building high-quality, accessible design systems and web apps. Components are unstyled, accessible, and easy to customize.

ThreeJS Starter
A general template for Three.js applications. Uses Parcel to create the bundle and Tweakpane for live updates.

ui-neumorphism
React component library of 50+ items, designed based on the "new skeuomorphism" or "neumorphism" UI/UX trend.

DWAdmin
An lightweight admin dashboard template built with Bootstrap 4, Chart.js, and Font Awesome.

Simorgh
The BBC's open source Single Page Application (SPA) starter. Builds Accelerated Mobile Pages for every regular HTML page that it renders.

Orbit
A Vue.js UI Component library built on a beautiful, cohesive design system. Includes 50+ easy to use components and enables you to quickly construct clean and scalable applications.

commercejs-nextjs-demo-store
A high-fidelity fully-fledged eCommerce demo store built using the Commerce.js SDK and Next.js with live deployment to Netlify.

Element3
A Vue.js 3.0 UI toolkit based on Element, a Vue component library.

Vite + React + Tailwind CSS Starter
Starter based on Vite, the new-ish front-end toolkit, plus React and Tailwind.

qiankun
Blazing fast, simple, and complete solution for micro frontends, based on single-spa (a micro frontends router).
 

Testing and Debugging Tools

Lighthouse Parade
A Node.js command line tool that crawls a domain and compiles a report with lighthouse performance data for every page.

Slowfil.es
Web service that provides URLs with query params that you can embed in your own project, to allow you to demonstrate how slow-loading JS and CSS resources are rendered. Explained here.
 
Treo Site Speed Report
Enter a URL and get various metrics on performance (e.g. time to first byte, etc.). You can also enter a second URL to compare results.

Sniffer
A browser, engine, OS, or device detection tool. Works both in a browser and with Node and uses the user agent string (thus, not 100% reliable but good enough).

CodeFix
A code cleanup service that identifies issues in the code and delivers high-quality fixes, helping you manage technical debt at scale.

Monitoria
Continuous website monitoring service with email notifications for down time and historical data.

Architecture Analysis
Get insights and track strengths and weaknesses of your project architecture with continuous analysis.

Checka11y.css
A CSS stylesheet to quickly highlight accessibility concerns (e.g. missing alt text, incorrect markup, etc).

adversarial.js
Break neural networks in your browser. An interactive, in-browser demonstration of adversarial attacks on neural networks – entirely in JavaScript.

webscan
A browser-based network IP scanner and local IP detector.

PatchGirl
A postman/postwoman like, web app to test your APIs.

Polypane
Now at version 4+. A standalone browser for developing responsive and accessible websites.

Media Tools (SVG, Audio, etc.)

UI Flow Cards
163 neatly organized "flow cards", In Adobe Illustrator and Figma format, containing wireframes to construct web pages.

Moonbridge
A simple and fun way to create your own WebGL experiment. Based on the latest features for endless customization.

Simple Icons
1500+ free SVG icons for popular brands.

G2Plot
An interactive and responsive charting library based on the grammar of graphics.

react-use-audio-player
Custom React hooks for controlling audio in the browser, powered by howler.js and providing an idiomatic way to use Howler in React via custom hooks.

EasyQRCodeJS
A feature-rich, cross-browser, pure JavaScript QR code generation library.

Reactochart
A library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, heat maps, pie chart, and more.

Phosphor Icons
A flexible icon family of 4,000+ icons for interfaces, diagrams, presentations, etc. Available in React, Vue, HTML/CSS, PNG, and SVG.
 
Compressor.js
JavaScript image compressor (this is the playground for it). Uses the Browser's native canvas.toBlob API to do the compression work, to ensure lossy compression.

mannequin.js
A simple library of an articulated mannequin figure. The shape and movements are done purely in JavaScript and the graphics are implemented in Three.js.

Codeshot
Mac app. Turn your code into a snapshot. A companion app for developers who want to share code snippets on social media.

A Tweet for Thought

Great advice for the new year for anyone just getting started with front-end development.

 

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

If you're into obscure nerdy questions, here's a Stack Exchange post that explains why numbers on a keyboard are laid out differently compared to numbers on a telephone.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support This Newsletter:  PayPal.me  |  Patreon  |  GitHub Sponsors