Schedule: Modern Web Essentials sessions

2017 brings a massive change in the tools for laying out websites and applications with CSS. Rachel Andrew offers an introduction to new CSS tools such as Flexbox and Grid and explains how existing methods fit into this new system as well as how to approach support for older browsers. Read more.

Your users are almost certainly vulnerable in one way or another. Mike North explores a series of common web app security pitfalls, first demonstrating how to exploit the vulnerability and then recommending a pragmatic and effective defense against the attack. Buckle up, because Mike's about to take some things you love and depend on and smash them to bits. Read more.

Offline web applications with native performance are no longer a myth. Islam Sharabash explains how to architect an application that loads offline, persists data to disk, and even resolves conflicts in data and shares the challenges he encountered, including managing optimistic updates, syncing, and performance on a single thread, and the solutions that worked best. Read more.

Content Security Policy (CSP) is a powerful and complex standard that allows you to bring an additional level of security to your web applications. Ilya Nesterov outlines the not-so-obvious things that lead to weak CSP, illustrates typical mistakes in CSP, based on the Alexa top 1 million sites, and explains how you can build strict CSP in your own projects. Read more.

Rachel Andrew shares a modern roadmap for browser support that enables you to create sites that can enhance themselves as the platform improves—without leaving people stuck on older browsers in the cold. Read more.

There are more options than ever for animating things on the web. Bryan Braun leads a tour of the web animations ecosystem, comparing animation approaches in detail and exploring the principles that transcend them all. To do this, Bryan uses lessons learned from building and maintaining Bouncy Ball, a project that compares web animation approaches (think, a TodoMVC for web animation). Read more.

Laura Carvajal explains how her team introduced accessibility to the Financial Times website, FT.com, and shares lessons learned along the way as well as practical solutions you can implement in your project today, regardless of available time, resources, or support. Read more.

Web Push allows real-time notifications to be delivered to an app even if the app is not currently in the foreground. Web apps that use Web Push have higher user engagement, which can impact sales. Olga Petrova explains how to implement Web Push in your existing application and shares best practices. Read more.

Building linear layouts in CSS has been hard. Tables are bad, inline-block has quirks, and floats are insufficient. Thankfully CSS Flexbox enables us to elegantly solve our layout problems. Ben Ilegbodu dives into Flexbox, covering what it is, why you should use it, how it’s configured, and where it’s most useful. Read more.