The following intro is a paid product review for Wallaby, a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type.

Code testing is a huge part of the current JavaScript landscape, so if it's crucial that you run tests on your code base regularly, you'll love Wallaby. Wallaby is available as an extension for VS Code, JetBrains Editors, Visual Studio, Sublime Text, and Atom. I'll demonstrate here how powerful Wallaby is by showing you how it works within VS Code.

Once you've installed and configured Wallaby, you can open any project and run it via its Command Palette, shown here:

 

When you choose the Start command, you can open any JavaScript or TypeScript file and you'll see something like the following:

 

Notice a few things:
 

• The colored squares on the left indicate code coverage. These squares can be grey, yellow, green, pink, or red, indicating various levels of coverage from your tests.
• The lines that contain console.logs have their outputs displayed to the right. These get updated in real time as you write or edit your code (similar to Quokka.js, another tool by the same developers that I've reviewed previously)

As you can see, if you're accustomed to using a lot of console.logs and adding breakpoints to your code, Wallaby is going to dramatically increase your productivity. You get that feedback immediately within the code, without actually executing it in a browser or other environment. In other words, your code editor is the console, with the bonus of everything displaying in its immediate code context.

When it's running, Wallaby displays the number of failed and passed tests in the status bar:
 

Clicking on the failed and passed tests in the status bar will open Wallaby's Output Channel, with a little more detail on what's happening with your tests:

 

One of the features that has caught the attention of many developers is Wallaby's Time Travel Debugger, which was added to Wallaby in December. This feature allows you to move forward or backwards through your code to understand what led to a specific bug.

 

You can start the debugger on a line of code where your test begins, or on any line executed by one of your tests. Once begun, you can run a number of different commands to get to the root of a particular issue. This is helped out by the Debugger View that opens in the left panel. Pretty powerful! And again, part of the power is that this is all available right inside your code base – no need to open up a separate environment like the developer tools in your browser.

There's a lot more to Wallaby that I haven't mentioned here, but this should be enough to give you a taste of some of the primary features of the tool, which is free to try. Check out the docs for more on what I've only briefly touched on here.

Now on to this week's tools!

 

Media Tools (SVG, Video, etc)

Iconset
Free, cross-platform SVG icon organizer app for designers, developers or product teams. Works on both Mac and Windows.

Open Peeps
A hand-drawn illustration library to create scenes of people, each drawing available in PNG or SVG format.

Cosha
JavaScript utility to add colored shadows to your images. Use via defaults or customize via the API.

Filmage Screen
Screen recorder and video editor for Mac. All-in-one video toolbox that lets you record HD video, edit video, make animated GIFs, convert video, and more.

Biteable
Video making platform with ready templates for creating marketing videos for different social platforms, industries, etc.

Unscreen
Online tool that uses AI to remove the background from an uploaded video.

SequenceDiagram.org
Online tool to build sequence diagrams using a drag-and-drop interface, useful for presentations.

Faux Code Generator
Input real code via a Gist URL and this tool will produce an SVG version of the code in a mock format, for possible use in slides, etc.

Smithsonian Open Access
Download, share, and reuse millions of the Smithsonian’s images. Use in commercial projects without attribution or written permission (although you should read the FAQ for copyright considerations).

Panolens.js
Flexible, event-driven, WebGL-based JavaScript panorama viewer built on Three.js.

Fontice.com
Fastest browser-based WebP converter. Free JPG/PNG to WebP conversion without uploading to any other servers.

Heroicons
A set of free MIT-licensed high-quality SVG icons for UI development

Git, GitHub, and CLI Tools

React Chat Tutorial
Quickly build chat leveraging Stream's Chat API. Our comprehensive React components will get you up and running fast.  sponsored

CLUI
A collection of JavaScript libraries for building command-line interfaces with context-aware autocomplete.

actions-comment-run
GitHub action to execute any script in an issue or pull request comment.

tickgit
Allows you to do project management in your codebase with TODO comments.

grep.app
Search across a half million Git repos, with options for case sensitivity, regex, and whole words only.

GitHub Data
Populate data from GitHub into Figma mockups.

GitHub CLI
In case you missed it, this is GitHub's official command line tool.

Octomments
GitHub issues as a comment plugin.

Gitpod
Launches ready-to-code dev environments for your GitHub or GitLab project with a single click.

GistPad
VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists.

paint-github
This is kind of humourous. It's a Chrome or Firefox extension that adds a feature to GitHub comments that lets you "draw" your comment.

The Uncategorizables

React Chat Tutorial
Quickly build chat leveraging Stream's Chat API. Our comprehensive React components will get you up and running fast.  sponsored

Outgrow
Platform to build interactive content like calculators, quizzes, chatbots, surveys, and more, for marketing purposes.

unavatar
API that searches common social media platforms to get a user's avatar image by means of a username.

Voiceflow
Design, prototype and build voice apps. Collaboratively design, prototype, and build Alexa Skills and Google Actions, without coding.

Limio
Sell subscriptions and recurring products, build landing pages, checkouts, self-service portals, and more, with no code.

ResponseVault
Alpha. Create a database application with a drag and drop form builder. Import your own JavaScript UI widgets.

Awesome JS
A visual tool to look for popular JavaScript packages, categorized.

Advanced App Development Cost Calculator
Seems to be mainly for large corporate apps because the estimated prices are fairly high.

Nots.io
Documentation tool for development teams. Access docs from your code and always know if something is obsolete.

Opensource Buiders
Find open-source alternatives for your favorite apps.

damnshort
Short dot-com names, suitable for branding, available for sale for $195 each.

A Tweet for Thought

I think it's safe to say many of us are punk rock programmers.
 

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 love numbers and Math, you'll adore MetaNumbers. It's an encyclopedia providing all sorts of super-boring info on any positive integer you enter. To me this is kind of like Brian Regan's comedy bit on refrigerators, but I know a lot of you might find it interesting.

Thanks to everyone for subscribing and reading!

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

Advertisement via Syndicate

Although I often include quick DOM scripting tips in the intro of this newsletter, for this week, I'm just going to point you to a great little resource that was sent to me by reader Phuoc Nguyen:

• HTML DOM

• Make a draggable element
• Resize columns of a table
• Sort a table by clicking its headers
• Calculate the size of the scrollbar
• Communicate between an iframe and parent window

So check out HTML DOM, I'm sure you'll have lots to investigate!
 

Now on to this week's tools!
 

Front-end Frameworks

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

chakra-ui-vue
A set of accessible and composable Vue components that you can use to build your favourite applications and sites.

Pixel Lite
A beautifully crafted, responsive UI kit based on Bootstrap 4 that includes 100 components, 3 plugins, and 3 example pages.

next-typescript-materialui-jest-starter
Very opinionated starter boilerplate for projects based on Next.js, setup with Typescript, Material-UI, and Jest.

React SaaS Template
Template for building a SaaS app or admin website using React + Material-UI.

web3-react
A simple, extensible, dependency-minimized framework for building modern Ethereum decentralized apps.

Tailwind UI
A UI components library, crafted by the creators of Tailwind CSS.

neo.mjs
A Web Workers-driven UI framework.

LitElement
A simple base class for creating fast, lightweight web components. Makes it easy to define web components – ideal for building a UI design system.

Ionic React
React version of Ionic Framework. 100+ mobile optimized React UI components. Standard React tooling with react-dom.

Accessible Components
Scott O'Hara's repo that lists all the accessible widgets and components he's built.

StarAdmin
A free responsive admin template built with Bootstrap 4.

Media 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 

Croppola
Upload a photo and this tool will use AI to crop the photo for you automatically, or you can crop it manually and download the result.

Image to Colors
Online tool that extracts colors from any photo on upload.

Nuxt Optimized Images
Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).

Twilio Video React App
Demonstrates a multi-party video application built with twilio-video.js and Create React App.

react-particle-image
React component to render images as interactive particles. There's an interactive demo using the React logo that's pretty cool.

CoreUI Icons
Premium designed free icon for web and mobile, available in SVG, webfont, and raster formats.

DotMatrix.js
A small, performant class-based, dot matrix library with animated movements that respond to mouse/touch events.

react-calendar-heatmap
A calendar heatmap component built on SVG, inspired by GitHub’s commit calendar graph.

Chessboard Image
Modify chess pieces on a virtual chess board, to create chess positions, then download the image for use wherever you want. Might be cool for a chess tutorial website or blog.

Video Language
A language for making movies. Combines the power of a traditional video editor with the capabilities of a full programming language.

The Uncategorizables

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 

Mailcoach
A self-hosted email list manager. It integrates with services like Amazon SES, Mailgun, Postmark, or Sendgrid to send out mailings affordably.

Backstage
Open-source developer portal that puts the developer experience first by means of a a unified front end for all your infrastructure tooling.

dstack.ai
Collaborative data exploration. Enables individual data scientists and their teams to publish, share, and track data visualizations.

TAGX
Allows you to create video highlights and annotate the interesting parts of a video. Enter a YouTube, Vimeo, or direct video link to start annotating.

cs.opensource.google
A search engine to search Google's open source projects (Angular, Dart, Flutter, Go, etc).

Cotter
One-click secure phone number login for your apps.

Phrase
Automate localization processes. Edit language files online with your team of translators or order translations into more than 60 languages.

It's a Live
Lets you mimic a live coding presentation by prerecording the presentation, which gets triggered by random keystrokes as if you were really coding.

EasyCSV
Import spreadsheets into your App, Zapier, Google Sheets, Salesforce, or any public API in minutes.

Pico
Platform to create paywalled content, subscriptions, newsletters, etc.

A Tweet for Thought

This underappreciated Tweet by Adam Greenough should be the dev-related Tweet of the year.
 

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've got a lot of extra time at home (and you should!) you might like Codepip. There you'll find a number of different interactive online games that teach you various aspects of front-end development.

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