Issue #350 (Drag and Drop API, JS Libs, Testing, Jamstack)04/02/20
If you've never looked into using the HTML Drag and Drop API, I've created a super simple code example that uses the least code possible to demonstrate how simple it is to allow one element to be dragged into another one on a web page.
First, here's the HTML:
|
<div id="box" draggable="true"></div>
<div id="dropzone"></div>
|
Notice the draggable attribute set to true, and the IDs that I'll use as hooks in the JavaScript. Here's the JavaScript:
|
let box = document.getElementById('box'),
dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', function (e) {
e.preventDefault();
});
dropzone.addEventListener('drop', function (e) {
e.target.appendChild(box);
});
|
Here I'm listening for the dragover and drop events to ensure that the element gets moved properly. The move itself is accomplished using the well-known appendChild() method.
And that's it! Aside from the variable declarations, it's just 6 lines of JavaScript. This code on its own isn't going to do a whole lot. All it does is drag the 'box' element into the 'dropzone' element.
You can see this in action in this CodePen demo, which also includes a little extra code that does the following:
- Adds some styles to indicate that the box is draggable and that the dropzone is being dragged over
- Listens for the dragend event to remove styles indicating that the box is draggable and disables the 'dragged over' styles
- Switches the draggable attribute to false
There's a lot more that I could discuss about the API but this should suffice to give you a starting point, after which you can use a resource like the one on MDN to go deeper.
Now on to this week's tools!
|
JavaScript Libraries and Frameworks
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
p5.js
Now at version 1+. JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, and beginners.
Hex Engine
A modern 2D game engine for the browser, written in TypeScript and designed to feel similar to React.
LInQer
The C# Language Integrated Queries ported for JavaScript for amazing performance.
Type Route
A flexible, type safe routing library, built on top of the same core library that powers React Router.
Angular
The popular framework is now a version 9.
Mirage JS
An API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any back-end services.
Solid
A declarative, efficient, and flexible JavaScript library for building user interfaces that doesn't use a virtual DOM.
Alpine.js
A rugged, minimal framework for composing JavaScript behavior in your markup.
BlockLike.js
An educational JavaScript library that bridges the gap between block-based and text-based programming.
|
Testing and Debugging Tools
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
Screenshot Cyborg
Take a full-page screenshot of a webpage, up to 50 URLs at once. Choose to render the screenshot for desktop, tablet, or phone.
Stryker Mutator
A testing toolkit for JavaScript (also Scala and C#) that uses mutation testing, which means tests are run after bugs, or mutants, are automatically inserted into your code.
Cypress
Now at version 4+. Fast, easy, and reliable end-to-end testing for anything that runs in a browser.
Color Contrast Checker
Online tool that analyses and suggests colors that meet the required contrast ratio. Creates shareable links for chosen contrast checks.
LeakLooker X
Discover, browse and monitor database or source code leaks.
Animockup
Online prototype/animation tool to create animated mockups in your browser and export as video or animated GIF.
single-spa Devtools Inspector
A Firefox/Chrome devtools extension to provide utilities for helping with applications using single-spa (framework for front-end microservices).
micro-jaymock
Tiny API mocking microservice for generating fake JSON data.
The Contrast Triangle
Tool for simultaneously checking text, link, and background contrast. This one also has shareable links for specific tests.
Shieldfy
Automated security assistant that integrates with GitHub to show you potential vulnerabilities in your code.
puppeteer-in-electron
Use puppeteer to test and control your Electron application.
|
Site Builders, CMS's, Static Sites, 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
LiveCanvas
Pure HTML and CSS WordPress builder that uses Bootstrap 4 and helps pages achieve better SEO results.
React Blog
A blogging system built on React where the blog posts are individual GitHub issues.
Calcapp
A cloud-based app designer enabling you to create apps without having to do any programming.
Factor JS
A JavaScript CMS platform that lets you build powerful and professional JavaScript applications fast.
NoCo
Enterprise-grade, no-code platform for Node or React developers. Generate code for most of your app, and only write the parts that make your product unique.
Sitebot
Create a personal website in a few minutes by just chatting. Seems to require Facebook Messenger login.
Webcodesk
A powerful visual development tool for building React apps. It's tightly coupled to the React API, so the knowledge translates directly.
BuilderX
A browser based design tool that codes React Native and React for you.
gatsby-plugin-next-seo
A plug-in that makes managing your SEO easier in Gatsby projects.
lego
A fast static site generator that generates optimised, performant websites.
Kodular
A drag-and-drop no-code app builder.
|
A Tweet for Thought
This thread establishes that password strength indicators are flawed.
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 a tech conference that you were going to attend has been cancelled, you might want to check out 40 Conferences Gone Virtual, by Spokable, which is tracking which conferences are happening online.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
