Snippy Summary logo Snippy Summary
Sign in
← Back to Summaries

Snippy Summary

Building desktop apps with React? Try this! (Electron or Tauri)

September 23, 2025 07:38
The Diary Of A CEO avatar
The Diary Of A CEO
Visit channel →

YouTube Video Summary: Making Web Apps Feel Native

This video explores techniques for making web applications built with technologies like React and Electron feel more like native desktop applications. The presenter uses a personal project, "Hubble," which aims to mimic the appearance and behavior of Apple Notes, as a practical example.

Main Points

The summary focuses on two key areas: scroll behavior and tooltips, with an additional bonus on title bar effects.

Scroll Behavior [0:31-5:44]

  • The Problem: Nested scrollable views in web apps, when scrolled past their boundaries, can cause "janky" or "bouncy" behavior that pulls the entire page along, breaking the native feel. This is often due to the default overflow and overcroll-behavior properties.
  • Understanding overcroll-behavior:
    • auto (default): Allows scroll events to bubble up to parent elements [3:07]. This can lead to unintended page scrolling.
    • none: Prevents scrolling from bubbling up, stopping the "jiggle" effect but can also remove desired native bounce [1:33].
    • contain: The recommended solution for nested scroll views. It contains scroll events within the element, allowing for natural bouncing at the boundaries without affecting parent elements [3:38, 4:09].
  • Implementation:
    • Apply overScroll-behavior: contain; to scrollable elements, often at the root of the app and specific components like navbars or editors.
    • In Tailwind CSS, this translates to overScroll-behavior: contain; [4:09].
  • Browser Nuances:
    • The contain property for native-feeling bounce only works in Safari [4:41].
    • In Electron apps (using Chrome's rendering engine), this behavior will be absent, resulting in a hard "brick wall" stop instead of a bounce [5:11]. Slack and Discord, for example, do not have this bouncy effect because they use Chrome [5:30].

Tooltips [5:42-7:52]

  • Native Behavior: Native macOS apps like Apple Notes display tooltips after a short delay (1-2 seconds) when hovering over buttons. Once a tooltip is shown, subsequent tooltips appear almost immediately [5:42].
  • The Simple Solution: The presenter advocates for using the native HTML title attribute for tooltips. This requires no external libraries and provides a native look and feel with the default delay behavior [6:15, 6:46].
  • Accessibility: For icon buttons, it's crucial to ensure accessibility for screen readers. While the title attribute works for visual tooltips, it may not always be exposed to screen readers. Therefore, it's recommended to also use a screen reader-specific element or the aria-label attribute [7:18]. The presenter created a wrapper component to handle this automatically.
  • Customization (Optional): For more advanced styling and duration control, libraries like Radix UI or Shadcn UI can be used on top of the title attribute [6:46]. However, the presenter emphasizes prioritizing native platform conventions.

Bonus: Title Bar Scroll Effect [8:21-9:25]

  • Concept: Mimicking the subtle visual cues seen in apps like Apple Notes where a divider appears on the title bar as the user scrolls down or hovers over it. This creates a seamless integration between the content and the title bar.
  • Implementation:
    • Get a reference to the scrollable container (e.g., the editor view).
    • Add a scroll event listener to this container.
    • When the scroll position is greater than zero, set a state variable (e.g., isScrolled).
    • Use CSS or Tailwind classes to conditionally display a divider or apply other visual effects to the title bar based on this state.
    • A similar effect can be achieved on hover over the title bar.

Key Takeaways

  • Prioritize Native Feel: The goal is to make web apps indistinguishable from native applications on the user's operating system.
  • overScroll-behavior: contain; is crucial: Use this CSS property to manage scroll behavior in nested scrollable views, especially in Safari. Be aware of its limitations in other browser engines.
  • Leverage Native HTML: The title attribute is a powerful, library-free way to implement native-looking tooltips.
  • Accessibility is Paramount: Always consider screen reader support for interactive elements like icon buttons.
  • Small Details Matter: Subtle effects like title bar dividers and hover states contribute significantly to a polished native experience.

The presenter invites viewers to join their journey of building "Hubble" in public on their Twitch stream and subscribe to the YouTube channel for more learnings.