Issue #554  (STRICH Review, JS Utils, Testing, JS Lib Plugins)02/29/24

The following is a paid product review for STRICH, a JavaScript library for real-time, multi-format barcode scanning directly in the browser.

I think it's safe to say everyone reading this knows what a barcode is. Barcodes have been used for more than half a century to identify physical products, to prevent theft and price tag-swapping, to track packages, among other uses.

Today I'm introducing STRICH (from German meaning "line" or "stroke"), a JavaScript library that allows you to easily build high-performance barcode scanning functionality into any web app.

STRICH includes a number of features developers will love, especially those of us who want the web platform to win.

First of all, you can easily install the STRICH SDK via npm and it has zero dependencies:

STRICH is built purely using web technologies like WebGL and WebAssembly and isn't dependent on any fancy or bulky third-party solutions for its scanning capabilities. The installation amounts to a single JavaScript file with optional TypeScript bindings. And because STRICH is built for the web, it will work on any modern device without the need to maintain multiple code bases for different native mobile platforms – and your users don't have to install anything.

STRICH can be used to build any app that will take the place of any expensive hardware solutions you might be using at the moment for your barcode scanning needs. This could be some form of ticketing service, merchandise tracking, delivery services, and so on. You can check out case studies for Bold.co and Swiss Federal Railways for some example real-world uses.

As for the barcode scanning technology itself, STRICH supports both 1D and 2D barcode scanning, with a number of different types, or symbologies, included.

Because STRICH is in continuous development, new barcode types will be added as demand increases, so you can always ask about a particular type that's not currently supported, which may already be in the pipeline.

The fact that STRICH is built on web technologies also means it's not restricted for use with a particular library or framework. You can use it in a vanilla JavaScript app or with React, Vue, Angular, or any other framework.

You can get up and running pretty quickly with STRICH once you've installed it and signed up for an account. STRICH offers a 30-day free trial to test out its features.

With your account active, you'll have access to your STRICH dashboard, which includes scanning usage stats, license keys, and more.

In my account, I've created a single license key for use with two different domains. Usefully, addresses like localhost, 127.0.0.1, and private IP ranges (e.g. 192.168.x.y, 10.x.y.z), often used in local development, are included by default with any license key created, so you don't need to specify those.

Once I have access to that key, I can use something like the following code to initialize the STRICH SDK, giving me full access to the API within my custom barcode scanning app:

There are some real-world, working examples you can examine on GitHub if you want to take a deeper look at the code or install locally to try them out using your own license key:

• STRICH sample using vanilla JavaScript
• STRICH sample using Next.js/React
• STRICH sample using Vue 2

• Unlimited devices
• Unlimited applications
• Free updates to the SDK
• All supported 1D and 2D barcode types
• Web-based analytics

That should give you a good idea of what STRICH is capable of and how simple it is to get it up and running. The STRICH docs have a getting started guide, along with a full API reference so you can get an idea of what types of functionality you can incorporate into your own product.

So if your startup or business is in need of a mature and well-maintained barcode scanning solution, be sure to check out STRICH. 

Now on to this week's tools!

 

JavaScript Utilities

systeminformation — A dependency-free Node.js library of 50+ functions to retrieve detailed hardware, system and OS information, with support for Linux, macOS, partial Windows, SunOS, and Android, and more.

tldts — A fast JavaScript utility to extract hostnames, domains, public suffixes, top-level domains, and subdomains from URLs.

Tempo — A comprehensive JavaScript and TypeScript library to parse, format, manipulate, and internationalize dates and times.

Meco — Free your newsletters from the inbox. The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.    SPONSORED 

neoconfetti — Add a confetti explosion to any page in vanilla JavaScript, with integrations for Svelte, React, Vue, and Solid also.

Sutra — A versatile library for creating and managing behavior trees in JavaScript, useful for game logic development, for easy definition of complex behavior patterns using a simple and intuitive syntax.

zip.js — A JavaScript library to zip and unzip files supporting multi-core compression, compression streams, zip64, split files, and encryption.

x-crawl — A flexible Node.js multifunctional crawler library with flexible usage and numerous functions to help you quickly, safely, and reliably crawl pages, interfaces, and files.

sort-on — A utility to sort an array based on an object property, with options for descending/ascending, nested objects, among other features.

plain-page-transition — A dependency-free utility to integrate animated page transition effects to a simple website.

Verticalize — A pipe-like function to "verticalize" your JavaScript code. There's an example on the page if you aren't sure what that means and part of me doesn't even think this is a serious thing.

Testing & Debugging Tools

Automock — A tool to optimize the unit testing process within dependency injection frameworks by providing a virtual, isolated environment and automated mock generation, for more efficient test suites.

wacat — A utility powered by Playwright to run chaotic tests on your web app, inspired by the manner a cat may chaotically walk across a keyboard, pressing every key.

Nuxt Test Utils — The same set of utilities used by the Nuxt team, offering first-class support for end-to-end and unit testing of your Nuxt applications.

Echoed — An enhanced API testing solution that uses OpenTelemetry on top of Jest, with YAML support, test troubleshooting, code compatibility, and more.

The Secret Sauce To HTML Video Autoplay — We'll delve into HTML video autoplay, exploring how this feature has revolutionized online content delivery, the pitfalls to avoid, and pairing it with ImageKit to make autoplay an asset (and not an annoyance!) for your website.    SPONSORED 

line-length — A bookmarklet that allows you to mouse-over any element on a page and view information on median and max line-length, useful for projecting readability in layouts.

Tabgod — A Chrome extension that allows you to execute any JavaScript on any open browser tab in parallel.

Vue DevTools Next — The next iteration of Vue DevTools, currently available as a Vite plugin or standalone app, with a Chrome extension coming soon.

Chai — A BDD / TDD assertion assertion library, similar to Node's built-in assert, for Node.js and the browser that can be paired with any testing framework.

Device Simulator & Tester — A Chrome extension to test websites on multiple devices in a single tab, with some features like scroll to selector, scroll sync, navigation sync, and more.
​

Advertisement

JS Library Plugins & Tools

multipleWindow3dScene — A quick example of how one can "synchronize" a 3D scene across multiple windows using Three.js and localStorage.

express-typescript-skeleton — A template to start developing a REST API with Node.js (Express), TypeScript, Ts.ED, ESLint, Prettier, Husky, Prisma, etc.

Animotion — A presentational framework for creating beautiful slides and visualizing ideas with code using Svelte, Reveal.js, and Tailwind.

remix-wizard — An all-in-one solution for building wizards (i.e. setup assistants or multi-step forms) using Remix.

The Secret Sauce To HTML Video Autoplay — We'll delve into HTML video autoplay, exploring how this feature has revolutionized online content delivery, the pitfalls to avoid, and pairing it with ImageKit to make autoplay an asset (and not an annoyance!) for your website.    SPONSORED 

Svelte Stepper — A simple headless library for building delightfully animated stepped flows with Svelte, with full control over customizing transitions, layout, styles, etc.

Paperless-ngx — An Angular-powered, community-supported, open-source document management system that transforms your physical documents into a searchable online archive so you can keep less paper.

⌘K-sv — Svelte version of the popular CMD-K pattern for adding fast, unstyled command palette-like functionality to a web app or docs site.

Express Slow Down — Basic rate-limiting middleware for Express that slows down responses rather than blocking them outright.

three-hex-tiling — A Three.js plugin that adds support for hiding repeating texture patterns to Three.js.

three.js Realism Effects — A set of effects for Three.js (SSGI, Motion Blur, TRAA) to enhance your three.js scene's realism.
​

Commercial Apps & Classifieds