Issue #352 (setDragImage(), CSS/HTML, JS Utils, Build Tools)04/16/20
Continuing on the theme of dealing with HTML's Drag and Drop API, another thing you're able to do with this API is set a custom image that appears during any drag operation.
Normally when you drag a draggable element, the browser will by default display a mini version of the dragged object, which appears next to the user's cursor. In most cases, this is acceptable and is probably the desired behavior. But if you want you can change that image using the setDragImage() method of the dataTransfer object.
Here's the code:
|
let img = new Image();
img.src = 'my-image.png';
box.addEventListener('dragstart', function (e) {
e.dataTransfer.setDragImage(img, 92, 92);
});
|
Notice a few things:
- I'm creating an image using the Image() constructor. I could also use document.createElement('img') for this
- I'm setting the image's src attribute to point to my image
- I'm using setDragImage() inside the event listener for the dragstart event
The setDragImage() method takes three arguments, all mandatory:
- The image to use during the drag operation
- The horizontal (x) offset relative to the mouse pointer
- The vertical (y) offset relative to the mouse pointer
View this in action on CodePen
In my CodePen example, I'm using a portion of the Web Tools Weekly newsletter header/logo as the drag image. I'm also ensuring that the mouse pointer is centered over the image by using x/y coordinates equal to half the image's dimensions.
Of course, in this example, the image isn't relevant to the drag operation, so there's no image appearing in the drop zone or anything like that. This is just a simple example that shows you how to change the drag image during a drag operation.
Now on to this week's tools!
|
CSS and HTML Tools
Real-Time Chat at Your Fingertips
Stream Chat offers a variety of SDKs and pre-built components to help integrate real-time chat and messaging into your application in as little as a couple of days. Sign up now for a free 28-day trial – no credit card required. via Paved
CSS Scan
Now at version 2. Chrome or Firefox extension. An alternative to using inspect element to edit and debug CSS. Check the CSS of any element on hover, instantly, and copy its entire rules with a single click.
CSS Color Gradient Generator
Customize your own gradient or choose a gradient from a predefined gallery.
Color Ninja
A color palette and color scheme manager for Mac.
BEM Naming Cheat Sheet
A nicely designed guide to using the BEM naming method for your stylesheets.
sass-link
Use SCSS almost like regular CSS. It parses the link and style tags of your document, compiles them using sass.js and injects the compiled CSS back into the document.
CSS Builder
Live CSS editing tool to fiddle with various CSS properties including shadows, border-radius, filters, typography, and lots more.
MVP.css
A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done.
tailwindcss-standalone
Standalone build of Tailwind CSS that runs in the browser. I'm assuming the idea here is that you don't need a build process to use it.
Buttono
A flexible Sass mixin for creating BEM-style buttons.
CSS Specificity Calculator
Interactive tool to better understand CSS specificity. Provides a specificity score along with number of IDs, classes, and element selectors used. Also allows deep linking to whatever selector you enter.
glaze
CSS-in-JS micro-library for making design systems approachable.
|
JavaScript Utilities
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
Flip
A nice looking flip-animation timer component that you can add to your website to include a countdown (e.g. for a product launch).
ASScroll
A hybrid smooth scroll setup that combines the performance gains of virtual scroll with the reliability of native scroll. See the two example links in the readme for a demo, which is pretty cool but definitely not for every project.
prerender.js
Another option to preload links before the user clicks them.
Universal Model
A unified state management solution for Angular, React, Svelte, and Vue.
Zod
TypeScript-first schema validation with static type inference.
Prerender
Allows your JavaScript website to be crawled perfectly by search engines. This tool renders the JavaScript in a browser, saves the static HTML, and you return that to the crawlers.
gretchen
Making fetch happen in TypeScript.
sort-isostring
A tiny (110B) and fast utility to sort ISO 8601 date strings.
uid
A tiny (134B) and fast utility to generate randomized output strings of fixed length using lowercase alphanumeric characters.
Checkboxland
Peak weirdness here. A JavaScript library for rendering anything as HTML checkboxes. Yes, that's right.
Routine
An inline, promise-based wrapper around Web Workers.
|
Build Tools, Bundlers, etc.
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
npm Dependency Visualizer
Enter the name of any npm package and this tool will display a visual showing its dependencies.
Pipedream
An integration platform built for developers. Develop any workflow, based on any trigger. Workflows are code, which you can run for free. No server or cloud resources to manage.
Rome
An experimental JavaScript toolchain. A compiler, linter, formatter, bundler, testing framework, and more.
Destiny
Prettier for File Structures. Scans a folder for all the files in it and creates a graph based on how the JavaScript/TypeScript files import each other.
Prettier
The popular code formatting tool is now at version 2.
Worth It
Enter a URL and this tool will analyze a page to determine how much less JavaScript is downloaded in modern browsers as a result of it using the module/nomodule pattern.
rollup.js
The popular module bundler for JavaScript apps is now at version 2+.
scriptlint
Enforceable standards for your package.json scripts – like ESLint for npm run. The idea here is to o enable people to use memorable and consistent script names across their projects.
Tray.io
Quickly integrate software applications using powerful automated workflows. Easily build and streamline processes using a beautifully designed visual workflow editor.
Unminify
Free online tool to unminify (unpack, deobfuscate) JavaScript, CSS, and HTML code, making it readable and pretty.
|
A Tweet for Thought
Kent C. Dodds provides a JavaScript quick tip that uses destructuring but it's interesting to read the many responses in the thread. I tend to be on the side of the responders in cases like this. Sometimes clever code is not readable or maintainable code.
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...
Bizarrely, someone has created a project that aims to name each of the web's 16.7 million colors: colornames.org. I guess with so much remote time on our hands, this is as good a time as any to attempt this.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
