DEV Community: Dhavalkurkutiya

Material Nova VS Code Theme

Dhavalkurkutiya — Wed, 20 May 2026 08:16:25 +0000

meta_title: "Material Nova VS Code Theme: 12-Variant, WCAG AAA Color System for Serious Developers"
meta_description: "Material Nova is a premium VS Code theme with 12 WCAG AAA-compliant variants — OLED Dark, Palenight, Ocean, Deepforest & more. Built to eliminate eye strain and boost code readability. Try it free."

reading_time: "~11 min read"

Why I Stopped Tolerating Bad Themes and Built Material Nova for VS Code

After 8+ hours staring at a screen, 73% of developers report chronic eye strain — and your color theme is likely making it worse.

Most VS Code themes were designed to look good in screenshots. Material Nova was engineered to feel good at 2 AM during a production incident. There's a meaningful difference, and once you experience it, you can't go back.

This post breaks down exactly what makes Material Nova a technically superior choice — from its WCAG AAA contrast architecture to its semantic token system — and why switching themes isn't a cosmetic decision. It's a performance decision.

What Is the Material Nova VS Code Theme?

Material Nova is a premium Visual Studio Code color theme package built on Google's Material Design color system. It ships with 12 carefully engineered variants, each targeting a distinct lighting condition, display type, or developer preference.

The package is not a port or a reskin of an existing theme. Every color value, contrast ratio, and semantic token assignment was hand-tuned from scratch — in JSON, no tooling abstractions — with one constraint above all others: zero cognitive fatigue.

It's available on the VS Code Marketplace and the source lives at GitHub.

[INTERNAL LINK: VS Code productivity setup guide]

The Problem With Most Developer Themes

Before understanding what Material Nova does differently, it helps to understand what the alternatives get wrong.

One Dark Pro is the most downloaded theme in the Marketplace. It has beautiful aesthetics. But its string-to-keyword contrast delta is narrow — on lower-gamma displays, variables and function names blur together. Your brain compensates. Over hours, that compensation becomes fatigue.

Community Material Theme has been the go-to Google Material port for years. But it ships a single-dark-mode mindset into a world where developers work in sunny offices, tinted monitors, and ultra-bright MacBook displays. One background doesn't scale.

Tokyo Night leans heavily purple. Gorgeous at first. But purple-dominant palettes suppress melatonin inconsistently across monitor color profiles. On wide-gamut panels (P3), it oversaturates.

The pattern: themes optimized for aesthetics, not ergonomics. Material Nova inverts that priority.

12 Variants, One Architectural Decision

Here's the full variant matrix with the technical reasoning behind each:

Variant	Background	Primary Use Case
Default	`#263238`	Classic Material baseline — balanced gray-green, ideal for 6500K monitors
Darker	`#212121`	Matte near-black for distraction-free deep work
Palenight	`#292D3E`	Violet-shifted cosmic palette, AMOLED-friendly
Ocean	`#0F111A`	Deep navy, maximizes perceived contrast on IPS panels
Deepforest	`#141F1D`	Organic green-black, clinically the most eye-relaxing hue range
Lighter	`#FAFAFA`	True light mode, calibrated for high-ambient environments
Default HC	`#000000`	High Contrast companion — pure black for accessibility compliance
Darker HC	`#000000`	Maximum contrast ratio baseline for visually impaired users
Palenight HC	`#000000`	HC variant with violet accent system intact
Ocean HC	`#000000`	HC variant with full blue-range semantic tokens
Deepforest HC	`#000000`	HC variant retaining full green token assignments
Lighter HC	`#FFFFFF`	High Contrast light — meets WCAG AAA on every token

Every dark variant ships with a High Contrast (HC) twin. This isn't a marketing checkbox. The HC variants are built for developers with color vision deficiency, users on low-quality TN panels, and anyone running VS Code through a remote desktop connection where gamma shifts unpredictably.

[EXTERNAL LINK: WCAG 2.1 Contrast Guidelines — W3C]

WCAG AAA Compliance: What It Actually Means in a Code Editor

WCAG AAA requires a contrast ratio of 7:1 between foreground text and background. Most themes hit WCAG AA (4.5:1) at best. Material Nova hits AAA across all critical token categories.

Here's what that means in practice:

Keywords (if, for, return) must be immediately distinguishable from identifiers (variable names, function names) at a glance
String literals must pop against background without requiring the eye to refocus
Comments need to be readable but recessive — low enough not to compete with active code, high enough to scan when needed
Error and warning markers must cut through the syntax color layer without creating visual alarm fatigue

Achieving all four simultaneously is a constraint satisfaction problem. Raise keyword contrast too high, it competes with operators. Push comment saturation too low, it disappears on gamma-shifted displays.

The Material Nova color assignments were validated against a WCAG AAA checker on every variant before release. Not spot-checked — every token pair.

Semantic Syntax Highlighting: Precision That Standard Themes Skip

VS Code supports two highlighting layers: TextMate grammar scopes (legacy) and Semantic tokens (modern, language-server-powered). Most themes configure TextMate and call it done.

Material Nova configures both — and its semantic token rules are the technical differentiator.

What Semantic Tokens Enable

When your language server (TypeScript, Pylance, rust-analyzer, etc.) emits semantic tokens, VS Code knows the meaning of a token, not just its syntactic category. This enables distinctions that TextMate can't make:

A string in a template literal vs. a string used as a dictionary key
A variable that is a readonly class property vs. a mutable local
A function that is async vs. synchronous
A parameter that is destructured vs. passed directly

Standard themes collapse these into single color assignments. Material Nova assigns distinct visual weights so that code structure is readable without running the logic mentally.

For TypeScript/TSX and React, this matters enormously. A codebase with hooks, HOCs, generics, and conditional types becomes a visual tangle in most themes. Material Nova's semantic rules surface the structural hierarchy before your eyes process the identifiers.

For Python, class decorators, f-string interpolations, and type annotation tokens are individually scoped — so @dataclass doesn't look like @property which doesn't look like @pytest.fixture.

For C#, the distinction between interface, class, struct, and enum declarations is visually encoded, not just syntactically named.

Performance Architecture: Why Zero-Overhead Matters

Theme performance is rarely discussed because most developers assume themes are inert. They're not.

Several popular themes use JavaScript-based extensions alongside their color definitions — loading background images, rendering gradient overlays, or injecting CSS into the workbench. These add latency to editor startup, increase memory footprint, and occasionally cause flicker on window focus.

Material Nova is pure JSON. No extension activation events. No background scripts. No dynamic recalculation.

The .json declaration is loaded once at editor startup into VS Code's internal color registry. After that, it consumes zero CPU cycles. On low-powered machines (older MacBooks, Linux dev boxes, Raspberry Pi 400s running remote VS Code), this difference is measurable.

Startup benchmark comparison (anecdotal, M1 MacBook Air):

Theme	Extension Type	Avg Activation Time
One Dark Pro	Pure JSON	~0ms
Dracula Official	Pure JSON	~0ms
Peacock (theme + extension)	JS + JSON	~80-120ms
Material Nova	Pure JSON	~0ms

Zero overhead isn't a boast — it's a consequence of deliberate architecture choices.

Recommended Configuration for Maximum Visual Fidelity

The theme performs well with VS Code defaults. But to unlock its full rendering quality, the following settings.json block pairs typography with the color system:

{
  "editor.fontFamily": "JetBrains Mono, Fira Code, monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.letterSpacing": 0.5,
  "editor.fontLigatures": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on"
}

Why Each Setting Matters

JetBrains Mono as primary font — its x-height and stem weight are calibrated for code legibility at 14px. Its ligatures (!=, =>, ===) reduce token-level visual noise.

lineHeight: 1.6 — tighter than default on many setups, but creates enough vertical rhythm that the eye tracks lines without hunting. Below 1.5 collapses lines on dense code blocks. Above 1.7 introduces excessive whitespace that breaks code chunking.

letterSpacing: 0.5 — adds half-pixel breathing room between characters. On retina displays this is imperceptible. On 1080p displays it prevents character collision in condensed fonts.

fontLigatures: true — renders multi-character operators as unified glyphs. Reduces operator scan time in dense TypeScript or arrow-heavy functional code.

cursorSmoothCaretAnimation: "on" — prevents the hard-cut cursor jump that creates visual micro-interruptions during fast typing. Smoother animation reduces cognitive interruption when switching focus to the cursor position.

This configuration was tuned on the Default and Ocean variants, but applies well across the full palette.

How to Install Material Nova

Installation takes under 30 seconds:

Option 1 — Marketplace UI:

Open VS Code
Ctrl+Shift+X (or Cmd+Shift+X on macOS)
Search Material Nova
Click Install on the dhavalkurkutiya.vsc-material-nova package
Ctrl+K Ctrl+T → Select your preferred variant

Option 2 — Command Palette:

ext install dhavalkurkutiya.vsc-material-nova

Option 3 — CLI:

code --install-extension dhavalkurkutiya.vsc-material-nova

After installing, open the theme picker with Ctrl+K Ctrl+T and filter by "Material Nova" to see all 12 variants. Spend 5 minutes with Ocean or Deepforest before deciding — first impressions of dark themes are heavily influenced by your previous theme's color memory.

Variant Selection Guide: Match Your Environment

Choosing the right variant isn't aesthetic preference — it's environmental optimization.

Late night, dark room: Start with Ocean (#0F111A). The deep navy absorbs ambient light without the hard contrast shock of pure OLED-black themes. If you're on an OLED display (Samsung, LG WOLED, MacBook Pro XDR), try Palenight — its violet tones work with AMOLED subpixel geometry.

Daytime, bright office: Lighter is the only sane choice. Dark themes in daylight cause your pupils to dilate trying to process the dark background against a bright room. High ambient light environments need high-key backgrounds.

Mixed / variable lighting: Default (#263238) is the most neutral choice across lighting conditions. The gray-green background sits at the perceptual midpoint between warm office light and cool monitor backlight.

Accessibility requirement: Any HC variant. If you're building for a shared development machine, a remote desktop environment, or working with developers who have color vision deficiency, the HC variants maintain full token semantics at maximum contrast.

FAQ

Does Material Nova support Semantic Highlighting for all major languages?

Material Nova configures semantic token rules for TypeScript, JavaScript, TSX, JSX, Python, C#, HTML, and CSS out of the box. For languages not in this list (Rust, Go, Kotlin), VS Code's fallback to TextMate grammar scopes is fully supported — the base palette provides valid contrast on all token categories. Rust and Go support is on the active roadmap via rust-analyzer and gopls semantic token mapping.

Is there a performance difference between the 12 variants?

No. All 12 variants are static JSON declarations of identical structure. VS Code loads the active theme once at startup — there is no per-variant performance delta. The only measurable difference is load time on first theme switch, which triggers a workbench color re-render. This is a VS Code engine operation, not a theme operation, and completes in under 200ms regardless of variant.

Conclusion

A theme is not decoration. For a developer spending 8-12 hours a day in an editor, the color architecture of your environment is a cognitive infrastructure decision.

Material Nova was built to solve a real problem: themes that look great in screenshots but create visual fatigue, semantic ambiguity, and accessibility gaps in daily use. Its 12-variant system, WCAG AAA compliance, semantic token precision, and zero-overhead architecture are not feature bullet points — they're the result of specific, validated engineering decisions.

If you're still on a theme you installed three years ago because switching felt like unnecessary friction, that friction has a cost. It accumulates across every hour of every day you spend writing code.

→ Install Material Nova on the VS Code Marketplace and try the Ocean or Deepforest variant for one full workday. If your eyes don't thank you, the uninstall takes one click.

Star the repo on GitHub to follow updates, new variants, and language server integrations.

Why I Handcrafted "Material Nova" — The Ultimate, Eye-Friendly VS Code Theme

Dhavalkurkutiya — Wed, 20 May 2026 08:08:39 +0000

Let's be honest. As software engineers, our code editor is where we spend 90% of our waking hours. We push pixels, debug tricky production errors, and write thousands of lines of code daily.

Yet, so many of us struggle with severe eye strain, visual fatigue, and headaches because our theme's contrast is either too aggressive, or completely washed out.

After jumping between One Dark Pro, Community Material Theme, and Tokyo Night for years, I decided enough was enough. I needed a theme that didn't just look stunning, but was also carefully calibrated for absolute developer comfort and accessibility.

So, I built Material Nova. 🎉

🎨 What is Material Nova?

Material Nova is a premium color theme for Visual Studio Code, meticulously engineered around Google's legendary Material Design color palette.

Unlike other theme packages that only give you a single dark layout, Material Nova comes fully loaded with 12 distinct, premium variations designed to adapt to any lighting environment — from pitch-black late-night coding to bright sunny outdoor workspaces.

🚀 The 12-Variant Palette Breakdown

Here is a quick look at the carefully engineered environments included in the package:

Theme Variant	Background	Ideal For
🌌 Default	`#263238`	The timeless, classic Google Material design interface.
🖤 Darker	`#212121`	Distraction-free, matte-gray elegance.
🔮 Palenight	`#292D3E`	A gorgeous synthwave, violet-blue cosmic space.
🌊 Ocean	`#0F111A`	A calming, deep-sea marine navy environment.
🌲 Deepforest	`#141F1D`	An organic green aesthetic that instantly relaxes the eyes.
☀️ Lighter	`#FAFAFA`	A crisp, ultra-clean light mode for bright, sunny office rooms.

Every dark theme variant includes a companion "High Contrast" (HC) edition — featuring pure pitch-black backgrounds and sharp, high-visibility borders for maximum legibility.

🔥 Why Make the Switch to Material Nova?

Here is what makes this theme package stand out from the crowd:

1. Zero Cognitive Fatigue (WCAG AAA Compliant)

We spent weeks tuning color pairings. The contrast ratios are strictly optimized to make variables, strings, brackets, and keywords immediately recognizable — without being overly bright.

2. Tailored Semantic Highlighting

Whether you are writing React (TSX/JSX), TypeScript, JavaScript, Python, C#, HTML, or CSS, the semantic syntax highlighting is incredibly precise. Different data types and syntax scopes have custom-assigned rules that standard themes simply group together.

3. Lightweight & Lightning Fast

No background scripts, no dynamic theme loading delays, and zero overhead. Material Nova consists of pure, hand-coded JSON declarations — which means your editor loads and responds instantaneously.

⚙️ How to Make it Look Premium

To get the absolute best visual experience out of Material Nova, open your settings.json in VS Code and paste this recommended configuration:

```json title="settings.json"
{
"editor.fontFamily": "JetBrains Mono, Fira Code, monospace",
"editor.fontSize": 14,
"editor.lineHeight": 1.6,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": true,
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": "on"
}




<Callout type="info">
  For the best font rendering, install [JetBrains Mono](https://www.jetbrains.com/lp/mono/) — it's free, open-source, and designed specifically for developers.
</Callout>

---

## 📦 Installation

Install Material Nova directly from the VS Code Marketplace in seconds:



```bash
# Via VS Code Quick Open (Ctrl+P / Cmd+P)
ext install dhavalkurkutiya.vsc-material-nova

Or search "Material Nova" in the Extensions panel (Ctrl+Shift+X).

🔗 Links

Stop manually setting up tRPC in Next.js — use this CLI instead

Dhavalkurkutiya — Sun, 08 Mar 2026 05:42:14 +0000

Stop manually setting up tRPC in Next.js — use this CLI instead

Every time I start a new Next.js project with tRPC, I do the same thing.

Open docs. Copy files. Install packages. Forget to wrap layout.tsx. Get the QueryClient error. Fix it. Repeat next project.

I got tired of it. So I built a CLI.

npx create-trpc-setup

The Problem

Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. Every project needs:

Install @trpc/server, @trpc/client, @trpc/tanstack-react-query, @tanstack/react-query, zod, server-only
Create trpc/init.ts with context and procedures
Create trpc/query-client.ts with SSR-safe QueryClient
Create trpc/client.tsx with TRPCReactProvider
Create trpc/server.tsx with HydrateClient and prefetch
Create app/api/trpc/[trpc]/route.ts
Manually update layout.tsx to wrap <body> with TRPCReactProvider

Miss any step → error. Every. Single. Project.

The Solution

npx create-trpc-setup

Run this inside any existing Next.js project. Everything happens automatically.

What gets auto-detected:

Package manager — npm, pnpm, yarn, or bun
Path alias — reads tsconfig.json for @/*, ~/*, or any custom alias
Auth provider — detects Clerk or NextAuth, configures context automatically
Folder structure — src/ or root layout

Files Generated

trpc/
├── init.ts              ← context, baseProcedure, protectedProcedure, Zod error formatter
├── query-client.ts      ← SSR-safe QueryClient
├── client.tsx           ← TRPCReactProvider + useTRPC hook
├── server.tsx           ← prefetch, HydrateClient
└── routers/
    └── _app.ts          ← starter router with health + greet (Zod validation)

app/api/trpc/[trpc]/
└── route.ts             ← API handler with real headers + dev error logging

app/trpc-status/         ← styled test page (delete after confirming ✅)

layout.tsx — auto-patched

Before:

<body>
  {children}
  <Toaster />
</body>

After:

<body>
  <TRPCReactProvider>
    {children}
    <Toaster />
  </TRPCReactProvider>
</body>

No backup files. No extra clutter. Just the import added + body wrapped.

Why Not create-t3-app?

create-t3-app is great — but it only works for new projects.

create-trpc-setup works with projects you've already started.

Feature	create-t3-app	create-trpc-setup
New projects	✅	✅
Existing projects	❌	✅
Auto-patches layout.tsx	❌	✅
Clerk / NextAuth detection	❌	✅
tsconfig path alias detection	❌	✅
tRPC v11 + RSC ready	✅	✅

Using tRPC After Setup

Server Component — prefetch data:

// app/page.tsx
import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.greet.queryOptions({ name: "World" }));
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — use data:

// my-client.tsx
"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.greet.queryOptions({ name: "World" }));
  return <div>{data.message}</div>;
}

protectedProcedure — Already Included

The generated init.ts includes a protectedProcedure that automatically throws UNAUTHORIZED:

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED", message: "Sign in required" });
  }
  return next({ ctx: { ...ctx, userId: ctx.userId } });
});

Use it directly in any router:

getProfile: protectedProcedure.query(({ ctx }) => {
  return { userId: ctx.userId }; // guaranteed non-null ✅
}),

Zod Error Formatter — Also Included

Clean field-level errors on the client:

error?.data?.zodError?.fieldErrors?.title // ["Title is required"]

Try It

npx create-trpc-setup

📦 npm: https://www.npmjs.com/package/create-trpc-setup
🐙 GitHub: https://github.com/Dhavalkurkutiya/create-trpc-setup

If this saved you time, drop a ⭐ on GitHub — it helps others find it!

Stop manually setting up tRPC in Next.js — use this CLI instead

Dhavalkurkutiya — Sat, 07 Mar 2026 06:28:23 +0000

Every time I start a new Next.js project with tRPC, I do the same thing.

Open docs. Copy files. Install packages. Forget to wrap layout.tsx. Get the QueryClient error. Fix it. Repeat next project.

I got tired of it. So I built a CLI.

npx create-trpc-setup

The Problem

Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. You need:

Install @trpc/server, @trpc/client, @trpc/tanstack-react-query, @tanstack/react-query, zod, server-only...
Create trpc/init.ts with context and procedures
Create trpc/query-client.ts with SSR-safe QueryClient
Create trpc/client.tsx with TRPCReactProvider
Create trpc/server.tsx with HydrateClient and prefetch
Create app/api/trpc/[trpc]/route.ts
Update layout.tsx to wrap children with TRPCReactProvider

Miss any step → error. Every new project.

The Solution

npx create-trpc-setup

Run this inside any existing Next.js project. Everything happens automatically.

What gets detected automatically:

Package manager — npm, pnpm, yarn, or bun
Path alias — reads tsconfig.json for @/*, ~/*, or any custom alias
Auth provider — detects Clerk or NextAuth and configures context
Folder structure — src/ or root layout

What gets generated:

trpc/
├── init.ts         ← context, baseProcedure, protectedProcedure, Zod error formatter
├── query-client.ts ← SSR-safe QueryClient
├── client.tsx      ← TRPCReactProvider + useTRPC hook
├── server.tsx      ← prefetch, HydrateClient, caller
└── routers/
    └── _app.ts     ← health + greet procedures with Zod

app/api/trpc/[trpc]/route.ts   ← API handler with real headers
app/trpc-status/               ← test page (delete after confirming)

layout.tsx — auto-patched:

Before:

<body>
  {children}
  <Toaster />
</body>

After:

<body>
  <TRPCReactProvider>
    {children}
    <Toaster />
  </TRPCReactProvider>
</body>

Using tRPC After Setup

Server Component — prefetch data:

// app/page.tsx
import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.greet.queryOptions({ name: "World" }));
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — use data:

// my-client.tsx
"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.greet.queryOptions({ name: "World" }));
  return <div>{data.message}</div>;
}

Why Not create-t3-app?

create-t3-app is great — but it only works for new projects.

create-trpc-setup works with existing projects. Already have a Next.js app with Clerk, Shadcn, and custom providers? No problem. Run the command, everything gets added without touching your existing code.

protectedProcedure — Already Included

The generated init.ts includes a protectedProcedure that automatically throws UNAUTHORIZED:

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({ ctx: { ...ctx, userId: ctx.userId } });
});

Use it in any router:

getProfile: protectedProcedure.query(({ ctx }) => {
  return { userId: ctx.userId }; // guaranteed non-null
}),

Try It

npx create-trpc-setup

📦 npm: npmjs.com/package/create-trpc-setup
🐙 GitHub: github.com/Dhavalkurkutiya/create-trpc-setup

If it saved you time, drop a ⭐ on GitHub and share it with your team.

Setting up tRPC v11 in Next.js Now Takes Just One Command

Dhavalkurkutiya — Wed, 04 Mar 2026 08:54:45 +0000

I Built a CLI That Sets Up tRPC v11 in Next.js With One Command

Every time I started a new Next.js project with tRPC, I found myself doing the same thing — copying the same 6 files, installing the same packages, wrapping layout.tsx with the same provider.

So I automated it.

The Problem

Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. You need to:

Install @trpc/server, @trpc/client, @trpc/tanstack-react-query, @tanstack/react-query, zod, superjson, server-only...
Create trpc/init.ts with the right context
Create trpc/query-client.ts with SSR-safe QueryClient
Create trpc/client.tsx with TRPCReactProvider and useTRPC
Create trpc/server.tsx with HydrateClient, prefetch, caller
Create app/api/trpc/[trpc]/route.ts
Manually update layout.tsx to wrap children with TRPCReactProvider

That's a lot of boilerplate before you write a single procedure.

The Solution

npx create-trpc-setup

One command. That's it.

Here's what happens automatically:

1. Dependency install — detects your package manager (npm, pnpm, yarn, bun) and installs everything needed.

2. File generation — creates all 6 required tRPC files with the correct structure for Next.js App Router and React Server Components.

3. Layout auto-patch — reads your existing layout.tsx, adds the import, and wraps your <body> contents with <TRPCReactProvider>. Your existing providers (Clerk, Toaster, etc.) stay untouched.

4. Test page — creates a /trpc-test page so you can immediately verify your setup is working. Delete it after confirming.

What Gets Generated

trpc/
├── init.ts              ← context, baseProcedure, createTRPCRouter
├── query-client.ts      ← SSR-safe QueryClient factory
├── client.tsx           ← TRPCReactProvider + useTRPC hook
├── server.tsx           ← prefetch, HydrateClient, caller
└── routers/
    └── _app.ts          ← your app router

app/api/trpc/[trpc]/
└── route.ts             ← API route handler

How to Use tRPC After Setup

Server Component — prefetch data:

import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.health.queryOptions());
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — consume data:

"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.health.queryOptions());
  return <div>{data.status}</div>;
}

Layout Auto-Patch

This was the trickiest part to build. The CLI reads your existing layout.tsx, finds the <body> tag, detects the indentation style, and wraps the inner content — keeping your existing providers and components exactly where they are.

Before:

<ClerkProvider>
  <html lang="en">
    <body className="...">
      {children}
      <Toaster />
    </body>
  </html>
</ClerkProvider>

After:

<ClerkProvider>
  <html lang="en">
    <body className="...">
      <TRPCReactProvider>
        {children}
        <Toaster />
      </TRPCReactProvider>
    </body>
  </html>
</ClerkProvider>

A .backup file is saved before any changes so you can always restore.

Try It

npx create-trpc-setup

📦 npm: npmjs.com/package/create-trpc-setup
🐙 GitHub: github.com/Dhavalkurkutiya/create-trpc-setup

If it saved you time, star the repo ⭐ and share it with someone who uses Next.js + tRPC.

Understanding JavaScript Global Context Execution

Dhavalkurkutiya — Fri, 21 Jun 2024 04:14:42 +0000

When diving into JavaScript, one of the fundamental concepts to grasp is the "global context" of code execution. This term might sound complex, but it's essential for understanding how JavaScript operates, especially in web development. Let's break it down.

What is the Global Context?

In JavaScript, the global context refers to the default environment where your code runs. When the JavaScript engine starts executing code, it begins in this global context. This is true whether you're running your script in a browser or on a server with Node.js.

The Global Object

Every global context has a global object. In browsers, this global object is window. In Node.js, it's global. This global object provides access to all global variables and functions. For example, when you declare a variable without using var, let, or const, it automatically becomes a property of the global object.

var foo = "bar"; // This is global
console.log(window.foo); // "bar" in browsers
console.log(global.foo); // "bar" in Node.js

Execution Contexts and the Call Stack

Understanding execution contexts and the call stack is crucial for grasping the global context. When your JavaScript code runs, the engine creates an execution context. The first execution context created is the global execution context. Here's what happens in detail:

Creation Phase: Before any code is executed, the global execution context is created. During this phase, the JavaScript engine sets up the global object, the this keyword, and initializes the scope chain.
Execution Phase: In this phase, the JavaScript engine executes the code line by line. Functions are called, and variables are assigned values.

The this Keyword

In the global context, this refers to the global object. This behavior can be a source of confusion, especially for developers coming from other programming languages.

console.log(this); // In the browser, this will log the window object

However, within a function (non-strict mode), this can behave differently. It's important to note that how this is set depends on how the function is called.

Strict Mode

JavaScript's strict mode changes the behavior of the global context. When strict mode is enabled (by adding "use strict"; at the top of your script or function), the global context behaves more predictably. For instance, this in the global context will be undefined instead of referring to the global object.

"use strict";
console.log(this); // undefined

Global Variables and Scope

Variables declared outside of any function or block are considered global variables. They are accessible from anywhere in your code, which can be both a blessing and a curse. Overusing global variables can lead to code that is difficult to maintain and debug due to potential name collisions and unintended modifications.

Best Practices

Avoid Global Variables: Encapsulate your code within functions or modules to minimize the use of global variables. This reduces the risk of name collisions and unintended side effects.Use
Strict Mode: Enabling strict mode helps catch common coding errors and prevents the use of certain problematic language features.

3.Understand Hoisting: JavaScript hoists variable and function declarations to the top of their containing scope. Understanding this behavior is crucial to avoid unexpected results.

Use ES6 Modules: With ES6, you can use import and export statements to create modular code. This helps in keeping your global scope clean.

Conclusion

The global context in JavaScript is the foundation upon which all code execution begins. Understanding how it works, along with the role of the global object and the this keyword, is essential for writing efficient and bug-free JavaScript code. By adhering to best practices, you can manage the global context effectively and avoid common pitfalls.Grasping the global context might seem daunting at first, but with practice and careful coding, you'll find it to be a powerful aspect of JavaScript. Happy coding!

Java programming structure

Dhavalkurkutiya — Sun, 25 Sep 2022 05:17:51 +0000

Java Programming Structure

A java programming structure consists 6 major section:

Document Section
Package Statement
Important Statement
Interface Statement
Class Defination and ,
Main Method Definition inside main class [ESSENTIAL]

1. Document Section 📑

This section includes to comments to tell tha program's purpose, it improves readability of tha program.

2. Package Statement 😍

A Package Statement allowed to includes statement that provides a package declaration.

3. Important Statement 🧑‍💻

In C or C++ if we require to include some external libraries in our program then we use "include" statement, similar java using "import" statement we can use external libraries in our program, it includes statements used for referring classes and interfaces that are declared in other packages.

4. Interface Statement 💫

In Java language, an interface can be defined as a contract between objects on how to communicate with eachother, this is similar to class but only includes constants, method declaration, allowed to declare interface.

5 . Class Defination 🧑‍💼

It describes information about user defines classes present in the program, this Section allowed to user able to declared other user defined class above ther main method class.

6. Main Method Definition inside class 🤗

Java Program Execution starts form main method, it Consists main method definition inside class.

🧑‍💻 Basic java program 🧑‍💻

class Main{
  public static void main (String[] args) {
    System.out.println("Hello World");
  }
}

👇 Check out 👇

❤️ Instagram : https://www.instagram.com/_mr.dhaval_io
👥 Facebook : https://m.facebook.com/dhaval.kurkutiya.3
🐦 Twitter : https://www.twitter.com/dhaval87950061