Web Tools #519 - Blog for Devs, React Tools, ChatGPT, JSON/DB

The following intro is a paid product review for Hyvor Blogs, a fully custom-izable, developer-friendly, multi-language blogging platform.

I've always been one to promote the idea of publishing what you learn, something I wrote about years ago. Writing for various platforms (DEV, Medium, etc.) is certainly one way to do that. But what if you want to set up your own blog so you can own your own content?

Of course there are high-overhead options like WordPress, Ghost, or a static site generator. You can even code your own solution. But if you're looking for a plugin-less solution with low overhead, you might want check out Hyvor Blogs.

Hyvor Blogs stands out as a powerful option due to the following features and more:

• Custom themes – Choose from existing prebuilt themes or write your own theme from scratch.
• Use your own domain – Your blog can be accessed using your own custom domain or you can use the existing Hyvor Blogs platform.
• Translate to multiple languages – You can easily set up a multi-language blog that allows you to manually translate or use AI to auto-translate into other languages, with support for RTL languages.
• SEO features are built-in – Hyvor Blogs includes SEO features out-of-the-box so you don't need any extra plugins or SEO knowledge to write content that's search engine-ready.

The "Posts" section is where you'll spend most of your time. There you can filter by post status, author, tags, date, or conduct a keyword search. You can also see the language tags associated with each post.

When you create or edit an existing post, you'll see something similar to what's shown in the screenshot below.

The single post view also has a Settings view that includes basic and advanced settings. In the basic settings you can change the URL slug, author, tags, description, and featured image.

The advanced settings allow you to define a canonical URL for posts published in multiple places along with the ability to add custom code to the head or footer of your post. The custom code option is also available for the entire blog by going to Console → Settings → Custom Code.

As mentioned, theming is available out-of-the-box. In your console, click the "Theme" option to view your current theme and options for switching and customizing your theme.

To use one of the pre-built themes, click the "Change" button, which brings up a list of available themes, including the default "hello" theme.

Once you've selected a theme, you can customize the theme to your liking by adjusting any of the files associated with the theme or using a simple UI that allows you to change colors, fonts, and other settings.

The excellent Hyvor Blogs docs go into detail on theme customizations, so be sure to check that out. Theming uses Twig templating, SCSS, and YAML – so if you have experience with any of those, you should have no problem writing or customizing themes as needed.

SEO-readiness without any extra plugins is another great feature in Hyvor Blogs. Your blog's SEO settings are accessible via Console → Settings → SEO. From there you can select preferences for search engine indexing along with customizing your robots.txt file.

Usefully, Hyvor Blogs automatically adds all the necessary SEO-related meta tags, including the Open Graph ones for social networks like Twitter and Facebook.

Hyvor Blogs will also auto-generate your website's sitemaps, including a sitemap index along with sitemaps for pages and posts.

And finally, the powerful multi-language features of Hyvor Blogs should attract many developers and bloggers who need to create content quickly in different languages. You can set different language options for your blog by going to Console → Settings → Languages. Once your languages are added, with their respective two-letter language codes, they'll be available for use on any individual post.

For example, I've set Greek as my alternate language. Each of my posts includes an "Auto-Translate" option, which I can use to automatically translate any of my English posts to Greek via DeepL Translate, a powerful AI-based translation service.

In addition to all the primary features I discussed above, here's some others that are worth looking into:

• Syntax highlighting for posts and pages has support for 150+ programming languages and more than two dozen VS Code themes.
• You can integrate a number of different services easily (e.g. blog comments for free via Hyvor Talk, or newsletter signups, analytics, contact forms, and so on via third-party tools).
• Advanced development features can be utilized via Webhooks for setting up various blog event notifications and a Data API to access your blog's public data via an endpoint that returns a JSON payload.
• You can host your blog in a sub-directory of your back-end web application. Currently Laravel and Symfony are supported, with more integrations in the pipeline.

Now on to this week's tools!
 

React Tools

mjml-react
React component library to generate the HTML emails on the fly, based on MJML, the popular HTML email component framework.

ReactJS Cron
A React cron editor built with Ant Design, with no other dependencies and support for all standard cron expressions.

MouseTracker
A React component, rendered with createPortal(), that allows you to make one or more elements on the page 'track' or 'follow the mouse'.

react-chessboard
A React component that lets you add chessboard functionality to your application, adapted from an older unmaintained library.

Daito
Securely share 2FA tokens with others, no phone needed. A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love!      SPONSORED 

react-spreadsheet-import
A React component used for importing XLS / XLSX / CSV documents built with Chakra UI.

react-aria-modal
A fully accessible React modal built according WAI-ARIA authoring practices, with features like focus trap, ESC-to-close, frozen background scroll, and more.

React D3 Tree
A React component that lets you represent hierarchical data (e.g. family trees, org charts, file directories) as an interactive tree graph with minimal setup, by leveraging D3's tree layout.

react-json-form
A React Component for editing JSON data using form inputs. See the repo for al link to a live playground.

HouseForm
A simple to use React forms library, headless and runtime-agnostic, powered by zod, has a flexible API, and boasts better performance than other solutions.

Typesafe Router
A tiny wrapper library for React Router that dramatically improves type safety.

use-0
A type-safe React state library for scalable apps with zero setup and zero additional knowledge required.
 

AI and ChatGPT Tools

ReactAgent
An experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories.

ColorPaletteAI
A website that generates color palettes with AI, based on a text description, with options to include/exclude primary, secondary colors, etc.

Fix My Code
A coding assistant trained in digital accessibility, to optimize your code to be more inclusive and usable and conform with WCAG 2.1 AA standards.

Daito
Securely share 2FA tokens with others, no phone needed. A browser-based 2FA authenticator for you and your team. Easy import from Google Authenticator, user management, read-only access, backups, and more. 2FA your team will love!      SPONSORED 

YOYA.ai
Use natural language to build your own personalized generative AI apps without code.

Literally Anything
An experimental, no-code AI tool that allows you to create any kind of app, game, widget, or digital service directly in your browser by entering text prompts.

ChatALL
A cross-platform native app that lets you send a text prompt to several AI bots concurrently, with support for ChatGPT, Bing Chat, Bard, Vicuna, and more.

Code ChatGPT Plugin
A code analyzer that provides a set of utilities for analyzing TypeScript code. It can fetch a list of all TypeScript files in a project, find all functions in a file, and get the content of a specific function.

Amazon CodeWhisperer
An AI coding companion, similar to GitHub Copilot, that's trained on billions of lines of code and can generate code suggestions ranging from snippets to full functions in real time based on your comments and existing code.

Metering.ai
A free AI-based add-on to your existing billing system to help you create accurate and automated usage-based billing.
 
ColourGPT
Describe a colour palette in natural language along with how many colors you want and this tool will generate the palette using ChatGPT.

AI Search
A directory of 5200+ AI tools searchable by keyword, with an option for looking at popular searches.
 

JSON Tools, Databases, etc.

Sider
A command-line tool for installing, running, ruining and reverting databases locally.

Quell
A JavaScript library to simplify GraphQL caching that includes a Chrome extension and a context visualizer to better understand the relationship between a query and its GraphQL structure.

Keyv
A simple key-value storage with support for multiple backend adapters (MySQL, PostgreSQL, SQLite, Redis, Mongo, DynamoDB, Firestore, Memcached, and more).

VSCode.Email
A short weekly newsletter featuring tools, tips, and articles on Visual Studio Code, the world's most popular code editor.     SPONSORED 

GraphQL Query Builder
A simple helper function to generate GraphQL queries using plain JavaScript Objects (JSON).

ts-sql-query
A type-safe query builder that provides a way to build dynamic SQL queries in a type-safe way (i.e. the TypeScript compiler verifies the queries).

IvorySQL
An advanced, full-featured, open-source Oracle-compatible PostgreSQL.

Tuple Database
A local-first, schema-less, "end-user database" database, designed for local-first software, with support for synchronous and asynchronous storage including SQLite or LevelDb.

DenoGres
A comprehensive ORM for PostgreSQL and Deno.

mvSQLite
A distributed, MVCC SQLite that runs on FoundationDB.

On the Release Radar:

• lowdb – Simple local JSON database now at version 6+
• TinyBase – Reactive data store now at version 3+
• AlaSQL – JavaScript SQL database now at version 4+

Commercial Apps and Classifieds

A Tweet for Thought

This is such a humble tweet from a guy who apparently speaks five languages!
   

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...

Speaking of databases, Sortabase is a page for finding and contributing to community-driven collaborative databases (i.e. lists of items, for example smart thermostats or historical shipwrecks) with options to filter by various categories or other facts.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly