Web Tools #435 - CSS Tools, JS Utils, Git/CLI Tools

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #435 • November 18, 2021

The following intro is a paid product review for Retool, a platform that provides a fast way to build internal tools.

Like many startups and development teams today, you may have built a company-facing tool or user interface to help with some kind of organizational matter, business relations, data collection, or other task worked on internally. In some cases, that process may have been tedious.

Retool is a platform that offers drag-and-drop components, ready-made templates, and other powerful features, to help you easily build custom internal tools connected to just about any data source.

Retool

In this review, I'll talk about four primary features of Retool that many teams have found practical and useful in building their own internal tools:

When you first set up your account, you'll have the option to start building based on an existing data source. You can select from dozens of databases and APIs.
 
Retool's Data Integrations
Retool's Data Integrations

A commonly selected data integration is Google Sheets. The Retool docs have an excellent guide to get up and running with a Google Sheets-based app in minutes. I was able to set up one of my sheets as a data source for an example app quickly and easily.
 
Integrating Google Sheets as a Data Source
Integrating Google Sheets as a Data Source

With a data source in place, I can start to incorporate any of the 50+ components available to customize my app.

In the dashboard, I can create a new blank app or use one with a data source (e.g. Google Sheets, as shown above). From there I have access to components that I can drag and drop into my newly created app.
Retool's Drag-and-drop Components
Retool's Drag-and-drop Components

I can drag any of these components into the "Main" or "Header" area to include them as part of my tool's UI. Once I have components in place, I can click a component, then choose "Inspect" to adjust settings depending on the type of component being edited.

In my example Google Sheets app, I was able to instantly generate a table with my sheet's data simply by dragging the Table component into my work area. Retool automatically populates the Table component with my selected data source – which is a cool feature!

As mentioned, the components library offers dozens of components, including various types of inputs, buttons, presentation components, containers, forms, and more.

Another incredibly useful feature of Retool is a library of ready-made app templates that you can choose from that cover many common use cases.

Retool's Ready-made Templates
Retool's Ready-made Templates

The templates include admin panels, CRMs, and common data integrations from sources like Stripe, GitHub, Amazon S3, Slack, Salesforce, and more.

Creating an App from a Template
Creating an App from a Template

You can build your app from scratch using Retool's component library, or use one of these starting templates. Either way, you can customize the app to your own needs and write logic using JavaScript or SQL. Retool's home page includes a 4-minute video that demonstrates how SQL queries can be written along with JavaScript.

This ability to customize and hack your own tools is where Retool really stands out. Here's an example of a line of code you might write, similar to one of those used in the demo video:

select * from users where f_name ilike {{input1.value}}

This is an SQL query but also includes some JavaScript, which you can see between the double curly braces. This opens up unlimited possibilities for logic within your apps. You're not limited to what a pre-built template or component includes, but you can customize your apps to whatever you want to build.

Many well-known brands have used Retool to build their own tools, some of which are outlined on Retool's Customers page. These and other customers have found that Retool's features can fit just about any internal use-case.

Retool's Customers
Retool has Customers across many industries

The docs are a great place to start to get a feel for all the features I've discussed above, which I've only scratched the surface of. As outlined on Retool's pricing page, they offer a really good free plan (cloud or self-hosted), team & business plans, and a self-hosted starter plan.

I'm sure you can think of a million ways you can utilize Retool's platform – measuring efficacy of marketing materials, organizing sales leads, product analytics, managing client contracts, and more. You can build just about anything useful for both small and large companies.

So try out Retool today if you want an easy way to build internal apps and user interfaces that help your team get more stuff done in an organized and efficient manner.

Now on to this week's tools!

CSS and HTML Tools

Enter The Ecommerce Speed Up Challenge to Win Big Prizes
Cloudways is hosting a grand Ecommerce Speed Up Challenge. Show off your web speed optimization skills to ace the challenge and win Amazon gift cards, hosting credits and much more. sponsored 

couleur.io
An HSL-based interactive tool to help you build what the maker calls "harmonizing" color palettes along with optional accent colors.

Fontfacer
Upload your custom font files and this tool will generate the list of CSS font rules that you can copy and paste into your code.

Coding Font
If you're not sure what coding font you want to use, this tool will let you play a little sports bracket-based tournament with yourself to decide a coding font winner, based on your own preferences.

tailwindcss-aria-attributes
A plugin that provides Tailwind variants for various aria-* attributes and their supported values.

Card UX/UI
An interactive Bootstrap cards generator and customizer that also includes 20+ predefined card templates.

FilterSS
A gallery of Instagram-like effects built with CSS's filter property that you can copy with a single click on the effect you choose.
 
FiltersSS

Colordot
A really simple online color palette picker that's also available as an iOS app (for $0.99). You can share any custom palette instantly via the generated URL.

Hint.css
A pure CSS tooltip library with accessibility support via WAI-ARIA.

latex-tailwind
A class-less CSS library that turns your HTML document into a website that looks like a LaTeX document.

CSS Gradients
A gallery of 40+ CSS gradients, each with an interactive sliders and color pickers to adjust the gradient settings before copying the code.

Accessible Palette
Color palette generator that uses the chroma.js library to generate color ranges with consistent lightness between levels, for more accessible palettes.
 

Git, GitHub, and CLI Tools

Elevate Winter Summit Free Tickets
Grab your free tickets for Elevate, the biggest conference for engineering leaders, and learn from speakers from companies like Facebook or DoorDash. Use promo code to WTW21 to get a 100% discount!  sponsored 

GitHub Code Font Changer
Chrome extension to change and customize the default GitHub code viewer font and default font weight.

nixty
A Unix/Linux CLI tool that open files related to your Git workflow on VS Code.

Fast Syntax Highlighting
Feature rich syntax highlighting for Zsh (the popular shell for Unix-based systems).

Neat
MacOS app to add GitHub notifications to your menu bar, to replace using email or Slack to handle notifications.

Cirun.io
An on-demand, scalable GitHub Actions runner in the Cloud, configurable via a simple YAML file.

ConEmu
A full-featured local terminal for Windows, featuring tabs, splits, copy/paste, DosBox and PuTTY integration, and more.

GistPad
A VS Code extension that allows you to open, create, delete, fork, and star Gists, repositories, and edit files as if they were local directly inside VS Code.
 
GistPad

github-script
A GitHub action to write workflows scripting the GitHub API with JavaScript.

Project Morya
A collection of Bash scripts that runs iteratively to carry out various tools and recon processes, then stores the output in an organized way.

Renamer
A command-line utility to help rename files and folders and is flexible and extensible via plugins.

git-cliff
A highly customizable changelog generator that follows conventional commit specifications.

sysz
An fzf (the CLI fuzzy finder) terminal UI for systemctl, a common utility used to control and inspect systemd, a system service manager on Unix systems.
 

JavaScript Utilities

Free tickets for Elevate Winter Summit
Want to learn from Engineering or Product leaders from companies like DocuSign, DoorDash, Facebook, or even Auth0? Grab your free tickets for Elevate Winter Summit with the promo code WTW21 to get a 100% discount on the 2-day pass.  sponsored

MicroDiff
A fast, zero-dependency object and array comparison library that's significantly faster than most other deep comparison libraries and has full TypeScript support.

solid-tiny-router
A tiny routing library for Solid, a popular reactive JS UI library.

Scoutbar
Am easy-to-use, scalable, and highly customizable utility to add a CMD-K navigation drawer to a page or app.

InversifyJS
A powerful and lightweight inversion of control (IoC) container for JavaScript and Node.js apps, powered by TypeScript.

JSXGraph
A cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.
 
JSXGraph

Number to Words
A simple JavaScript utility to convert a number into words (e.g. numberToWords(37) => "thirty-seven").

Fireworks.js
A JavaScript library to add Canvas-based fireworks effects to a web page, with configurable visuals, sound, speed, acceleration, and more.

docx
A battle-tested library to easily generate .docx files with JavaScript or TypeScript, in Node and the browser.

Cacheables
A simple in-memory cache written in Typescript with automatic cache invalidation and an elegant syntax.

reveal-md
A utility to enable you to use Markdown files to generate presentations using reveal.js, the popular JS-based slide deck tool.

ChordSymbol
A music chord symbol parser and renderer for JavaScript/Node, that doesn't require specific chord syntax, but works with thousands of variations.

On the Release Radar:

Commercial Apps and Classifieds

HubDesk - Create GitHub Issues from emails and respond via @ replies.

Tech Productivity - A newsletter featuring productivity apps and articles. ad 

Inspect Flow - Chrome developer tool for inspecting Tailwind CSS classes.

JavaScript E-Books Bundle - The full bundle is 50% off at AppSumo. ad 

Netstats - Privacy-friendly real-time website analytics.

Newsy - Quickly turn unused domains into a complete web app.

A Tweet for Thought

I'm the same age as Alan.
 
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...

Similar to last week's intro, here's another JavaScript quiz, this one specifically focused on the weirdness of the language: JS Is Weird.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books / Buy Me a Coffee

Older messages

Web Tools #434 - JS Quiz, React, Build Tools, Uncats

Thursday, November 11, 2021

Web Tools Weekly WEB VERSION Issue #434 • November 11, 2021 Advertisement Need a Better Way to Test Your Web App? Testim's Advanced AI Automates UI Testing. Your dynamic web application needs test

Web Tools #433 - VS Code Tips, Frameworks, JS Utils, React Native

Thursday, November 4, 2021

Web Tools Weekly WEB VERSION Issue #433 • November 4, 2021 Advertisement Sell. Win. Celebrate. AppSumo. AppSumo is the #1 digital marketplace for entrepreneurs, get your name in front of 1M+

Web Tools #432 - CSS Tools, Testing/Debugging, Media/SVG

Thursday, October 28, 2021

Web Tools Weekly WEB VERSION Issue #432 • October 28, 2021 Advertisement Retool is the Fast Way to Build Internal Tools Visually design apps that interface with any database or API. Switch to code to

Web Tools #431 - App Notifications, VS Code, DB, Git/CLI Tools

Thursday, October 21, 2021

Web Tools Weekly WEB VERSION Issue #431 • October 21, 2021 The following intro is a paid product review for Courier, a platform and API to easily add multi-channel notifications to your web app. Many

Web Tools #430 - JS Libraries, React Tools, Uncats

Thursday, October 14, 2021

Web Tools Weekly WEB VERSION Issue #430 • October 14, 2021 Advertisement Retool - Build Internal Tools 10x Faster Retool gives you a powerful set of building blocks: tables, lists, charts and more.

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