✨2023#2: Precedent, Building Blocks For next.js

📅 January 8–14, 2023, Highlights: restorePhotos: restoring photos with AI | envshare: share envirnonment variables Securely | deepsignal: Preact signals | cirql: A surrealDB orm & query builder

---

precedent: An opinionated collection of components, hooks, and utilities for your Next.js project.

source

restorePhotos: Restoring old and blurry face photos with AI.

source

envshare: Share Envirnonment Variables Securely

▶Shareable Links: Share your environment variables securely by sending a link
▶End-to-End Encryption: AES-GCM encryption is used to encrypt your data before sending it to the server
▶Limit number of reads: Limit the number of times a link can be read
▶Auto Expire: Automatically expire links and delete data after a certain time

deepsignal: Preact signals, but using regular JavaScript objects

▶Transparent
▶Tiny (less than 1Kb) 
▶Full array support
▶Lazy initialization
▶Stable references
▶Automatic derived state
▶TypeScript support
▶State management

cirql: 🔧 A flexible SurrealDB ORM & query builder with Zod powered validation

▶🔗 Connect to SurrealDB over stateful WebSockets or stateless requests
▶📦 Immutable query chaining for batching & transactions
▶⚙️ Zod-powered schema validation of query results
▶📝 Full TypeScript support with Zod schema inference
▶💎 Write flexible queries using strings or via chained functions

next-validenv: Typesafe environment variables for Next.js

beautiful-react-hooks: A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development

wrn-echarts: 📈 React Native Chart Library

▶🔥 The same way as Apache ECharts
▶🎨 Rich charts, covering almost all usage scenarios
▶✨ Optional rendering library, Skia or SVG
▶🚀 Able to reuse code with web
▶📱 Support for zoom gestures

source

svelte-action-balancer: A svelte action to balance the text inside the an html node. Heavily inspired by react-wrap-balancer

<script>
  import { balancer } from "svelte-action-balancer";
</script>

<h1 use:balancer={{ enabled: true, ratio: .5 }}>
    Svelte: A much cooler JavaScript library for building user interfaces
</h1>

<style>
  h1 {
    text-align: center;
    margin: auto;
  }
</style>

release-scripts: @vitejs release scripts

vscode-perf: VS Code Performance Tool

style9-webpack: The another Webpack Plugin for Atomic CSS-in-JS implementation style9

flowbite-admin-dashboard: Free and open-source admin dashboard template built with Tailwind CSS and Flowbite

source

ChatGPT-Gnome-Desktop-Extension: ChatGPT Gnome Desktop Extension | Talk with ChatGPT from your menubar!

codexplainer: select code and get AI expatiation from openAI

wpp-chatgpt: Make your whatsapp BOT talk like a human using ChatGPT!

crypto-trading-bot-eth-bnb: crypto-trading-bot

ChatGPT-SelfChat: Stupid browser extension to make two instances of GPT chat together.

GPT-Toolbox: GPT extension for VSCode

cowriter: Write 10x faster using OpenAI's GPT-3 based Davinci model to autocomplete your text

vsus: Feel the VSUS, Fall for VSUS

html-tagged: A SSR template library that expands custom elements.

import { attr, html, renderToString } from "html-tagged";

const elements = {
  "my-element": ({ attrs }) =>
    html`<div class="my-element" data-name=${attr(attrs.name)}>
      <slot></slot>
    </div>`,
};

const template = html`<my-element name="test">Hello World!</my-element>`;
const htmlString = renderToString(template, { elements });
console.log(htmlString);

will output:

<my-element name="test">
  <div class="my-element" data-name="test">Hello World!</div>
</my-element>

switchblade: A self-hosted Apple Shortcuts distribution platform

react-native-animated-stopwatch-timer: Stopwatch & Timer component that smoothly animate the digits change, with all layout animations running on the UI thread ⚡

▶🔥 Performant: all digit animations are executed on the UI thread
▶⚙️ Highly configurable: easily control its behaviour via props, like animation parameters and styles
▶⌚ Dual mode: use it as a stopwatch or timer
▶📱 Expo compatible: no need to eject to enjoy this component
▶🛠️ Type safe: fully written in TS
▶💻 Snack example: a snack link is provided so you can try it out in your browser

KProtect: Stack-based JavaScript virtual machine

tiny-decode: Decode HTML entities the browser-friendly way

Bundle `entities`     18.52 kB │ gzip: 19.64 kB
Bundle `tiny-decode`   0.97 kB │ gzip: 0.56 kB

stable.art: Photoshop plugin for Stable Diffusion with Automatic1111 as backend (locally or with Google Colab)

framework (volarjs): The Embedded Language Tooling Framework

roadmap-runner: Navigating the path to success, one roadmap at a time. 🚀

apple-maps-server-sdk: ⚡️ An SDK for the Apple Maps Server API

notebin: 📡 Decentralized notes over relay using nostr

empty: Dual module with empty exports for many cases.

node-service-template: Batteries-included starter template for Node.js backend services

It comes with the following out-of-the-box:
▶fastify-based general application skeleton;
▶Modular, domain-driven structure that encourages separation of concerns;
▶Server/app separation, for convenient bootstrapping in e2e tests;
▶Global error handler;
▶JSON-based, single line standardized logging;
▶Populates req.id for incoming requests based on x-request-id header, or ▶generates new UUID if none is set

react-ts-starter: create react app with typescript+eslint+prettier+lint-staged+husky environment

serverless-run-watch: Cloud-local developer experience for Serverless. Single-digit second deploys, and logs streamed from CloudWatch straight to your terminal

Watcho: Watcho aims to provide all the information of the upcoming and old movies according to the users need 🎬📽

source

kindle-api: 📕 Access Kindle's private API in Node.js without a headless browser

stale-dep: Check if your `node_modules` is stale.

{
  "scripts": {
    "build": "stale-dep && some build command",
    "dev": "stale-dep && some dev command",
    // ...
    "postinstall": "stale-dep -u"
  }
}

lab-grad: An Automated Differentiation library (like Pytorch🔥) in Typescript, for educational purposes.

tsconfig-to-dual-package: Node.js dual package tool that add package.json to tsconfig's `outDir`

your-react-boilerplate: The Pro React Project Boilerplate you need

vue.pnpm: Vue and PNPM Monorepo

gradient-picker: A website that allows you to create your own gradient