MicroPosts

• Update npm dependencies interactively

  $ npx npm-check-updates --interactive
  
  ? Choose which packages to update ›
    ↑/↓: Select a package
    Space: Toggle selection
    a: Toggle all
    Enter: Upgrade
  
  ❯ ◉ @docusaurus/core                       ^3.7.0  →   ^3.8.1
    ◉ @docusaurus/module-type-aliases        ^3.7.0  →   ^3.8.1
    ◉ @docusaurus/plugin-client-redirects    ^3.7.0  →   ^3.8.1
    ◉ @docusaurus/preset-classic             ^3.7.0  →   ^3.8.1
    ◉ @docusaurus/tsconfig                   ^3.7.0  →   ^3.8.1
    ◉ @types/react                         ^18.3.20  →  ^19.1.8
    ◉ @types/react-dom                      ^18.3.6  →  ^19.1.6
    ◉ react                                 ^18.3.1  →  ^19.1.0
    ◉ react-dom                             ^18.3.1  →  ^19.1.0
  

• Horizontally scroll to center an element

  <div class="width-full overflow-x-auto">
    <div>...</div>
    <div>element</div>
    <div>...</div>
  </div>
  

  const viewportWidth =
    Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
  
  container.scrollLeft =
    element.offsetLeft // scroll to the left edge of element
    + element.offsetWidth / 2 // scroll to center of element
    - viewportWidth / 2 // scroll back half the viewport