Issue #451 (Blank array slots, CSS/HTML, JSON/DB, Media)03/10/22
There are a number of different ways to remove empty items from an array in JavaScript. But in each case, you'll have to first determine what constitutes "empty". Is it only blank array slots you're concerned about? What about slots that include null, false, undefined, or 0?
I've talked before about ways to remove falsy values from an array, so that will also be covered here again. But removing blank values alone is something more specific, but there are a few ways to do it.
Let's work with the following array:
|
let myArray = ['apple', 'orange', 'pair', , 'peach', , undefined, false];
|
Notice the array includes two empty slots along with two falsy values. Following are some options for removing the empty slots.
Array.filter(Boolean) will remove all falsy values, including the empty slots:
|
console.log(myArray.filter(Boolean));
// ["apple","orange","pair","peach"]
|
If you want to preserve the falsy values but remove the empty slots, and you know the array only contains strings, you could try this:
|
console.log(myArray.filter(String));
// ["apple","orange","pair","peach",undefined,false]
|
Interestingly, you would expect this to remove any number values from the array, but that doesn't seem to happen. So I'm not entirely sure why the String object (used here as a function acting on the values) doesn't filter out numbers too. Similarly, using Number as the passed in function would remove all values except numbers, so that seems to work as expected.
Another technique that has the same effect as the Boolean example is using a simple function that passes and returns each of the values:
|
console.log(myArray.filter(n => n));
// ["apple","orange","pair","peach"]
|
This again eliminates all falsy values, including blanks.
Finally, here's one that you may not have seen before:
|
console.log(myArray.flat());
// ["apple","orange","pair","peach",undefined,false]
|
Credit to Ravin for this one. Normally Array.flat() is used to flatten an array that contains one or more sub-arrays. But, for whatever reason, this also eliminates all blank values while keeping the falsy values. As the discussion on Twitter mentions, this is not ideal because you may end up inadvertently flattening an array that you didn't realize was multi-dimensional.
Let me know if you know of another way to do this, but that should give you enough options depending on the circumstances. You can find all the above examples in this CodePen.
Now on to this week's tools!
|
CSS and HTML Tools
Choosing the Best WYSIWYG Editor for Styling Tables
Tables are perfect for representing data and information in an organized way, and it’s important to choose a WYSIWYG editor that makes the creation and editing experience with these tables simple for the user. Read for FREE! sponsored
UI Colors
Generate code in various formats for Tailwind color families. Pick a color and this tool will generate a palette in various formats for Tailwind projects.
loading-attribute-polyfill
A fast and lightweight dependency-free vanilla JavaScript polyfill for native loading=lazy for images and iframe elements.
Unicode Lookup
An online code point lookup tool that lets you encode or decode text or Unicode characters using a number of different formats.
react-responsive
A CSS media queries solution for React projects that can implemented via hooks or components.
ui-box
A low-level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components.
alfred-tailwindcss-docs
Search the Tailwind CSS documentation using Alfred, the popular Mac productivity app.
hue.tools
A powerful, multi-featured toolbox that allows you to mix, blend, and modify colors, then output the result in various CSS-friendly formats.
 |
CSSUI
A small library of interactive components implemented with pure CSS, no JavaScript (accordion, modal, tab switcher, etc).
Mailwind
An npm package that lets you use Tailwind utility classes to design HTML emails.
Polka Dot Generator
Generate CSS for a polka dot-based background, which uses layered CSS radial gradients.
Dashed Border Generator
Online tool to generate the CSS for custom dashed or dotted borders, which you can export as SVG-based data URI to apply as a background.
On the Release Radar:
|
JSON Tools, Databases, etc.
Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today! sponsored
typesafe-dynamodb
TypeSafe type definitions for the AWS DynamoDB API.
dsq
Command line tool for running SQL queries against JSON, CSV, Excel, Parquet, and more.
SQLToy
An in-memory SQL database written in JavaScript to demonstrate how SQL works.
CloudGraph
A GraphQL API for AWS, Azure, GCP, and Kubernetes that structures your multi-environment, multi-cloud data into a standardized, type-safe format.
Slashbase
An open-source, collaborative IDE for your databases that lets you connect to your database, browse data, run SQL commands, or share SQL queries with your team, right from your browser.
json-model-validator
A flexible and lightweight JSON data validator and formatter as an npm package.
ElectroDB
A DynamoDB library to ease the use of having multiple entities and complex hierarchical relationships in a single DynamoDB table.
gron
CLI tool to make JSON greppable. It transforms JSON into discrete assignments to make it easier to grep.
GQty
A GraphQL client built for rapid iteration built in TypeScript with support for React Suspense and invisible data fetching (i.e. no need to write GraphQL queries).
pg_graphql
GraphQL support for PostgreSQL so you can query your existing PostgreSQL database with GraphQL.
fast-json-stringify
JavaScript utility that's significantly faster than JSON.stringify() for small payloads.
PostgreSQL
An isomorphic TypeScript client for PostgreSQL that lets you introspect and interact with a Postgres database with a few lines of code.
|
Media Tools (SVG, Video, etc.)
Find, Visualize and Apply the Hidden Gems in Your Spam Inbox
Checkmate is the first tool ever built to sort, visualize and apply the deals from your spam inbox while you shop, finding hidden gems and saving early users an average of $40 per checkout. It’s completely free! Try Checkmate today! sponsored
gsap-video-export
A simple CLI tool to easily export GreenSock (GSAP) animation to video. Even works with CodePen demos.
pppointed
An online tool to create and customize SVG arrows. You can adjust colors and shape of the stem or the arrowhead before exporting or copying the code.
beamco.de
Generate an attractive image of a code snippet for use in social media or elsewhere. Choose from three themes and supports syntax highlighting for more than 30 languages.
Liqvid
A React library for making interactive 'videos' that aren't really videos but are built with standard native page features. Try the on-page video example, it's pretty neat.
Icon Shelf
A native icon manager for Mac, Windows, or Linux that lets you organize by collections, search for icons, sync with team members, and copy code for any icon for React, Vue, JSX, or SVG.
Vertex.im
Hand-crafted 3D icons customizable in perspective, color, or texture. Includes 3D versions of popular brand icons.
IRA Design
Free SVG or PNG illustrations of characters, objects, backgrounds, etc., that you can customize using a color picker tool on the right sidebar area.
React Canvas Draw
A React component to allow the user to draw using HTML Canvas features, with features like saving drawings and loading existing ones.
Pika
An open source app to beautify screenshots with a background and optional browser chrome, for marketing images, social media posts, mockups, etc.
imgproxy
Image proxy service for fast and secure on-the-fly image processing. The open-source plan includes quite a few features.
Minimator
A minimalist graphical editor made for touch devices. All drawings are made of lines in a grid based canvas that are limited to vertical and horizontal lines, and quarter circles.
|
Commercial Tools and Classifieds
These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).
Storyset - Customizable and animatable illustrations, free with attribution.
Browser AI - Extract and monitor data from any website using AI.
Bytes - A JavaScript newsletter that's informative and entertaining. ad
Codelia - A headless CMS for developers and marketers to create content.
Advanced React - Up your React game with the best HD course available. ad
Cloud Cultivator - Comprehensive SSL/TLS monitoring service.
PDFmyURL - HTML to PDF API and web service to convert URLs to PDF.
|
A Tweet for Thought
Here's a cool thread showing photos of mobile libraries from around the world, two of which are on a donkey and a camel.
Send Me Your Tools!
Made something? 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...
If you're good at recognizing perspective on 3D objects, you might enjoy Rotator, a shape rotating game where you have to guess which two shapes are identical.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
