Issue #435 (Retool Review, CSS/HTML, Git/CLI, JS Utils)11/18/21
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.
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
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
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
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
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
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 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.
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.
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.
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.
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
