C3 Dev Festival

C3 Dev Festival 2024

This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.

Less Cruft, More Power: Leverage the Power of the Web Platform

Una Kravets

React Advanced

React Advanced 2023

This talk explores the challenges and guidance for building well-designed popovers and dialogues in HTML. It discusses the differences between dialogues and popovers, their use cases, and the importance of semantics in differentiating them. The talk also covers UI considerations, implementation, and positioning of popovers. Additionally, it highlights the use of modals for blocking access to the rest of the page and the role of semantics in making accessible dialogues and popovers.

You've probably build one of these before: tooltips, date pickers, menus, teaching UI… they're all examples of “popover” content. Good news: it's going to get a whole lot easier to build these, with some proposed web platform features. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, when to use modality and access to the top layer.

How Popovers Are About to Become a Whole Lot Easier to Build

Hidde de Vries

Vue.js Live Conference

Vue.js London 2023

Today's Talk focused on making single-page applications more accessible. It highlighted the importance of web accessibility for all users, including those with disabilities and different circumstances. The Talk discussed common accessibility issues in single-page applications, such as dynamic content loading and page refreshing, and provided solutions to address them. It also demonstrated the implementation of LiveRegion and user answer composable in Vue.js to improve accessibility. Additionally, the Talk emphasized the need to enhance routing, navigation, and component selection for better accessibility. Lastly, it mentioned the use of the View App Setting plugin to check for accessibility issues in development.

This talk is going to provide recommendations to make a single page application accessible. The talk is not going to cover the basic of accessibility, like adding ALT text or using correct HTML elements, but it is going to cover major shortfalls existing in our SPA.In no particular order, this talk is going to cover the following topics:<ul><li>- Provide a list of resources (blog, book and people to follow)</li><li>- Introduce the issue with SPA with a live example</li><li>- Describe and solve issues with Routing issue in SPA</li><li>- Describe and solve issues with dynamic changes in a Vue app</li><li>- A quick intro to correct HTML element (and how to leverage Vue for this)</li><li>- Describe and fix Browser history</li></ul>

Let’s Make Our Single Page Application Accessible

Simone Cuomo

JS Nation

JSNation 2022

This Talk discusses the new features of Modals and focus management in web development. The dialogue element allows for the creation of modal dialogs that appear on top of other elements and prevent interaction with elements below. The note element can mark a subtree of the DOM as inert, making it unusable. The field set component can group input elements together and disable them. Using these new primitives can improve focus control and user experience in web applications.

With *dialog* and the inert attribute landing in all major browsers in 2022, we as web developers now have simple yet powerful primitives to help build complex app-like flows on the web, rather than the over-engineered or leaky solutions we've relied on for years. Let's demystify these primitives and talk through how they make your code simpler: from plain HTML, Web Components, to React/similar.

#html