Issue #508 (Appsmith Review, Media, Git/CLI, JS Utils)04/13/23
The following intro is a paid product review for Appsmith, an open-source platform for building internal tools.
If you're in the market for an internal tools solution, or if you're considering trying out a new platform in this space, you'll definitely want to check out Appsmith, a platform and comprehensive framework for building internal apps.
I'll cover a number of things in this review, but here are the main areas where Appsmith excels:
First, even a brief look at Appsmith's library of components should get you familiar with what you can create.
Appsmith's Library of Drag-and-drop Widgets
There are widgets in pretty much any category including buttons, charts, forms, maps, modals, progress bars, tab switchers, audio, video, and lots more.
You can roll your own apps from scratch using the library of components, or you can choose from 20+ templates, which you can filter by data source and functionality inside your Appsmith dashboard.
Choosing a Template in Appsmith
Another great feature of the Appsmith platform is the ease with which you can write your own code to make your widgets interactive and dynamic. For any component, you can write properties, events listeners, and queries.
JavaScript code can be written using "mustache" syntax using single-line declarations or multi-line snippets. For example, here's a multi-line code example that uses an IIFE to encapsulate code that interacts with some data:
|
/* Call a query and then manipulate its result */
{{
(function() {
const array = QueryName.data;
const filterArray = array.filter((row) => row.id > 5);
return filterArray;
})()
}}
|
In addition to adding functionality to components in this way, Appsmith has an easy-to-use set of tools for querying data from your chosen data source. You can select from a whole slew of integrations including APIs and databases like PostgreSQL, MondoDB, Airtable, Google Sheets, GraphQL, and more.
Appsmith offers integration with popular databases and APIs
Once you've selected and authorized a data source, it's super-easy to start building queries to access the data in different formats. For example, I was able to create an integration with one of my Google Sheets in just a few minutes, after which I was able to view the data from my sheet in table or JSON format.
Querying a Data Source in Appsmith
In the case shown above, I was able to build a query for my Google Sheet using some of the on-page controls. If I chose a database as my data source, I can build and run SQL or similar queries as needed. Powerful stuff that's just a few clicks away!
As mentioned earlier, Appsmith allows for endless customizations for your apps by means of custom coding. You can also supplement your custom JavaScript by incorporating external libraries including Lodash, Moment.js, Fast XML Parser, and Forge (for working with cryptographic tools in JavaScript). Additionally, you can install other external libraries, provided they support UMD builds.
Using External Libraries in Appsmith
Because there's so much to work with in Appsmith, good documentation is a huge plus. Appsmith doesn't fall short in this area; the Appsmith docs are top notch, so you won't feel lost or without help.
The docs include instructions on self-hosting, articles on Appsmith's core concepts, step-by-step guides for building your first app, guides for connecting to data sources, detailed tutorials on building specific types of apps (like a catalog manager), and more. The docs also include guides for advanced concepts like custom authentication, sharing data across pages, and integrating Git.
Once you've build something with Appsmith, you have the option to make your app public, after which you can embed it in any existing app or web page. This opens up tons of possibilities for shared tools across your team that can be incorporated into your existing resources and materials.
Embedding Appsmith Apps in External Web Pages
One last thing that's worth discussing is Appsmith's recently launched usage-based pricing model, which the Appsmith team considers a more principle and ethical pricing model compared to traditional user-based pricing. With this model, you're charged per user, per hour, with a cost cap for each user per month.
The new pricing model only applies to Appsmith's Business plan customers, so those using the self-hosted Community plan still have no fees. You can view all the details on the different pricing plans on Appsmith's pricing page.
So in summary, if you're looking for an easy and fast way to build internal support tools, dashboards, admin panels, or other business-facing applications, give Appsmith a try.
Now on to this week's tools!
|
| |
Media Tools (SVG, Video, Images, etc.)
Unicons
1000+ pixel-perfect SVG icons and icon fonts, for use with Flutter, React, Vue, React Native, and more.
iDraw.js
A simple Canvas-based JavaScript framework for creating apps that allow drawing on web pages. Includes a live playground to try it out.
Picyard
Online tool to generate attractive backgrounds for screenshots, code snippets, device mockups, social media posts, and more.
Sharpen Your Math, CS, and Data Skills in 15 Minutes a Day
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day. SPONSORED
Enhance Speech
An online tool from Adobe that makes voice recordings sound as if they were recorded in a professional studio.
concatible
Enter a YouTube URL and this tool will generate clips for use as shorts, with pre-made templates. Free for now.
Hicon
A simple, web-friendly set of 200+ SVG-based icons, built with Figma.
PhotoPrism
A self-hostable, AI-Powered photos app for the decentralized Web that makes use of the latest technologies to tag and find pictures automatically.
SwissGL
A minimalist wrapper on top of the WebGL2 API, designed to reduce the amount of boilerplate required to manage GLSL shaders, textures, etc.
Ssemble
An online video creator and editor with all sorts of built-in feature like background removal, sound effects, zoom, rotate, and more.
Magdeleine
Hand-picked and free stock photos in categories including nature, city, people, food, animals, and more.
On the Release Radar:
|
Git, GitHub, and CLI Tools
Gut
A user-friendly Git CLI for Windows, Mac, and Linux that has intuitive commands and streamlined workflows, to simplify the process of using Git's complex system, allowing you to focus on your code.
Socket CLI
A CLI tool for Socket.dev, the service for securing your app's dependencies and checking the health of npm packages.
podcast-dl
A node-based CLI for downloading podcasts, with a focus on archiving.
Sharpen Your Math, CS, and Data Skills in 15 Minutes a Day
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day. SPONSORED
Volta
A GitHub app to allow your team to work in real-time on open-source and private repositories, all in one place. Includes a decent free plan.
Cross Platform Action
A GitHub action for running GitHub Actions workflows on multiple platforms, including platforms that GitHub Actions doesn't currently natively support.
dax
Cross platform shell tools for Deno, inspired by zx, the popular Bash alternative.
OpenCommit
A customizable, GPT-based CLI tool to auto-generate commits with commit messages and descriptions that are easier to understand at a glance.
mergestat-lite
A command-line tool for running SQL queries on Git repositories and related data sources.
discord-styled-releases
A GitHub Action that uses a webhook to send automatic and styled Discord messages on new repository releases.
|
JavaScript Utilities
Motion Canvas
A TypeScript library that uses generators to program animations along with an editor for a real-time preview of the animations.
Jazzer.js
A coverage-guided, in-process fuzzer for Node.js, based on a C library called libFuzzer.
Exhaustive
A tiny bundle footprint for typesafe exhaustiveness checks in TypeScript, with helpful type inference to ensure you haven’t forgotten any case.
Promise Pool
Map-like, concurrent promise processing for Node.js.
maze
Maze generation visualization in vanilla JavaScript. Includes a neat little demo to demonstrate the effect.
Lithium: Effortlessly Manage Your Web3 Community
A community engagement platform, powered by AI, that delivers valuable analytics across acquisition, engagement, and monetization, empowering projects to make informed, data-driven decisions. SPONSORED
OTPAuth
One-time password (HOTP/TOTP) library for Node.js, Deno, Bun, and browsers.
Typability
A WYSIWYG markdown editor based on Milkdown, the popular WYSIWYG editor framework.
huggingface.js
A collection of JavaScript libraries to interact with the Hugging Face API (the popular Machine Learning models), with TypeScript types included.
Mutative
A JavaScript library for efficient immutable updates, 10x faster than Immer and other similar solutions.
Run
A tiny library that runs user-provided code into a Web Worker, to allow data transformation through snippets of code.
CO2.js
An npm module for accessing the green web API, and estimating the carbon emissions from using digital services.
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Sitefig – Continuous UX monitoring and auditing for performance, code errors, etc., for large websites.
|
|
Meco – Enjoy newsletters in a space built for mindful reading and give your inbox space to breathe. AD
|
story.to.design – Generate and sync full Figma components from Storybook, Backlight, or Histoire.
|
|
imgcreator – Create art, images, logos, anime, and more with AI for free.
|
Learn React – A 9-course bundle covering 150+ hours of material to level up your React skills. AD
|
|
VectorStyler – Advanced illustration and drawing software for Mac and Windows.
|
StreamDocs – Secure, cloud-based PDF API to seamlessly integrate a PDF viewer into projects.
|
|
|
A Tweet for Thought
This Tweet from 2022 seems to encapsulate the "how I made X dollars" Twitter thread trend that's been rampant for a while now.
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 prefer a more visual way to read Wikipedia articles, you'll enjoy Wiki2Map. Search for a Wikipedia article and this tool will show you a flow-chart-style diagram of the article's content.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
