Issue #332  (Quokka Review, Media, JS Utils, Mobile)11/28/19

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:

To demonstrate what Quokka can do, here's an annotated screenshot of some code I threw together:

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:
 

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:

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!

Media Tools

Fabric.js
A powerful and simple HTML5 Canvas library. Provides an interactive object model on top of the Canvas element and includes an SVG-to-Canvas and Canvas-to-SVG parser.

μPlot
A fast, memory-efficient time series and line chart based on Canvas 2D.

Cropper.js
Now at version 1.5. This works really nicely! It's a JavaScript-based image cropper component you can include in your website or app.

Lite YouTube Embed
A faster YouTube embed. A custom element renders just like the real thing but approximately 224x faster. That's a bold claim, but it's Paul Irish, so I would bet it's true.

Img Boss
Pick a date and custom background, title, description, and this tool will generate a countdown timer you can embed as an animated GIF.

Tartanify
A 5k+ Collection of tartan patterns (crisscrossed horizontal and vertical bands) in SVG and PNG format.

pack-spheres
Brute force circle/sphere packing in 2D or 3D.

spacekit.js
Open-source JavaScript library for creating interactive 3D space visualizations (e.g. Earth/moon system, solar system, etc).

draw.io
Free online diagram software for making flowcharts, process diagrams, org charts, UML, ER, and network diagrams.

SVG Artista
A tool that helps you animate stroke and fill properties in your SVG images with plain CSS code.

JavaScript Utilities and Modules

Geolib
2D Library to provide basic geospatial operations like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa, etc.

BroofaJS
A small set of miscellaneous utilities including JSON diffing, a string hash implementation, string pluralization, and more.

Swiper
Now at version 5+.  A free and modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

Toast UI Grid
Now at version 4+. A powerful component to display, edit, add, and delete data.

Ferrum
Features from the Rust language in JavaScript. Provides traits and an advanced library for working with sequences/iterators in JavaScript.

Tribute
Now at version 4+. A cross-browser @mention engine written in ES6, no dependencies.

Repeater.js
The missing constructor for creating safe async iterators.

Geometric.js
A JavaScript library for doing geometry.

filesize.js
A tiny JavaScript library that creates a global function named filesize() that provides an easy way to get a human readable file size string.

Robot
Fast 1kB functional library for creating Finite State Machines.

Mobile and React Native

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech.  promoted

NativeBase
Has received many small updates over the past few years. Essential cross-platform UI components for React Native and Vue Native.

react-native-quiet
A React Native wrapper around the Quiet Project, which enables you to transfer data over sound at a fairly high speed.

Mobile First Animation in React
Performant gesture-driven animation for mobile web.

react-native-picker-select
A picker component for React Native that emulates the native `select` interfaces for iOS and Android.

react-native-pantry-storage
Persist values in `AsyncStorage` with expiration dates.

React Native Game Engine
Components that make it easier to construct dynamic and interactive scenes using React Native.

React Native HTMLView
A component that takes HTML content and renders it as native views, with customisable style and handling of links, etc.

react-native-image-crop-picker
iOS/Android image picker with support for camera, video, configurable compression, multiple images, and cropping.

Div100vh
A React component that solves the '100vh' issue in mobile browsers. The problem is explained at the repo.

A Tweet for Thought

David Walsh started a thread on setting up a new MacBook Pro. If this is you soon, the answers might come in handy!
 

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

Webwide is a new web developer community that you might want to look into. Mainly it looks like a web forum with more than 500 threads from 1200+ members.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris