My Notes

This is my first note. I'm excited to share quick thoughts and ideas here.

The design of this notes system is inspired by Andrew Healey's notes.

Here are some Vim tips I use daily:

" Quick window navigation
nnoremap <C-h> <C-w>h
nnoremap <C-j> <C-w>j
nnoremap <C-k> <C-w>k
nnoremap <C-l> <C-w>l
 
" Better search
set incsearch
set ignorecase
set smartcase

These mappings make window navigation much smoother. I've also added them to my dotfiles.

The search settings make Vim's search more intuitive:

• incsearch: Show matches as you type
• ignorecase: Case-insensitive search
• smartcase: Case-sensitive if you use uppercase

I've been working on optimizing images in my Next.js projects. Here's a useful pattern I found:

import Image from 'next/image'
 
function OptimizedImage({ src, alt, width, height }) {
  return (
    <div className="relative aspect-video">
      <Image
        src={src}
        alt={alt}
        fill
        className="object-cover"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        priority={false}
      />
    </div>
  )
}

This component:

• Uses fill for responsive images
• Maintains aspect ratio with aspect-video
• Optimizes loading with sizes attribute
• Lazy loads by default

I've added this to my portfolio for better image handling.

The sizes attribute helps Next.js generate the right image sizes for different viewport widths, improving performance and reducing bandwidth usage.

I've been using Tailwind's dark mode feature extensively. Here's a useful pattern for handling dark mode transitions:

function ThemeToggle() {
  const [theme, setTheme] = useState('light')
  
  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      className="
        p-2 rounded-lg
        bg-neutral-100 dark:bg-neutral-800
        text-neutral-900 dark:text-neutral-100
        transition-colors duration-200
        hover:bg-neutral-200 dark:hover:bg-neutral-700
      "
    >
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
  )
}

Key features:

• Smooth transitions with transition-colors
• Consistent hover states in both modes
• Accessible color contrast
• Simple implementation

I've implemented this in my portfolio for a better dark mode experience.

The duration-200 class ensures the transition is smooth but not too slow, while the hover states provide good visual feedback.