Web Tools #421 - VS Code, Testing Tools, React

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #421 • August 12, 2021

The following intro is a paid product review for Clerk, an authentication and user management service for Next.js, React, and JavaScript apps.

If you've built any kind of app that involves registration, sign-in, and user profile management, then you may have looked around for various options to integrate these features easily and securely.

Clerk is one such option, letting you add authentication user flows to your apps in a matter of minutes. Clerk can be integrated with raw JavaScript apps, React apps, or Next.js.

Clerk

Clerk lets you easily build onboarding experiences for your users that work and that ensure high conversion rates.

For this review, I'll present Clerk's features in the context of a Next.js app. The primary features that Clerk lets you integrate are:

  • Sign-up with optional 2-step verification
  • Single sign-on via Google, Facebook, GitHub, and more.
  • Passwordless sign-in
  • Multi-session sign-in

The Clerk Docs walk you through how to install and initialize Clerk for React and Next.js apps. I was able to work through the steps for putting together a Next.js app with single sign-on options for logging in.

Getting started with the aforementioned features only requires two basic steps:

  • Set up your apps in the Clerk Dashboard
  • Integrate each app's unique Frontend API with your code
Apps in the Clerk Dashboard
Apps in the Clerk Dashboard

In the example above, I've created two apps, one for Next.js and one for React. To connect one of these Clerk apps to my codebase, I simply add the project's unique Frontend API value inside a .env.local file, which is then used as a project constant, like so:

const frontendApi = process.env.NEXT_PUBLIC_CLERK_FRONTEND_API;

In my Clerk dashboard, I'm able to select which accounts the user can sign in with:

SSO Options for Clerk
Single sign-on Options for Clerk

I can then start to use Clerk's components in my code's logic to customize the user flow to my own needs. Clerk offers prebuilt UIs for four primary components I can drop into my code:

In my example, my app allows three options for logging in, according to what I set up in the Clerk dashboard:

User Sign-in Options
User Sign-in Options

I then used the following code in my pages/index.js file to display an option for a logged-in user to log out or manage their profile:

import styles from "../styles/Home.module.css";
import { useUser, UserButton, ClerkProvider } from "@clerk/clerk-react";

export default function Home() {
  // Get the current user's firstName
  const { firstName } = useUser();

  return (
    <div className={styles.container}>
      <header>
        <h1>My Next.js App</h1>
        <UserButton />
      </header>
      <main>Hello, {firstName}!</main>
    <div>
  );
}

My page will then show the User Button component, which expands to display the user's profile email along with options in a modal overlay:

Clerk's User Button Component
Clerk's User Button Component

From there the user can choose the "Manage account" button to display yet another UI for managing various profile features like name, avatar, email, phone number, and connected accounts.

Additionally, the account management UI allows for powerful security-related account preferences:

Clerk's User Security Settings
Clerk's User Security Settings

Here the user can manage logged in devices, enable 2-factor authentication, and more.

The final thing I'll discuss here is how Clerk can be customized to your own app's needs. In the Clerk dashboard, select an app, then under "Development" you can go to "Settings > Themes" to choose from a number of options to customize the look and feel of Clerk's components for that specific app.

Clerk's Theme Customization settings
Clerk's Theme Customization settings

And this can be done for as many apps as you create. In addition, theming can be done via Props in a Next.js or React app, or you can use plain CSS.

For customizing user flows you can use Clerk's Control Components like SignedIn and SignedOut, among others, to allow you to show or hide specific parts of your pages based on the user's current status.

In short, if you're looking for a complete user management solution with a strong onboarding user flow, Clerk is definitely something you'll want to look into. Probably the only challenge I had when looking at Clerk is the gaps in the documentation, which are a work in progress. But the folks at Clerk are available on Discord to fill in any of those gaps for you, so that's a big help.

Try out Clerk today and check out the reasonable pricing options – I'm sure one of them will suit the needs and scope of your project.
 

VS Code, Text Editors, etc.

Anyfiddle
Another online playground for sharing and writing code. This one includes a number of different front-end and back-end languages and technologies.

Serendipity
A VS Code theme with dark and light modes that uses colors selected to be easy to use on a retina display.

Abracadabra
VS Code extension for automated refactoring of JavaScript and TypeScript, on top of the refactoring features already in VS Code.

Easy Pastes
An easy to use Pastebin alternative, with automatic syntax highlighting, to create, store, share code snippets.

Svelte Storm
An open-source Svelte IDE with a built-in state manager window for viewing your project in real-time. Built with Electron and available for Win, Mac, and Linux.
 
Svelte Storm

Git Urgent!
VS Code extension that allows you to git add all, commit, push with a single command.

Leaf
A platform for building coding tutorials that features a side-by-side auto-scrolling view of your code along with the article.

Twilight
A Lua plugin for Neovim 0.5 that dims inactive portions of the code you're editing using TreeSitter.
 

Testing and Debugging Tools

Console
Join thousands of engineers in subscribing to a weekly roundup of the latest in open-source software, curated by an Amazon engineer. sponsored 

tincan
A lightweight Jest-like testing library for Deno.

AsyncDebugger
Babel plugin and utilities for running async code at breakpoints. Also includes a REPL console for debugger statements in Node.

React Preview
Fast, instant React component previews in VS Code. Other IDEs will be added later.

Pulse
A powerful logging system for Apple devices that lets you record and inspect network requests and logs right from your iOS app.

Code Generator for HTTP Requests
Generate ”ready to run“ code snippets for making HTTP requests with Google Apps Script, JavaScript, Node.js and cURL commands.

Web Vitals
A Chrome extension that automatically checks Web Vitals scores on the website you're currently viewing.
 
Web Vitals

Scepter
A mobile web inspector that helps you easily understand how a site is built, fix problems, or make tweaks.

vConsole
Another mobile debugging tool that lets you view console logs, network requests, cookies, LocalStorage, SessionStorage, and more.

CodeSee
Provides Maps and Recordings to help any developer in your team understand your codebase at any step of the development process.

Next Page Tester
The missing DOM integration testing tool for Next.js.

Cypress Example Recipes
A GitHub repo containing various recipes for testing common scenarios using Cypress, the popular front-end testing library.
 

React Tools

Console
Join thousands of engineers in subscribing to a weekly roundup of the latest in open-source software, curated by an Amazon engineer. sponsored 

React Trix RTE
A React wrapper for Trix editor, the popular rich text editor for web apps.

tsstyled
React visual primitives with first-class TypeScript support and a tiny footprint.

aux-router
React router that supports rendering of multiple independent (auxiliary) routes. Useful when you have a side panel in your app and you want to switch between pages without losing the visibility of that panel.

React Page Scroller
Simple React component for smooth full-page scrolling using CSS animations.

useCookieConsent
React hook for managing GDPR cookie consent state.

react stepzilla
A multi-step, wizard component for sequential data collection. Lets you throw a bunch of React components at it and it will take the user through those components in steps.
 
react stepzilla

React Facade
An experimental library that uses Proxy and TypeScript that incorporates a strongly typed facade pattern in your React hooks.

Plate
Rich text editor plugin system for Slate and React. Has a declarative API with centralized configuration and state management.

react-use-please-stay
A React hook that animates the document title and/or favicon when focus from the page is lost. Or you can configure it to always animate.

@react-three/a11y
Brings accessibility to webGL with easy-to-use react-three-fiber components, including focus, tab index, screen reader support, and more.

React Tracked
State usage tracking with Proxies. Optimize re-renders for useState, useReducer, React Redux, Zustand and others.
 

Commercial Apps and Classifieds

Replay.qa - Screen recording tool that records console and network requests.

SiteSentry - Website monitoring service for SSL, domain, 404s, etc.

Nextless.js - Build scalable and production-ready SaaS products fast.

Advanced React - Learn to build fullstack JS apps with React & GraphQL. ad 

SaaS Blocks - Tailwind themes, templates, and components.

Fsetapp - JSON schema editor
 

A Tweet for Thought

A new shortcut on GitHub: Press "." to open any repo in a VS Code-like editor.
 
A Tweet for Thought
 

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

In the future, we'll have the technology to be able to order a pizza using a computer. Oh, wait – we had that technology back in 1974.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Want to get notified of new issues via Twitter, Telegram, or Messenger? You can sign up using a service called Reachme.

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books / Buy Me a Coffee

Older messages

Web Tools #420 - CSS Tools, Front-end Frameworks, Uncats

Thursday, August 5, 2021

Web Tools Weekly WEB VERSION Issue #420 • August 5, 2021 Advertisement Stock Market Data API The marketstack API offers free stock data in JSON for various ticker symbols. Access real-time and

Web Tools #419 - Icons/SVG, Build Tools, JS Utilities

Thursday, July 29, 2021

Web Tools Weekly WEB VERSION Issue #419 • July 29, 2021 Advertisement Store. Optimize. Deliver Images with ImageKit.io What's the best image format for a website? What about the size? How do I

Web Tools #415 - JS Libraries, JSON/DB, React Tools

Friday, July 23, 2021

Web Tools Weekly WEB VERSION Issue #415 • July 1, 2021 Advertisement TLDR Newsletter - Byte Sized News for Busy Techies TLDR is a free daily newsletter with links and TLDRs of the most interesting

Web Tools #418 - VS Code, Front-end Frameworks, Uncats

Thursday, July 22, 2021

Web Tools Weekly WEB VERSION Issue #418 • July 22, 2021 Advertisement IP Geolocation API Identify a visitor's location based on their IP address with ipapi.com. This reverse IP lookup supports IPv4

Web Tools #417 - Testing Tools, React, GitHub/CLI Tools

Friday, July 16, 2021

Web Tools Weekly WEB VERSION Issue #417 • July 15, 2021 Advertisement Ship Embedded SaaS Integrations in Minutes with a Native iPaaS Building native integrations between your app and your customers

You Might Also Like

💎 Issue 410 - Being laid off in 2023-2024 as an early-career developer

Thursday, March 28, 2024

This week's Awesome Ruby Newsletter Read this email on the Web The Awesome Ruby Newsletter Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Ruby news, articles and

💻 Issue 403 - Microsoft defends .NET 9 features competing with open source ecosystem

Thursday, March 28, 2024

This week's Awesome .NET Weekly Read this email on the Web The Awesome .NET Weekly Issue » 403 Release Date Mar 28, 2024 Your weekly report of the most popular .NET news, articles and projects

💻 Issue 410 - Node.js TSC Confirms: No Intention to Remove npm from Distribution

Thursday, March 28, 2024

This week's Awesome Node.js Weekly Read this email on the Web The Awesome Node.js Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular Node.js news, articles and

💻 Issue 410 - JSDoc as an alternative TypeScript syntax

Thursday, March 28, 2024

This week's Awesome JavaScript Weekly Read this email on the Web The Awesome JavaScript Weekly Issue » 410 Release Date Mar 28, 2024 Your weekly report of the most popular JavaScript news, articles

📱 Issue 404 - Dependency Injection for Modern Swift Applications Part II

Thursday, March 28, 2024

This week's Awesome iOS Weekly Read this email on the Web The Awesome iOS Weekly Issue » 404 Release Date Mar 28, 2024 Your weekly report of the most popular iOS news, articles and projects Popular

💻 Issue 328 - My new open-source repository to schedule all your content!

Thursday, March 28, 2024

This week's Awesome React Weekly Read this email on the Web The Awesome React Weekly Issue » 328 Release Date Mar 28, 2024 Your weekly report of the most popular React news, articles and projects

📱 Issue 407 - Apple just announced WWDC24. The keynote for WWDC24 will be held on Monday, June 10th.

Thursday, March 28, 2024

This week's Awesome Swift Weekly Read this email on the Web The Awesome Swift Weekly Issue » 407 Release Date Mar 28, 2024 Your weekly report of the most popular Swift news, articles and projects

💻 Issue 405 - 2024 Edition Update

Thursday, March 28, 2024

This week's Awesome Rust Weekly Read this email on the Web The Awesome Rust Weekly Issue » 405 Release Date Mar 28, 2024 Your weekly report of the most popular Rust news, articles and projects

🤖 What to Expect From Google I/O 2024 — How to Stop Apps From Leaking Your Data

Thursday, March 28, 2024

Also: The Best Camera Straps of 2024, and More! How-To Geek Logo March 28, 2024 📩 Get expert reviews, the hottest deals, how-to's, breaking news, and more delivered directly to your inbox by

Infographic | How Small Investments Make a Big Impact Over Time 📈

Thursday, March 28, 2024

Compound interest is a powerful force in building wealth. Here's how it impacts even the most modest portfolio over the long term. View Online | Subscribe Presented by: EnergyX's groundbreaking