Issue #455 (Array equality, CSS/HTML, JSON/DB, Vue)04/07/22
If you've been coding JavaScript for some time, you may never have had the need to compare two arrays to see if they're equal. But if it comes up, what exactly does "equal" mean when you're talking about arrays?
With two strings, we know exactly what it means. But with an array, it could mean 'do they contain the same values?', or possibly 'do they contain the same values in the same order?'.
Whatever the case, doing a direct strict comparison of two arrays will not tell you if they're equal:
|
let myArray = ['a', 'b', 'c'],
myArray2 = ['a', 'b', 'c'],
myArray3 = myArray;
function compareFunc (a, b) {
return a === b;
}
console.log(compareFunc(myArray, myArray2)); // false
console.log(compareFunc(myArray, myArray)); // true
console.log(compareFunc(myArray, myArray3)); // true
|
Notice the two arrays are exactly the same. They contain the same items and in the same order. But a strict comparison using triple-equals says they're not equal. The only way to get the comparison to work is to compare the same instance of an array to itself (as I did with the last two logs). So technically the comparison is asking if it's the same array in memory, not the same values.
That doesn't mean array comparison is fruitless. If you have a few hours to kill, here's a really old Stack Overflow thread with lots of different answers. If you're only concerned with simple arrays containing numbers and strings, probably the simplest way to compare them is to convert each array to a string and then compare those:
|
console.log(myArray.toString() === myArray2.toString());
// logs "true"
|
You can try both of the above code samples in this CodePen. The Stack Overflow thread includes a ton of complex answers that take a number of different factors into consideration including order of items, object comparison in general, and more.
As I mentioned, comparing arrays doesn't seem to be common in my experience, but it's interesting to see the different ways people attempt to solve the problem.
And as a final side point, there is an official proposal that's a few years old that attempts to add an array comparison method to the ECMAScript spec.
Now on to this week's tools!
|
| |
CSS and HTML Tools
Retool is the Fast Way to Build an Interface for any Database
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. sponsored
pppalette
A color palette generator to build palettes from a chosen or random color. You can also create cohesive palettes by means of various blending options.
Martian Mono
A monospace typeface family consisting of a variable font and 28 styles. Currently includes basic Latin, figures, punctuation, and essential symbols, with other features in the works.
Stylify
A library that generates utility-first CSS dynamically based on what you write. Interesting because the class names basically look almost exactly like real CSS, so this seems to be the next step for something like Tailwind.
datetime.tools
Online tool to Convert a date/time value to or from Unix, ISO 861, and a standard human-friendly format.
 |
details-utils
A suite of JavaScript utilities that adds more features to the HTML `details` element.
tailwindcss-animate
A Tailwind CSS plugin that lets you use classes like `animate-in fade-in zoom-in` to apply animations to elements.
Gradientos
Test how a selected gradient will appear on various elements displayed live on the page, with option to switch to dark mode.
HTML Shell
An online tool to generate a basic HTML template. Use various toggles and options to include or exclude various meta tags and other features.
Bamboo CSS
A classless CSS library that adds attractive default styles for all HTML elements. Useful to add simple styles to HTML landing pages or demos.
CSS Checker
CLI tool that checks your CSS for duplication and quickly finds diffs among CSS classes that have high similarity.
SingleFile
A browser extension available for most modern browsers that allows you to download an entire web page as a single HTML file.
|
JSON, Database, etc.
CSS Weekly Newsletter
Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and designers and sign up today. sponsored
Animate SQL
Online tool to see visualizations of SQL queries. Choose an SQL keyword along with an animation duration and then use the "Visualize" button to see what how the selected keyword behaves.
Postico
A modern PostgreSQL client for Mac that provides an easy-to-use interface, making PostgreSQL more accessible for newcomers and experienced devs.
JSON Visio
A simple visualization tool and formatter for your JSON data with no forced structure. Paste your JSON and view it visually using various flow-chart formats.
jless
A command-line JSON viewer for Mac and Linux designed for reading, exploring, and searching through JSON data.
dynamodump
Node CLI for backing up and restoring schema+data from DynamoDB tables.
SimpleKV
A simple, anonymous key-value store for quick tests and temporary demos. Data not accessed for 7 days will be deleted.
dasel
A tool built with Go that lets you select, put, and delete data from JSON, TOML, YAML, XML and CSV files, with support for conversion between formats.
Graphjin
A GraphQL to SQL compiler that lets you build APIs in minutes.
One Tooling
A collection of useful tools for developers, that work client-side (except where noted), including JSON formatters/converters, HTML to Markdown, base64 and URL encoding/decoding, and more.
graphql-request
A minimal GraphQL client for Node and the browser, for scripts or simple apps, that uses a Promise-based API and has TypeScript support.
|
Vue Tools
CSS Weekly Newsletter
Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and designers and sign up today. sponsored
vue-typegen
A Vue tool that scans for .vue files and generate types for your Vue components.
unplugin-swc
A plugin that adds support for SWC (a popular Rust-based web compiler) for Vite and Rollup.
vue-agile
A carousel component for Vue that's responsive, touch-friendly, Nuxt.js SSR support, and no jQuery dependency.
vue-frag-plugin
A Webpack/Rollup/Vite plugin to use multiple root nodes in Vue 2 Single-file Components (SFCs).
FormKit
Vue library that provides a one-stop solution for high-end forms, featuring labels, help text, theming support, validation, form generation from JSON, accessibility, internationalization and more.
vue-motion-one
Animation library for Vue 3 based on Motion One, the relatively new library based on the Web Animations API.
vue3-datatable
A basic data table component for Vue 3 written in TypeScript and using the Composition API with filter, search, pagination, etc.
unplugin-vue2-script-setup
A plugin for Vue 2 that allows you to use `script setup` for the Composition API, with support for Vite, Nuxt, Vue CLI, Webpack, esbuild, and more.
Vue Unused Components Checker
Vue tool to detect unused Vue components in your projects.
Vue InstantSearch
Lightning-fast search for Vue.js apps powered by Algolia.
vue-inter
Older project that provides a simple yet powerful 1kB internationalization library for Vue.
|
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).
Pigmnts - Browser extension to extract a color palette from an image.
Datawrapper – Embeddable charts, maps, and tables, free with attribution.
vscode.email – A brand new newsletter with tips & content for VS Code. ad
DeckDeckGo – Web app to create presentations slides shareable as PWAs.
Notus – A premium Tailwind CSS design system and admin template . ad
Belltastic – Pre-built components for adding web notifications to your app.
Magma Studio – A browser-based real-time art collaboration platform.
|
A Tweet for Thought
Shaun Hume shares an accurate representation of the roller coaster of learning to code (or learning new technology, really).
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...
I'm guessing most of you have traveled less in the last two years than you would have liked, so to make up for that, maybe you'll enjoy YSFlight, a flight simulator for Windows, Mac, and Linux "where anything is possible." And yes, they mean anything since the software also includes cars and boats.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
