Research Brief

Bundlephobia is a web application that helps developers find the performance impact of npm packages by showing the size of any JavaScript package and its effect on frontend bundles. The official GitHub repository is maintained by pastelsky at https://github.com/pastelsky/bundlephobia. A CLI version is available via npm install -g bundle-phobia-cli, providing commands to query package size and conditionally install packages based on weight constraints. The tool shows total size (both zipped and unzipped), download times, the number of required sub-dependencies, and whether packages can be tree-shaken. Users can access any NPM package by visiting bundlephobia.com/package/{{PACKAGE_NAME_HERE}}, and can upload a package.json file to display a list of packages in the project sorted by size.

Cloudcraft is a tool that visualizes AWS environments as isometric architecture diagrams and now supports both AWS and Azure components. Pricing is $99/month per user for Pro (or $40.83/month billed annually) and $120/month for Enterprise, with a 14-day free trial and 30-day money-back guarantee. While originally AWS-focused, Cloudcraft now supports multiple cloud providers including AWS, Azure, and Google Cloud Platform. The cost estimation feature allows users to update infrastructure and see projected costs, though some products like SageMaker are missing. The tool can convert architecture diagrams into Terraform scripts. Cloudcraft was acquired by Datadog and provides instant visibility into infrastructure with automated diagrams.

Figma uses WebAssembly to achieve faster load times, with performance improving by more than 3x after switching to WebAssembly regardless of document size. Figma's renderer is written in C++ and compiled to WebAssembly (Wasm) using Emscripten for use in the main application. Figma's Starter tier is a forever-free plan that includes up to 3 Figma design files and 3 FigJam files, real-time collaboration, and access to plugins and community files. The Professional plan is priced at $12 per editor/month when billed annually or $15 per editor/month when billed monthly, including unlimited Figma files and FigJam boards, unlimited version history, team libraries, shared fonts, and plugins. The Organization plan costs $45 per editor/month (billed annually) with advanced design systems, branching and merging, and org-wide libraries.

Font Flipper is a web app that allows users to preview 800+ Google Fonts on top of their own designs without downloading them first. The tool lets users play 'Hot or Not' to collect fonts they like, then download them for use. Users can upload design files and overlay various fonts from a vast library, using an interactive 'Hot or Not' style game to collect fonts. The tool is available at fontflipper.com and was built using Angular and Firebase according to the video transcript. There is also a JavaScript library called FontFlipper that helps preview different fonts on an HTML page by clicking text, accepting an array of font names and various configuration options.

VisBug is an open-source web design debug tool built with JavaScript, described as 'FireBug for designers'. VisBug is a Google open-source Chromium extension toolbar released in 2018 with tools for changing web page layouts and making small CSS edits. The extension allows users to point, click, move, resize and tinker with any page, edit or style any page in any state like an artboard, inspect styles, spacing, distance, accessibility and alignment, and edit text or replace images. The official GitHub repository is at https://github.com/GoogleChromeLabs/ProjectVisBug. It's available in the Chrome Web Store.

Insomnia is an open-source, cross-platform API client for GraphQL, REST, WebSockets, Server-Sent Events (SSE), gRPC and any other HTTP compatible protocol. Insomnia REST Client is an open-source, powerful REST API client used to store, organize, and execute REST API requests elegantly, serving as an excellent alternative to Postman. The official GitHub repository is at https://github.com/Kong/insomnia. An account is required to sustainably build and improve the product, though users can select 'Local Vault' as storage to keep API data 100% locally, use Git Sync for third-party Git repositories, or Cloud Sync for collaboration. Insomnia has a very generous free plan, with premium capabilities like unlimited collaboration, Git Sync, organizations, and SAML/OIDC login available in paid subscriptions.

Flare was a vector-based animation tool for apps and games developed by 2Dimensions; later 2Dimensions rebranded as Rive and made Flare their primary product. Rive 1 (previously Flare) offers powerful realtime vector design and animation for app and game designers, though new features and updates are only planned for the new Rive. Rive Flutter is a runtime library for Rive, a real-time interactive design tool that allows full control of Rive files in Flutter apps and games. To use Flare/Rive animation in Flutter, users design animation using the 2Dimensions design tool and export as a .flr file (for Flare) or .riv file (for Rive). The latest Rive package is available on pub.dev. The official Rive editor is available at https://rive.app. Flare/Rive is part of the Open Design movement and can be used for free as a web-based tool.