🔥2023#3: Fern: Production-Ready SDKs For API

📅 January 15–21, 2023, Highlights: remeda: A utility library for JavaScript and TypeScript | structura.js: Create immutable states with a mutable syntax | useform: Build forms without effort

Jan 25, 2023

fern: Production-ready SDKs for your API

remeda: A utility library for JavaScript and TypeScript.

Why Remeda? There are no good utility libraries that work well with TypeScript. When working with Lodash or Ramda you must sometimes annotate types manually. Remeda is written and tested in TypeScript and that means there won't be any problems with custom typings.

structura.js: A very fast and lightweight Typescript library to create immutable states with a mutable syntax

The library is very similar to Immer.js, but it has some advantages over it:
▶up to ~22x more performant, even faster than Immutable most of the time
▶freezes the object only at compile time by leveraging Typescript, while other libraries freeze the object at runtime with Object.freeze, which may be slow expecially for nested objects
▶circular and multiple references are supported
▶can return and modify the draft at the same time
▶flexibility in the return type of the producer
▶no need to toggle on/off features (with some exceptions)
▶does support transpositions and moves of portions of the draft

useform: Build forms without effort. 🚀

import { createForm } from '@use-form/use-form';

export const useLoginForm = createForm({
  initialValues: {
    email: 'jucian0@jucian0.com',
    password: 'yourpassword',
  },
});

import { useLoginForm } from './useLoginForm.js';

const LoginForm = () => {
  const { handleSubmit, register } = useLoginForm();

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      <input type="password" {...register('password')} />
      <button type="submit">Submit</button>
    </form>
  );
};

conform: Progressive enhancement first form validaition library for Remix

▶Progressively enhanced by default
▶Simplifed intergration through event delegation
▶Server first validation with Zod / Yup schema support
▶Field name inference with type checking
▶Focus management
▶Accessibility support
▶About 4kb compressed

jampack: Optimizes static websites for best user experience and best Core Web Vitals scores.

Why jampack?
▶Better user experience for your website visitors. Especially on low-end devices.
▶Better SEO. Page experience now affects ranking.
▶Easier maintenance. Generating top performance webpages requires extra engineering in the composition of the pages that is counterproductive with the maintenance of the website.
▶Time saving. Spend less time optimizing and let jampack do the heaving-lifting for you.

twify: A Tool to Setup TailwindCSS With a Single Command

tailwind-merge: Merge Tailwind CSS classes without style conflicts

import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

tailwindcss-animate: A Tailwind CSS plugin for creating beautiful animations

<!-- Add an animated fade and zoom entrance -->
<div class="animate-in fade-in zoom-in">...</div>

<!-- Add an animated slide to top-left exit -->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>

<!-- Control animation duration -->
<div class="... duration-300">...</div>

<!-- Control animation delay -->
<div class="... delay-150">...</div>

drizzle-orm: TypeScript ORM for SQL

▶Full type safety
▶Smart automated migrations generation
▶No ORM learning curve
▶SQL-like syntax for table definitions and queries
▶Best in class fully typed joins
▶Fully typed partial and non-partial selects of any complexity
▶Auto-inferring of TS types for DB models for selections and insertions separately
▶Zero dependencies

turnly: A modern Open-Source Queue Management System (QMS)

glyphs: Dynamic design system for building and managing large icon sets in Figma and packaging them for the web

lemonadejs: LemonadeJS is a micro (7Kb) reactive, with a two-way data binding, no dependencies, JavaScript library that aims to be as close to JavaScript Vanilla as possible.

▶Make rich and user-friendly web interfaces and applications
▶Handle complicated data inputs with ease and convenience
▶Improve the software user experience
▶Create rich CRUDS and beautiful UI
▶Highly flexible and customizable
▶Lightweight and simple to use

hocuspocus: The Y.js WebSocket backend

kit: Script Kit. Automate Anything.

core (plugsy): A simple, pluggable dashboard and status page

tailwind-color-picker: A chrome extension color picker for Tailwind

remix-validity-state: Enhanced HTML Inputs for Remix

automatisch: The open source Zapier alternative. Build workflow automation without spending time and money.

nice-modal-react: A modal state manager for React.

▶Zero dependency and small: ~2kb after gzip.
▶Uncontrolled. You can close modal itself in the modal component.
▶Decoupled. You don't have to import a modal component to use it. Modals can be managed by id.
▶The code of your modal component is not executed if it's invisible.
▶It doesn't break the transitions of showing/hiding a modal.
▶Promise based. Besides using props to interact with the modal from the parent component, you can do it easier by promise.
▶Easy to integrate with any UI library.

trigger.dev: The developer-first, open source Zapier Alternative. Now in private beta

oneuptime: OneUptime is an open-source complete SRE and DevOps platform.

▶Uptime Monitoring just like Pingdom
▶Status Page just like StatusPage.io
▶Incident Management just like Incident.io
▶On-call rotation and alerts just like PagerDuty
▶Tests just like Postman (Coming soon)
▶Security just like Snyk (Coming soon)
▶Logs Management just like Loggly (Coming soon)
▶Performance Monitoring just like NewRelic (Coming soon)
▶Error Tracking just like Sentry (Coming soon)

whatsapp-http-api: WhatsApp HTTP API that you can configure in a click!

wppconnect: Exporting functions from WhatsApp Web to the node

vscode-chatgpt: A Visual Studio Code extension to support ChatGPT. The extension is pair-programmed with ChatGPT.

vscode-inline-fold: A custom decorator that "fold" matching content in single line

browser-extension: A Out of the Box 🎁 Browser Extension Template with support for React, Preact, Typescript and Manifest V3 and builds on most browsers including Chrome, Firefox, Safari, Edge, Brave.

▶Manifest v3/v2
▶Multi Browser build including Chrome, Firefox, Safari, Edge, Brave
▶Content Script
▶Background Page or Service Worker
▶Popup Page
▶Options Page
▶Devtools Page
▶Newtab Page
▶Automatically opens browser
▶Runs multiple browsers in parallel
▶Autoreloads browser
▶Saves browser profiles for next start

constrain: Responsive, animated figures in JavaScript/HTML canvases

noya: The open interface design tool

autotone: A vocal pitch correction web application (like Autotune)

storefront-kit: Reusable components and utilities for building Shopify-powered custom storefronts.

idle-task: Improve your website performance by executing JavaScript during a browser's idle periods.

argdown: a simple syntax for complex argumentation

free-domains: 🌐 Grab your own subdomain (for personal sites, open-source projects, and more) for free

option-t: Option/Result type implementation in ECMAScript whose APIs are inspired by Rust's `Option<T>` and `Result<T, E>`.

▶This library provides a toolkit for nullable types in ECMAScript.
▶APIs are inspired by Rust Language's Option<T> and Result<T, E>.
▶This library helps to sort the "nullable" convention in your project.
▶TypeScript friendly APIs
▶Zero dependency.
▶Tree shakable completely.
▶ES Module fully compatbile

paint-github: [WebExtension] Draw your GitHub comment.

JSTools Weekly

Discussion about this post