Advertisement

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.

Courses by Wes Bos (Master Packages!) on Sale for $97:
 

Testing and Debugging Tools

>&campaign_id=f4daed5baf&device=desktop&v=0.14" style="padding-bottom: 12px;max-width: 568px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="568">

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

>&campaign_id=f4daed5baf&device=desktop&v=0.14" style="padding-bottom: 12px;max-width: 568px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="568"> >&campaign_id=f4daed5baf&device=mobile&v=0.14" style="width: 100%;max-width: 386px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="386">

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

According to reports, Corona beer sales are not down due to confusion with Coronavirus (despite some false claims). But I did like this tweet by Kelly Vaughn on that subject.
 

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

Advertisement via Syndicate

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

As Kelly Vaughn points out, the current pandemic might lead to some interesting new changes to the work force, even after things have improved and things start running normally again.
 

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

In previous tips I introduced a basic HTML Drag and Drop API example along with some things you can do with the dataTransfer() object. This tip will focus on the different events you can listen for during a drag operation.

There are 7 drag events that are supported across all modern browsers. They are:

• dragstart - A dragging operation begins (on dragged item)
• drag - A drag operation is in process (on dragged item)
• dragenter - A dragged item enters a valid drop target (on drop target)
• dragover - A valid drop target is dragged over (on drop target)
• dragleave - A dragged item leaves a valid drop target (on drop target)
• drop - A dragged item is dropped on a valid drop target (on drop target)
• dragend - A drag operation ends (on dragged item)

Now on to this week's tools!

React Tools

>&campaign_id=02f2bef915&device=desktop&v=0.14" style="padding-bottom: 12px;max-width: 568px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="568"> >&campaign_id=02f2bef915&device=mobile&v=0.14" style="width: 100%;max-width: 386px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" width="386">

Enform
Handle React forms with joy. Helps you manage form validation, dirty form submission and reset, field values and changes, and error messages.

react-letter
A React component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should match what is supported by Gmail.

useCustomHook
A starter template for creating a new React Hook.

react-easy-state
Simple React state management made with ES6 Proxies.

Crank.js
Write JSX-driven components with functions, promises, and generators. uses the same JSX syntax and diffing algorithm popularized by React, allowing you to write HTML-like code directly in your JavaScript.

use-scroll-to-bottom
React Hook that uses IntersectionObserver to detect when the user has scrolled to the bottom of the page.

React Cool Portal
A React hook for Portals that helps you render children (e.g. modals, dropdowns, tooltips, etc) into a DOM node that exists outside the DOM hierarchy of the parent component.

React State Selector
Performant, type safe and easy to use React global state manager.

React Table
Now at version 7+. Hooks for building lightweight, fast and extendable data grids for React.

react-curved-arrow
Use nice curvy arrows in your React project. Great for interactive tutorials and product tours.

react-enroute
Now at version 4+. React router with a small footprint for modern browsers.

codelift
A "No Code" GUI for your React app.

50% Off Courses by Wes Bos (Master Packages!):
 

 

Media Tools (SVG, Audio, Video, etc.)

British Museum Collection
The British Museum has released 1.9 million images, most with a CC 4.0 license.

Rickshaw
A JavaScript toolkit for creating interactive time series graphs.

Trianglify
Algorithmically generated triangle art that you can render in a project using a simple API, or generate and download using the online tool.

Plotly.js
Built on top of D3.js and stack.gl, a high-level, declarative charting library with over 40 chart types, including scientific charts, 3D graphs, statistical charts, SVG maps, financial charts, and more.

Image Cropper
A quick and easy way to resize any image (PNG, JPG, SVG, GIF, and WEBP supported).

PicsArt Photo Editor
More than a dozen online photo editing tools including duotone effects, overlays, filters, background editing, and more.

BlurHash
A compact representation of a placeholder for an image. Replace boring grey boxes with beautiful states for your placeholders.

Image Compare Viewer
A vanilla JavaScript, dependency-free component that adds an interactive image diff viewer to any page. The on page demos are pretty cool!

OpenJSCAD.org
A set of modular, browser and command line tools for creating parametric 2D & 3D designs with JavaScript code.

Vime
Open source video player library focused on giving users and developers the best possible media player experience. Supports HTML5, Dash, YouTube, Vimeo, and Dailymotion.

Mixkit Music
Free stock music clips that are royalty-free for commercial projects.

The Uncategorizables

Exchange Rates API
A simple and lightweight free service for current and historical foreign exchange rates.

Amazon AppFlow
A fully managed integration service that enables you to securely transfer data between SaaS apps like Salesforce, Marketo, Slack, and ServiceNow, and AWS services like Amazon S3, in just a few clicks.

Digital Brain
Auto-generates your basic documentation and then provides a beautiful, fast, and collaborative interface for your team to complete your documentation process.

Permanent.org
A new non-profit, secure cloud storage service with a focus on privacy that offers a free gigabyte to start.

Flow
A fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them.

Phelia
A reactive Slack application framework. Build interactive Slack apps without webhooks or JSON headache. If you know React, you know how to make a Slack app.

hCaptcha
A drop-in replacement for reCAPTCHA (you can switch within minutes) that protects user privacy, rewards websites, and helps companies get their data labeled.

markmap-lib
Visualize your Markdown with mindmaps.

Plausible
Simple and privacy-friendly alternative to Google Analytics. A lightweight and open-source site analytics tool that doesn’t use cookies and is fully compliant with GDPR, CCPA, and PECR.

Public APIs
A collection of free public APIs for software developers, categorized.

A Tweet for Thought

Technology has changed the way we behave, as this thread demonstrates.
 

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

If you're a big Seinfeld fan like I am, you'll love this: Seinfeld Adventure. Right now it's just a pitch for a game. I seriously doubt Jerry and his producers will approve this, but it's pretty cool to see what it would be like to play "a game about nothing".

Thanks to everyone for subscribing and reading!

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