Web Tools #554 - JS Utilities, Testing Tools, JS Lib Plugins
source link: https://mailchi.mp/webtoolsweekly/web-tools-554
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JS Utilities, Testing Tools, JS Lib Plugins
|
|
Issue #554 • February 29, 2024
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:
|
npm install @pixelverse/strichjs-sdk
|
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:
|
import { StrichSDK, BarcodeReader } from './js/strich.js';
StrichSDK.initialize('<License Key... >') .then(() => console.log('STRICH SDK initialized')); |
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:
Depending on the technology used, you'll notice a more-or-less similar pattern where your markup will include a 'scanner' element that you'll use to host an instance of BarcodeReader, which will generate the UI for scanning.
|
<div class="container">
<div class="scanner"> <!-- STRICH BarcodeReader will live here --> </div> <section id="results"> <!-- results will be added here --> </section> </div> |
STRICH provides a few different pricing plans, along with an enterprise option for larger volume. The basic plan includes up to 10,000 scans per month and the professional plan includes up to 100,000 scans per month. With either of these plans, the limits are soft for up to two months, so you don't have to worry about failed scans should you go over. The enterprise plan includes unlimited scanning, among other features.
Even with the Basic plan (which is a paid plan), you get features like:
- Unlimited devices
- Unlimited applications
- Free updates to the SDK
- All supported 1D and 2D barcode types
- Web-based analytics
The STRICH team has set up this demo app you can try out using a mobile device, if you'd like to see it in action without the need to sign up for the trial. This is particularly useful if you want to test out your own existing barcodes to make sure STRICH supports them. The demo allows you to select the barcode type or you can choose "all" (as I did in the screenshot below).
 |
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK