Xah Talk Show 2026-06-08 Ep790. CSS pie chart, attr function
Video Summary (Generated by AI, Edited by Human.)
In this episode of Xah Talk Show (0:00 - 20:20), Xah Lee live-codes a CSS pie chart and demonstrates the use of the attr() CSS function. The session is informal, featuring live coding in Emacs while discussing web development techniques.
Key Highlights:
- Conic Gradients: Xah explains how to create pie charts using the conic-gradient property in CSS (4:38, 13:45).
- The attr() Function: He explores using the attr() function combined with pseudo-elements (::before or ::after) to dynamically pull and display HTML attribute values as text (9:54, 13:11, 14:35). He notes that while this is a clever trick for displaying code/values, it has limitations, such as preventing users from easily copying the generated text (15:38, 18:04).
- Workflow and Tools: Xah shares his coding environment, including his use of Emacs, the Dvorak keyboard layout, and custom keyboard shortcuts for efficient web development (3:45, 18:56).
- Practical Tips: He discusses the importance of making tutorial code easy for viewers to copy and paste, leading him to move away from pseudo-element content in favor of standard HTML/CSS blocks for his site's documentation (18:16 - 19:59).