Building a Better Web
June 11–12, 2018: Training
June 12–14, 2018: Tutorials & Conference
San Jose, CA

Schedule: Web Foundations: CSS, HTML, JS, Node sessions

9:00am–12:30pm Tuesday, June 12, 2018
Learn React by building a game
Location: 210 A/E
Samer Buna (jsComplete)
Average rating: ***..
(3.67, 9 ratings)
Join Samer Buna to learn fundamental and advanced React concepts as you build a fun, simple in-browser game. Read more.
1:30pm–5:00pm Tuesday, June 12, 2018
Testable React
Location: 210 A/E
Secondary topics:  Hands-on
Pete Hodgson (Independent)
Average rating: ***..
(3.83, 6 ratings)
Join expert Pete Hodgson to get started with React on the right foot. Pete focuses on React fundamentals explained through two big ideas—testability and stateless components—as you learn how to build industrial-grade React apps. You’ll leave with hands-on knowledge of the major moving parts of React along with experience using tools and techniques for testing your React code. Read more.
1:30pm–5:00pm Tuesday, June 12, 2018
Creating modern page layouts with CSS Grid
Location: 210 C/G
Secondary topics:  Hands-on
Jen Kramer (Harvard University Extension School)
Average rating: ****.
(4.83, 6 ratings)
CSS Grid is the brand-new spec available in the latest browsers. Jen Kramer details Grid's basic syntax, using a layout of a Mondrian painting as an example, and explores alternative Grid syntaxes as well as nested and offset grid layouts. Jen concludes by walking you through combining Flexbox and Grid to solve a web page layout problem. Read more.
9:50am–10:30am Wednesday, June 13, 2018
Discover the WebXR Device API (sponsored by Intel)
Location: 211 C/D
Secondary topics:  Hands-on, Technical
Alexis Menard (Intel)
Alexis Menard offers an overview of the WebXR Device API (formerly known as WebVR 2.0) and explains how to build a VR experience on the web from scratch. You'll get familiar with VR concepts, learn how to use them with the WebXR Device API, and discover how to port your existing WebVR 1.1 experience if you already have one. Read more.
11:00am–11:40am Wednesday, June 13, 2018
.CSS { display: What? }
Location: 212 A/B
Secondary topics:  Developer Experience Track: Tools, Platforms, and Techniques, Technical
Martine Dowden (Andromeda)
Average rating: ***..
(3.33, 3 ratings)
With over 40 possible values for the display property, it's no wonder that CSS can be tricky, especially for layouts. Martine Dowden offers an overview of the display property and demonstrates how to use it to lay out content. Read more.
3:35pm–4:15pm Wednesday, June 13, 2018
How to build a real-time app without losing your soul
Location: 212 A/B
Secondary topics:  Hands-on, Technical
Matthew Larson (FamilySearch), Ian James (FamilySearch)
Average rating: ***..
(3.50, 4 ratings)
Many popular services employ real-time data to engage users, but traditional web technologies like REST and Ajax were not designed for the real-time web. Matthew Larson and Ian James share an alternative approach to real-time data that is easier to understand and scales well using Redux and WebSockets and demonstrate these principles in action with a real-time multiplayer game. Read more.
9:00am–9:40am Thursday, June 14, 2018
It's not dark magic: Pulling back the curtains from your stylesheets
Location: 210 A/E
Secondary topics:  Best practice, Developer Experience Track: Tools, Platforms, and Techniques, Technical
Aimee Knight (Built Technologies)
Average rating: ****.
(4.25, 4 ratings)
All too often developers are left completely puzzled when the browser renders CSS in ways they didn’t expect. But it’s not dark magic; we know that computers are just parsing our instructions. While many talks discuss how to fix common bugs, Aimee Knight focuses on the reasons behind them, leading a deep dive into browser internals to see how our styles are parsed and rendered. Read more.
11:00am–11:40am Thursday, June 14, 2018
EME? CDM? DRM? CENC? IDK!
Location: 210 D/H
Secondary topics:  Case study, Developer Experience Track: Tools, Platforms, and Techniques, Hands-on
Sebastian Golasch (Deutsche Telekom)
Average rating: *****
(5.00, 1 rating)
Once there was the "video" tag, but content distributors decided it wasn't enough. They wanted more—more power, more protection, more control—so encrypted media extensions were born, and digital rights management appeared in our browsers. Sebastian Golasch walks you through the technical details behind EMEs, CDMs, and DRM by reverse engineering and building a Netflix video player. Read more.