Issue #557  (Badging API, Media, JSON/DB, Uncats)03/21/24

Here's an interesting Web API that you may not have heard of yet: the Badging API. As the name suggests, this API is used to allow apps to push notification badges onto an app's icon, to indicate something is available.

A popular example of this is mobile devices that indicate unread messages or other notifications using a small number. Below is a screenshot from iOS with two apps using this type of badge.

Of course, many users find these types of notifications annoying and are part of the endless notifications problem we have on our devices nowadays. But as developers, it's good to know the web platform now has a similar feature for use with web apps.

The code to use the Badging API looks something like the following:

There's two primary methods used in the code above: setAppBadge() and clearAppBadge(). When setting the badge, you can pass in a single parameter representing the contents you want to display. The contents can be any number, and the badge will ignore any decimal values, displaying only the integer (it apparently won't do any rounding).

When clearing the badge, no parameter is passed; the icon is instantly cleared of its badge. You can also clear the badge by passing in a value of "0" when setting the badge. If the setAppBadge() method is used without a parameter, the app icon will display a badge without a value (this is different from a value of "0").

Currently the Badging API is supported on Chrome and Edge for Windows and Mac and on Safari for Mac and iOS. In all cases, the API needs to be used on a web app that is installed on the user's system (e.g. a PWA or installed on the home screen on iOS).

The Chrome team has put together a nice writeup on the Badging API that includes a link to an excellent live demo where you can see it in action.

ine-height:0px;">

Try it out on a supporting browser by installing the app then using the controls on the page to change the badge value. Try setting the value to "0". Take note of the behaviour of the app icon (in the taskbar, on your home screen, etc., depending on which device you're testing).

There isn't much else to discuss about the syntax for the API. The two methods are the only part of the syntax. Of course, setting up an installable app is a much larger job, so this small API can be viewed as one part of that process.

Of course, you'll want to use this sparingly knowing that many users don't want these kinds of notifications. When I ran the Chrome demo, my browser asked me if I wanted the Badging API to be used on the page. So it's good that it requires permissions that can later be revoked if needed.

Now on to this week's tools!
 

Media Tools (SVG, Video, etc.)

MiroTalk SFU — An open-source, simple, secure, and scalable real-time video conferencing solution with up to 4K video quality and compatible with all modern browsers and platforms.

CartoSVG — An online tool to easily design interactive and beautiful SVG maps using a number of different geo-related settings along with customizations for the look of the maps.

PixiEditor — A beautiful, fast pixel-art editor packed in an eye-friendly dark theme, available for Windows.

monday.com — Your team's efficiency, reimagined. Revolutionize your work management. Automate tasks, integrate seamlessly, and gain full visibility. Take every project to completion with ease. Try it free today.     SPONSORED 

Wiggle Animate — An open-source vector-based motion graphics animation tool to let you customize your animations with dozens of properties, keyframe control, and curve editors.

YT Pics — Enter a YouTube URL along with a timestamp and this tool will generate a screenshot at that time in the video. Also allows downloading captions and thumbnails.

canvas-size — A script to determine the maximum area, height, width, and custom dimensions of an HTML <canvas> element, to overcome some cross-browser variances in this area.

SiriWave — The "Apple Siri" waveform replicated in pure JavaScript using the Canvas API, with support for the classic and iOS9+ waveform.

Penrose — A platform to create beautiful diagrams just by typing notation in plain text, with multiple export options available.

Avatartion — A UI to create and customize Notion-style avatars for social media profiles, placeholders, etc. You can also generate random avatars and export as PNG or SVG.

Database Tools

nodb — A serverless applications database with a RESTful API to store and fetch JSON and construct the API to match your app.

redb — A simple, portable, high-performance, ACID, embedded key-value store, written in pure Rust and loosely inspired by an older project called LMDB.

GatewayD — An open-source cloud-native database gateway and framework for building data-driven applications, like API gateways, but for databases.

Smartr Daily — The essential newsletter for curious minds. Sourcing the smartest articles on the web. Thought-provoking ideas and insights delivered straight to your inbox daily.    SPONSORED 

SQL Workbench — An online SQL workbench that lets you run SQL queries in your browser. Allows you to drop CSV, Parquet or Arrow files to create a new table.

Vanna.AI — An AI-driven tool to write your SQL for you and get actionable insights from your database just by asking questions.

Skytable — A scalable real-time NoSQL database that enables you to model complex data and write expressive queries powered by BlueQL, its own query language.

pgroll — A Go-based open-source command-line tool that offers safe and reversible schema migrations for PostgreSQL by serving multiple schema versions simultaneously.

SQL Formatter — A JavaScript library for pretty-printing SQL queries that started as a port of a similar PHP Library and has support for 12+ SQL dialects.

Tiny RDM — A modern lightweight cross-platform Redis desktop manager available for Mac, Windows, and Linux.
 

Advertisement

The Uncategor­izables

Flyde — A visual programming language that works along with your textual coding, runs in VS Code, and integrates with existing TypeScript code, browser and Node.js.

Phase — An open-source, end-to-end encrypted platform to manage, sync and share environment variables (i.e. secrets management).

automd — An automated Markdown maintainer that scans for annotation comments within a markdown document and updates their contents using built-in generators.

Smartr Daily — The essential newsletter for curious minds. Sourcing the smartest articles on the web. Thought-provoking ideas and insights delivered straight to your inbox daily.    SPONSORED 

Prici.io — An open-source project to manage plans and pricing for any SaaS application. You can use Docker's standalone service and run it locally or on your machine.

Expressive Code — A syntax highlighting engine for presenting source code on web pages, with full VS Code theme support, editor and terminal frames, copy to clipboard, text markers, collapsible sections, and more.

Loco — A Rust framework, based on Rails concepts, for side-projects and startups, specifically designed for 'one-person teams'.

Adaptive Cards — A set of platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange.

Regexper — An online tool to visualize your JavaScript-style regular expressions. If that helps you! You can also deep link to the regexes you visualize.

Statsig — A platform for teams to implement feature flags, rollouts, and configs, with the free plan offering flags, configs, and experiments.

Commercial Apps & Classifieds