Web Tools #527 - JS Libraries, Testing Tools, Vue.js

The following intro is a paid product review for Stashpad, a cross-platform note-taking app with a developer-friendly UI.

At some point many of us have likely tried out a note-taking app to help organize our tasks and to-dos. Note-taking apps have gained popularity over the past few years and there's no shortage of options.

But it's always nice to try one out that's built for modern tech workers in today's market. Stashpad is one such tool you'll want to try out.

Stashpad is a native app available for Mac, Windows, iOS, and Android. It's described as having been "designed for your working memory". What does that mean?

After I initially installed the app on Windows, I was presented with a wizard-like set of steps where I was able to choose between dark and light modes and create my first notes.

Once inside the app, the interface is easy to work with. Stashpad is centered around two kinds of note-taking:

• Notes – Anything you add to Stashpad starts as a note with no sub-items or content. This is a bare-minimum note that serves as a starting point, good for adding quick brainstorms.
• Stashes – This is the real power of Stashpad. When you add content or sub-points to an existing note, it becomes a stash, or a note with sub-items and optional content under each sub-item.

As shown in the above screenshot, Stashpad includes a folder-like view in the left column (with "recent" and "pinned" items), a list of your notes and stashes in the main content area, and an easy-to-access text field where you can start adding notes and stashes (just hit the spacebar to start typing).

Using the text field is called insert mode, and the text field itself is pretty powerful. You'll notice a little toolbar at the bottom of the text field that lets you customize how you add notes and stashes.

The toolbar buttons define the following:

• Whether to split newlines into separate notes
• Toggle CTRL-Enter vs. Enter for adding a note
• Add emojis or attachments

In the above example, I have 3 stashes and one note, with all 3 stashes open in individual tabs. You can see which are stashes and which are notes in the Home view list (stashes are indicated with a piled-papers icon). There are 3 sub-items that I've opened to view under the 2nd stash. You can also tell which items are stashes by the number on each line, which indicates how many sub-items are in a stash. No number means it's just a note.

When you click to enter a note or stash, the UI basically stays the same, but now you can use the text field to add items directly to the current stash.

In addition to Stashpad's input mode, there's also command mode, accessible via CTRL-K (CMD-K on Mac), which opens a command palette, or drawer, where you can enter and search for quick links to various Stashpad functions.

Of course, the real power of a note-taking app is in its ability to allow you to edit, track, and mark your notes as done. Inside of any stash, you can hit the shortcut key X to mark any selected item as "done". You can also access this from the item's context menu (right-click).

Usefully, Stashpad lets you define how "done" items are visually represented. From your Home screen, click the configurations button in the top-right area below any open tabs.

This gives you the option to hide done items, trash them, or group them at the bottom of a list. If you don't select any of these 3 options, the default is to simply fade the item out. Notice in my screenshot, the 2nd items is faded out, or marked as "done".

Another visual enhancement is the ability to add colors to different stashes (SHIFT-L) or to different items in a stash (just L).

In addition to the basic features I've discussed above, here are a number of other cool things Stashpad includes:

• Markdown support for content within items
• Support for code blocks within item content, using triple backticks and optional syntax highlighting (e.g. ```javascript)
• Notes and stashes can be synced across any device where you've installed Stashpad (mobile and desktop)
• Customizable keybindings for many of Stashpad's functions (tip: hold the CTRL/CMD key to see visual hints for many of the keybindings available in the current view)
• On desktop, you can bring Stashpad into focus at any time using the keybinding CTRL/CMD-SHIFT-0
• A "sticky" mode for keeping Stashpad on top (for example during video calls).

Now on to this week's tools!
 

JavaScript Libraries and Frameworks

ModelFusion
A JS/TS library for building AI apps, chatbots, and agents, that provides abstractions for AI models, vector indices, and tools.

SharpScript
Or #Script, a simple, fast, highly versatile and embeddable scripting language for .NET Core and .NET Apps that utilizes a familiar JavaScript inspired expressive Syntax to enable dynamic scripting of .NET Apps.

Cample.js
A component-based JavaScript framework that offers reactivity without a virtual DOM.

Meco
An inbox designed for reading newsletters. Enjoy your newsletters in a space built for mindful reading while giving your inbox space to breathe. It's easy to get set up and completely free!      SPONSORED 

AI.JSX
A framework for building AI applications using JavaScript and JSX, and can be used to create standalone LLM apps that can be deployed anywhere Node.js is supported, or as part of a larger React app.

TypeChat
A TypeScript library that makes it easy to build natural language interfaces using types.

chatgpt.js
A powerful feature-rich, object-oriented, and lightweight JavaScript library that allows for super easy interaction with the ChatGPT DOM.

Simple Statistics
A thoroughly-tested and well-documented JavaScript library that implements statistical methods to help coders harness the power of statistics and helps statisticians understand code.

jsPlumb
The open-source version of a commercial toolkit, this one written in TypeScript, that lets you build visual flow charts, schemas, path tracing, and more.

OWL
An XML-based web framework for structured, dynamic, and maintainable applications, with no build toolchain required.

LLMClient
A production-ready JS/TS library that makes it simple to work with any LLM and use advanced features like automatic function calling, with support for OpenAI, Azure-OpenAI, GoogleAI, and more.

hyke
A programming language that runs on TypeScript's type system.
 

Testing and Debugging Tools

MailDev
An SMTP server and web interface, installable on your machine, for viewing and testing emails during development.

hakk
A tool for Node.js that allows you to interactively develop, modify, and test your JavaScript code while it's running.

Meco
An inbox designed for reading newsletters. Enjoy your newsletters in a space built for mindful reading while giving your inbox space to breathe. It's easy to get set up and completely free!      SPONSORED 

JS Minification Benchmarks
A repo that's routinely maintained to compare the quality and speed across the latest versions of various popular JavaScript minifiers.

OddContrast
An interactive online color contrast checker for modern CSS color formats (Oklch, Oklab, sRGB, etc.) to test for WCAG compliance in color contrast on web pages.

Mobile FIRST
A Chrome extension that offers a smartphone and tablet simulator to test your mobile site on various devices.

Loki
A visual regression testing tool for Storybook, that features easy setup, no additional maintenance cost, reproducible tests independent of OS, and supports all platforms that Storybook does.

GraphQL Network Inspector
A platform-agnostic network inspector for viewing and debugging GraphQL requests, available as a Chrome or Firefox extension.

next-route-visualizer
A package for visualizing Next.js app directory routes in a tree-like fashion,  providing a clear visual representation of the routes and their relationships.

Comcast
A Go-based tool designed to simulate common network problems like latency, bandwidth restrictions, and dropped/reordered/corrupted packets.

On the Release Radar:

• Nightwatch – Test automation framework now at version 3+
• fuite – Tool for finding memory leaks now at version 3+
• jest-extended – Additional Jest matchers now at version 4+
• Eruda – Console for mobile browsers now at version 3+

Vue Tools

Docus
A documentation toolkit with 50+ components, powered by Nuxt, with Markdown support.

vue-c2c
A Vue package for transforming Vue components to composable functions.

Nuxt Time
An SSR-safe time element for Nuxt 3 that respects browser locale and renders a semantic <time> element.

Nuxt Typed Router
Provide a type safe router to Nuxt with auto-generated typed definitions for route path, name, and params.

VSCode.Email
A weekly newsletter covering all things Visual Studio Code – the world's most popular code editor. There's also tools and articles for other IDEs! (Vim, NeoVim, JetBrains, and more).      SPONSORED 

Vue-ECharts
A Vue component for adding Apache ECharts to your Vue projects, with support for pie charts, bar graphs, scatter plots, and lots more.

Vue-Preloader
A versatile and easy-to-use Vue component that allows you to add loading animations to your Vue or Nuxt projects. You can customize and test out the loader directly on the page.

VueHooks Plus
A Vue hooks library with a comprehensive collection of basic hooks and SSR support

PortalVue
A portal component for Vue 3, to render a DOM outside of a component, anywhere in the document.

Vue Vine
Another style of writing Vue components, designed to provide more flexibility of managing Vue components, as a parallel style to single-file components.

Commercial Apps and Classifieds

An X Post for Thought

An excellent reminder from Jimmie Jephson that we don't all have to hold the same opinions on work, tools, tech, etc.
   

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X (formerly Twitter) @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, you can also hit reply or message me on X.
 

Before I Go...

RetroFlix is a new project that is attempting to archive all public domain films. I feel like this sort of thing already exists to some extent on the Internet Archive, but I sense this could be a nicer way to have these organized and easily searchable.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly