Uploads from Xah Lee

Currently Playing: Xah Talk Show Ep787. emacs. add width height to all thumbnails. Cumulative Layout Shift

Video Summary (Generated by AI, Edited by Human.) • In this video, Xah Lee discusses his technical plan to retroactively add width and height attributes to image tags across his personal website, which contains approximately 12,000 HTML pages (32:20). • He explains that he had previously removed these attributes to keep his source code clean, but now realizes they are necessary to prevent Cumulative Layout Shift (CLS)—a common web development issue where page content unexpectedly shifts during loading (34:30). Key concepts covered: • Cumulative Layout Shift (CLS): The author explains how omitting image dimensions causes browsers to re-render the layout as images load, negatively impacting the user experience (34:30 - 38:00). • Emacs Lisp Coding: The video features the author navigating his codebase using his custom Xah Fly Keys system. • He demonstrates various Emacs commands, including how to manipulate HTML tags and extract urls (7:45, 19:15, 23:35). • Efficiency and Workflows: The author reflects on his preference for using his own tools, such as his custom HTML mode, rather than relying on third-party solutions (19:25). • Potential Solutions: He outlines two primary technical approaches for the migration: either processing files to replace existing tags with updated ones using custom Lisp functions or building a database (hash table) of image dimensions to programmatically inject attributes into existing tags (57:05 - 59:20). • Throughout the video, the author also digresses into topics like the history of various keyboard layouts (Dvorak, Colemak, etc.), the benefits of his specific key-binding system, and some personal reflections (8:05 - 12:50, 15:20).