Web Tools #516 - Frameworks, SVG Tools, Svelte

Advertisement

As you likely know, if you're commenting on any GitHub issue or pull request, the text field provides a nice little set of tools to easily insert all sorts of special bits of text and other content. Links, headings, italics, blockquotes, bullet lists, and so on.

Another one you probably use often is the at-mentions features. Just type the @ symbol (or use the @ button in the little toolbar) and you'll get a list of suggestions based on users that have already interacted with the issue or pull request.

Maybe one that's a little lesser known is the button called "Reference an issue, pull request, or discussion" button. This is the button that looks like a little chat bubble with an arrow coming out of it. This one can also be triggered by typing a hash or number symbol (#). This gives you a list of possible issues to reference and you can start typing a number if you want to narrow it down.

I think those three are pretty commonly used, especially the first two. But notice there's a button called "Slash commands" at the end of the toolbar. This button triggers 4 different options:

You can insert a code block for a specified language, use a `details` element that opens/closes within the comment, insert a saved reply, or (my favourite), insert a Markdown table!

That last one is pretty cool because who can remember the syntax for a Markdown table? Even if you're not intending to include your table inside a GitHub comment, if you ever want a Markdown-based table, this is a great option to keep in mind.

When you select it in the list, you'll be prompted to choose the number of columns and rows for your table, after which you can insert it.

Now on to this week's tools!
 

Front-end Frameworks

Materialize
A responsive front-end component library, based on Google's Material Design, that's a fork of a similar project that's no longer maintained.

Washington Post Design System
A growing library of design tokens and interactive components purpose-built for Washington Post assets, but MIT-licensed and open-sourced for general use.

Astro & Tailwind CSS Starter Kit
A free and simple theme for Astro that lets you easily integrate your Gumroad or Lemon Squeezy (the subscription service platform).

Tower Makes Git Easy
Just ask the 100,000 developers using it around the world. A native Git client with Undo, Drag & Drop and Remote Services Integration so that you can build better software!   SPONSORED 

Built At Lightspeed
A directory of 4000+ paid and free templates and UI kits for the modern stack. You can filter by technology, framework, site type, or do a search.

Windstatic
A set of 180+ elements and layouts built with Tailwind CSS and Alpine.js, skillfully designed with an eye for aesthetics.

Next.js + Contentlayer
A template based on Next.js 13, Contentlayer, Tailwind, and built-in dark mode.

Super Template
Build-less template inheritance in the browser. Handy for example or demo pages.

Mirrorful
An open-source design system framework for teams to manage the building blocks of their apps, featuring design tokens, theme generation, and more.

AWS Serverless API Template
A template for starting an AWS-based serverless API that utilizes lambda, api-gateway, WAFv2, and other services.

Next-js-Boilerplate
An opinionated boilerplate and starter for projects built with Next.js, Tailwind, and TypeScript with ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, and more.

Tauri + Astro
A template to help get you started developing with Tauri (the toolkit for building desktop apps) and Astro.
 

Media Tools (SVG, Images, etc.)

SVG Gradients
A gallery of 40+ beautiful SVG gradients. Just click to copy the SVG code and paste directly into your HTML.

SpaceBadgers
An API to add custom SVG-based badges to your repos, docs, or other projects, for indicating various project development and maintenance info.

FreeUIResources
Hand-picked UI design resources for Figma, Adobe XD, Photoshop, Sketch and Adobe Illustrator, including app designs, web templates, UI kits, wireframes, mockups, icons, and more.

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 

Background Remover AI
Online tool to remove backgrounds from images and video, including an API to do so. Free version has limitations.

Foodiesfeed
A stock photo website with 2,300+ free food-related photos searchable by category or keyword.

Iconito
SVG icon management for React that lets you store your SVG icons in a single definition file as symbols so you can use them with references.

SVG Shapes
A gallery of 100+ unique SVG shapes, customizable with a unique gradient or solid fill.

Online Favicon Generator
Upload a logo or image and this tool will generate the necessary favicon images along with the HTML to include them in your pages.

GraphicSurf
A directory of vector images and graphics, including patterns, illustrations, icons, and more.
 

JS Library Plugins and Tools

Sveltris
Intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing.

Ngx Stripe
A thin wrapper around Stripe Elements that allows adding Stripe Elements to any Angular app.

Modular Forms
A modular and type-safe form library for Solid, Qwik, Preact, and React, with a focus on performance.

vite-plugin-web-extension
A Vite plugin for developing browser extensions that features super-fast developer mode, support for all browsers, TypeScript support, and more.

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 

editable-website
A SvelteKit template for coding completely custom websites, while allowing non-technical people to make edits to the content by simply logging in with a secure admin password.

SvHighlight
A code syntax highlighter for Svelte, with line blur, highlighting and focus buttons, and easily customized with Tailwind classes.

solid-mason
A TypeScript-based plugin to create masonry layouts in SolidJS.

Svelte-Splitpanes
A Svelte component to create resizable panes, similar to an IDE UI, with features like min/max boundaries, snap, expand on double-click, fixed size, and more.

Svelte Email
A Svelte-based solution that enables you to write and design email templates with Svelte and render them to HTML or plain text.

Error Tailor
Seamless handling of form errors in Angular projects, fully customizable, so you can control when, where, and how each form field's errors are displayed.
 

Commercial Apps and Classifieds

A Tweet for Thought

This is one of those statements that might always be true, but I feel like that's true even more so with the advent of AI-based coding.
   

Send Me Your Tools!

Made something? Reply to this email or 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're looking for free full-stack coding training, check out App Academy, which claims "no catch, no strings attached" when signing up.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly