The following intro is a paid product review for AnnounceKit, a hosted changelog or product update service that provides a communication channel between your product and end-users.

What's the best way to inform your users that your product has been updated? This is important especially with web apps that are able to update behind the scenes and users are often left in the dark on what's new.

Of course, if a user wants to know what's new, they can check GitHub or look for the product's social media channels. But how much better if your product's updates are integrated into the web app itself. That's where AnnounceKit comes in.

 

AnnounceKit allows you to add posts that are hosted at a location like "changelog.example.com". That location holds a series of updates that itemize your product's changes, and they're searchable and filterable by category, as shown in the following single post example:

   

Posts can be created using a WYSIWYG editor that includes ability to add styles, embed video, and an option to label your post according to some predefined categories:

   

You can integrate different types of widgets within your app to notify users of changes and updates. The widgets point to your posts, as shown above. One of the widgets offered is the animated Count Badge Widget that triggers a dropdown on click:

 

There's also a Sidebar Widget that opens when the user clicks something like a "What's New" link:

   

In addition, there's a widget you can embed directly into a page (like the sidebar or footer of your app), displaying product updates in blog list format:

   

AnnounceKit also gives you the ability to integrate with popular apps you already use like GitHub, Slack, Twitter, and lots more. These integrations allow you to quickly and easily push out product announcements and changes.

   

Other features available in AnnounceKit include the ability to:
 

• Collect user feedback about updates
• Enable users to sign up for email notifications on changes
• Send different updates to different users via Segmentation
• Publish in multiple languages
• And lots more

Now on to this week's tools!
 

Vue Tools

vue-agile
A carousel component for Vue inspired by the Slick carousel. Simple, touch-friendly, and no other dependencies.

Vue Dynamic Forms
An easy way to dynamically create reactive forms in Vue based on varying business and regulatory requirements of your site or app.

vue-mention
A @mention and #hashtag component for inputs and textareas.

Pdfvuer
Now at version 1.5. A PDF viewer for Vue using Mozilla's PDF.js.

Vue I18n
An internationalization plugin for Vue with a simple API and includes support for translation and localization (e.g. pluralization, number, date/time, etc).

@xstate/vue
Vue version of XState, a library for creating, interpreting, and executing finite state machines and statecharts.

swrv
Stale-while-revalidate data fetching for Vue.

vue-lazy-hydration
A renderless Vue.js component to improve estimated input latency and time to interactive of server-side rendered Vue applications.

vue-adaptive-utils
Inspired by react-adaptive-hooks, a collection of Vue 3.0 composition API functions and utilities to allow your apps to adapt your user's Network conditions,  battery status, etc.

Vue Formulate
The easiest way to build forms using Vue. Field validation, file uploads, form generation, help text, error messages, placeholders and more.

JSON, Databases, GraphQL, etc.

Advanced React & GraphQL by Wes Bos is 50% Off!
The master package includes 68 HD videos, part of 10 modules – and updates to the course are free forever.   promoted 

Falcon
A free, open-source SQL editor with inline data visualization. Supports connecting to RedShift, MySQL, PostgreSQL, IBM DB2, Impala, MS SQL, Oracle, SQLite, and more.

jsonbox.io
Now at version 2+. Free HTTP-based JSON storage.

Verify JSON
Library to verify JSON structure easily using a lightweight JSON schema syntax.

TerminusDB
A database built for data people. A model-driven graph database designed specifically for the web.

IndexedDB with Usability
Now at version 5+. A tiny library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.

graphql-api-starter
A starter kit for projects using TypeScript, Express.js, and Apollo GraphQL.

Vendure
A modern, headless GraphQL-based e-commerce framework built with TypeScript and Node.

gqless
A GraphQL client without queries. Auto-generates GraphQL queries based on the data your application consumes.

heliosRX
A front-end Object-Relational Mapping layer for reactive real-time web applications using Firebase Realtime Database.

Mobile Tools and React Native

ES6 for Everyone by Wes Bos is 50% Off!
The master package includes 77 HD videos, part of 21 modules – and updates to the course are free forever.   promoted 

hamburger-react
Animated hamburger menu icons for React. CSS-driven transitions, created to be as elegant and performant as possible.

react-native-design-system
A set of design rules and component library that lets you prototype faster with easy to use cross-platform components.

Draftbit
Early access. Build your app, visually. Create, customize, and launch mobile apps all from your browser. Source code included.

react-native-mmkv-storage
An efficient, small and encrypted mobile key-value storage framework for React Native.

Pep
Turn your website into a fast, installable Progressive Web App (PWA) instantly.

StorePreviewer
Preview what your mobile app will look like in the iOS App Store. Just type the details and see the live preview.

React Native Web Template
Template project for creating iOS, Android, and Web apps with React Native.

Hyperview
A new hypermedia format and React Native client for developing server-driven mobile apps.

Bravo Studio
Turn Figma prototypes into native iOS and Android apps instantly with no code.

React Native Material UI
Highly customizable Material Design components for React Native.

A Tweet for Thought

Here's a good thread from Fran Swaine on how to avoid burnout while freelancing.
 

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

Phuoc Nguyen, who I featured a few issues back with his great project called HTML DOM, has built another great project called 1loc – a categorized list of vanilla JavaScript one-liners.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

In previous tips I introduced a basic HTML Drag and Drop API example along with some things you can do with the dataTransfer() object. This tip will focus on the different events you can listen for during a drag operation.

There are 7 drag events that are supported across all modern browsers. They are:

• dragstart - A dragging operation begins (on dragged item)
• drag - A drag operation is in process (on dragged item)
• dragenter - A dragged item enters a valid drop target (on drop target)
• dragover - A valid drop target is dragged over (on drop target)
• dragleave - A dragged item leaves a valid drop target (on drop target)
• drop - A dragged item is dropped on a valid drop target (on drop target)
• dragend - A drag operation ends (on dragged item)

Now on to this week's tools!

React Tools

>&campaign_id=02f2bef915&device=desktop&v=0.14" style="padding-bottom: 12px;max-width: 568px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="568"> >&campaign_id=02f2bef915&device=mobile&v=0.14" style="width: 100%;max-width: 386px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="386">

Enform
Handle React forms with joy. Helps you manage form validation, dirty form submission and reset, field values and changes, and error messages.

react-letter
A React component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should match what is supported by Gmail.

useCustomHook
A starter template for creating a new React Hook.

react-easy-state
Simple React state management made with ES6 Proxies.

Crank.js
Write JSX-driven components with functions, promises, and generators. uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in your JavaScript.

use-scroll-to-bottom
React Hook that uses IntersectionObserver to detect when the user has scrolled to the bottom of the page.

React Cool Portal
A React hook for Portals that helps you render children (e.g. modals, dropdowns, tooltips, etc) into a DOM node that exists outside the DOM hierarchy of the parent component.

React State Selector
Performant, type safe and easy to use React global state manager.

React Table
Now at version 7+. Hooks for building lightweight, fast and extendable data grids for React.

react-curved-arrow
Use nice curvy arrows in your React project. Great for interactive tutorials and product tours.

react-enroute
Now at version 4+. React router with a small footprint for modern browsers.

codelift
A "No Code" GUI for your React app.

50% Off Courses by Wes Bos (Master Packages!):
 

 

Media Tools (SVG, Audio, Video, etc.)

British Museum Collection
The British Museum has released 1.9 million images, most with a CC 4.0 license.

Rickshaw
A JavaScript toolkit for creating interactive time series graphs.

Trianglify
Algorithmically generated triangle art that you can render in a project using a simple API, or generate and download using the online tool.

Plotly.js
Built on top of D3.js and stack.gl, a high-level, declarative charting library with over 40 chart types, including scientific charts, 3D graphs, statistical charts, SVG maps, financial charts, and more.

Image Cropper
A quick and easy way to resize any image (PNG, JPG, SVG, GIF, and WEBP supported).

PicsArt Photo Editor
More than a dozen online photo editing tools including duotone effects, overlays, filters, background editing, and more.

BlurHash
A compact representation of a placeholder for an image. Replace boring grey boxes with beautiful states for your placeholders.

Image Compare Viewer
A vanilla JavaScript, dependency-free component that adds an interactive image diff viewer to any page. The on page demos are pretty cool!

OpenJSCAD.org
A set of modular, browser and command line tools for creating parametric 2D & 3D designs with JavaScript code.

Vime
Open source video player library focused on giving users and developers the best possible media player experience. Supports HTML5, Dash, YouTube, Vimeo, and Dailymotion.

Mixkit Music
Free stock music clips that are royalty-free for commercial projects.

The Uncategorizables

Exchange Rates API
A simple and lightweight free service for current and historical foreign exchange rates.

Amazon AppFlow
A fully managed integration service that enables you to securely transfer data between SaaS apps like Salesforce, Marketo, Slack, and ServiceNow, and AWS services like Amazon S3, in just a few clicks.

Digital Brain
Auto-generates your basic documentation and then provides a beautiful, fast, and collaborative interface for your team to complete your documentation process.

Permanent.org
A new non-profit, secure cloud storage service with a focus on privacy that offers a free gigabyte to start.

Flow
A fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them.

Phelia
A reactive Slack application framework. Build interactive Slack apps without webhooks or JSON headache. If you know React, you know how to make a Slack app.

hCaptcha
A drop-in replacement for reCAPTCHA (you can switch within minutes) that protects user privacy, rewards websites, and helps companies get their data labeled.

markmap-lib
Visualize your Markdown with mindmaps.

Plausible
Simple and privacy-friendly alternative to Google Analytics. A lightweight and open-source site analytics tool that doesn’t use cookies and is fully compliant with GDPR, CCPA, and PECR.

Public APIs
A collection of free public APIs for software developers, categorized.

A Tweet for Thought

Technology has changed the way we behave, as this thread demonstrates.
 

Got a Tool Suggestion?

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 a big Seinfeld fan like I am, you'll love this: Seinfeld Adventure. Right now it's just a pitch for a game. I seriously doubt Jerry and his producers will approve this, but it's pretty cool to see what it would be like to play "a game about nothing".

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly
WTW on YouTube