Today I Learned

// Before: Manual optimization
const value = useMemo(() => expensive(a, b), [a, b]);

// After: Just write normal code
const value = expensive(a, b);
// Compiler handles memoization automatically!

const response = await anthropic.messages.create({
  model: "claude-3-5-sonnet-20241022",
  tools: [
    { type: "computer_20241022" },
    { type: "text_editor_20241022" },
    { type: "bash_20241022" }
  ],
  messages: [{ role: "user", content: "Set up a React project" }]
});

@import "tailwindcss";

@theme {
  --color-brand: oklch(65% 0.25 250);
  --font-display: "Cal Sans", system-ui;
}

# Install on Windows
powershell -c "irm bun.sh/install.ps1 | iex"

# 7.5x faster than npm install
bun install

// Native AI streaming
import { streamText } from 'next/ai';

// Component-level caching
export default async function Analytics() {
  'use cache';
  'use revalidate 3600';
  return <Dashboard data={await fetchData()} />;
}

.trigger {
  anchor-name: --tooltip-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --tooltip-anchor;
  bottom: anchor(top);
  left: anchor(center);
}

const component = await v0.generate({
  prompt: "Create a pricing page",
  designSystem: "./design-tokens.json",
  componentLibrary: "shadcn",
  framework: "next"
});

User: "Add a comments table with user references"

AI generates:
- SQL migration
- RLS policies
- TypeScript types
- Edge function for notifications

// Use npm packages directly
import express from "npm:express";
import { PrismaClient } from "npm:@prisma/client";

const app = express();
const prisma = new PrismaClient();

@view-transition {
  navigation: auto;
}

.hero-image {
  view-transition-name: hero;
  view-transition-class: image-transition;
}

// Inferred type predicates
function isString(x: unknown) {
  return typeof x === "string";
}
// Now automatically infers: x is string

// Path aliases in package.json
// No more tsconfig paths!

npx shadcn@latest add drawer
npx shadcn@latest add carousel
npx shadcn@latest add chart
npx shadcn@latest add kanban

// Enable PPR in next.config.js
experimental: {
  ppr: true
}

// Use Suspense for dynamic parts
<Suspense fallback={<Skeleton />}>
  <DynamicComponent />
</Suspense>

const response = await openai.chat.completions.create({
  model: "gpt-4o",
  response_format: {
    type: "json_schema",
    json_schema: {
      name: "user_info",
      schema: { type: "object", properties: { name: { type: "string" } } }
    }
  }
});

const channel = supabase.channel('room-1')

// Subscribe
channel.on('broadcast', { event: 'cursor' }, (payload) => {
  console.log(payload)
}).subscribe()

// Send
channel.send({ type: 'broadcast', event: 'cursor', payload: { x: 100, y: 200 } })

node --experimental-strip-types app.ts

export const handler = awslambda.streamifyResponse(
  async (event, responseStream) => {
    responseStream.write("Starting...");
    // Process data
    responseStream.write("Done!");
    responseStream.end();
  }
);

// Instead of sending full query
// Send hash: "abc123"

// Server looks up query from hash
const query = persistedQueries.get("abc123");

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,
  (state, newLike) => [...state, newLike]
);

async function handleLike() {
  addOptimisticLike({ id: Date.now() });
  await likeAction(); // Server Action
}

// supabase/functions/hello/index.ts
Deno.serve(async (req) => {
  const { name } = await req.json();
  return new Response(JSON.stringify({ message: `Hello ${name}!` }));
});

const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [{
    role: "user",
    content: [
      { type: "text", text: "Identify UI bugs in this screenshot" },
      { type: "image_url", image_url: { url: screenshotUrl } }
    ]
  }]
});

import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

const client = new BedrockRuntimeClient({ region: "us-east-1" });
const response = await client.send(new InvokeModelCommand({
  modelId: "anthropic.claude-3-sonnet",
  body: JSON.stringify({ prompt: "Hello" })
}));

subscription {
  messagesCollection(filter: { room_id: { eq: "123" } }) {
    edges {
      node {
        id
        content
      }
    }
  }
}

import { test } from 'node:test';
import assert from 'node:assert';

test('snapshot test', (t) => {
  t.assert.snapshot({ foo: 'bar' });
});

const prompt = `Analyze this FHIR Patient resource and summarize:
- Active conditions
- Current medications
- Recent lab results

${JSON.stringify(fhirPatient)}`;

// Now you must explicitly opt-in to caching
fetch(url, { cache: 'force-cache' });

// Or at route level
export const dynamic = 'force-static';

// Create directory bucket
aws s3api create-bucket \
  --bucket my-bucket--use1-az4--x-s3 \
  --create-bucket-configuration '{"Bucket":{"Type":"Directory"}}'

-- Enable vector extension
create extension vector;

-- Create table with embedding column
create table documents (
  id serial primary key,
  content text,
  embedding vector(1536)
);

-- Similarity search
select * from documents
order by embedding <=> '[0.1, 0.2, ...]'
limit 5;

const assistant = await openai.beta.assistants.create({
  model: "gpt-4o",
  tools: [
    { type: "code_interpreter" },
    { type: "file_search" }
  ],
  tool_resources: {
    file_search: { vector_store_ids: ["vs_123"] }
  }
});