Issue #541 (String.split(), JS Utils, Build Tools, Uncats)11/30/23
Build And Style Your Site Exactly How You Want
Drag in unstyled HTML elements, control CSS properties, and cascade changes across your site.
Then, take full control of CSS properties and a class system that cascades changes across your site — plus use variables to sync with external design systems.
Start building →
|
Here are a couple of quick tips for using JavaScript's String.split() method, which I'm sure most of you have used extensively over the years.
This method is used to divide, or split, a string into an array of string values where the separator passed into the method determines where the string should be split. So for example, if I have a string with a bunch of pipe characters in it, I can divide that into substrings like this, thus eliminating all the pipe characters:
|
let myString = "apple|orange|peach|pear";
let myStrArray = myString.split("|");
console.log(myStrArray);
// Result: ["apple","orange","peach","pear"]
|
That's how most String.split() operations take place, a simple way to split where you're removing the character I'm splitting with and getting everything else in an array.
However, maybe you didn't know that the String.split() method takes an optional second argument. This argument is a positive integer that will restrict the resulting array to that number of items. For example, using the same string as above, I can limit the array to the first two items:
|
let myString2 = "apple|orange|peach|pear";
let myStrArray2 = myString2.split("|", 2);
console.log(myStrArray2);
// Result: ["apple","orange"]
|
I've passed in "2" as the second argument, which splits the first two items but ignores everything else. If I pass in "0", I'll get an empty array and if I pass in more than the number of items available to split, it will return all the available ones.
Finally, what if I want to split using a specific character as the separator but I also want to preserve the characters as part of the resulting array? Here's how I can do that:
|
let myString3 = "javascript-sub-strings-array";
let myStrArray3 = myString3.split(/([-])/);
console.log(myStrArray3);
// Result:
// ["javascript","-","sub","-","strings","-","array"]
|
Notice here my string is a bunch of words separated by hyphens. I'm using a regular expression with capturing parentheses, thus the separator character is preserved as part of the array. In this case, it adds three hyphens in their own array slots.
You can try out the above examples in this CodePen and there's a little more info on both of the above features in the MDN article on String.split().
Now on to this week's tools!
|
JavaScript Utilities
StringTS
A small library that offers strongly typed string functions so don't lose type information when working with string literals.
Syntax.js
A lightweight, zero-dependency, easy-to-use JavaScript library for code syntax highlighting, with CSS theming support, and a full API available via public functions.
Map Pathfinding Visualizer
Pathfinding algorithms visualized on a real map, anywhere in the world.
Build And Style Your Site Exactly How You Want
Drag in unstyled HTML elements, control CSS properties, and cascade changes across your site. Then, take full control of CSS properties and a class system that cascades changes across your site — plus use variables to sync with external design systems. SPONSORED
Scroll-timeline Polyfill
A polyfill for the ScrollTimeline and ViewTimeline APIs, which are part of the new Scroll-driven Animations specification.
numberfmt
An improvement on JavaScript's native Intl.NumberFormat API, which is a little verbose, offering a string-based pattern for interacting with the API.
Elelem
A simple, opinionated, JSON-typed, and traced LLM framework, written in TypeScript.
Calendar.js
A powerful, lightweight calendar library with no dependencies that's fully configurable, includes drag-and-drop for events, exporting features, import from iCal and JSON, and lots more.
 |
Event Contract
A tiny framework for type-safe event-based systems in TypeScript, built on the struggle that none of the event-based APIs in TypeScript are strict.
examplify
A script that allows you to write Markdown documentation with executable examples.
Is Text or Binary?
A utility to determine if a filename and/or buffer is text or binary, providing smarter detection than the other solutions.
|
Build Tools, Bundlers, etc.
hyperimport
A powerful plugin for the Bun runtime that lets you easily import functions from other languages (C, Rust, Zig etc).
every-ts
A utility that can build any version of TypeScript, including main, v1.0.3, or anything in between.
Kirimase
A command-line tool for building full-stack Next.js apps faster, allowing you to quickly integrate packages and scaffold resources for your application with best practices in mind.
Meet Fierce, Your All-in-One Finance Solution
Your Finance Super App. Busy professional? Sign up for Fierce and get 5.25% APY on your cash, FDIC-insured. No fees, no gimmicks. Enjoy a free debit card, access to 55k+ fee-free ATMs, and more. Join now! SPONSORED
esm.sh
A fast, smart, and global CDN for modern (ES2015+) web development, allowing you to import ES6 modules from a URL.
Quickbundle
A zero-configuration bundler powered by esbuild, allowing you to bundle a library in a quick, fast, and easy way, with support for multiple module formats including CommonJS and ES Modules.
prettier-plugin-astro-organize-imports
A plugin that makes Prettier organize your imports (i.e. sorts, combines, and removes unused ones) in Astro files using the organizeImports feature of the TypeScript language service API.
ESLint Flat Config Viewer
A visual tool to help you view and understand your ESLint flat config.
npm-publish
A GitHub Action to publish to the npm registry automatically by updating the version number.
Is Bun
A utility that returns true if you're running in Bun, so you can differentiate between the Node and Bun runtimes.
Pixi
A cross-platform, multi-language package manager and workflow tool that provides an experience similar to popular package managers like Cargo or Yarn, but for any language.
On the Release Radar:
|
The Uncategorizables
Keystatic
A CMS that makes Markdown, JSON and YAML content in your codebase editable by humans, letting you live edit content on GitHub or your local file system without disrupting your existing code and workflows.
Public APIs
A collection of public APIs for developers, categorized and crowdsourced, covering categories like animals, books, cryptocurrencies, development, music, weather, and more.
vCluster
Virtual Kubernetes clusters that run inside regular namespaces, cut costs,
and solve Kubernetes multi-tenancy.
subiRegex
An AI-based tool that lets you generate a regular expression by writing a plain English phrase (e.g. "US postal code" or "North American phone number", etc).
Meet Fierce, Your All-in-One Finance Solution
Your Finance Super App. Busy professional? Sign up for Fierce and get 5.25% APY on your cash, FDIC-insured. No fees, no gimmicks. Enjoy a free debit card, access to 55k+ fee-free ATMs, and more. Join now! SPONSORED
Monaspace
From the GitHub team, an innovative super-family of fonts for code that includes five fonts and three variable axes. You can try them and customize the look interactively on the page.
 |
Protomaps
An open-source map of the world, deployable as a single static file on cloud storage.
Cronicle
A multi-server task scheduler and runner, with a web based front-end UI, that handles both scheduled, repeating and on-demand jobs, with real-time stats and live log viewer.
Nutty
A self-hostable paste server, allowing you to easily upload and share text files instantly.
Revert
An open-source unified API to build, maintain and scale your integrations for your CRM, ticketing, accounting, file storage, etc.
Kinde
An authentication and user management solution that includes powerful insights all from one beautifully simple dashboard. Free for up to 7,500 active users.
|
|
Commercial Apps and Classifieds
Dolpin – A decentralized and encrypted storage layer built with IPFS / Filecoin.
|
|
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs. AD
|
Flourish – A solution to easily turn data into stunning charts, maps, and interactive stories.
|
|
OrbStack – A fast, light, and easy way to run Docker containers and Linux.
|
|
Lemonfox.ai – a fast, easy, and cheap OpenAI alternative with speech-to-text, LLM chat, etc.
|
anywebsite.ai – Turn any website into an integrated ChatGPT bot so users can get info from a chat bot.
|
|
|
An X Post for Thought
Here's a post you might want to forward to all your non-techy friends and relatives.
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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 like the game Candy Crush and are a JavaScript developer, then you'll love (or hate!?) JS Crush. In this game you have to drag to select tiles that are 'weakly equal' (i.e. ==) to each other.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
