ESMate: An Anti-Fatigue Toolkit for JavaScript/TypeScript Development

Vien Dinh — Tue, 23 Dec 2025 14:37:00 +0000

Starting a new JavaScript or TypeScript project often feels like a battle against configuration. Before you write a single line of business logic, you're usually stuck setting up ESLint, Prettier, TypeScript, Tailwind CSS, and testing tools. It's a repetitive, draining ritual.

ESMate answers a simple question: "How do we make modern JavaScript development smooth and easy, even in the Node.js world?"

Inspired by the developer experience of Deno, ESMate provides a suite of tools and packages designed to simplify the modern web development workflow. It’s not a new runtime, but a helper layer that makes living in the Node.js ecosystem much more pleasant.

Here is a tour of the ESMate ecosystem and how it can supercharge your development.

The Core Tools

1. esmate (CLI)

The esmate CLI is the heart of the toolkit. It unifies common tasks into a single, cohesive interface.

Lint & Format: Wraps ESLint and Prettier with zero-config defaults.
- esmate lint / esmate fmt: Check and auto-fix your code.
Task Runner: A powerful task runner compatible with npm scripts but enhanced. Supports both sequential and parallel execution defined right in your package.json.

npm install -D esmate

2. create-esmate

Forget copying and pasting old config files. create-esmate is a scaffolding tool that sets up modern apps instantly. It supports React, Vue, Solid, Svelte, Astro, and Next.js out of the box.

npm create esmate@latest

You can also choose from robust templates like:

react-spa: React + TanStack Router
react-astro: React + Astro + TanStack
react-next: React + Next.js + Drizzle + Stripe

The Packages

ESMate also provides a collection of packages that you can use individually or together.

@esmate/utils

A comprehensive utility belt. It re-exports and unifies:

es-toolkit: Modern, high-performance LODASH replacement.
math.js: For complex math operations.
String tools: Advanced string manipulation (title casing, typo fixing).

@esmate/react

React development made easier.

Hooks: Includes the full power of ahooks (useRequest, usePagination).
Custom Hooks: specialized hooks like useImmutableState (powered by Immer) and useSearchParams.

@esmate/shadcn

If you use shadcn/ui, you'll love this. It bundles shadcn components, hooks, and styles into a single installable package.

Zero Config: Works with Tailwind automatically.
Pre-built UI: Import components like import { Button } from "@esmate/shadcn/components/ui/button".
Bundled Deps: No need to manually install zod, react-hook-form, or radix-ui primitives—they are all re-exported.

@esmate/eslint & @esmate/prettier

Opinionated but configurable setups "for humans".

@esmate/eslint: A wrapper around @antfu/eslint-config tuned for React, Vue, Astro, and Svelte.
@esmate/prettier: Includes the Tailwind CSS plugin and sensible defaults.

Why Switch?

We believe developers should spend their time building, not configuring. ESMate lets you skip the boilerplate ritual and get straight to the work that matters.

Give it a try today: https://github.com/VienDinhCom/esmate

Enhance Your English Listening Skills with Hocify: The Game-Changing Transcription Tool!

Vien Dinh — Sun, 22 Oct 2023 10:32:35 +0000

Hey there! Are you trying to get better at understanding English when people talk? Well, I have something super cool for you. It's called Hocify! With Hocify, you can practice your listening skills by transcribing what you hear. Sounds fun, right?

Here's how it works. First, you open up Microsoft Edge, a type of internet program. If you have a newer Windows, you probably already have it. If you use a Mac or Linux, you can download it for free from this link: https://www.microsoft.com/vi-vn/edge/download

Next, you click on this link: https://www.hocify.com/transcribe. You can find a story or something you like in English and copy and paste it into the Hocify box to start practicing. If you want to hear the part you're typing again, just press the Play button. If you don't understand a word, no worries! Just click on the Hint button, and Hocify will help you out.

Now, you might be wondering, "Why use Hocify?" Well, imagine when you were young and learning how to spell in your own language. It's kind of like that, but for English! By transcribing what you hear, you not only train your ears to catch difficult words, but you also learn how to write those words correctly.

You might be thinking, "Transcribing English is hard and takes so much time!" I get it. Normally, you'd have to download audio, use a special program to listen and replay, and then check if you wrote everything correctly. It can be exhausting! But with Hocify, you don't need any fancy stuff. Just find a text you like, copy, and paste it. Hocify will help you transcribe with a standard American accent right away.

Oh, and one more thing! Make sure to use Hocify with Microsoft Edge on Windows, Mac, or Linux for the best experience.

Using Hocify to transcribe doesn't just improve your listening, but it also helps with your pronunciation. It's like hitting two birds with one stone! You'll become a pro in understanding and speaking English in no time. Unlike passive listening methods, active listening through transcribing helps you truly understand how a word is pronounced and spelled.

Hocify makes the whole learning process smooth and enjoyable, just like playing a game without any pressure. Give Hocify a try! You won't regret it. Have fun learning and improving your listening skills with Hocify!

Click here to start transcribing in English with Hocify: https://www.hocify.com/transcribe

DEV Community: Vien Dinh