What's happening around the world right now is unprecedented, but I don't think I have to tell you that. Wherever you are, I hope you and our family members are healthy and I hope you've been able to continue some semblance of work, assuming you're able to do your job remotely, as most developers probably are.

I think most of us that didn't previously work remotely will be looking for or recommending new tools for our remote teams, and even the occasional article on remote work life and work culture will be greatly beneficial.

Over the past year, I've been curating a second newsletter that you might enjoy if you've been newly converted to remote work. It's called Tech Productivity, and it's always a brief newsletter with about 10-12 links that include productivity-related tools (like video conferencing, Slack plugins, note taking apps, etc.) as well as productivity-related articles.

Some of the articles cover things like brain science while others are just simple tip-based posts on freelancing and working on side projects. Basically, any kind of content that can help tech workers be more productive. And if you're missing the "productivity tools" category that I used to include in this newsletter, well those tools are now in Tech Productivity, so this one can stay focused on developer-related tools.
 

Now on to this week's tools!
 

CSS and HTML Tools

Have Happier, More Productive Video Meetings
Team.video makes it easier and faster for remote teams to work together by offering user friendly video meetings with agendas, collaborative notes, and emoji responses. No download required and it’s free to use.   via Syndicate

Remake
A framework to build web apps and prototypes using nothing but HTML. Editable areas, sortable items, sign-up/log in functionality, and more.

Aeon
A lightweight date time picker built with web components that can be used anywhere.

Selectors Explained
Interactive online tool to translate CSS selectors into plain English.

Utopia
A one-stop resource for implementing fluid responsive designs, allowing you to elegantly scale type and space without breakpoints.

Neumorphism.io
Generate CSS for elements that have 'soft UI' (i.e. 3D box shadows and lighting).

PurgeCSS
Now at version 2+. Too to remove unused CSS as part of your development workflow.

Leonardo
Generate colors based on a desired contrast ratio.

Tailwind Colors
Color configuration tool for Tailwind CSS, the popular CSS utility framework.

FasterChrome
A Chrome extension that implements instant.page, the popular link pre-loading library, to make page loads and navigation feel faster.

Generate Color
Simple online tool to generate a graduated color palette from one or two predefined color.

React Tools

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

usePlaceCage
A React hook for placecage.com, the image placeholder service that inserts images of, you guessed it, Nicolas Cage.

React Query Devtools
Debugging tool for React Query, the library of React hooks for fetching, caching, and updating asynchronous data in React.

Venti
A global state solution for React.

React Nice Dates
A responsive, touch-friendly, and modular date picker library.

React Google Static Maps
A React wrapper for Google's Static Maps API.

Craft.js
In Beta. A React framework for building powerful and feature-rich drag-n-drop page editors.

react-suspense-fetch
A primitive library for React Suspense Render-as-You-Fetch.

Drab
A React CLI that makes it easier to do monotonous tasks like creating a component or page with styles, creating a service, or creating a hook.

use-axios-client
Make requests with Axios (the promise-based HTTP client for the browser and node) using React hooks.

use-tensorflow
A React hook for TensorFlow.js (the JavaScript library for machine learning to detect objects and poses easily.

Build Tools, Bundlers, etc.

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

esbuild
An extremely fast JavaScript bundler and minifier. Built with Go, but I don't believe that is a barrier to entry for those who don't use Go.

Create Next App
The easiest way to create a React app with server-side rendering via Next.js.

Yarn
The popular package manager alternative to npm is now at version 2+.

why-npm-i-so-long
A small utility to help troubleshoot when installing npm dependencies takes a long time.

vue-loader
A webpack loader for Vue single-file components.

svelvet
A CLI Svelte compiler and watcher that works with Snowpack, the popular build tool.

one-click.js
One click, offline, CommonJS modules in the browser.

Gasket
Framework maker for JavaScript applications, building and scaffolding boilerplate as well as essential elements for libraries and layers of apps to integrate together during runtime.

antd-dayjs-webpack-plugin
A webpack plugin for Day.js, the immutable date library alternative to Moment.js.

shoulders
Quickly view a list of open issues for the open-source packages that your project depends on.

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

With some extra home time nowadays, you might enjoy Radiooooo, the musical time machine.

Thanks to everyone for subscribing and reading!

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

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