Web Tools Weekly Issue #444 (Fine Start Review, CSS/HTML, Text Editors, Mobile)

Issue #444 (Fine Start Review, CSS/HTML, Text Editors, Mobile)01/20/22

The following intro is a paid product review for A Fine Start, a new tab page for Chrome, Firefox, and Edge.

Nowadays many developers and programmers are looking for ways to streamline their workflow and be more productive and efficient. I'm sure like many of this newsletter's readers, you're often on the lookout for tools in this space. One such tool that you'll want to consider is A Fine Start.

A Fine Start is a browser extension available for Chrome, Firefox, and Edge that has a simple and elegant interface where you can bookmark and organize the URLs that are most important to you when opening a new tab page.

The free version includes a number of easy-to-use features, including:

Ability to add, edit, and arrange bookmarks via drag-and-drop
Bookmarks are accessible in your new tab page or via the web UI
Light and dark modes (or system-dependent)

You can upgrade to the Premium version to keep your links synced across devices, but the free version alone might be enough for many of you.

A Fine Start's UI in Dark Mode

Once you install the extension, you can start collecting and organizing your bookmarks with a few clicks, as shown in the screen grab below where I'm using a Chromium-based browser:

Adding a Link Using A Fine Start's Browser Extension

Each time you open a new tab page in your browser, you'll see all the links you've saved and organized under your own custom categories. From there you have the option to add a new link, edit the layout, and view settings.

Options available on A Fine Start's new tab page

As you can see in my screenshots, I've added a number of different links I use often for development, research, and hobbies – which I've organized under my own custom categories. I can easily access what I want without having to hunt things down in a separate bookmarks tool or in the browser's clunky built-in bookmarking.

If I choose the Edit/Reorder button, my categorized links are visible in the same UI, but with some extra options, as shown below.

A Fine Start in Edit Mode

Notice the little "X" icons that appear next to each link. Also, the "Edit/Reorder" button now has turned into a "Done" button (sort of like a "save" option). In this edit mode, I can do all the following:

Delete a link by clicking any "X" next to an item
Drag and drop a link to another category
Reorder links within a category
Drag and drop an entire category to another spot on the page
Click any link to edit its name or URL

In addition to those commonly-used features, you'll recall there's a "Settings" option on the main new tab page. This option allows me to manage my account along with some more advanced features.

Here I can choose between dark and light modes, or force whatever the system's appearance mode is. Also, there are some options to make the UI even cleaner by removing some of the extras (though I personally like the default view that shows me everything).

A Fine Start's appearance settings

Finally, the Settings view also provides access to an Import/Export bookmarks feature along with a very cool "Restore points" feature that lets me access my bookmarks in previous states.

A Fine Start's Restore points and Import/Export features

This feature works more or less like a Wayback Machine for my bookmarks. This means I can grab a link that I've previously deleted or even restore my entire set of bookmarks to one of those previous states. Very handy!

Cycling through restore points

Overall, A Fine Start is an attractive and easy-to-use bookmarking tool with a minimalist design that doesn't require any extra thinking or apps – it's built right into your browser's new tab page, something you probably use many times during any given work day.

As mentioned, in addition to the Premium version that lets you sync your bookmarks across your devices, you can install the free version of A Fine Start for Chrome (including other Chromium-based browser), Firefox, and via the newly-added Edge extension.

Now on to this week's tools!

CSS and HTML Tools

clay.css
A CSS utility class for applying inflated fluffy 3D "claymorphism" styles to elements. Fully customizable and extensible with CSS variables or via a Sass mixin.

Alwane
Generate a color palette from any website by dropping in a URL then customizing the palette and sharing it. You can also generate palettes from existing CSS code or a set of Hex values.

Houdini.how
A library of "worklets" that demonstrate some of the things you can do with Houdini, which is a set of low-level APIs that allow developers to extend CSS.

tailwindcss-first-line
A Tailwind plugin that implements the :first-line CSS pseudo-element by means of a Tailwind utility class.

CSS Fingerprint
A resource for understanding and learning how to track users via CSS. You can click to view your own browser's CSS-only fingerprint.

rehype
An ecosystem of plugins for processing HTML to do all kinds of things: format, minify, or wrap it programmatically into a document.

Doodad Gradient Generator
Generate complex, layered color gradients as CSS, SVG, PNG, or JPEG, with support for linear, radial, and conic gradients.

Modern Fluid Typography Editor
An online tool for generating CSS for 'fluid typography' that uses CSS's new clamp() function, which now has pretty good browser support.

Inspect
A Figma plugin to export Figma layers as HTML or React with Tailwind CSS.

DoodleCSS
An HTML/CSS theme that has an informal, hand-drawn look. Includes some extra doodles as SVGs or via class names you can add to HTML elements.

Actionable Color Palettes
A simple set of 30+ hand-curated color palettes. Just click a palette to see a preview then you can copy/paste the colors.

Text Editors, IDEs, etc.

Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs. sponsored

Paste Safely
A Pastebin alternative where the pastes expire after a maximum of two weeks. You can select programming language, expiration date up to two weeks, and optional encryption key.

Runno
A tool that lets you create iframe-based embeds for docs and tutorials. The embeds are editable and runnable on the page, and it supports JavaScript, Python, SQLite, C, and C++.

Sandpack
A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox, the popular code playground.

Next.js Live
A Vercel-based platform that enables real-time collaboration so you can instantly share, chat, draw, and edit with team members remotely.

snappify
Create attractive images of code snippets that you can use for presentations, docs, social media, etc. Includes a number of advanced styles and ability to select from just about any programming language.

CodeSandbox Black
A VS Code theme that resembles the UI and color scheme for CodeSandbox.

Mark Text
A simple and elegant markdown editor for Mac, Windows, and Linux with a focus on speed and usability.

Try JavaScript Online
This is a JavaScript console side-by-side with a web page. You can enter any URL (e.g. a book or tutorial), then use the console to follow along with the lessons. Default book is Eloquent JavaScript.

Dracula
A dark and colorful theme available for VS Code, JetBrains, Zsh, Sublime, Xcode, Slack, Telegram, Emacs, Vim, and lots more.

Qt Visual Studio Tools
Integrates the Qt tools into VS Code to allow developers to use the standard development environment without having to worry about any Qt-related build steps or tools.

CodeBox
A native app for Mac, Windows, and Linux, a sandbox coding environment inspired by CodePen and JSFiddle with a live preview panel.

React Native and Mobile Tools

react-native-map-link
An easy way to open a location in a map app of the user's choice, based on the apps they have installed on their device. Supports Apple Maps, Google Maps, Citymapper, Uber, and more.

react-native-audio-recorder-player
A module to add a simple audio recorder and player to an React Native app.

react-native-shadow-2
A cross-platform shadow component for React Native, replacing an older unmaintained similar project.

React Native Big List
A high performance list view for React Native with support for complex layouts. The demo includes a list of 10,000 items.

React Native Dynamic Search Bar
Add a dynamic search-as-you-type search bar to React Native apps, with a built-in loading spinner icon.

React Native URL Polyfill
A lightweight and trustworthy React Native polyfill that implements the WHATWG URL standard.

Commercial Apps and Classifieds

Polypad - Cross-platform textpad to generate or transform text using JS.

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

InTab - A browser extension to visually style any website without writing CSS.

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

Appcircle - Build, deploy, and test mobile apps in minutes.

Windframe - Visual builder prototyping and building pages with Tailwind.

Steel Analytics - Privacy-friendly all-in-one website analytics tool.

A Tweet for Thought

Anil Dash shared an interesting little Twitter feature the other day: How to view your Twitter timeline as if it was 14 years ago, 10 years ago, etc. Comes with some caveats though (e.g. it doesn't know who you followed back then, only who you follow 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 like 1980s hair metal and programming, you'll love Rockstar, "a programming language designed for creating programs that are also hair metal power ballads." Well, there goes the rest of my afternoon.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris