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

Although I often include quick DOM scripting tips in the intro of this newsletter, for this week, I'm just going to point you to a great little resource that was sent to me by reader Phuoc Nguyen:

• HTML DOM

• Make a draggable element
• Resize columns of a table
• Sort a table by clicking its headers
• Calculate the size of the scrollbar
• Communicate between an iframe and parent window

So check out HTML DOM, I'm sure you'll have lots to investigate!
 

Now on to this week's tools!
 

Front-end Frameworks

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

chakra-ui-vue
A set of accessible and composable Vue components that you can use to build your favourite applications and sites.

Pixel Lite
A beautifully crafted, responsive UI kit based on Bootstrap 4 that includes 100 components, 3 plugins, and 3 example pages.

next-typescript-materialui-jest-starter
Very opinionated starter boilerplate for projects based on Next.js, setup with Typescript, Material-UI, and Jest.

React SaaS Template
Template for building a SaaS app or admin website using React + Material-UI.

web3-react
A simple, extensible, dependency-minimized framework for building modern Ethereum decentralized apps.

Tailwind UI
A UI components library, crafted by the creators of Tailwind CSS.

neo.mjs
A Web Workers-driven UI framework.

LitElement
A simple base class for creating fast, lightweight web components. Makes it easy to define web components – ideal for building a UI design system.

Ionic React
React version of Ionic Framework. 100+ mobile optimized React UI components. Standard React tooling with react-dom.

Accessible Components
Scott O'Hara's repo that lists all the accessible widgets and components he's built.

StarAdmin
A free responsive admin template built with Bootstrap 4.

Media 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 

Croppola
Upload a photo and this tool will use AI to crop the photo for you automatically, or you can crop it manually and download the result.

Image to Colors
Online tool that extracts colors from any photo on upload.

Nuxt Optimized Images
Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).

Twilio Video React App
Demonstrates a multi-party video application built with twilio-video.js and Create React App.

react-particle-image
React component to render images as interactive particles. There's an interactive demo using the React logo that's pretty cool.

CoreUI Icons
Premium designed free icon for web and mobile, available in SVG, webfont, and raster formats.

DotMatrix.js
A small, performant class-based, dot matrix library with animated movements that respond to mouse/touch events.

react-calendar-heatmap
A calendar heatmap component built on SVG, inspired by GitHub’s commit calendar graph.

Chessboard Image
Modify chess pieces on a virtual chess board, to create chess positions, then download the image for use wherever you want. Might be cool for a chess tutorial website or blog.

Video Language
A language for making movies. Combines the power of a traditional video editor with the capabilities of a full programming language.

The Uncategorizables

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 

Mailcoach
A self-hosted email list manager. It integrates with services like Amazon SES, Mailgun, Postmark, or Sendgrid to send out mailings affordably.

Backstage
Open-source developer portal that puts the developer experience first by means of a a unified front end for all your infrastructure tooling.

dstack.ai
Collaborative data exploration. Enables individual data scientists and their teams to publish, share, and track data visualizations.

TAGX
Allows you to create video highlights and annotate the interesting parts of a video. Enter a YouTube, Vimeo, or direct video link to start annotating.

cs.opensource.google
A search engine to search Google's open source projects (Angular, Dart, Flutter, Go, etc).

Cotter
One-click secure phone number login for your apps.

Phrase
Automate localization processes. Edit language files online with your team of translators or order translations into more than 60 languages.

It's a Live
Lets you mimic a live coding presentation by prerecording the presentation, which gets triggered by random keystrokes as if you were really coding.

EasyCSV
Import spreadsheets into your App, Zapier, Google Sheets, Salesforce, or any public API in minutes.

Pico
Platform to create paywalled content, subscriptions, newsletters, etc.

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

If you've got a lot of extra time at home (and you should!) you might like Codepip. There you'll find a number of different interactive online games that teach you various aspects of front-end development.

Thanks to everyone for subscribing and reading!

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

When creating interfaces using HTML's Drag and Drop API (various aspects of which I've covered in recent issues), it's important to note that some elements on a web page are already 'draggable' by default. And you've no doubt noticed this. The spec explains that the following elements are draggable by default:

• A text selection
• An image
• An `a` element with an `href` attribute

In other words, the browser will automatically set the draggable value to true or false based on what kind of element it is. Try this CodePen demo to see the effect in action. Notice a few things in the demo:

• No draggable attributes on the three elements
• I'm using the Window.getSelection() method to get the selected text after the drag operation begins
• I'm using preventDefault() when the drop is made to ensure the browser doesn't think something suspicious is happening. If I didn't include this, you'd see a warning before the browser tries to navigate to whatever you drag.

Now on to this week's tools!
 

Front-end Frameworks

A No-Code Drag and Drop Form Builder
Get a lifetime membership to 123FormBuilder's Gold plan for a one-time fee of $39.99 (usually $299.88/year). 20 forms/month, 5000 submissions/month, 1000+ form templates, integration with Google Sheets, MailChimp, Dropbox, and more.  promoted 

HTML / Sass Jumpstart
Minimal, themeable, and scalable Sass/HTML template site. Powered by node-sass and includes stylelint, Prettier, and Autoprefixer, hot-reload via Browsersync.

H3
A microframework to build client-side single-page applications (SPAs) in modern JavaScript.

Fast Cart
A Woocommerce PWA platform for building fast loading, mobile-friendly e-commerce websites.

98.css
A CSS library for building retro interfaces that look like Windows 98.

Shorthand
A utility-based CSS framework that allows you to make unique and modern designs without writing any CSS.

Reactron
A tiny Electron project configured to work with React as the front end. The project has the minimum code necessary to start a new app.

Orbit
An open source design system that includes a whole slew of components and utilities for use in your next travel-based app or website.

vue-composable
General purpose Vue Composition API composable and reactive components written in TypeScript.

Hook
A dark HTML landing page template built with the aforementioned Shorthand CSS framework.

LitElement Starter Template
A minimal starter template for a web components app built with LitElement, TypeScript, and Parcel for bundling.

Reach UI
A set of React components to build accessible React-based design systems.

Testing and Debugging Tools

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

Eruda
Now at version 2+. A console for testing and debugging on mobile browsers.

CursedChrome
This can be used for malicious purposes, so be wary. A Chrome-extension implant that turns victim Chrome browsers into fully-functional HTTP proxies, allowing you to browse sites as your victims.

postMessage-tracker
A Chrome extension to track postMessage usage (URL, domain, and stack) both by logging using CORS and also visually as an extension icon.

Tempomat
Native macOS app for monitoring continuous integration systems.

Will it CORS?
Test if a URL is CORS friendly (i.e. it's safe to send and the response can be read).

Pointer Latency
Tests the delay of pointermove events in the current web browser and demonstrates the usefulness/uselessness of pointer prediction.

axios
A well-known tool but I've never included it here. A Promise-based HTTP client for the browser and Node.

FinDOM-XSS
A fast and simple DOM based XSS vulnerability scanner via a Shell script.

EventReduce Browser Demo
A browser demo where the EventReduce algorithm is used in different browser databases so you can test out the performance gains of different queries.

Insomnia
Now at version 7+. API design platform plus REST and GraphQL client.

JavaScript Utilities

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

emoji-regex
A regular expression to match all Emoji-only symbols as per the Unicode Standard.

Hegel
An advanced static type checker for JavaScript with optional type annotations and is able to prevent runtime type errors.

Rosetta
A general purpose internationalization library in 292 bytes.

SAMD
A tiny, static AMD API implementation that allows including AMD modules in regular script tags.

Flipswitch.js
Pure ES6 library for clipping fixed positioned elements on scroll.

useMemoValue()
Reuse the previous version of a value unless it has changed.

Notyf
A small (~3KB) JavaScript library for toast notifications. Responsive, accessible, dependency-free, and easy to integrate with React, Angular and Vue.

gen-esm-wrapper
CLI tool that makes it easier for module authors to support both ES modules and CommonJS modules for Node.js.

prray
'Promisified' Array, compatible with normal arrays, but comes with support for async methods (e.g. mapAsync).

qrcode-generator
QR code generator implementation in JavaScript, Java, and more.

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

Miss the office? Say no more.

Thanks to everyone for subscribing and reading!

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