 | | Issue #347 • March 12, 2020 | | 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: Wallaby's Command Palette in VS Code
When you choose the Start command, you can open any JavaScript or TypeScript file and you'll see something like the following:
Wallaby's code coverage and logs
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:
Wallaby displays passed/failed 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:
Wallaby's Output Panel
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.
Wallaby's Debugger View
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 | |
0 коммент.: