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 Summit

React Summit 2024

Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.

There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building structures with nested interactive elements, and unfortunately, some of them are completely inaccessible.  In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Nested Interactive Elements: A Nightmare in Accessibility

Cat Johnson

JS Nation

JSNation 2024

JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.

The ever-expanding landscape of JavaScript applications has now reached the big screen - yes, you heard it right, you can build TV apps with JavaScript!  The TV operating space is a mess; there’s more fragmentation than the Android ecosystem, and that’s saying something. Each manufacturer has tried to reinvent the wheel by making their own OS. At the moment, the main players are Android TV, tvOS, WebOS, Tizen, among a whole myriad of others.  This makes it a unique place where Javascript and web technologies can become a uniting factor and save you from the stress of trying to develop and maintain handfuls of apps for the big screen.  We’ll talk about how to build TV apps, what JS frameworks can help in this, and explore the challenges that come hand-in-hand with TV app development, namely performance bottlenecks and focus management using remote controls.

JS on the Big Screen: Making TV Apps

Mo Khazali

Being technically included leads to better results and UIs. Incorporating multiple team members comes with challenges and compromises. The evolution of tools and technologies has standardized industry practices. Closing the gap between developers and designers requires collaboration and a common source of truth. Embracing change and building trust can improve collaboration between developers and designers.

The design-development gap hurts your React projects: slower timelines, compromised quality, and repetitive handoffs. This talk explores the origins of this problem, the differences in language and environment, and offers solutions through processes, tools, and collaboration. Discover how including designers throughout the implementation process helps developers reduce friction, speed updevelopment, and deliver exceptional UIs.

Technically Included (The Best Kind of Included)

Tom Raviv

DevOps.js

DevOps.js Conf 2024

The Turboverse focuses on making the development process faster and more efficient. TurboPak is an incremental bundler with function-level caching, and TurboRepo is a high-performance build system with features like incremental building, remote caching, and parallel execution. TurboRepo can optimize task runners, set up monorepos, and speed up development time. vclink-repo enables seamless integration with the Vercel remote cache, and Conformance and Codoners provide static analysis and automated code reviews. TurboPak and TurboRepo offer faster CI processes and exciting advancements in web bundling.

Iteration velocity is the key to unlocking the potential of your technical teams and business. In this talk, we'll build the groundwork for a highly scalable monorepo using Turborepo and talk about the philosophies behind architecting codebases for teams of all scales. Through the power of Remote Caching, we'll never do the same work twice and we'll deliver your applications at the speed of Turbo.

Ship Your UI Faster With Turborepo

Anthony Shew

React Summit US

React Summit US 2023

Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.

At Canva, we help 150 million + monthly users create and design. How do we enable developers to do the same? Intro Canva's Apps SDK, which is built to empower developers to efficiently create UIs for their Canva Apps using React. Canva recently streamlined the app creation process by compiling some of the most frequently used and requested UI components by our developers in our @Canva /app-ui-kit package. I'll be sharing how we iterated upon our Apps SDK to empower developers globally to build their brand into Canva.

#UX UI