Web Tools Weekly
Tools for Web Developers

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


Advertisement

Embark On A Web3 Adventure With BitDegree
BitDegree is a leading educational platform at the intersection of technology and learning. With a mission to make education more accessible and engaging, BitDegree offers a diverse range of courses and tutorials, specializing in Web3 and cryptocurrency education.

BitDegree

Explore our platform to unlock a world of knowledge, upskill in cutting-edge technologies, and stay ahead in the ever-evolving digital landscape.

Global Web3 Exam is Live! →

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.

const str1 = "  Example one.",
      str2 = "  Example two.  \n";

console.log(str1.trimStart()); // "Example one."
console.log(str2.trimEnd()); // "  Example two."

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:

const str3 = "Example three.";

console.log(str3.padStart(20, "$"));
// "$$$$$$Example three."

console.log(str3.padEnd(22, "%D"));
// "Example three.%D%D%D%D"

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.
You can try out all the above examples in this CodePen demo.
As mentioned, these are well-supported features and can be easily used to do some simple string-related manipulation. Thus, there's no need to write your own custom functions or to use a fragile dependency and risk breaking things in the future.

Now on to this week's tools!

 

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.

CSS Hooks

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.

Svelte Flow

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 Morning Paper for Hacker News Readers
Want a byte-sized version of Hacker News that takes just a few minutes to read? 

Try TLDR's free daily newsletter.

TLDR covers the most interesting tech, startup, and programming stories in under 5 minutes.

TLDR

No sports. No politics. No weather.

TLDR is read by 1,250,000 software engineers, founders, and tech workers.

Subscribe for Free →


 

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.

codapi

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

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Loopliz – Software for adding feature voting and a changelog to your products.
Bytes – A JavaScript newsletter that's informative & entertaining, for all levels of JS devs.    AD 
SuperDev Pro – Fourteen-in-one tool to inspect, edit, refine, and export any website visually.
Resend – An email platform for developers, to deliver transactional and marketing emails at scale.
Passionate Income – Gain financial literacy in a bite-sized 3-minute read that has actionable advice.    AD 
CoderPad – Platform to run coding assessments and collaborative technical interviews with devs.
Ocule – An advanced, cost effective bot blocker with low false positive rates.

An X Post for Thought

Is this too harsh a response to a cold email? Possibly. But I think it's better than the email being ignored and the person not learning why they never got a response.
 
An X Post for Thought
 

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 Wordle and Hex codes, you'll love Hexodle, a daily game that lets you guess a color in Hex format. You get up/down hints for each character, so it's not as difficult as it sounds.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris