🔥2023#4: ReactDataGrid: Best React Data Grid
📅 January 22–28, 2023, Highlights: shoelace: UI built on Web standards | nanostores: a tiny state manager | neo: the worker driven frontend framework | kysely: A type-safe SQL query builder
reactdatagrid: Empower Your Data with the best React Data Grid there is
shoelace: A collection of professionally designed, every day UI components built on Web standards. Works with all framework as well as regular HTML/CSS/JS. 🥾
▶Works with all frameworks 🧩
▶Works with CDNs 🚛
▶Fully customizable with CSS 🎨
▶Includes a dark theme 🌛
▶Built with accessibility in mind ♿️
▶First-class React support ⚛️
▶Built-in localization 💬nanostores: A tiny (258 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
▶Small. Between 266 and 969 bytes (minified and gzipped). Zero dependencies. It uses Size Limit to control size.
▶Fast. With small atomic and derived stores, you do not need to call the selector function for all components on every store change.
▶Tree Shakable. The chunk contains only stores used by components in the chunk.
▶Was designed to move logic from components to stores.
▶It has good TypeScript support.neo: The application worker driven frontend framework
kysely: A type-safe typescript SQL query builder
bright: React Server Component for syntax highlighting
import { Code } from "bright"
export default function Page() {
return <Code lang="py">print("hello brightness")</Code>
}deca-ui: DecaUI is production-ready themeable component library built with StitchesJS.
devmoji: Emojify your conventional commits with Devmoji
uFuzzy: A tiny, efficient fuzzy search that doesn't suck
html2svg: Convert HTML and `<canvas>` to SVG, PDF, or images using Chromium
bay.js: An easy to use, lightweight library for web-components.
<template id="hi">
<h1 :style="text-align: center">${this.message}</h1>
</template>
<my-hi bay="#hi" message="Hello world!"></my-hi>shifty: The fastest JavaScript animation engine on the web
▶Best-in-class performance
▶Interpolation of Numbers over time (tweening)
▶Playback control of an individual tween
▶Extensibility hooks for key points in the tweening process
▶Promise support for async/await programmingcuid2: Next generation guids. Secure, collision-resistant ids optimized for horizontal scaling and performance.
import { createId } from '@paralleldrive/cuid2';
const ids = [
createId(), // 'tz4a98xxat96iws9zmbrgj3a'
createId(), // 'pfh0haxfpzowht3oi213cqos'
];nut.js: Native UI testing / controlling with node
enrolla: The open source customer configuration framework for B2Bs. Control and manage your customer secrets, entitlements and pricing tiers in a single system.
▶Easily manage customer API Tokens and other secrets
▶Easily management entitlements and other customer configurations
▶Integrations with authentication services
▶Built-in backoffice for non engineersnitro: ⚗️ Build and deploy universal JavaScript servers
ni: 💡 Use the right package manager
ni @types/node -D
# npm i @types/node -D
# yarn add @types/node -D
# pnpm add -D @types/node
# bun add -d @types/nodestarry-night: Syntax highlighting, like GitHub
react-three-csg: 🚧 Constructive solid geometry for React
astrowind: ⭕️ AstroWind: A free template using Astro 2.0 and Tailwind CSS.
hyperformula: An advanced headless evaluator and parser of Excel formulas. Built with TypeScript.
ai-cli: Get answers for CLI commands from GPT3 right from your terminal
react-pro-sidebar: React Pro Sidebar provides a set of components for creating high level and customizable side navigation
threeify: A Typescript 3D library loosely based on three.js
▶Modern: Typescript, Tree Shakable, Small Build Files
▶Rendering: WebGL 2 and WebGPU (coming soon)
▶Materials: Physically based materials
▶Post Effects: DOF (coming soon), Motion Blur ((coming soon)), SOA (coming soon), TRAA (coming soon)
▶Animation: Clips (coming soon), Mixer (coming soon)
▶Assets: glTF (coming soon), Draco (coming soon) and Basis (coming soon)
▶XR: Augmented Reality and Virtual Reality via WebXR (coming soon)
▶Documented (TSDocs) and Tested (Jest)react-oauth: Google OAuth2 using the new Google Identity Services SDK for React 🚀
main-thread-scheduling: Fast and consistently responsive apps using a single function call
axios-cache-interceptor: 📬 Small and efficient cache interceptor for axios. Etag, Cache-Contol, TTL, HTTP headers and more!
import Axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';
// same object, but with updated typings.
const axios = setupCache(Axios);
const req1 = axios.get('https://api.example.com/');
const req2 = axios.get('https://api.example.com/');
const [res1, res2] = await Promise.all([req1, req2]);
res1.cached; // false
res2.cached; // truevite-plugin-checker: 💬 Vite plugin that provide checks of TypeScript, ESLint, vue-tsc, Stylelint and more.
react-i18nify: Simple i18n translation and localization components and helpers for React.
nuxt-vitest: An in-development vitest environment with support for testing code that needs a Nuxt runtime environment
unplugin-vue-macros: Explore and extend more macros and syntax sugar to Vue.
DummyJSON: DummyJSON.com provides different types of REST Endpoints filled with JSON data which you can use in developing the frontend with your favorite framework and library without worrying about writing a backend.
▶No Sign-up/Registration
▶Zero-configuration
▶Basic and Advanced API
▶Resources relationships
▶Filters and nested resources
▶Supports GET, POST, PUT, PATCH, and DELETE http methods
▶HTTP and HTTPS both works just fine
▶Compatible with React, Angular, Vue, Ember, and vanilla JavaScriptpashword: 🔒 Pashword - Never forget passwords ever again! Free and Open Source Hashed Password Generator
kysely-codegen: Generate Kysely type definitions from your database
wildebeest: Wildebeest is an ActivityPub and Mastodon-compatible server
cachified: wrap virtually everything that can store by key to act as cache with ttl/max-age, stale-while-validate, parallel fetch protection and type-safety support
buildcache-action: GitHub Action to install and configure buildcache for faster compilation
DOMListenerExtension: Chrome extension that allows you to monitor, browse and filter all DOM changes.
▶Start listening/recording DOM changes ("Record" button),
▶Filter types of events using checkboxes in the top left corner,
▶Filter nodes by providing a search query in the input field,
▶Highlight nodes by clicking on their names and
▶Inspect nodes by holding Shift and clicking on their names.hamsterbase: self-hosted, local-first web archive application.
▶Store, manage, and preview HTML, MHTML and Webarchive documents.
▶Webpages can be highlighted, annotated and annotated retroactively.
▶Create custom views to filter webpages.
▶How to turn views into RSS feed.
▶No dependency on any server, all data is local first.
▶Full Text Search
▶Open source SDK
▶Dark Modemicrohook: Micro and reusable Hooks.
xsshunter-express: An easy-to-setup version of XSS Hunter. Sets up in five minutes and requires no maintenance!
nuxt-typed-router: 🚦Provide autocompletion for pages route names and params in Nuxt apps