The following intro is a paid product review for Quokka.js, a developer productivity tool for rapid JavaScript and TypeScript prototyping.
Quokka.js is a fantastic tool that you may have already seen in action in tech talks or screencasts. It's a code editor plugin (VScode, JetBrains editors, Atom, Sublime) that makes testing and prototyping your scripts faster than ever. With Quokka installed, runtime values are displayed next to your code and updated as you type.
This can be done right inside an existing JavaScript file by enabling Quokka via the command pallete, or by starting a new JavaScript file to use as a code scratchpad:
Starting Quokka via the Command Pallette in VSCode
To demonstrate what Quokka can do, here's an annotated screenshot of some code I threw together:
Quokka.js in action in VSCode
The red arrows and boxes indicate three different places in the code where messages are displayed. These bits are non-editable overlays (like tool tips). It takes a little getting used to when the values appear, because they can look somewhat like the code itself. But the benefits of these features far outweigh that small drawback.
In addition to the inline runtime values, you also have an optional Quokka Console that lets you view the full execution output:
The Quokka Console lets you view the full output
You'll also notice in the first screen shot, in the left gutter of the editor there are live code coverage indicators. Green and grey blocks indicate whether code was executed or not and red indicates an error. A yellow box (not shown in the image) indicates that a line has been only partially executed (e.g. due to a ternary operator).
These primary features are part of the Community edition of Quokka, which is free. This is a nice little feature set that allows you to use Quokka as a live scratchpad, similar to what you might do on CodePen or JSFiddle with the console open. But this is in a familiar environment in your own code editor.
The Pro edition of Quokka includes a number of advanced features, starting here in the documentation. One of my favourites is the ability to display a value in the middle of an expression via Live Comments:
Live Comments in Quokka Pro
Notice the comment inserted in line two, and note the value that Quokka displays at the end of the line. Although the full math expression here comes to a value of 84, I'm querying the expression before the multiplication occurs. This feature allows you to see a value before an expression is complete.
The Pro edition has much more than that. You can import any locally installed node module, install any node package via npm or yarn, do live performance testing, and more.
And great news if you want those extra features: The Pro edition is discounted by 50% from November 27 to December 4!
So if you're looking to boost your JavaScript productivity, or you just want a more responsive offline playground for learning, check out Quokka.js.
Now on to this week's tools!
