The Untouchable Web
summary
Shows a concrete engineering checklist: implements a reusable touchable component with hit slop (example 50px), pointer and touch handlers, keyboard support and disabled/tabindex logic, cancel-on-drag logic, and a 300ms delay to avoid scroll-activation. Calls out platform quirks (Safari sticky hover), explains why mouse emulation breaks CSS hover, and cites React Native Web plus Twitter's single PWA deployment as evidence that these patterns scale across devices. Explains what was built and which hacks remain.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:26Interactions Matter
- 2:58Demo
- 4:12Importing React
- 5:00Hover
- 6:00Hooks
- 7:07Touch Events
- 8:33Keyboard Events
- 9:09Disable
- 13:58Scroll
- 14:58Stylus Support
- 15:48React Native Web
related talks
18mGetting Touchy Feely with the Mobile Web
44mDeveloping for touch
28mTricks and hacks for a more native feel in a mobile browser
23mBeyond Responsive Design: Building Mobile-Optimized Websites in React
44mThe Input Shouldn't Matter - Building for Adaptive Input Experiences
25mProgressive Web Animations
44mModern UI Patterns
41mBack to the future: of web development