Delba

@delba_oliveira • 118,727 subscribers

For the love of the craft. Claude Code • @ClaudeDevs @AnthropicAI | Prev. @Vercel

Shorts

Smol tip: /𝚌𝚍 moves your running Claude Code session to another directory without restarting. Your conversation and context come with you, and Claude picks up the new project's CLAUDE.md.

Smol tip: /𝚌𝚍 moves your running Claude Code session to another directory without restarting. Your conversation and context come with you, and Claude picks up the new project's CLAUDE.md.

209,716 görüntüleme

Smol tip: /𝚏𝚘𝚛𝚔 is perfect for mid-task side quests. It spawns a subagent that inherits the whole conversation, runs in the background while you keep working on your main quest, and comes back with an update.

Smol tip: /𝚏𝚘𝚛𝚔 is perfect for mid-task side quests. It spawns a subagent that inherits the whole conversation, runs in the background while you keep working on your main quest, and comes back with an update.

112,303 görüntüleme

Smol tip: pasting long text into Claude Code collapses it into [Pasted text #1]. If you need to edit it you can paste again to expand. Or, Ctrl+G to open the whole prompt in your code editor. Saved changes sync back to Claude's input field.

Smol tip: pasting long text into Claude Code collapses it into [Pasted text #1]. If you need to edit it you can paste again to expand. Or, Ctrl+G to open the whole prompt in your code editor. Saved changes sync back to Claude's input field.

90,399 görüntüleme

Smol tip: type ! in Claude Code to run a shell command. The output lands back in the conversation, so Claude can pick up the work from there.

Smol tip: type ! in Claude Code to run a shell command. The output lands back in the conversation, so Claude can pick up the work from there.

57,558 görüntüleme

Smol tip: 𝙲𝚝𝚛𝚕+𝙾 to search a long Claude Code conversation • / to search for a term • 𝚗 to step through the matches • } to hop between your own prompts

Smol tip: 𝙲𝚝𝚛𝚕+𝙾 to search a long Claude Code conversation • / to search for a term • 𝚗 to step through the matches • } to hop between your own prompts

41,814 görüntüleme

Smol tip: you don't have to wait for Claude to finish working before giving it the next task. Type a message and hit Enter to queue it. If you need to edit, ↑ to pull it back into the prompt box.

Smol tip: you don't have to wait for Claude to finish working before giving it the next task. Type a message and hit Enter to queue it. If you need to edit, ↑ to pull it back into the prompt box.

44,716 görüntüleme

Loops Write the code Write the prompt that writes the code Write the loop that runs the prompt that writes the code

Loops Write the code Write the prompt that writes the code Write the loop that runs the prompt that writes the code

50,024 görüntüleme

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.

How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.

61,247 görüntüleme

Smol tip: `claude --ax-screen-reader` launches Claude Code in screen reader mode. • plain, linear text without boxes, spinners, redraws • labeled and searchable messages • numbered menus you answer by typing • audible alert when Claude needs your input Feedback welcome 🙏

Smol tip: `claude --ax-screen-reader` launches Claude Code in screen reader mode. • plain, linear text without boxes, spinners, redraws • labeled and searchable messages • numbered menus you answer by typing • audible alert when Claude needs your input Feedback welcome 🙏

31,646 görüntüleme

Hi. I'm back. Next.js 16: 𝚌𝚊𝚌𝚑𝚎𝙻𝚒𝚏𝚎 Configure how long: • prefetched data can be reused on the client without refetching • prerendered data can be reused on the server without rerendering

Hi. I'm back. Next.js 16: 𝚌𝚊𝚌𝚑𝚎𝙻𝚒𝚏𝚎 Configure how long: • prefetched data can be reused on the client without refetching • prerendered data can be reused on the server without rerendering

94,520 görüntüleme

Vercel pricing update: CPU billing is now based on active usage, not function duration. This means you no longer pay for time spent waiting on external services such as databases, APIs, or LLMs.

Vercel pricing update: CPU billing is now based on active usage, not function duration. This means you no longer pay for time spent waiting on external services such as databases, APIs, or LLMs.

107,354 görüntüleme

👩‍🔬 <AnimatedFilesystem />

👩‍🔬 <AnimatedFilesystem />

42,096 görüntüleme

React 19: useFormState → useActionState

React 19: useFormState → useActionState

121,506 görüntüleme

TIL multiple CSS transform functions of the same type are additive. I used it to add a turbulence effect that doesn't overwrite existing or in-progress transforms.

TIL multiple CSS transform functions of the same type are additive. I used it to add a turbulence effect that doesn't overwrite existing or in-progress transforms.

67,933 görüntüleme

Next.js 15.2 (canary preview): Node.js middleware The quest to fully support Node.js in middleware continues. You can now configure `middleware.js` to use the Node.js runtime. This means you can use any node module or npm package in your middleware.

Next.js 15.2 (canary preview): Node.js middleware The quest to fully support Node.js in middleware continues. You can now configure `middleware.js` to use the Node.js runtime. This means you can use any node module or npm package in your middleware.

66,786 görüntüleme

Next.js 15.1: Easier error debugging ✓ Hide¹ stack frames for dependency code ✓ Surface source of the error in your code Video: Terminal output² of a Zod parsing error

Next.js 15.1: Easier error debugging ✓ Hide¹ stack frames for dependency code ✓ Surface source of the error in your code Video: Terminal output² of a Zod parsing error

49,768 görüntüleme

New Next.js e-commerce template by Blazity: ◆ Built with v0, shadcn UI, and Turborepo ◆ AI (search, image captioning) ◆ Enterprise-ready (A/B testing, scalable redirects, tests, etc) ◆ And more Try it out: `npm create commerce`

New Next.js e-commerce template by Blazity: ◆ Built with v0, shadcn UI, and Turborepo ◆ AI (search, image captioning) ◆ Enterprise-ready (A/B testing, scalable redirects, tests, etc) ◆ And more Try it out: `npm create commerce`

60,102 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Life update: I've joined the Claude Code team at Anthropic.

Life update: I've joined the Claude Code team at Anthropic.

338,534 görüntüleme • 4 ay önce

React visually explained: 'use client'

React visually explained: 'use client'

747,299 görüntüleme • 1 yıl önce

Smol tip: when working in agent view, I use /𝚛𝚎𝚗𝚊𝚖𝚎 to keep track of all my sessions. The auto-names are good, but I trim each down to a topic plus notes to help orientate me.

Smol tip: when working in agent view, I use /𝚛𝚎𝚗𝚊𝚖𝚎 to keep track of all my sessions. The auto-names are good, but I trim each down to a topic plus notes to help orientate me.

86,166 görüntüleme • 2 ay önce

I created a course to learn Claude Code in Claude Code.

I created a course to learn Claude Code in Claude Code.

110,891 görüntüleme • 7 ay önce

I’m exploring a new video series to visually explain Next.js and React concepts. Open to feedback 🖤 Episode 1: Next.js Filesystem Routing

I’m exploring a new video series to visually explain Next.js and React concepts. Open to feedback 🖤 Episode 1: Next.js Filesystem Routing

409,631 görüntüleme • 2 yıl önce

Claude Code: Auto mode Auto mode lets Claude safely complete long-running tasks without asking permission for every action. But how does it work? 4 key terms: • Classifier: a separate model that approves or denies each action based on your intent and scope • Filtering: the classifier only sees your messages and Claude's tool calls, not Claude’s reasoning or tool outputs, so it isn't influenced when making decisions • Tier check: read-only and easily-undone actions (like edits inside your repo) skip the classifier; everything else goes through it • Probe: a server-side check that scans incoming content, like web pages, for prompt injection and flags it to Claude I'm working on a longer video that explains how auto mode works and how to configure it. What questions do you have about it?

Claude Code: Auto mode Auto mode lets Claude safely complete long-running tasks without asking permission for every action. But how does it work? 4 key terms: • Classifier: a separate model that approves or denies each action based on your intent and scope • Filtering: the classifier only sees your messages and Claude's tool calls, not Claude’s reasoning or tool outputs, so it isn't influenced when making decisions • Tier check: read-only and easily-undone actions (like edits inside your repo) skip the classifier; everything else goes through it • Probe: a server-side check that scans incoming content, like web pages, for prompt injection and flags it to Claude I'm working on a longer video that explains how auto mode works and how to configure it. What questions do you have about it?

42,930 görüntüleme • 2 ay önce

Next.js Explained: Partial Prerendering What exactly is Partial Prerendering? How does it work? And most importantly, why does it matter?

Next.js Explained: Partial Prerendering What exactly is Partial Prerendering? How does it work? And most importantly, why does it matter?

280,179 görüntüleme • 2 yıl önce

Next.js 15.3: useLinkStatus Define inline feedback to show while navigations complete. Tip: • Avoid an unnecessary flicker of pending UI on fast loads by adding an initial animation delay (e.g. 100ms) and fading in from 0 opacity.

Next.js 15.3: useLinkStatus Define inline feedback to show while navigations complete. Tip: • Avoid an unnecessary flicker of pending UI on fast loads by adding an initial animation delay (e.g. 100ms) and fading in from 0 opacity.

155,247 görüntüleme • 1 yıl önce

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

160,381 görüntüleme • 1 yıl önce

Next.js patterns: Public pages with some personalization.

Next.js patterns: Public pages with some personalization.

66,142 görüntüleme • 7 ay önce

Preview: The Future of Next.js... in 100 seconds.

Preview: The Future of Next.js... in 100 seconds.

129,944 görüntüleme • 1 yıl önce

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

157,404 görüntüleme • 2 yıl önce

Next.js: Authentication ※ Best practices for Server Components, Server Actions, and Middleware ※ Patterns like Data Access Layers, API Minimization, and Data Transfer Objects Also, aside from headshots, this video is entirely built in React 🤯

Next.js: Authentication ※ Best practices for Server Components, Server Actions, and Middleware ※ Patterns like Data Access Layers, API Minimization, and Data Transfer Objects Also, aside from headshots, this video is entirely built in React 🤯

116,403 görüntüleme • 2 yıl önce

Next.js 15 next.config.js → next.config.ts

Next.js 15 next.config.js → next.config.ts

86,251 görüntüleme • 1 yıl önce

Static vs. Dynamic rendering in Next.js

Static vs. Dynamic rendering in Next.js

105,387 görüntüleme • 2 yıl önce

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

67,908 görüntüleme • 1 yıl önce

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

50,434 görüntüleme • 1 yıl önce

👩‍🔬 AI teleprompter ft.

👩‍🔬 AI teleprompter ft.

15,005 görüntüleme • 6 ay önce

Playing around with 'use cache' for a new guide I'm working on. Put together some basic examples at the route, component, and function level. Also gave the playground a glow-up: tweaked the design, added Geist and images, and the gradient borders are finally out, sooo 2022 💁‍♀️

Playing around with 'use cache' for a new guide I'm working on. Put together some basic examples at the route, component, and function level. Also gave the playground a glow-up: tweaked the design, added Geist and images, and the gradient borders are finally out, sooo 2022 💁‍♀️

16,939 görüntüleme • 1 yıl önce