Issue #355 (Drag Defaults, Frameworks, Testing, JS Utils)05/07/20
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
Every element on the page that doesn't explicitly have the draggable attribute set has a draggable value of "auto". But that doesn't mean you can check for a value of "auto". As the spec says, if an element's draggable attribute is not set to either true or false:
"...the element's draggable content attribute has the state auto. If the element is an img element, an object element that represents an image, or an a element with an href content attribute, the draggable IDL attribute must return true; otherwise, the draggable IDL attribute must return false."
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.
Try selecting any one of the three colors in full, or even a portion of the text in those colors to find another valid color value (e.g. "Pink" inside the color "HotPink"). Notice the background of the dropzone will change accordingly.
As a side point, you can select any random piece of text on that page and you'll see the browser try to figure out what to do with the text if you drop it onto the dropzone. This is similar to dragging an image (which is naturally draggable) into a new page and then the browser visits the URL of that image.
Now on to this week's tools!
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.
A Woocommerce PWA platform for building fast loading, mobile-friendly e-commerce websites.
A CSS library for building retro interfaces that look like Windows 98.
A utility-based CSS framework that allows you to make unique and modern designs without writing any CSS.
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.
An open source design system that includes a whole slew of components and utilities for use in your next travel-based app or website.
General purpose Vue Composition API composable and reactive components written in TypeScript.
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.
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
Now at version 2+. A console for testing and debugging on mobile browsers.
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.
A Chrome extension to track postMessage usage (URL, domain, and stack) both by logging using CORS and also visually as an extension icon.
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).
Tests the delay of pointermove events in the current web browser and demonstrates the usefulness/uselessness of pointer prediction.
A well-known tool but I've never included it here. A Promise-based HTTP client for the browser and Node.
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.
Now at version 7+. API design platform plus REST and GraphQL client.
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
A regular expression to match all Emoji-only symbols as per the Unicode Standard.
A general purpose internationalization library in 292 bytes.
A tiny, static AMD API implementation that allows including AMD modules in regular script tags.
Pure ES6 library for clipping fixed positioned elements on scroll.
Reuse the previous version of a value unless it has changed.
CLI tool that makes it easier for module authors to support both ES modules and CommonJS modules for Node.js.
'Promisified' Array, compatible with normal arrays, but comes with support for async methods (e.g. mapAsync).