Web Tools #431 - App Notifications, VS Code, DB, Git/CLI Tools

The following intro is a paid product review for Courier, a platform and API to easily add multi-channel notifications to your web app.

Many apps today need to incorporate some form of notification system as part of their service. While the Web Notifications API is a thing, that alone is often not enough. Courier is a complete notification service that lets you send notifications via Email, SMS, Web, and Mobile Push using a single API.

Besides the great name and logo (The word "courier" with a bird – perfect for a message delivery platform!), Courier includes four primary features to help you streamline your app's notifications:

• Templates - Use a drag-and-drop editor to design a consistent look for your notifications across all channels.
• User-first Notifications - You can set preferences to ensure users are in full control of what notifications they receive and via their preferred channels.
• Routing Engine - Set routing rules to ensure priority for specific channels.
• Automations - Use a visual builder to define delayed sends, conditionals, branching logic, and event-driven workflows.

Everything you build with Courier is part of a beautifully-designed dashboard that includes a rich toolset to take advantage of the different features mentioned above.

Courier Templates, for example, can be designed according to your brand's needs using a drag-and-drop builder that utilizes features like MJML or Handlebars (for email), a snippet editor, and settings for defining in-app notifications.

Once you sign up, Courier nicely walks you through how to set up your first notification. I did mine via the terminal using a cURL command. You can also opt for Node, Python, Go, PHP, Ruby, Java, and more.

In your dashboard, in addition to the Designer area where you can choose your templates and message branding, you'll have access to the Data tab, which allows you to easily access all your messages, recipients, lists, and automations. You can search messages by time, recipient ID/email, message status, and provider.

Also available in the dashboard is the Integrations tab, which is where you can set up which apps and services you want to integrate with Courier. When setting up a notification, you can select from email, push, SMS, chat, and other providers.

Provider options include a recently-added Gmail integration that offers the ability to create notifications quickly and easily with no need for API keys.

Courier provides their own Courier Push service that you can integrate, which allows you to bypass some of the common problems you'll face when using third-party push notification services.

The Courier Push feature offers Toast and Inbox components. The toast-style notifications are common in many apps, allowing apps to communicate messages to their users directly in the app. In addition, the Inbox component allows users to view their notifications in an embeddable inbox.

You can see how this works using this demo. Try sending an example message. After the notification is received, you'll notice the familiar bell icon that provides the user with access to their messages (see top right area of image below).

Of course, that's just one of the many providers you can use, all able to be integrated using Courier's API with your programming language of choice.

Courier offers excellent pricing. You can send up to 10,000 messages free (with Courier branding) with unlimited team members, unlimited templates and custom brands, and access to all channels. After that it's just a half cent (USD) per message (with Courier branding removed) and access to support channels.

The Courier docs are quite extensive so you should be able to find solutions to any kind of messaging integration with detailed and helpful info to complete the steps needed.

So if you're looking for a cross-channel notifications service for your apps and websites, try out Courier today for free. As mentioned, you won't have to pay until you hit the message threshold and there's lots of useful stuff to fiddle around with before you commit to any long-term message integrations.

Now on to this week's tools!

 

VS Code, IDEs, Playgrounds, etc.

Leo
A Python-based IDE, personal information manager, and outliner that accelerates the work flow of programmers, authors and web designers.

Material Icon Theme
A popular VS Code extension to add Material Design icons to VS Code.

Astro Play
A code playground for Astro, the new JavaScript framework and build tool that's gaining popularity in recent months.

CORS Playground
A simple playground for editing and fiddling around with CORS, or cross-origin resource sharing, requests.

Todo Tree
VS Code extension that quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane.

Front Matter
A CMS running directly in VS Code and can be used with static site generators like Hugo, Jekyll, Hexo, Next.js, Gatsby, and more.

bloop
VS Code extension that adds AI-powered smart suggestions to your editor, sourced from code examples from docs pages of 1000+ npm modules.

nginx playground
A code playground for nginx. Paste in an nginx config, and then a server starts nginx for you and runs any cURL or HTTP command you want against that nginx server.
 
Go Playground
Yet another playground, this one for the Go programming language. I don't feature many Go tools in this newsletter, but this fit the category well.

Figstack
VS Code or GitHub integration that's an intelligent coding companion to help you read, write, and understand code.

Lite XL
A lightweight text editor written in Lua, adapted from another similar editor called lite.

vscode-theme-generator
JavaScript utility to easily generate themes for VS Code by simply plugging a few colors into a const object.
 

Databases, JSON, etc.

Testim.io
There’s a better way to test your web app. Testim is an AI-powered UI test automation tool that gives developers an easy way to author and maintain cross-browser tests. Get started for free. sponsored 

absurd-sql
Implements a persistent back end for sql.js (sqlite3 compiled for the web) that treats IndexedDB like a disk and stores data in blocks there.

JSON5
A superset of JSON that aims to alleviate some of the limitations of JSON by expanding its syntax to include some productions from ECMAScript 5.1.

DataStation
A Data IDE for developers that lets you query all your data (not just SQL), script in your favorite language, create beautiful visualizations, and share with your team.

Rowy
Open-source Airtable-like experience for your database (Firestore) with  scalability via Google Cloud. Build any automation or cloud functions for your product.

DB Lens
An open-source database client for Mac, Windows, and Linux that lets you explore data, visualize entity relations and database performance metrics, and analyze disk usage from PostgreSQL.
 
unstorage
A universal storage layer that has a powerful key-value interface and is smaller than other solutions and utilizing modern ESM, TypeScript, and async syntax.

Vex
A visual editor for XML that hides the raw XML tags, providing instead an interface more like a word processor.

Evidence
Business intelligence for modern data teams. Beautiful reports synced to your data with just SQL and Markdown.

GUN
An ecosystem of tools that let you build community run and encrypted apps like an open-source Firebase or a decentralized Dropbox.

On the Release Radar:

• idb - IndexedDB with usability, not at version 6+
• lowdb - Local JSON database now at version 3+
• Mongoose - MongoDB object modeling for Node.js at version 6+
• Sift - MongoDB queries in JS now at version 15+
• IDB-Keyval - IndexedDB and promise-based keyval store at version 6+
• GraphQL Modules - Tooling for GraphQL at version 1+

Git, GitHub, and CLI Tools

Testim.io
Spend less time creating, editing, and updating UI tests and more time innovating in your app. Testim is an AI-powered UI test automation tool that gives developers an easy way to author and maintain cross-browser tests. Get started for free. sponsored

GitHub Profile Trophy
Add dynamically generated GitHub Stat Trophies to your GitHub README file.

Gitleaks
A security tool for detecting hard-coded secrets like passwords, API keys, and tokens in Git repos.

picocolors
A fast and small library for terminal output formatting with ANSI colors.

ohmycode
A free and easy-to-use tool that improves the ability to follow updates on GitHub repos of your choice.

gitignore.io
Online tool to create useful .gitignore files for your project.
 
lazygit
A simple terminal UI for Git commands, written in Go.

timefind
CLI tool that lets you find the exact moment that something was added to a website. It quickly flips through Web Archive snapshots using binary search, pinpointing the date of the modification.

yoctocolors
A small and fast command-line package that allows you to add custom colors to your terminal output.

CAC
A powerful, lightweight, and easy-to-learn JavaScript library for building CLI apps, written in TypeScript.

release-changelog-builder-action
A GitHub action that builds your release notes or changelog quickly, easily, and exactly the way you want.

giscus
A comments system powered by GitHub discussions, heavily inspired by a similar tool called utterances.
 

Commercial Apps and Classifieds

Materialize - Streaming database for real-time analytics.

Tech Productivity - A newsletter featuring productivity apps and articles. ad 

Logtail - Query your logs like you query your database.

JavaScript/DOM E-Books Bundle - Full bundle is 50% off at AppSumo! ad 

PullApprove - Framework for code review assignment and policies.

Grist - The flexibility of a spreadsheet with the robustness of a database.

A Tweet for Thought

An interesting new experimental feature in Chrome: Ability to add RSS feeds to follow and display on your new tab page.
   

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 want to fine-tune your front-end skills, you might want to check out Frontend Practice and Codewell, two different sites that let you do just that.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

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