Today I Learned

Today I Learned

This is my first TIL entry. TIL (Today I Learned) entries are short notes about things I learn during my development journey.

What I Learned Today

• How to set up a TIL section in my portfolio
• The importance of documenting daily learnings
• How to format TIL entries properly

Why TIL?

TIL entries help track learning progress and serve as a quick reference for future needs. They're concise, focused, and practical.

Next.js 14 Metadata Best Practices

Today I learned about the proper way to handle metadata in Next.js 14, especially with the new app router.

Key Points

1. Metadata can't be exported from client components (those with 'use client' directive)
2. Best practice is to create a separate metadata file
3. Use layout.tsx for applying metadata to entire sections
4. Can be static or dynamic using generateMetadata

Example Code

// metadata.ts
export const metadata = {
  title: 'My Page',
  description: 'Page description'
}
 
// layout.tsx
import { metadata as pageMetadata } from './metadata'
export const metadata = pageMetadata

This approach keeps the concerns separated and follows Next.js best practices for SEO optimization.

Tailwind CSS Dark Mode with Next.js

Today I learned how to implement a clean dark mode solution using Tailwind CSS in a Next.js application.

Implementation Steps

1. Configure Tailwind:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

2. Add dark mode toggle:

const [darkMode, setDarkMode] = useState(false)
 
useEffect(() => {
  document.documentElement.classList.toggle('dark', darkMode)
}, [darkMode])

3. Use in components:

<div className="bg-white text-black dark:bg-neutral-900 dark:text-white">
  Content
</div>

Key Takeaways

• Use 'class' strategy for more control
• Persist preference in localStorage
• Add transition classes for smooth switching
• Consider using next-themes package for SSR support

This approach provides a seamless dark mode experience with minimal configuration.

TypeScript satisfies Operator

Today I learned about the 'satisfies' operator in TypeScript and how it improves type checking while maintaining type inference.

What I Learned

The 'satisfies' operator allows you to validate that a value matches a type without widening the inferred type.

Example Usage

type ColorMap = {
  [K: string]: [number, number, number]
}
 
// Without satisfies
const colors = {
  red: [255, 0, 0],
  green: [0, 255, 0],
  blue: [0, 0, 255]
} // Type is inferred but not validated against ColorMap
 
// With satisfies
const colors2 = {
  red: [255, 0, 0],
  green: [0, 255, 0],
  blue: [0, 0, 255]
} satisfies ColorMap
// Type is both inferred AND validated

Benefits

1. Catches type errors at declaration
2. Preserves literal types
3. Better autocomplete support
4. No type widening

This operator is particularly useful when working with configuration objects and type-safe APIs.