TPAC2021/Demos and Group updates

From W3C Wiki
Jump to: navigation, search

An opportunity to discover what W3C groups are working on and how that works intersect with other Web technologies. The group updates and demos are provided as pre-recorded videos - among other things, they can be useful background materials for TPAC breakouts and/or group meetings.


  • September 15, 2021: Indicate your interest to record a group update and/or a demo to and ; include a title, a description, the W3C group behind the relevant technical work, and the contact person responsible for getting the video recorded
  • September 27, 2021: Videos expected to be shared with and
  • [DONE!] October 1st, 2021: Videos uploaded to TPAC 2021 Web site

Proposed Demos

  1. Improving CSS Architecture with Cascade Layers, Container Queries, Scope - Miriam Suzanne
    • CSS is intentionally contextual, adapting to a range of user needs and interfaces – and the cascade makes that possible. But as the Web becomes more powerful, it’s clear that design engineers need more tools to organize and maintain larger code-bases across larger teams.
      • Cascade Layers will allow authors to manage their own internal cascade logic, without relying entirely on the specificity heuristic or source-order.
      • Container Queries will make it possible for individual elements to adapt based on more localized context, rather than relying on overall viewport dimensions.
      • Scope (still in the early design stage) will allow better targeting of selectors within a particular segment of the DOM, to help avoid naming conflicts across a larger project, or accidental overlap when nesting elements.
  2. Nesting CSS With @nest - Adam Argyle
    • Learn how the new CSS module Nesting 1 works and the syntax it accepts. Learn how it can help centralize context style shifts. Learn how it can help developers from repeating themselves and ship smaller stylesheets.
  3. Virtual Keyboard - Johannes Wilm, Bo Cupp and Anupam Snigdha
    • Have you ever tried to edit text on the Web and it did not work as smoothly as you would like to? The mission of the Web Editing WG is to explore limitations in existing browser primitives to provide use cases for new APIs and to suggest solutions for text editing.
  4. Web Neural Network API Performance Comparison - Wanming Lin
    • Compare the performance of WebNN API native implementation with the polyfill (WebGL/Wasm) implementation.
  5. Open UI: A year in review - Daniel Clark, Mason Freed, and Dave Rupert
    • Open UI has been hard at work over the past year on moving the web platform to improve the developer and user experience of creating web UI. This video gives a glimpse into this future going over <select> dropdowns, a new <popup> element and research into potentially a standardized tab UI solution.
  6. WebXR - Ada Rose Cannon
    • This demo introduces new features of WebXR: hit-testing, lighting estimation, depth sensing API, XR anchors and WebXR Navigation.
  7. Dataset Exchange Working Group update - Peter Winstanley
    • This video describes the background and ongoing work of the Data Exchange Working Group (DXWG), developing the 3rd version of the Data Catalog Vocabulary (DCAT), a pillar of publishing datasets on the Web.
  8. Browser testing and Tools update - James Graham
  9. Tips for integrating your PWA into your desktop environment - Diego González
    • Using a combination of standardization efforts happening from WICG to WebApps, Progressive Web Applications (PWAs) can integrate into their host operating system in seamless and useful ways. Diego walks through 10 features that integrate a demo PWA into Windows 11.
  10. Multicast for the Web - Jake Holland
  11. Reffy, a tool to analyse Web specifications - François Daoust
  12. Web Apps - Marcos Caceres

Best Practices for Recording Videos

Plan the content

  • identify the story
    • demos: what problem is being newly solved? what impact can we expect from the proposed solution?
    • group updates: what is the group? what impact does it seek to have and is actually having on the Web?
  • make it accessible - follow the accessibility considerations when planning, scripting, storyboarding well before hitting the record button
  • plan for a short video - aim for 2 minutes if possible for a demo, 3 minutes for a group update
    • think of the demo as a teaser for a deeper technical dive, NOT the deep technical dive itself
    • if part of the process being demonstrated is slow or a bit long, plan on showing an abbreviated or accelerated version of the process
  • write up what you plan to say, keeping acronyms and jargon to a minimum, and explain it when using it
    • demos: show and tell - plan on describing orally what is happening in the demo
  • if you plan on showing code, prepare it so that it can be shown with a large font and clear contrasted colors, and focused on the most relevant code
  • if you plan on showing slides, see guidance on preparing them
  • end the script with indications on where to follow up for people interested in more details or in getting involved

Test your setup

  • ensure your audio setup is clear and crisp
  • if you plan on video-recording yourself speaking:
    • ensure your face will be well-lit, with the camera at eye level
    • ensure the background in front of which you'll record yourself is not distracting
    • memorize as much of your script as possible, or use a teleprompter to read your script while looking at the camera
    • if recording from a mobile device, record in landscape mode

See also audio/video recording guidance

Shooting the video

  • Speak clearly and slowly. No need to rush.
  • especially if reading from your script, make sure to keep your tone lively - imagine you're telling an exciting story to a colleague
  • if you're recording a screen, remove any distracting elements (irrelevant windows and tabs, notifications); if possible, zoom and highlight the most relevant elements
  • If you're video-recording yourself speaking, leave a few seconds before and after you start speaking in recording mode to allow for editing

Submitting the video

Once you're happy with the resulting video, share it with and using one of the on-line systems for sharing large files (e.g. Dropbox, WeTransfer, Google Drive, etc); if you read from a script, please share it with us as it will help with captioning as well. If you screen-recorded slides, please share them as well.