Issue #522 (Copy Array Methods, CSS/HTML, Media Tools, React)07/20/23
Make Your Logins Awesome with Auth0 for Startups!
We know you have a million things to worry about. Let us take care of identity, so you can focus on everything else. Auth0 for Startups enables startups to provide secure access to any application, for any user.
Our program is free for one year and supports: 100,000 monthly active users, Passwordless authentication, 50+ Integrations, 60+ SDKs, and 50+ Social & IdP connections, and more! Eligibility: Startups must have less than $5M USD in funding, less than $1M USD in Annual Recurring Revenue, and be less than two years old. Offer not available to existing paid customers.
Visit Us to Apply
|
Four new array methods that you should definitely look into have recently reached support across all modern browsers and provide some useful functionality when dealing with arrays.
All these methods are similar in that they are referred to as the 'copying counterparts' of already-existing array methods.
The methods are:
- Array.toReversed() – This method does the same as Array.reverse() (it reverses an array) but instead of mutating the original array, it creates a new array with the reversed items.
- Array.toSorted() – Same idea. It copies the original array, sorts it as would be done via Array.sort(), and returns that new but sorted array.
- Array.toSpliced() – Again, similar to using the Array.splice() method, but doesn't affect the original array, returning a new array based on the specified splice parameters.
- Array.with() – This is the equivalent of using bracket notation to access an array element, but any change made will be copied to a new array instead of mutating the original.
The following code demonstrates each. Notice in each example I'm not only logging out the items of the new array, but I'm also logging the items of the original array, so you can see the original is not being affected.
|
let myArray = ['one', 'two', 'three'];
console.log(myArray.toReversed(), myArray);
// ["three","two","one"], ["one","two","three"]
console.log(myArray.toSorted(), myArray);
// ["one","three","two"], ["one","two","three"]
console.log(myArray.toSpliced(1, 0, 'four'), myArray);
// ["one","four","two","three"], ["one","two","three"]
console.log(myArray.with(2, 'four'), myArray);
// ["one","two","four"], ["one","two","three"]
|
You can try the above snippet in this CodePen demo.
Nothing really all that tricky or surprising in these methods. They're literally just clones of their counterparts with the single exception of not mutating the original array that's being acted on.
While many array methods don't mutate the original array, the counterparts of these array methods do. So these four new methods were introduced to address that shortcoming in the language. Very useful if you ask me and it's great to know that they're already well-supported in all modern browsers!
Now on to this week's tools!
|
| uite |
CSS and HTML Tools
tailwindcss-radix
Utilities and variants for styling state in Radix UI, the low-level UI component library.
Flexer
A simple CSS flexbox playground that lets you switch between "simplified" and "actual" for the property controls, allowing you to learn the properties either literally or by concept.
Make Your Logins Awesome with Auth0 for Startups!
Auth0 for Startups enables startups to provide secure access to any application, for any user. Our program is free for one year and supports: 100,000 monthly active users, Passwordless authentication, 50+ Integrations, 60+ SDKs, and 50+ Social & IdP connections, and more! Visit us to apply. SPONSORED
wc-date-input
A web component that creates a configurable date input similar to that suggested by the UK Government.
Mailo
A component-based, interactive HTML email layout designer that helps you easily build cross-client and responsive HTML emails.
Minimal CLS Font Adjustment Tool
An online tool that automatically matches the size of a fallback font (select from any Google font) when trying to avoid layout shift during font load.
Proportio
An interactive tool that lets you create proportional scales for typography, shapes, components, and containers. Each section has a number of settings you can fiddle with.
 |
Panda CSS
A universal, type-Safe, CSS-in-JS framework with build-time generated styles, compatible with React server components, multi-variant support, and lots more.
NakedJSX
A command-line tool for generating HTML files from JSX. The output is pure HTML and CSS, unless you choose to add your own JavaScript.
Color Names
A handpicked list of more than 30,000 unique color names from various sources and thousands of curated user submissions.
Izmir
A mini CSS library allowing you to quickly create beautiful image hover effects, packed with a host of styling classes and custom properties.
AI Colors
An AI-based interactive tool to allow you to generate color palettes from a text prompt, with palettes demoed on a web page UI view.
On the Release Radar:
|
Media Tools (SVG, Video, Images, etc.)
Free Icons
A collection of over 22,000 freely available icons in SVG format, and searchable by keyword.
SVG Hub
A library of over 70 custom-color squiggles, scribbles, and other unique shapes in vector format.
Durves
An interactive tool for creating and exporting dot patterns for use under graphic designs, with options to adjust matrix, dot radius, amplitude, waves, and frequency.
Get Smarter in 5 Minutes with Morning Brew (It's Free)
There's a reason over 4 million people start their day with Morning Brew – the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be boring...make your mornings more enjoyable, for free. SPONSORED
drawcharts
An online tool to create hundreds of combinations of eye-catching charts with a hand-drawn look, which you can export as PNG, JPEG, or SVG.
background-removal-js
A JavaScript library to remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns.
PhotoRoom
A set of online photo editing tools that includes background remover, retouching, shadow generator, image resizer, add text to photos, and more. Also includes tools under a Pro plan.
Binary
A set of 30 high-resolution abstract shapes in PNG format, inspired by binary code and the simplicity of black and white line work.
Flowbite Icons
A collection of 450+ open-source SVG icons compatible with Flowbite and Tailwind CSS, based on solid and outline styles, with React (JSX) and Figma support.
macOS Cursors
All cursor icons from macOS, downloadable in PNG or SVG format.
ISO Republic
Thousands of free high-resolution stock photos and videos under a CC0 license, and searchable by keyword or category.
|
React Tools
suspense
A set of utilities to simplify data loading and caching, for working with React Suspense.
The React Graph Gallery
A gallery that guides you through the basic concepts of data visualization with React and D3.js, and also provides ready-to-use templates to get started quicker.
Waku
A React framework that supports React Server Components (RSC) and takes a minimalistic approach, providing a minimal API that's not tied to a specific router.
Zedux
A molecular state engine for React that features a powerful composable store model wrapped in a dependency injection-driven atomic architecture.
next-typesafe-url
Fully typesafe, JSON serializable, and Zod-validated URL search params, dynamic route params, and routing for Next.js.
Brilliant
For professionals and lifelong learners alike, this is a platform where you can do bite-sized interactive lessons that make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day. SPONSORED
RSC Parser
A parser for React Server Components (RSC) when sent over the network.
ReactPy
A library for building user interfaces in Python without JavaScript, made from components that look and behave similar to those found in React.
Novel
An open-source Notion-style WYSIWYG editor with AI-powered autocompletions, built with Next.js, Tiptap, OpenAI, Tailwind, and more.
devjar
A library that enables you to live test and share your React code snippets. Possibly useful for live presentations or interviews.
ReMDX
Create beautiful minimalist presentations with React and MDX (the JSX-in-Markdown solution).
On the Release Radar:
|
|
Commercial Apps and Classifieds
Mofi – A content-aware fill and trim tool for looping, shortening, and lengthening music files.
|
|
Bytes – A JavaScript newsletter that's informative and entertaining, for all levels of JS devs. AD
|
Tella – An all-in-one screen recording tool with background presets, trim tool, and more
|
|
ColorCraft – Chrome extension to identify, edit, and apply colors in real time.
|
VSCode.Email – The latest news, articles, and tools for the world's most popular text editor. AD
|
|
QuikFlow – Mac app to create flowcharts and mind maps without worrying about layout.
|
MakeForms – A secure form builder to build advanced, visually stunning web forms.
|
|
|
A Tweet for Thought
Assuming this is true, it's good evidence that you definitely don't need to use the latest and greatest shiny-new-coding-things to build a successful website.
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on Twitter @WebToolsWeekly (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...
Wiby is a search engine for Web 1.0 websites. It includes a "surprise me" button that takes you to a random one of such sites — for those who want to reminisce about the late 1990s and early 2000s. The amazing thing to me about this is that there are so many of these old-school type of websites!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
