Web Tools #395 - Frameworks, Tailwind, React, SVG, Icons

Advertisement

Developer Guido Zuidhof put together an interesting appeal to the software community called No Free Plan. I encourage you to read it if you haven't done so already.

I have mixed feelings about his message, which is more or less that SaaS products shouldn't offer a free-forever plan due to the high costs involved with little return.

I constantly research new tools and software products for this newsletter, so I see this all the time. Lots of products have a free tier and this is often assumed to be a way to convert users to the paid tiers.

The Hacker News discussion has some interesting thoughts, but I'm not big on small anecdotal bits of evidence. That being said, one commenter made a good point:

"I think the most important question is who created this page and if they have any kind of success with their SaaS in a way Bitrix24, Slack, Trello, Notion or Miro do, which all have lifetime free plans and millions of users."

It's true. Do Trello, Slack, and Notion regret doing the free-forever thing? I doubt it.

I'm guessing the intention of the author is with regards to smaller startups and one-person operations that don't ever intend to be as big as Slack or Trello. I think in that case it's good advice.
 

Now on to this week's tools!

Front-end Frameworks

Wynter Research Panels
Want to give back to the community while having a low-key side hustle ($90-$180/hr) to fund your habit? Wynter is looking for people to join its research panel. Take industry surveys, be compensated every time you do it. Takes ~10-15 min to be part of one test, low-key time commitment. sponsored 

Luxa CSS
A lightweight CSS library with predefined component classes along with modifier classes, appropriate for any development context.

SPCSS
A simple, minimal, classless stylesheet for simple mostly text-based HTML pages.

Polaris
A design system from Shopify for Shopify pages, to build a great experience for merchants. There's also React components and a Figma UI kit.

Tailwind Components
A repository of community-built open source Tailwind UI components and templates to bootstrap your new apps, projects or landing pages.

Taiga UI
A powerful set of customizable open source components for Angular.

Software Developer Folio
A clean, beautiful, and responsive portfolio template for software developers, engineers, etc.

Virtual Event Starter Kit
An open source demo that Next.js developers can clone, deploy, and fully customize for online events.

Mistral
A set of 100+ color-customizable components built with Tailwind 2.0. Includes many free components or pay a modest price for the full set.

React UI Boutique
Hundreds of beautiful and responsive UI components, built with Chakra and Framer Motion, and ready to use for your next React project.

Demo-Project
A full-stack opinionated starter kit for a TypeScript application.

7.css
A design system that looks like Windows 7's GUI, for building faithful recreations of old UIs.

Media Tools (SVG, Icon Sets, etc.)

Tech Productivity Newsletter
A brief weekly newsletter sent out every Monday that features productivity tools and articles on efficiency, well-being, remote work, and more.   promoted

doodad
Generator to create unique, seamless, royalty-free patterns that you can download in SVG, JPEG, PNG, or CSS (using data URI).

Iconduck
A search engine of 100,000+ open source icons and illustrations, indexed via keyword.

Oasis Engine
A web-first and mobile-first high-performance real-time development platform that includes an advanced 2D + 3D graphics engine and animation system.

12PNG.com
A search engine with access to over 4 million PNG images, that says it's for personal use only, and commercial projects require contacting the uploader.

Glyphs
Thousands of fully editable and open source icons built with Figma, embeddable in SVG or as web components.

three-material-editor
A Three.js scene editor with support for React and plain JavaScript builds.

Project Lightspeed
A self contained OBS / FTL / WebRTC live streaming server for live streaming OBS to the browser.

Cinematic Studio
An advanced video editor for Windows, free while in Beta.

Weather Icons
200+ weather-themed icons, as icon fonts, with accompanying CSS.

react-xr
React components and hooks for creating VR/AR applications with react-three-fiber.

vdx
An intuitive CLI for processing video, powered by FFmpeg and Node. Crop, trim, resize, reverse, rotate, remove audio, change the speed, and more.
 

React Tools

React-Menu
React component for building accessible menus, dropdowns, submenus, context menus, and more.

Unform
A performance-focused API for creating powerful form experiences for both React and React Native. Using hooks, you can build lightweight and composable forms based on ultra-extensible components.

dnd kit
A lightweight, performant, accessible and extensible drag-and-drop toolkit for React.
 
Procedural GL React
A library for creating 3D map experiences, written in JavaScript and WebGL and built on top of Three.js.

react-laag
Hooks to build tooltips, dropdown menus, and popovers in React.

Focus Rings
A centralized system for displaying and stylizing focus indicators anywhere on a webpage.

G2Plot React
React version of G2Plot, an interactive and responsive charting library based on the grammar of graphics.

React Number Easing
React component for fancy number transitions.

React Google Maps API
A rewrite of the unmaintained react-google-maps library, providing simple bindings to the Google Maps API so you can use it in your app as React components.

use-screen-size
React Hook that helps you write conditional code based on screen size, get the screen size value, etc., using plain JavaScript.

RELEASE RADAR:

• React Leaflet - React components for Leaflet maps at v3.
• MobX - State management solution now at v6

A Tweet for Thought

Clearly programmers aren't the only ones who work with reusable modules and components.

 

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

Here's something you didn't know you needed: gitmoji – an emoji guide for your commit messages.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books