Tag: JavaScript
69 posts
-
ES2024 JavaScript Features: Object.groupBy, Promise.withResolvers, Resizable ArrayBuffer and the RegExp v Flag
What ES2024 really added: Object.groupBy and Map.groupBy, Promise.withResolvers, resizable ArrayBuffer and transfer, well-formed strings and the RegExp v flag.
-
React from Usage to Internals: Fiber Reconciliation, Diffing, Hooks and Concurrent Rendering
React from everyday APIs to internals: Fiber reconciliation, key-based diffing, hooks on fibers, automatic batching, transitions, Suspense, streaming SSR and what React 19 changed.
-
Jest in Practice: Matchers, Async Tests, Mocks, Snapshots and Coverage in CI
Hands-on Jest guide: matchers, async tests, mocks, React Testing Library, snapshots, coverage thresholds, runner architecture, and CI patterns.
-
What Bun 1.1 Changed: Windows Support, Bundler, Test Runner and Reading Benchmarks
Bun 1.1: Windows support, bun install/run speed, bundler & test runner, Node/npm comparison, Next.js/React/Astro, Docker, CI, and hosting-focused deploy.
-
Schema Validation with Yup: Strings, Numbers, Objects, Arrays, Conditional and Async Rules
Schema-based validation with Yup: basic schemas, required and optional fields, string, number, object and array rules, conditional and async validation, and TypeScript use with forms.
-
Bundling Libraries with Rollup: Output Formats, Tree Shaking, Plugins and Code Splitting
Bundling JavaScript libraries with Rollup: output formats, tree shaking, essential plugins, TypeScript and React library builds, code splitting, and CSS and assets.
-
RxJS 7 in Practice: Cold vs Hot, Flattening Operator Races, Error Placement and Subscription Leaks
How RxJS 7 behaves in real code: cold vs hot observables, switchMap, mergeMap, concatMap and exhaustMap races, catchError placement and subscription leaks.
-
SolidJS Reactivity in Practice: Signals, Components That Run Once, and the Props Destructuring Trap
How SolidJS reactivity works: signals as getters, why destructuring props breaks updates, createMemo vs createEffect, <For> vs map, stores and routing.
-
Svelte 5 Runes Deep Dive | Reactivity Rebuilt from Scratch
How Svelte 5 runes replace implicit reactivity: $state, $derived, $effect, $props, $bindable, snippets, runes in .ts files, and migrating from Svelte 4.
-
Compiling JS and TS with SWC: .swcrc Configuration, JSX, Minification and Next.js/Webpack Use
Compiling JavaScript and TypeScript fast with SWC: configuration, transpilation targets, TypeScript and JSX, minification, and integrating it with Node.js, Next.js and Webpack.
-
Native Web Components: Custom Elements, Shadow DOM, Templates, Events and Framework Integration
Building reusable UI with Web Components: custom elements, Shadow DOM, HTML templates, properties and events, a modal dialog example, and using them inside frameworks.
-
Qwik and Resumability: Instant-Loading Apps with routeLoader$, routeAction$ and Qwik City
Building instant-loading web apps with Qwik: how resumability differs from hydration, event handling, stores, routeLoader$ and routeAction$, Qwik City routing, and lifecycle hooks.
-
React Router for SPAs: Nested Routes, Loaders and Actions, Error Boundaries and Protected Routes
Client-side routing in React with React Router: basic and nested routes, navigation, URL params, data loaders, form actions, error handling, and protected routes.
-
Testing React Components Like a User: Queries, user-event, Async Tests, Context and Hooks
Testing React components with React Testing Library: choosing queries, simulating user events, async testing, forms, context providers, custom hooks, and accessibility checks.
-
pnpm in Practice: Content-Addressable Store, Strict node_modules, Workspaces, and Migration
How pnpm stores packages (hard links plus a symlinked node_modules), why its strictness breaks code that relied on phantom dependencies, workspaces and filtering, pnpm 10 changes, migrating lockfiles with pnpm import, and Docker/CI setup.
-
Preact as a 3KB React Alternative: Hooks, Signals, preact/compat and Where It Differs
Building fast web apps with Preact: core concepts, hooks, React compatibility via preact/compat, Signals, routing, server-side rendering, and the differences from React that matter.
-
Prettier in a Real Project: Config, ESLint Conflicts, .prettierignore, and CI Checks
Set up Prettier 3 so editor, pre-commit hook and CI agree: minimal config, eslint-config-prettier, .prettierignore, CRLF "Delete ␍" errors and prettier --check.
-
Lodash Utilities Worth Knowing: Arrays, Objects, debounce/throttle and TypeScript Use
Useful Lodash utility functions for arrays, objects, collections, functions (debounce, throttle, memoize), strings and numbers, with real-world examples and TypeScript support.
-
MobX for React State: Observables, Computed Values, Actions, Reactions and Multiple Stores
Managing React state with MobX: observables, computed values, actions, reactions, a shopping cart example, multiple stores, and best practices.
-
Peer-to-Peer Video with WebRTC: Signaling, RTCPeerConnection, Data Channels and TURN in Production
Building real-time peer-to-peer apps with WebRTC: a signaling server, RTCPeerConnection, a complete video call, data channels, screen sharing, media controls and production considerations.
-
Nx Monorepos in Practice: Affected Builds, Cache Inputs and Module Boundaries
How Nx decides what to rebuild: affected commands and the CI base SHA, cache inputs for env vars and root files, module boundary rules, and Nx vs Turborepo.
-
Parcel 2 Without the Hype: Zero-Config Trade-offs, package.json Targets and Common Errors
What Parcel 2 configures for you and what it skips: source and targets in package.json, env var inlining, .parcel-cache issues, and when to pick Vite.
-
esbuild in Practice: CLI and JS API, Watch Mode, Plugins and Dual ESM/CJS Library Builds
Bundling and transforming JavaScript and TypeScript with esbuild: the CLI and Node.js API, watch mode and dev server, plugins, library builds for ESM and CJS, and the transform API.
-
React Native with Expo: Expo Router, Push Notifications and EAS Build, Update and Submit
Building React Native apps with Expo: Expo Router navigation, native features, push notifications, app config, and shipping with EAS Build, EAS Update and EAS Submit.
-
Immutable Updates with Immer: produce, Curried Producers, Patches and Redux
Writing immutable state updates with Immer: produce, array operations, curried producers, patches, return values, React and Redux integration, and performance notes.
-
Validating Data with Joi: Schemas, Conditional and Async Rules, abortEarly and stripUnknown
Complete Joi guide for data validation in Node.js: schema design, async validation, abortEarly/stripUnknown security tradeoffs.
-
Atomic State in React with Jotai: Derived, Async and Write-Only Atoms, Families and Provider Scope
Managing React state with Jotai's atomic model: primitive, derived, async and write-only atoms, atom families, utilities, a todo app, and provider scoping trade-offs.
-
Koa.js APIs: Context, Onion-Model Middleware, Routing, Auth and File Uploads
Building Node.js APIs with Koa: the context object, async onion-model middleware, routing, a REST API example, authentication, file uploads, database access and validation.
-
Lit 3 Web Components: Reactive Properties, Attribute Converters, Shadow DOM Styling and Lifecycle Pitfalls
How Lit 3 components behave in practice: properties vs state, attribute converters, shadow DOM styling, update lifecycle traps, SSR caveats and React interop.
-
Building Charts with D3.js: Scales, Axes, Bar and Line Charts, Transitions and React
Building interactive charts with D3.js: SVG basics, scales, bar and line charts, tooltips, transitions, a scatter plot with brushing, and integrating D3 with React.
-
Working with Dates Using date-fns: Arithmetic, Differences, Locales and Time Zones
Manipulating dates in JavaScript with date-fns: formatting, date arithmetic, comparisons, differences, start/end of periods, internationalization, time zones and validation.
-
Running Node.js Projects on Deno 2: npm Compatibility, What Works, and What Breaks
How Deno 2 runs npm packages and Node.js code: npm: specifiers vs package.json, node_modules modes, CommonJS vs ESM rules, lifecycle scripts, native addons, and how the permission model interacts with npm dependencies during a migration.
-
Alpine.js: Reactive UI in HTML Markup with x-data, x-show and Transitions
Alpine.js for reactive UIs with minimal JavaScript: core directives, component state, transitions, Ajax examples, and how it compares to Vue and React for small interactive pieces.
-
What TypeScript 5 Changed: Standard Decorators, satisfies, const Type Parameters and Migrating from 4
TypeScript 5's major changes: the standard decorators proposal, the satisfies operator, const type parameters, performance improvements, and how to migrate from TypeScript 4.
-
TypeScript Error Handling: unknown in catch, Error Subclasses, cause, Result Types and Exhaustive Checks
How to handle errors in TypeScript: narrow unknown catch variables, write Error subclasses that survive instanceof, chain with cause, return Results and prove exhaustiveness.
-
Vite for Frontend Projects: Config, Env Variables, Assets, HMR, Plugins and Library Mode
Using Vite for modern frontend development: project structure, vite.config.ts, environment variables, asset handling, HMR, plugins, library mode and multi-page apps.
-
Vitest in Practice: Setup, Mocking Pitfalls, React Component Tests and Coverage
Set up Vitest in a Vite project, understand why vi.mock is hoisted and how vi.hoisted fixes it, keep mocks from leaking between tests, test React components with Testing Library, and run coverage in CI.
-
How Webpack 5 Builds a Bundle: Dependency Graph, Tapable Hooks, Loaders, Splitting and Tree Shaking
Webpack 5 deep dive: dependency graph, Tapable hooks, loader pipeline, code splitting, tree shaking, and production caching.
-
React Hooks Pitfalls: Stale Closures, Effect Loops, Fetch Races and Useless Memoization
Why hook bugs happen: stale closures, effect loops, fetch races, and memoization that does nothing, explained through the render model, with fixes and the Strict Mode behavior that exposes them.
-
React Native Fundamentals: How It Renders, the New Architecture, FlatList Performance and Common Build Errors
How React Native works: native views, the New Architecture and Hermes, Expo vs prebuild, FlatList performance, platform code, and Metro and pod errors.
-
Svelte 5 Runes: $state, $derived, $effect, Snippets and Migrating from Svelte 4
What changed in Svelte 5: runes ($state, $derived, $effect, $props), snippets replacing slots, event handling, shared reactive state in .svelte.ts files, and migrating from Svelte 4.
-
Nuxt 3 in Practice: Routing, Server Routes, and the SSR Data and State Pitfalls
Building a full-stack Vue app with Nuxt 3: file routing, server routes, useFetch vs $fetch, useState, middleware, and runtime config, with the SSR pitfalls that cause double requests, stale pages, leaked state, and build-time secrets.
-
Jest Mocking in Depth: Module Mocks vs spyOn, Async Pitfalls, Snapshots and Test Isolation
Jest mocking, snapshot, and coverage reference: module mocks vs. spies, async pitfalls, test isolation, and threshold configuration.
-
Desktop Apps with Electron: Main vs Renderer, Secure Preload IPC, Auto-Update and Packaging
Build cross-platform desktop apps with Electron. Covers main/renderer processes, IPC, native APIs, auto-update, performance optimization, and distribution.
-
ESLint 9 Flat Config: Migrating from .eslintrc, typescript-eslint, Prettier and Custom Rules
Setting up ESLint 9 with the flat config system: migrating from .eslintrc, TypeScript and framework setups, working alongside Prettier, writing custom rules, and CI integration.
-
A Systematic Debugging Method: Reproduce, Isolate, Test a Hypothesis, and Read Stack Traces
A step-by-step debugging method (reproduce, isolate, test a hypothesis) plus stack traces, common JavaScript and Python errors, DevTools and Node.js debugging.
-
Deno 2.0: TypeScript Without Config, Permission Flags, npm Compatibility and Built-in Tooling
Run TypeScript on Deno 2.0 without a build step: permission flags, npm packages, deno.json, built-in test and lint tools, a Hono server and Deno Deploy.
-
Next.js App Router: SSR vs SSG vs ISR
How Next.js App Router decides between static, dynamic, and incrementally revalidated rendering: fetch cache options, Route Segment Config, generateStaticParams, on-demand revalidation, and the pitfalls behind stale or leaked data.
-
Axios in Practice: Instances, Interceptors, Error Handling and Cancellation
Using Axios for HTTP requests in JavaScript and Node.js: instances, request configuration, response shape, error handling, interceptors, cancellation, and concurrent requests.
-
Babel Setup for Legacy Browser Support: Presets, Plugins, Polyfills and Bundler Integration
Babel for older browsers: how preset-env reads browserslist, syntax transforms vs core-js polyfills, transform-runtime for libraries, and Babel 8 changes.
-
Getting Started with Bun: Package Management, Web Server, Bundler and Tests
Using Bun as a faster JavaScript toolchain: package installation, the built-in web server, bundler and test runner, file system and environment APIs, with practical examples.
-
JavaScript Design Patterns: Singleton, Factory, Module, Observer, Proxy and Strategy
Singleton, Factory, Module, Observer, Proxy and Strategy patterns in JavaScript, with ES6 code, an event system, a caching proxy and a small state store.
-
Getting Started with Node.js: Install, Setup, and Hello World
Node.js tutorial for beginners: install Node and npm on Windows, macOS, and Linux, run Hello World, use npm scripts, and understand modules, fs and HTTP.
-
VS Code Productivity Extensions
VS Code productivity: must-have extensions for JavaScript, TypeScript, and Node.js — ESLint, Prettier, GitLens, Error Lens, keyboard shortcuts.
-
Node.js Module System: CommonJS and ES Modules Explained
CommonJS vs ES modules in Node.js: require vs import, exports vs module.exports, resolution, caching, circular dependencies and "Cannot find module" fixes.
-
Node.js Async Programming: Callbacks and Promises
Learn Node.js async I/O: callbacks, error-first style, Promises, async/await, the event loop, streams, and patterns for APIs and file pipelines.
-
Node.js File System (fs): Promises API, Streams, Atomic Writes, and Watching Files
The Node.js fs module in practice: sync vs callback vs fs/promises, reading and writing JSON safely with atomic writes, directories, streams with pipeline, error codes, fs.watch vs chokidar, and the race conditions in exists-then-open code.
-
JavaScript Values and Types: Primitives vs References, typeof Quirks, == vs ===, NaN and BigInt
How JavaScript values really behave: primitives vs references, copying objects, typeof null, == coercion rules, NaN checks, float precision and BigInt limits.
-
JavaScript Functions: Hoisting, Arrow Functions and this, Default Parameters, Closures and Lost Method Context
How JavaScript functions behave: declaration vs expression hoisting, arrow functions and this, default parameters, loop closures and lost this in callbacks.
-
JavaScript Arrays and Objects: map/filter/reduce, Destructuring, Spread and Common Mistakes
JavaScript arrays and objects: map, filter, reduce, sorting, Object.keys/entries, destructuring, spread/rest—patterns for everyday JS code.
-
JavaScript Async Programming: Promises, async/await, and the Event Loop Without the Usual Bugs
JavaScript asynchronous code explained: callbacks vs Promises, async/await, Promise combinators, the microtask queue, and fixes for real bugs such as unhandled rejections, timeouts that never cancel, retries that skip HTTP errors, and duplicate cached requests.
-
JavaScript DOM Manipulation | Control Web Pages Dynamically
JavaScript DOM tutorial: select and update elements, events, delegation, forms, and common pitfalls—querySelector, addEventListener.
-
JavaScript Classes | ES6 Class Syntax Explained
JavaScript ES6 classes explained: what class syntax desugars to, getters/setters, static blocks, inheritance, private fields (#), and the this-binding pitfall.
-
JavaScript Modules | ES Modules and CommonJS Explained
JavaScript modules: ES import/export vs CommonJS require, browser type=module, dynamic import(), bundlers (Webpack vs Vite), barrels, and Node type.
-
JavaScript Error Handling: try/catch/finally, Custom Errors, Rejected Promises and Retries
Handle JavaScript errors with try/catch/finally, built-in and custom Error classes, rejected promises and async/await, retry with backoff and Result wrappers.
-
Debugging Intermittent Unhandled Promise Rejections in Node.js: A Walkthrough
Why a Node.js API crashes with unhandled rejections only sometimes: early-created promises, return without await, Express 4 async routes, and fixes that hold.
-
var vs let vs const in JavaScript: Scope, the TDZ, and the Bugs Each One Causes
How var, let, and const really differ: block vs function scope, the temporal dead zone, per-iteration loop bindings, window leaks, and the errors each throws.
-
Starting JavaScript: ECMAScript, Browser vs Node.js, Core Syntax and var vs let vs const
JavaScript tutorial for beginners: ECMAScript and runtimes, core syntax, and var vs let vs const—with examples you can run in the browser or Node.js.
-
Node.js & JavaScript Error Handling Best Practices
Node.js error handling for production: operational vs programmer errors, the three ways errors propagate, cause and captureStackTrace, fire-and-forget promises, EventEmitter error events, unhandled rejections, Express error middleware, and retries.