Issue #549  (Trim/Pad, CSS/HTML, JS Lib Plugins, Uncats)01/25/24

There are a few small but useful utility methods for manipulating strings with JavaScript that you might already be familiar with but I'll review them here. These have support across all modern browsers, so they're quite safe to use.

First of all, there are the String.trimStart() and String.trimEnd() methods. As the names imply, these allow you to trim unnecessary whitespace from the start or end of a string. You can also use String.trim() to remove whitespace from both start and end.

Some things to note about these three methods:

• They all return a new string with the changes applied; the original string is not affected.
• As demonstrated with the second string example above, the methods will remove space characters as well as line terminators like \n or \r.
• If the string has no whitespace at the targeted location (start or end) the method will still return a new string, duplicating the original.
• Previously, browsers implemented support for String.trimLeft() and String.trimRight(). These older methods are deprecated but serve as aliases for the new methods.
• The methods take no arguments.

Contrariwise, you can also use the String.padStart() and the (you guessed it) String.padEnd() methods to add characters to a given string. Here are two examples:

These methods work as follows:

• The first argument is the number of characters you want the string to equal after it has been "padded". If the value is less than the original length of the string, the method will simply return the original string.
• The second argument is the string to use to "pad" the original string. If it's too long, it will be truncated to match the length specified in the first argument.
• If you omit the second argument, the string will be padded with space characters by default.
• Both methods return a new string with the original string intact.

CSS & HTML Tools

@artsy/fresnel — An SSR-compatible approach to CSS media query-based responsive layouts for React.

sparkly-text — A small zero-dependency web component to add animated SVG-based sparkles to text on the page.

TWC — A lightweight solution to help you create reusable React + Tailwind components using a single line instead of the usual multi-line format for React components.

BitDegree Web3 Exam is Here! — BitDegree's Web3 Exam is a global celebration of knowledge, where users test their Web3 skills, win epic prizes, and join a vibrant community. With phases spanning months, it's a unique journey into the heart of decentralized technologies.     SPONSORED 

SVGFM — An online interactive tool to help you learn and create SVG filters, which use the <filter> element along with nested filter primitives.

Chromagen — An npm package that you can use to generate random HSL-based color schemes.

CSS Hooks — A styling solution that adds advanced features to CSS's inline styles with a minimal runtime and no build step.

ClassyFont — Upload a font and this tool will generate the necessary CSS to embed it, with options to customize the class name format, folder location, and font stack.

HTMX Playground — A simple code sandbox to write code in a backend-like environment, running entirely inside the browser, for playing around with HTMX syntax, with no setup needed.

Clamp Calculator — An online tool to generate any number of custom fluid tokens that use the CSS clamp() function, for use in typography, spacing, or any other property that accepts a length unit.

JS Library Plugins & Tools

svelte-spa-router — A router for Svelte 3 and 4 applications, specifically optimized for Single Page Applications (SPA).

Remix + i18n — A straightforward Remix internationalization example, built on top of react-i18next and remix-i18next.

Svelte Flow — A customizable Svelte component, from the creators of React Flow, for building node-based editors and interactive diagrams.

Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.    SPONSORED 

nestjs-fingerprint — A server-side fingerprinting library for NestJS, the Node.js framework, that lets you generate a fingerprint for each browser or device.

drei-vanilla — A growing collection of useful helpers and fully functional, ready-made abstractions for Three.js, the popular WebGL library.

Mismerge — A modern two-way and one-way merge editor for the web, built with Svelte. You can merge using the online demo or use it as a component for your project.

preact-reconciler — An implementation of react-reconciler, which allows for custom renderers to be implemented and shared between Preact and React such as @react-three/fiber.

protomaps-leaflet — A complete web map renderer that includes quality label layout, pattern fills, and icons, powered by Leaflet, the interactive maps library.

Remix + Hono — An adapter that allows you to use Hono (a small and ultrafast web framework for the Edge) with Remix, so you can use the best of each one.
 

Advertisement

The Uncat­egorizables

JSweet — A Java to JavaScript transpiler that creates TypeScript and JavaScript for being run in browsers, mobile Web views, or in Node.js.

Prisma Editor —  A powerful tool designed to visualize and edit your Prisma Schema, with real-time visualization, a user-friendly UI, SQL generation, and more.

AuthKit — An all-in-one authentication solution powered by WorkOS and Radix, the open-source, customizable design system.

Get Smarter About AI and Tech in 5 min — Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets. Join 30,000+ professionals from OpenAI, Meta, Google, Microsoft, Hugging Face, JP Morgan, and more.    SPONSORED 

Suggestions Files — A simple, human-readable format for suggesting changes to plain text files.

codapi — A platform for embedding interactive code snippets directly into your product documentation, online course or blog post, with support for 14+ languages and 10+ databases.

Casdoor — A UI-first Identity Access Management (IAM) / Single-Sign-On (SSO) platform supporting OAuth 2.0, OIDC, SAML, and CAS.

Ful.io Technology Profiler — A Chrome extension that lets you see the technologies that a website is built on, with info on tech stack, frameworks, widgets, CDNs, CMSs, and more.

Documenso — An open-source DocuSign alternative, offering a self-hosted solution to digital document signing.

Heynote — A dedicated scratchpad for developers that uses a large, persistent text buffer divided into blocks, and each block can have its own Language set (e.g. JavaScript, JSON, Markdown, etc.) with syntax highlighting and an auto-formatted JSON response.

Commercial Apps and Classifieds