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