Web Tools Weekly
Tools for Web Developers

Issue #562  (Voilà Review, CSS/HTML, Media, Mobile)04/25/24

The following is a paid product review for Voilà, an AI assistant for the browser that enables you to improve your writing, coding, brainstorming, and research all in one place.

The AI and ChatGPT app space is certainly growing by the day and there are a lot of good options I've been able to feature in this newsletter. One that I'm introducing today is called Voilà.

Voilà is a personal AI assistant that can help you streamline daily tasks associated with writing, research, email, coding, and more. Voilà is available as a browser extension for all Chromium browsers (Chrome, Edge, Brave, etc.), Firefox, and Safari. Voilà is also installable on mobile by adding it to your home screen on iOS or Android.

Voila

Some of the basic features of Voilà are:
  • Use ChatGPT-3.5 or ChatGPT-4 on any website
  • Access to a predefined library of expert prompts
  • Besides English, available in 50+ languages
  • Ability to create custom prompts for your own use cases

Downloading and Installing Voilà
To get started with Voilà in the browser, navigate to their website and click the "Try Voilà" or "Get Started" button. You'll be prompted to create an account and/or sign-in, after which you can install the extension for your browser. You can also go directly to the download page without creating an account.

 
Downloading the Voila extension for different browsers
Downloading the Voilà extension for different browsers

Once the extension is installed, you can access Voilà in one of three ways:

  • Clicking the icon in your pinned or unpinned extensions
  • Using a custom keyboard shortcut
  • Via the right-click (context menu) on any web page
Once it's open, you'll instantly see ways you can ask questions, interact with the current page, use one of the prebuilt prompts, and more.
After installing and opening Voila
After installing and opening Voila

Customizing Voilà
It's best to ensure your browser has added a keyboard shortcut for accessing Voilà. To see if your browser has one, click the Preferences icon (cog wheel) in the bottom right area of the Voilà window.

Here you'll see a number of settings you can customize including light/dark modes, output language, some options on how Voilà behaves, and of course the customizable keyboard shortcut to access it quickly from any web page.

Customizing Voila's Preferences
Customizing Voilà's preferences

Now that you have a basic overview of what Voilà is all about, let's dive into some of the ways you can use it in your day-to-day work.

Improving Your Writing with Voilà
Firstly, if you're using a web-based writing app, you can use Voilà via the browser context menu to improve anything you've written. Select some text then right-click and choose one of the available options in the Voilà menu.

Using Voila to improve your writing in the browser
Using Voilà to improve your writing in the browser

The menu includes options to improve the grammar, change the length, summarize, simplify, and more. You can also send the selected text to the Voilà app itself to allow you to interact with it using one of the built-in prompts.

Using Voilà on Gmail and YouTube
Voilà also gives superpowers to your email-related tasks by adding a small icon in your Gmail compose window, making it easy to generate message replies and customize the replies to suit your needs. 

The Voila icon added to Gmail's compose window
The Voilà icon added to Gmail's compose window

In addition to those common everyday tasks, you can also quickly summarize a YouTube video by opening Voilà on any YouTube video page. Select the "Summarize YouTube Video" option that automatically appears at the top of the list of options when you're viewing a YouTube video.

Custom Actions in Voilà
One of the more powerful features of Voilà is the ability to create your own library of Custom Actions. To create a Custom Action, open Voilà and choose "My Actions" then select the "Create New Action" button.

Creating a new Action in Voila
Creating a new Action in Voilà

This brings you to a settings page in your browser. Select the blue "Create new Action" button to open the window that lets you customize your action. From this page you can also edit any existing Custom Actions.

In the "Create new Action" window, you can name the Action, describe the prompt you want to use, categorize it, choose the conversation style (balanced, creative, or precise), etc.

Customizing an Action in Voila
Customizing an Action in Voilà

Using Variables in Custom Prompts
You'll notice a few advanced features associated with creating Custom Actions that will come in handy when editing these according to your own needs. First, when you click inside the "Prompt" text field, you'll see instructions for entering your prompt.

The prompt instructions explain that you can use two types of variables:

  • Custom variables with square brackets (i.e. template tags)
  • Built-in system variables using curly braces
The square bracket variables work as placeholders so when you trigger the specified Action, all you have to provide is the missing variables and Voilà will do the rest. An example is shown in the screenshot below where my prompt requires two bits of info when I initiate it.
Adding Variables to a Prompt in Voila
Using variables in a prompt in Voilà

Similarly, the variables in curly braces are predefined in Voilà. These are essentially system variables. There are currently three available:

  • {PAGE} for the current page’s content
  • {DATE} for the current date
  • {CLIPBOARD} for the clipboard contents

You can easily see how powerful it is to be able to use these system-wide values in your custom prompts.

You'll notice that the Create Action window includes a button called "Add custom instructions". This allows you to expand on your basic prompt instructions and create your own custom AI assistants. You can add any requirements you want here such as tone, brevity, types of explanations, and so on. This would be a great way to create your own custom coding assistant, an example of which is found on the linked docs page above.

In conclusion, Voilà has lots to fiddle around with out-of-the-box in their library of prompts and AI assistants that cover everything from marketing to coding to research. And the UI is easy to get accustomed to as it's similar to many of the 'drawer' or 'command' menus that exist in many apps today.

Voilà includes a limited free plan that allows up to 250 requests, so you can easily try out its features with no commitment. After that, you have the option of two reasonably priced plans to continue using it.

So check out Voilà today and see if this powerful and easy-to-use browser extension can help streamline your productivity.


Now on to this week's tools!
 

 

CSS and HTML Tools

MarkdownDown — An online tool to convert any webpage to clean markdown with an option to download the images locally or link them remotely and also apply a GPT filter to transform the content.

Fancy-ANSI — A small JavaScript library for converting ANSI to beautiful, browser-safe HTML.

SVG Encoder — A simple tool to convert SVG code into different formats, ready for use in CSS and HTML.

CSS Gradients — A gallery of 270+ click-to-copy CSS gradients, with lots of unique examples along with some simpler two-color gradients.

The Morning Paper for Tech — Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics.    SPONSORED 

component-template — A simple template for kicking of a new web component that includes a JS starter file, demo, example README, and more.

css2wind — An interactive game to help you learn Tailwind syntax that asks you to guess how to write a given CSS property/value pair in Tailwind class syntax.

css2wind

Boring Utils — A set of 20+ utilities for day-to-day HTML/CSS code use including decoders, encoders, formatters, minifiers, and more.

Gradientor — A minimalist radial background generator that generates and adjust a gradient when you move your mouse and scroll wheel.

bsky-embed — A web-component to easily embed a feed from Bluesky, the new social media app created by the founder of Twitter.
 

Media Tools (SVG, Video, etc.)

tonal — A music theory library that contains functions to manipulate tonal elements of music (note, intervals, chords, scales, modes, keys) and which deals with abstractions (not actual music or sound).

Upscayl — An open-source, cross-platform AI-powered desktop or cloud-based tool to upscale image and video quality using 10+ advanced AI Models.

Upscayl

faces.js — A JavaScript library for generating vector-based cartoon faces, somewhat reminiscent of Nintendo's Miis (i.e. avatars).

The Morning Paper for Tech — Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics.    SPONSORED 

Subsvideo — A tool to add captions to video files that allows you to customize the look and styles applied to the captions using a simple UI.

lissajous-svg — An online tool to generate and customize Lissajous curves (sort of like a spirograph pattern) that you can export in SVG format.

Neat — A Three.js library to create animated 3D gradients to use as backgrounds. They look cool but aren't very performant, so use with caution.

PicToBrush — A unique online drawing tool that lets you use a photo (either your own or one of the options) as the drawing tool (i.e. the brush).

7000 Free Icons — A Figma plugin that includes 7,000+ carefully curated, ready-to-use icons in three categories: interface, countries, and payment.

MW Metadata — Submit a YouTube link or ID for a video, playlist, or channel and this tool will generate all the metadata associated with the specified YouTube content.
Advertisement

Ready to Start a Business? Your First Step is Anytime Mailbox.
Secure a physical address through Anytime Mailbox’s vast 2100 International address network. Find an address around the corner, in NY, LA, or Paris.

Anytime Mailbox

There’s plenty to choose from! For as low as $9.99 per month, you’ll have an address to use when filling in forms, receiving postal mail, business cards, returns, and more.

It’s easy, and there’s no long term commitment. The best part? You keep your home address private.

Get Started Today by Choosing Your Location →

 

React Native and Mobile Tools

Bob — A set of CLIs to make it easier to scaffold and build React Native libraries for different targets.

Android Ally — A desktop software companion to enable testers and developers faster access to Android device accessibility features, to simplify and encourage Android Accessibility testing.

react-native-live-markdown — A universally supported drop-in replacement for React Native's TextInput component with Markdown formatting and customizable styles.

Advertise in Web Tools Weekly — Want to put your app or product in front of thousands of web developers? Hit reply on this email to discuss or visit the sponsor page to review spots available (prices are flexible).   SPONSORED 

What PWA Can Do Today — A PWA that you can install and is a simple resource with demos providing an overview of what's possible with Progressive Web Apps today.

What PWA Can Do Today

Flash Calendar — A fast and flexible library to build calendars in React Native, with iOS and Android support, localization built in, a customizable UI, and more.

React Native Screens — A project that exposes native navigation container components to React Native, not designed to be used as a standalone library but as a dependency of a full-featured navigation library.

vision-camera-resize-plugin — A frame processor plugin for VisionCamera (a popular React Native camera library) for fast and efficient frame resizing, cropping and pixel-format conversion using GPU-acceleration.

Flame AI — A CLI for interacting with OpenAI and doing code modifications and code generation, to help with upgrading React Native apps.

react-native-fast-text — A faster version of the React Native Text component that removes most of the unnecessary overhead.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
draw-editor – An online multi-featured drawing canvas with ability to add effects and more.
VSCode.Email – The latest news, tips, tools, & articles on the world's most popular code editor.    AD 
ShipLog – A refreshingly simple take on a changelog that puts a spotlight on the builders behind each release.
Shotzio – A multi-featured online tool to edit, beautify, and share screenshots.
Tech Productivity – A weekly dose of tools, apps, and articles, on focus, productivity, and more.     AD 
Twinr – Convert WooCommerce, Shopify, Squarespace, Wix, etc. to a mobile app with premium features.
Goril.app – A low-code, drag-and-drop Mac app designed for rapid development of Flutter apps.

An X Post for Thought

You promised yourself you wouldn't do it but you're still gonna do it on Friday, aren't you? Those side projects aren't gonna code themselves.
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...

Musicboard is a social media app specifically designed for music lovers, to share and learn new music with friends and followers, with ability to write reviews, rate albums, and more.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris