🔥2023#5: Easy-Email: React DnD Email Editor

📅 Jan 29–Feb 4, 2023, Highlights: saas-ui: The React component library for startups, built with Chakra UI | shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS ...

WebGuy

Feb 08, 2023

easy-email: React.js Drag-and-Drop Email Editor based on MJML

saas-ui: The React component library for startups, built with Chakra UI.

shadcn/ui: Beautifully designed components built with Radix UI and Tailwind CSS.

klona: A tiny (240B to 501B) and fast utility to "deep clone" Objects, Arrays, Dates, RegExps, and more!

▶ Super tiny and performant
▶ Deep clone / recursive copies
▶ Safely handles complex data types: Array, Date, Map, Object, RegExp, Set, TypedArray, and more

motion-canvas: Web-based tool for creating animations programmatically

pacote: fetch package manifests and tarballs from the npm registry

const pacote = require('pacote')

// get a package manifest
pacote.manifest('foo@1.x').then(manifest => console.log('got it', manifest))

// extract a package into a folder
pacote.extract('github:npm/cli', 'some/path', options)
  .then(({from, resolved, integrity}) => {
    console.log('extracted!', from, resolved, integrity)
  })

pacote.tarball('https://server.com/package.tgz').then(data => {
  console.log('got ' + data.length + ' bytes of tarball data')
})

ultrahtml: A 1.75kB library for enhancing html

▶ Tiny, fault-tolerant and friendly HTML-like parser. Works with HTML, Astro, Vue, Svelte, and any other HTML-like syntax.
▶ Built-in AST "walk" utility
▶ Built-in "transform" utility for easy output manipulation
▶ Automatic but configurable sanitization, see Sanitization
▶ Handy "html" template utility
▶ querySelector and querySelectorAll support using ultrahtml/selector

it-tools: Collection of handy online tools for developers, with great UX.

tinybase: The reactive data store for local‑first apps.

TinyBase is a smart new way to structure your local app data:

▶ Manage key-value data (new!), tabular data - or both - with optional schematization to model it.
▶ Flexibly reactive to reconciled updates, so your UI only spends cycles on the data that changes.
▶ Powerful query engine to select, join, filter, group, sort and paginate data - reactively.
▶ Indexing, metrics, relationships - and even an undo stack for your app state! - out of the box.
▶ Easily sync your data to local or remote storage, and use idiomatic bindings to your UI.
▶ Generate ORM-like APIs (new!) in TypeScript, based on a schema or inferred from actual data.

analog: The fullstack Angular meta-framework

▶ Vite-based: Supports Vite/Vitest/Playwright
▶ Low config
▶ File-based routing
▶ Support for API/server routes
▶ Hybrid SSR/SSG support

chatgpt-vscode: A VSCode extension that allows you to use ChatGPT

Commands:
"Ask ChatGPT": will provide a prompt for you to enter any query
"ChatGPT: Explain selection": will explain what the selected code does
"ChatGPT: Refactor selection": will try to refactor the selected code
"ChatGPT: Find problems": looks for problems/errors in the selected code, fixes and explains them
"ChatGPT: Optimize selection": tries to optimize the selected code

div.js: A framework for the HTML programming language.

<div is="h1">Hello world!</div>
<div is="p">This is a <div is="b">bold</div> paragraph.</div>
<div is="ol">
  <div is="li">This is a list item.</div>
  <div is="li">This is a list item.</div>
  <div is="li">This is a list item.</div>
</div>

deno_lint: Blazing fast linter for JavaScript and TypeScript written in Rust

[
  {
    "name": "deno_lint",
    "totalMs": 105.3750100000002,
    "runsCount": 5,
    "measuredRunsAvgMs": 21.07500200000004,
    "measuredRunsMs": [
      24.79783199999997,
      19.563640000000078,
      20.759051999999883,
      19.99068000000011,
      20.26380600000016
    ]
  },
  {
    "name": "eslint",
    "totalMs": 11845.073306000002,
    "runsCount": 5,
    "measuredRunsAvgMs": 2369.0146612000003,
    "measuredRunsMs": [
      2686.1039550000005,
      2281.501061,
      2298.6185210000003,
      2279.5962849999996,
      2299.2534840000008
    ]
  }
]

rill: 🗺 Universal router for web applications.

phoenix: Phoenix is a modern open-source IDE for the web, built for the browser.

perfsee: a set of tools for measuring and debugging performance of frontend applications

jazzer.js: Coverage-guided, in-process fuzzing for the Node.js

nextjs-google-analytics: Google Analytics for Next.js

eventcatalog: Discover, Explore and Document your Event Driven Architectures powered by Markdown.

flexboard: React component library for re-sizable sidebars

source

meet: A meeting app built on Mux Real-Time Video.

lenis: How smooth scroll should be

▶ Performant
▶ Lightweight (~2Kb gzipped)
▶ Run scroll in main thread
▶ Accessibility (CMD+F page search, keyboard navigation, keep scroll position on page refresh, etc.)
▶ External RAF
▶ SSR proof
▶ Not opinionated
▶ Tree-shakeable
▶ Custom scroll easing/duration

eslint-config-canonical: The most comprehensive ES code style guide.

Canonical consists of 1,000+ rules (40% auto-fixable), some of which are custom written for Canonical. Canonical goal is to reduce noise in code version control and promote use of the latest ES features.

react-play: react-play is an opensource platform that helps you learn ReactJS faster with hands-on practice model.

zod-prisma-types: Generator creates zod types for your prisma models with advanced validation

JSTools Weekly

Discussion about this post