Issue #523  (Dopt Review, JS Utils, Testing, Uncats)07/27/23

The following intro is a paid product review for Dopt, a component library, SDKs, and APIs for building self-serve product onboarding and educational user flows.

There are certainly quite a few generic component libraries, platforms, and toolkits, and many of them are quite useful. But if you're building apps and user flows specifically for product onboarding, educational materials, wizards, feature introductions, and announcements, then you'll definitely want to check out Dopt.

The Dopt platform is based around the following features and concepts:

• A UI component library (modals, checklists, cards, etc.) designed for building onboarding user flows
• Tools to track users and user groups
• Blocks that define user flows (e.g. logic blocks, actions, and component blocks)
• Paths that define logic to determine how users can transition across blocks
• Fields for storing content for your custom blocks

When you create a flow (or edit an existing one), you'll be presented with a nice UI where you can edit existing blocks that make up the user flow and add blocks in the form of components, logic, and actions.

It's easy to use Dopt's visual flow editor to create new branches, edit existing ones, and deal with configuration and other settings associated with each of the blocks in your flow – all of which can be drag-and-dropped into the editor for easy creation of your product onboarding flows.

As mentioned, Dopt provides access to components along with blocks and fields that power those components. These are designed specifically for creating educational materials and feature onboarding.

One of the components that's particularly useful to onboarding is the tour component.  You can see a live example of this component on the Dopt website, which is part of a library of example components you can check out.

Other components include checklists, cards, rich text, and modals.

Of course, the components themselves are just one aspect of the Dopt platform. The basic steps for building an onboarding (or similar) experience are as follows:

• Install one of Dopt's SDK's (React or JavaScript) in your project folder using your package manager of choice (npm, Yarn, pnpm)
• In your Dopt dashboard, grab your API keys for users and blocks
• Register users by running cURL commands that include your user API key
• Design a flow in Dopt using the aforementioned flow editor, which includes logic via paths that you create
• Integrate your newly created flow into your app's code along with your blocks API key

This is certainly useful to analyze the kind of engagement you're getting and subsequently to use the information to improve your flows.

Analytics also includes user data. For example, you can look at details, properties, and flow state, so you can see what flows users have started, finished, and stopped, to understand their progress.

From the user analytics page you can reset a user's flow state, which will help debug your flows or simply allow a user to restart a flow.

Dopt allows you to integrate with data platforms like Segment, Heap, Amplitude, and Mixpanel.

Such integrations allow you to use your own tools to analyze Dopt-powered experiences for deeper insights into the effectiveness of your flows and onboarding experiences.

Dopt's components can easily by styled and themed via CSS. Dopt uses BEM naming conventions, which you can override to match your custom branding. In Dopt's docs you can view each component's classes in the styling API for that component. The image below shows the styling API for the checklist component.

All the tokens (in the form of CSS variables) that you can override can be viewed on the Tokens page in the Dopt docs.

There's so much more to cover when it comes to Dopt's features, so be sure to check out their full documentation along with the following useful pages:

• A gallery of example user flows created with Dopt
• A list of companies using Dopt for their onboarding and educational materials
• How Dopt stacks up against similar tools

Now on to this week's tools!
 

JavaScript Utilities

banditstash
A TypeScript-first, extensible localStorage and sessionStorage wrapper with sane defaults and a familiar API.

Detect Scroll
A performant and lightweight (~1.6kb) ES6 module for detecting scroll activity (direction + location) along the X and/or Y axis.

Vercel Edge Emails
A simple npm package that lets you send free transactional emails from Vercel Edge Functions.

Daito
Securely share 2FA tokens with others, no phone needed. A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love!      SPONSORED 

Aimless.js
An unopinionated, dependency-free JavaScript randomness library that includes a variety of helpful random number utilities, compatible with any custom pseudo-random number generator (PRNG).

rrule.js
JavaScript library for working with recurrence rules for calendar dates as defined in the iCalendar RFC and more.

Orama
A fast, in-memory, typo-tolerant, full-text search engine written in TypeScript that enables you to achieve seamless integration with your infrastructure and data.

tween.js
A JavaScript/TypeScript tweening engine for easing animations that incorporate an old but popular set of easing functions by Robert Penner.

gridstack.js
A modern TypeScript library to create beautiful draggable, resizable, responsive layouts with just a few lines of code.

BlockSuite
A library that powers a tool called AFFiNE that lets you add a framework-agnostic, block-based editor to your pages, for general-purpose collaborative applications.

micromorph
A tiny library for diffing live DOM nodes, handy when used in conjunction with the DOMParser API.
 

Testing and Debugging Tools

vite-plugin-vue-devtools
A Vite plugin designed to enhance the Vue developer experience, with features like pages tab for viewing and navigating routes, component hierarchy tab, timeline, assets tab, and lots more.

Winded
An online tool to test responsive layouts that lets you view multiple device sizes simultaneously, just enter a URL to test.

jest-puppeteer
A Jest preset that enables end-to-end testing with Puppeteer and offers a straightforward API for launching new browser instances and interacting with web pages through them.

Daito
Securely share 2FA tokens with others, no phone needed. A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love!      SPONSORED 

Automize
A Chrome extension that enhances the DevTools to make it easier to select complex elements and write or mock network events.

capo.js
A script that helps you identify which elements in the head section of your HTML document are out of order and could cause performance issues.

ModHeader
A popular, multi-featured browser extension to modify HTTP request and response headers.

Mailpit
A multi-platform email testing tool and API that acts as an SMTP server and provides a web interface to view all captured emails. It also contains an API for automated integration testing.

WebPerf-Snippets
A curated list of snippets to get web performance metrics to use in the browser console or as snippets in Chrome's DevTools.

a11y-ai
An experimental tool to automatically detect accessibility issues in web pages using OpenAI and provide suggestions for fixing them.

Tabserve
A web app that uses a single Cloudflare worker combined with browser -based web workers to create a reverse proxy from the internet to your localhost.
 

The Uncategorizables

Iosevka
An open-source, sans-serif + slab-serif, monospace + quasi‑proportional typeface family, designed for writing code, using in terminals, and preparing technical documents.

Google Photos Backup
A project that uses Playwright to open Google Photos in a headless browser to allow you to download and create a backup of your Google Photos data.

Yal
A launcher app similar to Alfred, Raycast, ScriptKit, Spotlight, etc., designed to provide users with a powerful and efficient way to launch applications and perform actions on Mac OS.

VSCode.Email
This week's issue of VSCode.Email covers using Audio Cues in VS Code, an extension for Bootstrap IntelliSense, the VS Code theme of the week, and a live stream on building your own VS Code extensions.     SPONSORED 

Design System Canvas
A PDF sheet you can print out that offers a one-page plan to help you champion the value of design systems in your organization.

Microsoft Designer
A new AI-based tool to generate stunning designs, original images, get writing assistance, layout suggestions, and more, all via a text prompt.

Pieces
An intelligent code snippet manager with intelligent search and organization features that also includes screenshot creation and ability to extract text from screenshots.

Campaign URL Builder
An online tool to generate UTM parameters for use in campaigns for ads and other promotions.

Onu
A developer-first tool to quickly turn scripts or workflows into production-ready internal tools without writing any frontend code.

Spotify Web API SDK
A JavaScript/TypeScript SDK for the Spotify Web API with types for returned data, with support for Node and the browser.

Commercial Apps and Classifieds

A Tweet for Thought

I'm not sure what to say about this whole X business recently announced by Elon Musk. Is this section of my newsletter going to be changed to "An X for Thought?" Is the word "Tweet" now deprecated? Should I start including other social media posts here, like from Mastodon or even Facebook (lol)?
   

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 like me and are starting to get tired of YouTube thumbnail clickbait (especially the useless arrow in every image!), you'll want to check out DeArrow, a browser extension that aims to crowdsource better titles and thumbnails on YouTube, to make titles accurate and reduce sensationalism.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris