Web Tools #589 - CSS Tools, Git/CLI, Vue Tools

Tools for Web Developers

Issue #589 • October 31, 2024

Advertisement

Introducing a New Approach to Mobile App Security
Join Guardsquare's webinar to learn more about our new guided configuration approach to mobile application protection.

Guardsquare's webinar

Our latest innovation ensures that all developers, regardless of their security knowledge, can effortlessly launch apps with industry-leading protection – in less than a day.

Register Now →

 

CSS & HTML Tools

Tailwind Sync — A Figma plugin that bridges Figma variables and Tailwind code, streamlining the collaboration between designers and developers, from simple projects to design systems.

HEX·P3 — An online tool to quickly convert your hex colors to the Display P3 color space, which is designed for use in displays and devices intended for professional video content editing and vibrant image display.

CSS Spring Easing Generator — An online tool designed to make generating spring easings for CSS more intuitive by using three presets: smooth, snappy, and bouncy.

Introducing a New Approach to Mobile App Security — Join Guardsquare to learn more about our new guided configuration approach to mobile application protection.   SPONSORED 

CSS Triggers — An interactive info site, inspired by an older project, that helps you understand how to write more performant CSS with explanations on which properties affect layout shift, repaints, and composites.

tailwindcss-motion — A Tailwind plugin that has a simple syntax for adding prebuilt or customized animations to elements in a Tailwind-based project.

Easing Graphs — An online tool to view and generate cubic easing and spring easings. You can preview each one on the page, customize them, and export as CSS or Framer Motion.

Easing Graphs

Pretty Markup — A preprocessor similar to older tools like Pug that makes writing markup easier using a more natural, hierarchical format.

tailwindcss-highlights — A Tailwind plugin that adds a set of highlight-like effects (similar to a paint brush or highlighting marker) enabled via 20 Tailwind classes.

snow-fall — A web component to easily add snow to a web page or element on the page, with settings to change the color, number of flakes, size, etc.
 

Git, GitHub, & CLI Tools

route-list — An npm package that lets you display Express, Koa, Hapi, and Fastify routes in your terminal.

gradient-string — A TypeScript package that displays beautiful color gradients in your terminal text output via 10+ built-in gradients and ability to generate custom multi-line and advanced gradients.

Orwell — A GitHub app that offers a quick and simple way to view the workload of your entire team on GitHub, allowing you to view the number of issues, PRs,  and reviews for each team member, and drill into the details.

Lysted: Your Ticket Reselling Side Hustle — Looking for a side hustle? Use Lysted to resell event tickets. List once and reach buyers across platforms like StubHub and Ticketmaster. Enjoy automated pricing and quick payouts. It’s a hassle-free way to make extra cash from unused tickets.     SPONSORED 

Lemonrepo — A Vue/Nuxt-based template that lets you sell access to private GitHub repositories using Lemonsqueezy and NuxtHub.

@bramus/caniuse-cli — A command line tool that displays “Can I Use …” and MDN browser compatibility data in your terminal offline with support for autocompletion in zsh, bash and fish.

@bramus/caniuse-cli

better-cli — A curated list of replacements for terminal tools you already use (e.g. commands like cd, ls, cat, find, curl, etc., replaced with plugins that build on the same feature).

shell.how — An interactive tool that displays info explaining how each part of a shell command works. Useful for copying/pasting stuff you don't understand that might be harmful, but also good for learning.

Yist — A Mac app that lets you manage your GitHub Gists with seamless syncing, intuitive editing, and powerful organization.

remark-gfm — A plugin for Remark (a popular Markdown processor) that adds support for Github Flavored Markdown (GFM).
Advertisement

Gain Visibility into Your React Component Usage
Omlet helps you analyze how and where components are used across your code repositories, so you can reduce front-end tech debt & prove the value of your design system.

See how it works.

Omlet

Measure design system adoption over time, estimate the impact of deprecating components, identify projects using legacy components, and surface similar components for consolidation. 

Try Omlet for free and have your component report ready in less than 5 minutes.

Try for Free →


 

Vue Tools

vue-i18n — An internationalization plugin for Vue that's easy to use, powerful, and component-oriented.

Nuxt Open Fetch — Described as "$fetch and useFetch on steroids", allowing you to generate zero-overhead, 100% typed OpenAPI clients for Nuxt.

Pinia Colada — A fully typed and tree shakable data fetching library for Pinia (the Vue state management solution) that takes away the complexity and boilerplate that comes with fetching data.

Vue Currency Input — A Vue component, based on the ECMAScript Internationalization API, that adds currency formatted numbers in your Vue projects.

Turn Tickets into Cash with Lysted — Need a side hustle? Lysted makes ticket reselling easy and profitable. List your tickets on major platforms with one click and get fast payouts. It’s a perfect way to earn extra cash from tickets you can’t use (or never intended to).   SPONSORED 

vue0 — A Vue-based open source alternative to Vercel's v0, the AI powered assistant that helps you generate modules and UI components.

Vue Data UI — A Vue 3 components library for eloquent data storytelling using beautiful data visualizations built using charts, mini-charts, tables, and more.

Vue Data CLI

Vue-Multiselect — A fully configurable Vue component that adds multi-select and tagging functionality to text fields and inputs with support for SSR, Vuex, and Ajax.

Qalendar — A Vue 3 calendar component based on Material design that's customizable, has drag-and-drop events, native dark mode, and more.

Vueclid — A Vue component that lets you add pixel-perfect math diagrams to your Vue projects with ability to draw graphs, vectors, arcs, polylines, angles, points, and lots more.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
GitStart – A ticket to PR platform that enables elastic engineering capacity for sofware dev teams.
The Current – Join 500k sub­scribers and get unbiased, expert-curated tech news and tips.    AD 
BeyondDone – A service to track your contributions and tasks across GitHub, Jira, and Confluence.
BetterTerminal – A Mac app to enhance your terminal experience and improve productivity.
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 
PR Focus – A Mac app that makes it easy to track your pull requests across repos without using GitHub.
URL Monitor – A service to monitor URLs in real time, ensure safe indexing, and boost SEO.

An X Post for Thought

Stefan Judis asked an interesting question about short vs. verbose commit messages, leading to a variety of answers in the thread that you might find interesting.
 
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...

If you or your company are continually open to self-hosted software options, either to save money or improve on privacy, you'll want to check out this nicely-designed Self-Hosted Software List, which provides a categorized and searchable resource of 1400+ free and proprietary tools and apps that can be self-hosted.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly

Web Tools #588 - JavaScript Utilities, SVG, React Native

Tools for Web Developers

Issue #588 • October 24, 2024

Advertisement

WorkOS: Modern Identity Platform for B2B SaaS
With WorkOS you can start selling to enterprises with just a few lines of code.

  • WorkOS provides a complete user management solution along with SSO, SCIM, RBAC, and Audit Logs. 
  • Modular and easy-to-use APIs allow you to finish integrating in minutes instead of months. 
  • User management is free up to 1 million MAUs and includes bot protection, MFA, roles/permissions, and more.
WorkOS

WorkOS powers some of the fastest growing startups like Perplexity, Vercel, and Webflow.

Start Integrating Today →

 

JavaScript Utilities

Cacheable — A robust, scalable, and maintained set of caching packages for Node.js that can be used in various projects.

dead-or-alive — A small utility for Node.js and the browser to check if URLs are dead or alive, mainly useful for documentation or similar to ensure links aren't broken.

Add SSO the Easy Way — WorkOS helps you ship SSO and other enterprise features this afternoon. From high-quality documentation to self-serve onboarding for your customers, we remove all the unnecessary complexity for your engineers.   SPONSORED 

Pechkin — A modern, asynchronous, flexible and configurable Node.js library for handling file uploads (i.e. multipart/form-data requests), written in TypeScript.

fast-grid — A multithreaded web table component for JavaScript that's capable of running 120fps while sorting/filtering/scrolling simultaneously.

fast-grid

fdir — A fast and hackable directory crawler and globbing library for Node.js that crawls one million files in less than one second.

Storage — A client-side storage utility that provides a set of adapters that normalize across various client storage mechanisms with a consistent key-value API.

super-regex — A utility for Node.js to make a regular expression time out if it takes too long to execute.

ts-blank-space — A small, fast, pure JavaScript type-stripper that uses the official TypeScript parser.

loop-once — A safer loop to iterate synchronously or asynchronously any unique identifier, addressing a specific use case (see demo code).

Media Tools (SVG, Video, etc.)

Avaaatars — A large library of 600+ free photo avatars, with customizable backgrounds and border shape, available in Figma, PNG, Sketch, Adobe XD, or as a Figma plugin.

Logoipsum — A library of 100 free logo placeholders in various styles, fonts, colors, etc., that you can try out directly on the page and download as SVG.

CoolShapes — A set of 100+ abstract shapes with a grainy or smooth gradient, available as SVG, PNG, React/JSX, or Figma.

Frame0 — A native Mac, Windows, or Linux app to sketch your app ideas and wireframes using a hand-drawn style, so you can quickly express a UI concept.

Video-to-ASCII — Upload a video or use your webcam to convert the video to a text-based or ASCII version of the video, which you can then export as MP4.

Isocons — A large set of isometric icons, categorized, searchable, and customizable using fill settings, sharp/round edges, stroke width, etc.

Isocons

Endless Tools — A web-based design and animation app with a constantly updated collection of ready to use fonts, visual effects, shapes, and 3D objects.

Lysted: Your Ticket Reselling Side Hustle — Looking for a side hustle? Use Lysted to resell event tickets. List once and reach buyers across platforms like StubHub and Ticketmaster. Enjoy automated pricing and quick payouts. It’s a hassle-free way to make extra cash from unused tickets.     SPONSORED 

svg.wtf — An SVG playground for learning to use SVG with an interactive canvas for dealing with the different parts of the SVG syntax.

alphaTab — A cross platform music notation and guitar tablature rendering library, which you can use in your own website or app to load and display sheet music and tabs.
Advertisement

Gain Visibility into Your React Component Usage
Omlet helps you analyze how and where components are used across your code repositories, so you can reduce front-end tech debt & prove the value of your design system.

See how it works.

Omlet

Measure design system adoption over time, estimate the impact of deprecating components, identify projects using legacy components, and surface similar components for consolidation. 

Try Omlet for free and have your component report ready in less than 5 minutes.

Try for Free →


 

React Native & Mobile Tools

Galeria — A React Native image viewer component with a simple API featuring pinch or double-tap to zoom, shared element transitions, and more.

React Native QRCode Skia — A lightweight and high-performance QR code generator component for React Native, powered by the Skia rendering engine.

react-native-localize — A toolbox for implementing React Native app localization with support for react-native-web.

Turn Tickets into Cash with Lysted — Need a side hustle? Lysted makes ticket reselling easy and profitable. List your tickets on major platforms with one click and get fast payouts. It’s a perfect way to earn extra cash from tickets you can’t use (or never intended to).   SPONSORED 

trace — A directory to find, remix and create SwiftUI components then export into your XCode project.

trace

react-native-vercel-ai — A package for React Native that allows you to run the Vercel AI package on React Native, Expo, web, and universal apps.

My React Native Playground — A collection of various React Native UI components and animations (e.g. ScrollableTimePicker, PasswordInput, ScrollNumbers, etc).

React Native Packages Guide — A curated list of React Native packages divided into 30+ categories.

React Native visionOS — A full fork of the main React Native repository with changes needed to support visionOS, a mixed-reality operating system for Apple Vision Pro.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Screenshot Master – A Mac app for generating beautiful product screenshots for the Mac App Store.
The Current – Join 500k sub­scribers and get unbiased, expert-curated tech news and tips.    AD 
MixAudio – A multimodal AI music generator to explore or create music for YouTube, podcasts, etc.
Canvid – A screen recorder tool to create engaging screen recordings with no editing skills needed.
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 
QRCode.ing – Generate creative, unique, and artistic QR codes using images, GIFs, and AI.
Feedback Wizard – A Figma plugin that offers instant AI-based design feedback inside Figma.

An X Post for Thought

An interesting take on code splitting, which is normally viewed as a more maintainable way to organize code.
 
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...

If you're tired of learning web development using the latest super-complex frameworks and tools, try going for Plain Vanilla web development instead.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly