|
Issue #549 • January 25, 2024
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.
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.
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.
 |
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.
|
The Uncategorizables
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
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.
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 everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
