Web Tools #455 - CSS/HTML, JSON, Databases, Vue

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #455 • April 7, 2022

Advertisement
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.

Get Started For Free Today
Retool

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.

datetime.tools

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.
 
JSON Visio

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.
 
FormKit

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).

A Tweet for Thought
 

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 everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon  /  GitHub Sponsors  E-Books  /  $5 Tip  /  $1 Tip

Older messages

Web Tools #454 - Array.at, React, Git/CLI, Uncats

Thursday, March 31, 2022

Web Tools Weekly WEB VERSION Issue #454 • March 31, 2022 Advertisement Mojeek: A Crawler-Index Search Engine Most alternative search engines just source results from Google or Bing, not Mojeek! We have

Web Tools #453 - IE11 to Edge, JS Utilities, SVG, React Native

Thursday, March 24, 2022

Web Tools Weekly WEB VERSION Issue #453 • March 24, 2022 Advertisement Choosing the Best WYSIWYG Editor for Styling Tables Tables are perfect for representing data and information in an organized way,

Web Tools #452 - JS One-liners, VS Code, Testing, Uncats

Thursday, March 17, 2022

Web Tools Weekly WEB VERSION Issue #452 • March 17, 2022 Advertisement The All-in-One Modern Data Platform You Need Get everything you need to combine, organize, and transform your data for analysis,

Web Tools #451 - CSS Tools, Databases, JSON, SVG

Thursday, March 10, 2022

Web Tools Weekly WEB VERSION Issue #451 • March 10, 2022 Advertisement Choosing the Best WYSIWYG Editor for Styling Tables Tables are perfect for representing data and information in an organized way,

Web Tools #450 - New MDN, Frameworks, Build, React

Thursday, March 3, 2022

Web Tools Weekly WEB VERSION Issue #450 • March 3, 2022 Advertisement How Modern Treasury Scaled Data Infrastructure Fast Modern Treasury, the payment operations provider, needed to replace their BI

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your