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

Advertisement

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.

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.

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

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