If you love little JavaScript coding challenges that teach you about the basics of the language, you'll enjoy TypeOfNaN JavaScript Quizzes, a project by Nick Scialli and a number of other contributors.

Even after writing JavaScript for many years, I still find it hard to believe how many of such questions I get wrong. Ultimately, I don't think that matters unless I'm live coding in front of an audience or something. Debugging is part of the workflow so even if we get something subtle wrong initially, we can usually figure out the problem and fix it. What we are aiming for in most cases is an end result, not necessarily a process. But a little quiz like this can definitely enhance your understanding, and that can't hurt!

And if you like interesting little JavaScript tidbits like I often share in this newsletter, don't forget that I've compiled all my previous tutorials with updated demos and code samples in an e-book bundle you can grab from Leanpub.

Now on to this week's tools!

Text Editors, IDEs, etc.

Be in the Know on Emerging New Trends
Subscribe to our mailing list to receive reports on the latest trends in products, markets, companies, and styles. We constantly analyze over 300,000 blogs, forums, portals and social media accounts to keep track of the emergence of new trends at the earliest stages. sponsored 

Debug Visualizer
A VS Code extension for visualizing data structures while debugging. Works best with JavaScript/TypeScript. Also tested with C#, Java, and PHP. Works with any language that you can debug in VS Code.

Lens.vim
An automatic window resizing plugin for Vim. Automatically resizes windows when their content exceeds their window dimensions, but does so respecting some minimum and maximum resize bounds.

guijs
A multi-purpose native Windows and Mac app to help you manage your development projects. Has features for projects, package installation, script management, and more.

OpenChakra
Full-featured visual editor and code generator for React using Chakra UI (the React component library).

Autocode
An online IDE for connecting APIs together, for makers and developers alike.

Codecov
A code coverage solution to improve your code review workflow and quality. Provides highly integrated tools to group, merge, archive, and compare coverage reports.

CodeinCloud
Provides managed and dedicated cloud IDEs, hosted private cloud solutions and DevOp pipelines. Users can access on-demand IDEs for development.

Markdown App
Online or native WYSIWYG editor for Markdown for Mac, Windows, and Linux.

iHateRegex
Interactive regex cheatsheet for searching for common or complex regular expression solutions.

Peacock
VS Code plugin to subtly change the color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

Testing and Debugging Tools

Haxor
Helps you support and learn from developers as they build with your products. See how developers use your product by watching their screens, code changes, and open applications.

Kasaya
A "WYSIWYG" (kind of) scripting language and run-time for browser automation.

Blisk
Now at version 12+. A developer-oriented browser that provides businesses with a development workspace for teams and freelancers to develop and test modern web applications twice as fast.

Hexometer
All-in-one website maintenance and performance monitoring tool that continuously monitors and reports 2800+ data points.

Beautify.log
A Node.js library to beautify console.logs with colors, making them easier to read and more useful.

virtual-module
Evaluate a module in a sandbox with in-memory module resolution.

findead
Dead React components finder to find components no longer in use.

ci-detect
Detect what kind of CI environment the program is in (e.g. Jenkins, GitLab, Netflify, Travis-CI, etc).

Zoya
A highly composable logging library written in TypeScript, used for both client and server applications.

React Tools

Edtr.io
A customizable edit-in-place WYSIWYG component for enabling user-editable pages in React.

resourcerer
Declarative data-fetching and caching framework for REST APIs with React.

react-typical
React typing animation in ~400 bytes of JavaScript.

React Tiny Fab
A tiny (~700 byte gzip'd) WAI-ARIA compliant floating action button for React. The home page has the button working in the bottom right corner if you want to see what this does.

react-roughviz
a thin React wrapper around roughViz, the library for creating sketchy/hand-drawn styled charts in the browser.

react-ga
A JavaScript module that can be used to include Google Analytics tracking code in a website or app that uses React for its front-end codebase.

React Awesome Slider
React content transition slider. A 60fps, lightweight, performant component that renders an animated set of production-ready general purpose sliders.

React Tippy
A lightweight tooltip library for React based on Tippy.js and powered by Popper.js.

react-adal
Azure Active Directory Library (ADAL) support for React.

iframe-resizer-react
The official React interface for iFrame Resizer, a library that auto-resizes height and width of same- and cross-domain iframes to fit their contained content.

React Puzzle Confirm
This is kind of odd. It's a modal to "confirm" (kind of like a captcha) by fitting a puzzle piece using a slider.
 

A Tweet for Thought

Got a Tool Suggestion?

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...

Speaking of code editors, Codewerks is a new project that is running a Kickstarter for "software using a streamlined iPad interface that gives you all the flexibility of a Linux machine."

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly
WTW on YouTube

What's happening around the world right now is unprecedented, but I don't think I have to tell you that. Wherever you are, I hope you and our family members are healthy and I hope you've been able to continue some semblance of work, assuming you're able to do your job remotely, as most developers probably are.

I think most of us that didn't previously work remotely will be looking for or recommending new tools for our remote teams, and even the occasional article on remote work life and work culture will be greatly beneficial.

Over the past year, I've been curating a second newsletter that you might enjoy if you've been newly converted to remote work. It's called Tech Productivity, and it's always a brief newsletter with about 10-12 links that include productivity-related tools (like video conferencing, Slack plugins, note taking apps, etc.) as well as productivity-related articles.

Some of the articles cover things like brain science while others are just simple tip-based posts on freelancing and working on side projects. Basically, any kind of content that can help tech workers be more productive. And if you're missing the "productivity tools" category that I used to include in this newsletter, well those tools are now in Tech Productivity, so this one can stay focused on developer-related tools.
 

Now on to this week's tools!
 

CSS and HTML Tools

Have Happier, More Productive Video Meetings
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

Remake
A framework to build web apps and prototypes using nothing but HTML. Editable areas, sortable items, sign-up/log in functionality, and more.

Aeon
A lightweight date time picker built with web components that can be used anywhere.

Selectors Explained
Interactive online tool to translate CSS selectors into plain English.

Utopia
A one-stop resource for implementing fluid responsive designs, allowing you to elegantly scale type and space without breakpoints.

Neumorphism.io
Generate CSS for elements that have 'soft UI' (i.e. 3D box shadows and lighting).

PurgeCSS
Now at version 2+. Too to remove unused CSS as part of your development workflow.

Leonardo
Generate colors based on a desired contrast ratio.

Tailwind Colors
Color configuration tool for Tailwind CSS, the popular CSS utility framework.

FasterChrome
A Chrome extension that implements instant.page, the popular link pre-loading library, to make page loads and navigation feel faster.

Generate Color
Simple online tool to generate a graduated color palette from one or two predefined color.

React Tools

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

usePlaceCage
A React hook for placecage.com, the image placeholder service that inserts images of, you guessed it, Nicolas Cage.

React Query Devtools
Debugging tool for React Query, the library of React hooks for fetching, caching, and updating asynchronous data in React.

Venti
A global state solution for React.

React Nice Dates
A responsive, touch-friendly, and modular date picker library.

React Google Static Maps
A React wrapper for Google's Static Maps API.

Craft.js
In Beta. A React framework for building powerful and feature-rich drag-n-drop page editors.

react-suspense-fetch
A primitive library for React Suspense Render-as-You-Fetch.

Drab
A React CLI that makes it easier to do monotonous tasks like creating a component or page with styles, creating a service, or creating a hook.

use-axios-client
Make requests with Axios (the promise-based HTTP client for the browser and node) using React hooks.

use-tensorflow
A React hook for TensorFlow.js (the JavaScript library for machine learning to detect objects and poses easily.

Build Tools, Bundlers, etc.

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

esbuild
An extremely fast JavaScript bundler and minifier. Built with Go, but I don't believe that is a barrier to entry for those who don't use Go.

Create Next App
The easiest way to create a React app with server-side rendering via Next.js.

Yarn
The popular package manager alternative to npm is now at version 2+.

why-npm-i-so-long
A small utility to help troubleshoot when installing npm dependencies takes a long time.

vue-loader
A webpack loader for Vue single-file components.

svelvet
A CLI Svelte compiler and watcher that works with Snowpack, the popular build tool.

one-click.js
One click, offline, CommonJS modules in the browser.

Gasket
Framework maker for JavaScript applications, building and scaffolding boilerplate as well as essential elements for libraries and layers of apps to integrate together during runtime.

antd-dayjs-webpack-plugin
A webpack plugin for Day.js, the immutable date library alternative to Moment.js.

shoulders
Quickly view a list of open issues for the open-source packages that your project depends on.

A Tweet for Thought

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...

With some extra home time nowadays, you might enjoy Radiooooo, the musical time machine.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

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:

Notice the draggable attribute set to true, and the IDs that I'll use as hooks in the JavaScript. Here's the JavaScript:

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

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

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 everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

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:

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 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

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

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 everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly