Frontend

CSS Grid vs Flexbox: When to Use What

August 2024

CSS Grid vs Flexbox: When to Use What

Understanding the differences between CSS Grid and Flexbox for modern layouts.

Use Flexbox For:

  • One-dimensional layouts (rows OR columns)
  • Component-level design
  • Centering content
  • Navigation bars

Use CSS Grid For:

  • Two-dimensional layouts (rows AND columns)
  • Page-level design
  • Complex layouts
  • Card grids
/* Flexbox for navigation */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid for main layout */
.layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
}

Both are powerful tools - use them together!

Read More

React Hooks Complete Guide

July 2024

React Hooks Complete Guide

Master React Hooks with practical examples and best practices.

Essential Hooks

useState

const [count, setCount] = useState(0);

useEffect

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useContext

const theme = useContext(ThemeContext);

Custom Hooks

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key) || initialValue;
  });
  
  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, newValue);
  };
  
  return [value, setStoredValue];
}

Hooks make React development so much cleaner!

Read More