Issue #356 (effectAllowed, CSS/HTML, Git/CLI, Site Buiders)05/14/20
A seemingly useful feature of the HTML Drag and Drop API is something called the dataTransfer.effectAllowed property that allows you to determine what type of drag operation is permitted. Unfortunately, I'm going to say up front that this feature works differently in different browsers, so I don't know if it's very usable.
For example, users can use the CTRL and/or SHIFT keys (or similar key combos) to perform system-defined drag operations. I'm on a Windows 10 machine, so on my system I apparently have three operations that I could figure out:
- A "move" operation done by just dragging (no keys pressed)
- A "copy" operation, done using CTRL-drag
- A "link" operation, done using CTRL-SHIFT-drag
The same operations can be performed on a Mac using the OPTION key in place of CTRL and CMD in place of SHIFT (you also have to start dragging before using the keys on Mac). Firefox is the only browser, however, that seems to allow these keyboard-based drag operations. None of the Chromium-based browsers that I tested in allowed the keystrokes to even matter.
Try it out using this CodePen demo
Use Firefox and perform the drag operations using the keyboard modifications. These are basically system-level commands that the browser is supposed to recognize. Notice the console that logs the operation taking place. In Chrome/Brave browsers, the log always seems to display 'none' for the dragEffect property (which tells you which operation is being executed).
Notice in the demo that you can't drag any box to any dropzone (regardless of the browser used). This is accomplished via the aforementioned effectAllowed property, which looks like this:
|
dropzone.addEventListener('dragover', function(e) {
e.dataTransfer.effectAllowed = 'copy';
});
|
I feel like a larger write-up of this feature would be applicable, along with possibly reporting bugs in the various browsers due to the inconsistent behaviour. If you see something different in your browser, or if you think I'm not understanding this feature correctly, feel free to respond to this email and let me know.
Now on to this week's tools!
|
CSS and HTML Tools
  |
Fluid-responsive font-size Calculator
Fluidly scale typography smoothly across viewport widths. Recently updated to include clamp, min-max, and allow a user defined property.
pwa-install
Web Component from the PWABuilder team that brings an improved "install" experience to your PWA. Looks similar to an app being installed on an app store.
CSS Section Separator Generator
A simple and interactive generator to add a fancy section separator to your pages.
postcss-px-to-viewport
PostCSS plugin that generates viewport units (vw, vh, vmin, vmax) from px units, to create a scalable interface on different displays.
RGB Color Blender
Online tool to mix two RGB colors in different proportions to create harmonious transitions.
pattern.css
CSS-only library to fill your empty background with beautiful patterns.
Glyphfinder
Mac or Windows app. The missing character search for designers, developers, and writers that allows you to search for a character by keyword.
PXTOEM.NET
Enter a base font size and px or em values and this page will generate values for px, em, percent, and pt in a handy chart.
Watched Box
A custom element as a ResizeObserver root. The easiest way to get working with ResizeObserver for container queries with JavaScript. Use any CSS length units, and mix them together.
Color Picker From Image
Upload an image or provide an image URL and this tool will allow you to hover over the embedded image to use it as a color picker.
Meanderer
A JavaScript micro-library for responsive CSS motion paths, for scaling CSS motion path strings.
|
Git, GitHub, and CLI Tools
Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted
GitHub Writer
Chrome or Firefox extension that adds a WYSIWYG rich-text editor to GitHub when creating or commenting on issues, reviews, pull requests, and wikis.
Vershd
A fluent Git GUI created to make using Git easier. Innovative version control software that helps prevent errors and accidental deletions, streamlining the entire Git process.
compressed-size-action
A GitHub action that reports changes in compressed file sizes on your pull requests.
monorepoize
Bash scripts to combine multiple Git repos into a single monolithic repo (a.k.a. a monorepo) while preserving full history, branches, and tags.
Suitcase
A flexible command line tool for Mac to display a SwiftUI interface that can trigger commands and scripts.
Tara AI
By connecting Git to tasks and sprints, helps everyone on your team have clarity around the release cycle, from engineering to sales.
editly
Slick, declarative command line video editing.
a-Shell
iOS app that's "a Terminal in your pocket" for control of files, network connectivity, writing code, and lots more.
Bashtop
Linux resource monitor that shows usage and stats for processor, memory, disks, network, and processes.
Guitar
GUI Git client for Windows, Mac, or Linux.
dynamic-wallpaper
Simple bash script to set a dynamic desktop wallpaper background according to certain conditions (e.g. time of day).
|
CMS's, Static Sites, Site Builders, etc.
Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted
Editor X
A new editor for the Wix website builder that allows you to easily build fluid sites with flexible grids and breakpoint control.
Figure Netlify CMS Editor Component
Use the native HTML <figure> element in Netlify CMS to add an image and caption it.
Embed Everything
Really easy multimedia embeds for Eleventy, the popular static site generator.
ScullyDocs
A static site generator for Angular projects looking to embrace the JAMStack.
Textpattern
A flexible, elegant, fast and easy-to-use content management system written in PHP.
Sitesauce
A static version of your website in one click. Converts dynamic websites (like Joomla-powered websites) into static sites, and keeps content in sync.
Mordred
Source data from anywhere, for Next.js, Nuxt.js, Eleventy and more.
Netlify Forms
Manage forms and submissions without any server-side code or JavaScript.
react-notion
A fast React renderer for Notion pages. Use Notion (the workspace tool for notes, wikis, etc.) as a CMS for your blog, documentation, or personal site.
Eleventastic
A simple Eleventy starter kit.
LoveIt
A clean, elegant but advanced Hugo theme.
|
A Tweet for Thought
If the following tweet is true, then it's a great reminder that there's nothing wrong with starting small.
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 like attending conferences and workshops (which are all on hold now), you might want to check out Hopin, an all-in-one live online events platform where attendees can learn, interact, and connect with people from anywhere in the world.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
