Advertisement via Syndicate

Last week I covered a really simple introduction to the HTML Drag and Drop API, for those of you who have never used it before. The demo has the minimum code required to produce a drag and drop example. Let's take that a little further and incorporate the dataTransfer object, which has methods and properties that can be used in the midst of a drag and drop operation.

First, I can use the setData() method of the dataTransfer object, which I'll incorporate in the midst of my event listener when listening for a dragstart event (an event I didn't need to use in the previous demo). The relevant line looks something like this (where "e" is the event object):

As you can see, the setData() method takes two arguments: The data type and the data itself. In this case, the data is simply the innerHTML of the dragged element. This is the first step in transferring data: Setting the data, which happens when the element is initially dragged.

The next key line in my code will be using the getData() method. In this case, I'll use it when the drop event is triggered on my drop area element:

The data that I'll be grabbing is text that represents a valid CSS color keyword, which will be inside each draggable element. The data could be a lot of things, but in this case I'm just using some text for demo purposes. And as you can see, the text sets the background color of the drop area element.

See the full working demo here

There's naturally a lot more code there, but it's fairly straightforward. I'm looping over the draggable boxes to add the event listeners to each one. The setData() and getData() methods are used within that loop to obtain and apply the color info.

Try dragging any of the boxes into the drop area to see the background of the drop area change. You can even try changing the HTML to use different colors (any valid CSS color value will work). As long as the color is valid, the background of the drop area element will change to that color.

And that's a basic way to use the dataTransfer object when working with the Drag and Drop API.
 

Now on to this week's tools!
 

JavaScript Utilities

Working From Home? Try Team.Video
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

Van11y
Bit of an older project that I just discovered. A collection of customizable, accessible scripts for rich interface elements, built using progressive enhancement.

Rsup Progress
A simple progress bar with promises support.

Heapify
A very fast JavaScript priority queue, implemented using a binary heap, with no dependencies.

Nano Events
Simple and tiny (72 bytes) event emitter library for JavaScript.

Chardin.js
Simple overlay instructions for your apps. Kind of like those 'app tour' plugins, but just a single overlay pointing stuff out.

Serialize JavaScript
Serialize JavaScript to a superset of JSON that includes regular expressions and functions.

FullCalendar
A JavaScript calendar plugin, great for displaying events with drag-and-drop capabilities and an API for extending its functionality.

defu
Utility to recursively assign default properties.

Clack
A modern keyboard shortcut library written in Typescript.

Sharect.js
A lightweight (2.9Kb gzipped and minified) JavaScript library to let users share text selections to social networks in desktop browsers (like Medium).

Uppload
A better JavaScript image uploader. Highly customizable with 30+ plugins, open-source, and can be used with any file uploading back end.

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

Beginner JavaScript by Wes Bos is 50% Off!
The master package includes 88 HD videos, part of 15 modules – and course updates are free forever.   promoted 

mediasoup
Cutting-edge WebRTC video conferencing. The perfect choice for building multi-party video conferencing and real-time streaming apps.

gifcap
Create animated GIFs in your browser from a screen recording. Client-side only, no data is uploaded.

Tabler Icons
A set of over 400 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.

Video Puppet
Using a markdown file, create a video (with captions) from a chosen set of images, audio files and smaller video clips.

Exifr
The fastest and most versatile JavaScript EXIF reading library.

Seamless Pattern Generator
Create seamless, repeatable royalty free patterns for your website, or to download as SVG, JPEG or PNG.

Resoundly
Produce a podcast simply by typing the content and this app will convert it to speech.

Spline
Easily create 3D web experiences without coding. Build and iterate fast with production-ready results.

Photo Stream
Self-hosted, super simple photo stream. Built with Ruby and seems to require either Netlify or Jekyll.

Ionicons
Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font.

The Uncategorizables

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 

Brim
Desktop application to efficiently search large packet captures and logs from Zeek (the network security monitoring tool).

StartNames
Produces brandable ideas for domain names in a Twitter stream, based on actual domains that are for sale.

WMS Everywhere
Chrome extension to help you research search volume, advertising cost per click, and related keywords inside Google search results – free and on-demand.

PDF.js Express
Add a PDF.js viewer with out-of-the-box annotation, PDF form fill, and signing. Based on Mozilla's PDF.js (for parsing and rendering PDFs).

AsyncAPI
Open source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs.

Weglot
Allows you to make your website multilingual in minutes and to manage all your translations effortlessly.

Our Site Updates
An easy way to post updates to your website (e.g. via easy to install banners) and keep visitors informed.

RightFont
An innovative, beautiful and professional font manager app for Mac, helping designers preview, install, sync, and manage their font files.

PingPong
Remote user interviews and user tests made simple.

Extract Article Text
Lets you easily extract boilerplate-free text from news articles, blogs, press releases, and company pages with a single API request.

Commerce
Drop‑in e‑commerce for any website with a single line of code. Serverless, real‑time, and API‑first.

A Tweet for Thought

When you're living in a tech bubble like many of us are, it's hard to believe there are people this naive.
 

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

This is amazing: Open and Shut lets you send messages in Morse code by repeatedly slamming your laptop shut. So if you've been kidnapped and forced to give up all your passwords or something...?

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