You’ve seen the seamless browser demos: shimmering scatterplots, maps projected on the fly, smoothly scrolling tables with endless data, in-browser arcade games, single-page apps that feel like a desktop app. But on your project, when you press a button it takes more like a second or two to get a response. Your grids stutter. Animations just don’t fire at the right time. How can you make your front-end code fly?

Modern browsers are quite powerful, but without understanding their strengths and weaknesses, it’s easy to write stodgy web pages. In this course, you'll learn how browsers are constructed (network communication, rendering algorithms, event handlers and JavaScript engines) and how to write code to play to those strengths and work around the weaknesses.

In tandem with learning how to leverage your browsers’ strengths and weaknesses, you’ll work through a series of hands-on exercises in JavaScript, HTML, and CSS to take a typical data display from a non-interactive 6-second render time to an animatable 80ms render time—i.e., your render time will increase by almost two orders of magnitude.

Note: Students should be fluent in JavaScript. No back-end knowledge is necessary.

LENGTH: 1 - 2 DaysFORMAT: Lecture with independent exercises and Q&A

Intended Audience

Front-end developers

UI developers

Product owners

Product managers

UX designers

Executive management with oversight responsibility

Customizable Highlights

Learn the anatomy of a browser (including layout and text rendering, graphics rendering, and caches)