✨2023#3: Typewind, Bringing Typesafety To Tailwind

📅 January 15–21, 2023, Highlights: pnpm-patch-i: A better and interactive pnpm patch | aws-cost-cli: a CLI to do cost analysis on AWS | backhooks: nodejs dependency injection in execution contexts

Jan 25, 2023

typewind: The safety of Typescript with the magic of Tailwind.

▶Zero bundle size
▶Apply variants to multiple styles at once
▶Type safety and intellisense
▶Types generated from config

import { tw } from 'typewind';

const styles = tw.border.hover(tw.border_black);

// ↓ ↓ ↓ ↓ ↓ ↓

const styles = 'border hover:border-black';

pnpm-patch-i: A better and interactive pnpm patch

npx pnpm-patch-i package-name

aws-cost-cli: CLI tool to perform cost analysis on your AWS account with Slack integration

backhooks: NodeJS dependency injection made easy in execution contexts. Inspiration taken from React hooks and Vue composables.

// ExpressJS usage

npm install @backhooks/http

import express from "express";
import { useHeaders, hooksMiddleware } from "@backhooks/http";

const app = express();

app.use(hooksMiddleware());

app.get("/", (req, res) => {
  const headers = useHeaders(); // <- This is a hook
  res.send(headers);
});

app.listen(3000, () => {
  console.log("Listening on http://localhost:3000");
});

favpie: Generate favicons and webmanifest with a CLI

npx favpie favicon-original.png -o ./favicon -ap "Favpie" -sn "Favpie"

Output:
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="256x256" href="/favicon-256x256.png">
<link rel="apple-touch-icon" sizes="384x384" href="/favicon-384x384.png">
<link rel="apple-touch-icon" sizes="512x512" href="/favicon-512x512.png">
<link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous">

http-compression: Adding compression (gzip/brotli) for your HTTP server in Node.js

http-compression adds compression for your HTTP server in Node.js by:
▶No dependencies (< 1kB).
▶Express style middleware support.
▶Auto detect the best encoding to use (gzip/brotli).

flargd: A fast & minimalist feature flag app that runs on the edge.

▶Fast ⚡️ Less than 120ms RTT
▶Minimal & Lightweight 🧘🏽‍♀️ Minimalistic API that gets the job done
▶Edge Runtime ⚙️ Runs close to your users and application
▶Self-hostable 👩🏽‍💻
▶Multi-project support: You can configure feature flags for different applications you own
▶Admin UI (Coming soon)
▶Client SDK (Coming soon)
▶React Hooks (Coming in the next 2 weeks)

askgpt: askGTP package will allow you to use OpenAI chat capabilities in your terminal

extrapolate: Age transformation AI app powered by Next.js, Vercel, Replicate, Upstash, and Cloudflare R2 + Workers.

▶3s GIF of your face as it ages through time 🧓
▶Email notification when the GIF is ready (via Replicate webhook callback + /webhook API endpoint)
▶Store & retrieve photos from Cloudflare R2 using Workers
▶Photos auto-delete after 24 hours (via Upstash qStash)

twitterbio: Generate your Twitter bio with OpenAI and Vercel Edge Functions.

flat: All-in-one image generation AI (to be...)

mdrb: Turn your Markdown documentation into executable runbooks.

▶Built with and runs on Deno
▶Blend documentation with code execution; bring your README.md developer setup to life without losing the narrative format
▶Execute TypeScript and JavaScript fenced code blocks as a multi-step "runbook"
▶Automatic availability of dsherret/dax within code blocks to simplify cross-platform shell execution
▶Works with local and remote Markdown files and even Markdown content piped to stdin

medusa-vue: Vue based tools to interact with @medusa-js

twimba: CSS-in-JS for Imba's CSS syntax.

import { twimba } from '@cfuen/twimba'

const div = document.createElement("div");
div.innerText = "Twimba is kinda cool";
div.style = twimba`fs:sm rd:md px:5 py:2 bg:cyan4 c:white`
document.body.appendChild(div);

nuxt-csurf: Nuxt Cross-Site Request Forgery (CSRF) Prevention

preview: Chromium Extension to preview google results on hover.

typescript-assert-utils: Utility types for making assertions about TypeScript types

NodeFlow: An Editor for creating simple or complex OCR workflows

functor: functional router for Deno

npm-only-allow:

{
  "scripts": {
    "postinstall": "npx npm-only-allow --PM yarn --server install",
    "start": "npx npm-only-allow --server start && vite server or other"
  }
}

itty-aws: A teeny tiny ~14KB AWS SDK for TypeScript

cf-lambda-streaming:‌ Enable your AWS Lambda hosted applications to stream responses via Cloudflare Workers.

cypress-split:‌ Split Cypress specs across parallel CI machines for speed

get-own-enumerable-keys:‌ Like Object.keys() but also includes symbols

import getOwnEnumerableKeys from 'get-own-enumerable-keys';

const symbol = Symbol('x');

const object = {
	foo: true,
	[symbol]: true,
};

Object.keys(object);
// ['foo']

getOwnEnumerableKeys(object);
//=> ['foo', Symbol('x')]

hndl: The node framework you have been looking for!

eslint-cjs-to-esm:‌ ESLint wrapper for migration from CJS to ESM.

rollup-plugin-native-css-modules:‌ Use native CSS modules with import assertions in Rollup, without transforming CSS to JS.

vscode-inertia:‌ Visual Studio Code extension for Inertia.js

4gaBoards:‌ The realtime kanban boards for groups

▶Create projects, boards, lists, cards, labels and tasks
▶Add card members, track time, set a due date, add attachments, write comments
▶Markdown support in a card description and comment
▶Filter by members and labels
▶Customize project background
▶Real-time updates
▶User notifications
▶Internationalization

browser-extension-event-bus: Event bus for browser extensions

generate-palette: Generate palette from input color

var generatePalette = require('generate-palette')

var palette = generatePalette('#ffdd00', 10)

sql_schema_visualizer: SQL schema visualisation built with ReactFlow

load-config-ts: An out-of-the-box config loader with TypeScript support.

project2Pug: html template converter to templates with pug as view engine

yaph: Simple playlist downloader for YouTube.

stadia-controller-flasher: Utility for flashing Stadia Controllers

logseq-pdf-nav: Jump back after you click internal links of PDF in Logseq.

aether-design-system: 🔆 Aether serves as the building block for some of my team projects.

OnScrollTypographyAnimations: inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.

alea: Pseudorandom number generator based on Alea algorithm.

JSTools Weekly

Discussion about this post