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.
BTW - if you like these kinds of JavaScript tips, you'll love my e-books bundle.
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.
|
|
