Speaking Engagements
Over the last decade, I have presented talks and workshops on multiple facets of web design and development.
Biography
Jonathan Snook is a designer and developer from Ottawa, Canada. Snook's 20+ year career includes working at agencies, product companies, and his own business. Currently working for Abstract, he has also worked with Yahoo!, Shopify, Apple, Delta Airlines, AOL, Squarespace, and Xero. He writes at Snook.ca. He has also written for A List Apart, 24ways, and .net magazine, and has co-authored two books, The Art and Science of CSS and Accelerated DOM Scripting. Snook has also authored and received world-wide acclaim for the self-published book, Scalable and Modular Architecture for CSS, sharing his experience and best practices on CSS architecture.
Mini-bio
Snook is a designer and developer from Ottawa, Canada, working at Abstract. Previously at Shopify and Yahoo!. He writes at Snook.ca and has written the successful, self-published book, Scalable and Modular Architecture for CSS.
Photos
History of Events
Responsive Web Applications with Container Queries
How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?
With a focus on Container Queries, we’ll look at the approach the Shopify Admin team used, from design to development, to manage the intricate interactions between all the application’s components, pulling off a fully fluid responsive design in under a month.
We’ll also look at how this approach is currently being used at Xero to achieve unity between disparate tech stacks and to speed up the development process.
| Date | Location |
|---|---|
| 2017, Nov 30-Dec 1 | dotCSS Paris, France |
| 2017, Oct 9-11 | CSS Dev Conf New Orleans, LA |
| 2017, May 26-27 | Frontend United Athens, Greece |
| 2017, April 26–28 | Squares Grapevine, Texas |
| 2016, October 25–26 | Smashing Conf Barcelona, Spain |
| 2016, October 17-19 | CSS Dev Conf San Antonio, Texas |
| 2016, September 5 | Generate Sydney, Australia |
| 2016, May 11 | CSSConf Budapest Budapest, Hungary |
Workshop: Scalable and Modular Architecture for CSS
This workshop will shift how you think about writing CSS. It will simplify your code, making your project easier to manage, and allowing it to grow without creating an increasingly brittle system of dependencies. Your code will also be more portable, making it easier to use components in various contexts and in other projects.
| Date | Location |
|---|---|
| 2012, March 1 | Ottawa, Canada |
| 2012, March 15 | Essen, Germany |
| 2012, May 18 | Atlanta, Georgia |
| 2012, June 1 | Philadelphia, PA |
| 2012, June 14 | Vancouver, BC |
| 2012, June 21 | Portland, Oregon |
| 2012, September 6 | dConstruct in Brighton, England |
| 2012, September 19 | Smashing Conference in Freiburg, Germany |
| 2013, January 21 | Online |
| 2013, January 22 | Online |
| 2013, July 24 | Breaking Development in San Diego, California |
| 2013, October 1 | Smashing Workshops in Berlin, Germany |
| 2013, October 23 | CSS Dev Conf in Estes Park, Colorado |
| 2014, February 10 | Webstock in Wellington, New Zealand |
| 2014, May 1 | ConvergeSE in Columba, SC |
| 2014, June 16 | Smashing Conference in New York, New York |
| 2014, October 13 | CSS Dev Conf in New Oreans, LA |
| 2015, May 20 | Frontend Design Conf in St. Petersburg, FL |
| 2015, June 10 | BDConf in Nashville, TN |
| 2015, October 21 | FrontPorch.io in Dallas, TX |
| 2015, October 28 | CSS Dev Conf in Long Beach, CA |
| 2016, October 19 | CSS Dev Conf in San Antonio |
| 2016, October 27 | Smashing Conf in Barcelona |
| 2017, November 6 | Beyond Tellerrand in Berlin, Germany |
The Future is in Pieces
In the last few years, we've seen an emergence of a modular way of thinking about code and design. We've seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We'll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.
| Date | Location |
|---|---|
| 2015, Aug 28 | Frontend Conference Zurich, Switzerland |
| 2015, Sep 16 | Web Unleashed Toronto, Ontario |
| 2015, Nov 3 | FOWD New York, New York |
| 2015, Dec 5 | CSSDay.io Chandler, Arizona |
Your CSS is a Mess
CSS is easy? CSS is messy! And as a project grows, it only gets messier. You find yourself throwing !important at everything or fighting with long selectors just to get a style to overrule another. This session looks at a few quick tips to help bring things under control.
| Date | Location |
|---|---|
| 2013, April 8–11 | Anglebrackets Las Vegas, Nevada |
| 2013, April 21–23 | FITC Toronto, Ontario |
| 2013, May 3 | Rustbelt Refresh Cleveland, Ohio |
| 2013, May 13–14 | Atmosphere Krakow, Poland |
| 2013, May 20–23 | DrupalCon Portland, Oregon |
| 2013, May 22–24 | WebVisions Portland, Oregon |
| 2013, June 7 | Go Beyond Pixels St. Johns's, Newfoundland |
| 2013, June 17 | HTML5 Denver Users Group Denver, Colorado |
| 2013, September 24 | SmartWeb Bucharest, Romania |
| 2013, September 27 | Revolution Shrewsbury, UK |
| 2013, October 21-23 | CSS Dev Conf Estes Park, Colorado |
| 2014, April 8–11 | Beyond Tellerrand Düsseldorf, Germany |
| 2014, April 8–11 | Software GR Grand Rapids, MI |
Becoming a Deep Generalist
A jack of all trades and master of none. We’re told that we can either go deep on a particular topic or go general. After all, how can someone actually know everything about everything? However, with the right focus and plenty of time, we can become magical unicorns of design and development.
| Date | Location |
|---|---|
| 2013, November 9 | UXCamp Ottawa, Canada |
| 2014, December 11 | Smashing Conf Whistler, BC, Canada |
| 2015, May 21 | Frontend Design Conf St. Petersburg, FL |
How to Write a Book
For many people, as it was for me, writing a book is a feather in their cap. It’s a moment of pride to hold your work in your hands. How to Write a Book looks at the hurdles—technical and otherwise—in writing a tech book including how and why you might self-publish. By the end of the session, maybe you’ll be inspired to write your own book.
| Date | Location |
|---|---|
| 2013, June 17 | HTML5 Denver Users Group Denver, Colorado |
| 2013, June 18 | Interactive Developers of Nashville Nashville, Tennessee |
And More
| Date | Session |
|---|---|
CSS Dev Conf |
CSS Architecture Between frameworks, preprocessors, and package managers, getting a web project off the ground seems to require a lot of tools. Have the days of opening up a single CSS file in a text editor disappeared? This session will look at workflows that can help us work quickly and easily to build a performant and scalable site. |
Generate Conf |
CSS Workflows from the Ground Up Between frameworks, preprocessors, and package managers, getting a web project off the ground seems to require a lot of tools. Have the days of opening up a single CSS file in a text editor disappeared? This session will look at workflows that can help us work quickly and easily to build a performant and scalable site. |
CSS Summit |
CSS Workflows from the Ground Up Between frameworks, preprocessors, and package managers, getting a web project off the ground seems to require a lot of tools. Have the days of opening up a single CSS file in a text editor disappeared? This session will look at workflows that can help us work quickly and easily to build a performant and scalable site. |
CSS Dev Conf |
CSS Architecture Between frameworks, preprocessors, and package managers, getting a web project off the ground seems to require a lot of tools. Have the days of opening up a single CSS file in a text editor disappeared? This session will look at workflows that can help us work quickly and easily to build a performant and scalable site. |
CSS Dev Conf |
Getting your CSS Under Control CSS is easy? CSS is messy. And as a project grows, it only gets messier. This session looks at a few quick tips to help bring things under control. |
LE WEB À QUÉBEC |
Conference Keynote: |
DIGlondon |
Conference Keynote: |
From the Front: The Treasure of Frontend Island |
State-based Design State-based design is a facet of Scalable and Modular Architecture for CSS that examines how we write the CSS for our projects. We’ll look at what a state is and the various ways we can represent and change those states via CSS and JavaScript. |
SmashingConf |
Your CSS is a Mess CSS is easy? CSS is messy. And as a project grows, it only gets messier. This session looks at a few quick tips to help bring things under control. |
Geek Meet |
Your CSS is a Mess CSS is easy? CSS is messy. And as a project grows, it only gets messier. This session looks at a few quick tips to help bring things under control. How to Write a Book A look into why you might write a book and how you can do it, based on my experience on writing books with publishers and self-publishing. |
CSS Summit |
Scalable and Modular Architecture for CSS Find yourself throwing !important at everything? Or fighting with long selectors just to get a style to overrule another? As a project (and team) grows, we fight against the growing complexity of the CSS in our projects. This hour of power will bring you an exploration of the common pain points in CSS development and the techniques that can be used to avoid them. Your CSS will be leaner, meaner, and modular, allowing it to scale to new heights! |
Open Web Camp IV |
Getting your CSS Under Control CSS is easy? CSS is messy. And as a project grows, it only gets messier. This session looks at a few quick tips to help bring things under control. |
ConvergeSE |
Your CSS is a Mess CSS is easy? CSS is messy. And as a project grows, it only gets messier. This session looks at a few quick tips to help bring things under control. |
a11yyow |
Yahoo! Mail A look into how keyboard access was handled on the latest version of Mail. |
StarTechConf |
Fake it 'til you make it: creating mobile apps that feel like native apps |
Adobe MAX |
CSS Takes on the World. In the war chest of the web developer, there is Photoshop, HTML, JavaScript, and, of course, CSS. While CSS started off with a minor role, it is increasingly taking over. This session will review the latest and greatest; how we can apply it to projects right now; and what we can expect to have available to us in the future as CSS continues to take over the world! |
Sidebar Workshops |
Web Design Master Class Join us as we step through a sample project from design through to implementation, touching on HTML, CSS and JavaScript along the way. |
CSS Summit 2011 |
CSS3 vs jQuery Maybe it started off innocently with the hover pseudo selector, but CSS has been slowly creeping onto JavaScript's turf. Now CSS has become much bigger now and is increasingly doing things that we used jQuery for. Jonathan Snook's session will take a look at what CSS3 has to offer and how it compares to using jQuery. |
MoSo Conference |
Participated in group discussions on development within large organizations. |
Sidebar Workshops |
Web Design Master Class Join us as we step through a sample project from design through to implementation, touching on HTML, CSS and JavaScript along the way. |
Interlink Conference |
CSS Takes on the World. In the war chest of the web developer, there is Photoshop, HTML, JavaScript, and, of course, CSS. While CSS started off with a minor role, it is increasingly taking over. This session will review the latest and greatest; how we can apply it to projects right now; and what we can expect to have available to us in the future as CSS continues to take over the world! |
Breaking Development |
Fake it 'til you make it: creating mobile apps that feel like native apps |
Sidebar Workshops |
Web Design Master Class Join us as we step through a sample project from design through to implementation, touching on HTML, CSS and JavaScript along the way. |
CSUN |
Yahoo! Mail A look into how keyboard access was handled on the latest version of Mail. |
Atlanta Web Design Group |
CSS3. Browsers have been making leaps and bounds to support CSS3 but what does that mean exactly? CSS3 is a deep and still-evolving standard that is made of multiple parts. We'll take a look at what those parts are, what browsers currently support, and what we can expect in the future. jQuery vs CSS. Maybe it started off innocently with the hover pseudo selector, but CSS has been slowly creeping onto JavaScript's turf. Now CSS has become much bigger now and is increasingly doing things that we used jQuery for. This session will take a look at what CSS has to offer and how it compares to using jQuery. |
jQuery Summit |
jQuery vs CSS. Maybe it started off innocently with the hover pseudo selector, but CSS has been slowly creeping onto JavaScript's turf. Now CSS has become much bigger now and is increasingly doing things that we used jQuery for. This session will take a look at what CSS has to offer and how it compares to using jQuery. |
Future of Web Design |
The Future of Cross-Platform Front-end Development. Remember when building a site meant only having to worry about Internet Explorer? Now we have multiple browsers, desktop application platforms, and the mobile web to build for. We'll take a look at how we can approach large-scale development to ease the burden of supporting multiple components across multiple platforms while still providing an optimized experience for our users. |
Øredev |
The Type We Want. Recently, custom type on the web has gone from a slow evolution to a rapid succession of new technologies, and new services. This session will cover the history of embedding fonts, diving into the options available to us today and finally taking a look at the hurdles still ahead. CSS3. Browsers have been making leaps and bounds to support CSS3 but what does that mean exactly? CSS3 is a deep and still-evolving standard that is made of multiple parts. We'll take a look at what those parts are, what browsers currently support, and what we can expect in the future. |
Refresh Rochester |
CSS3. Browsers have been making leaps and bounds to support CSS3 but what does that mean exactly? CSS3 is a deep and still-evolving standard that is made of multiple parts. We'll take a look at what those parts are, what browsers currently support, and what we can expect in the future. |
Tech4Africa |
Rocking iPhone and Android development. Smartphones are here to stay, and with them come many opportunities for creating engaging applications that are both profitable and useful. Learn how to get started, and discover tips, tools and tricks to stay ahead of the curve. Workshop: A Masterclass in Architecting applications and Advanced Javascript. Learn best practice for developing applications that enable you to work fast and agile, whilst being robust and secure; and learn advanced features of the JavaScript language to create complex applications. (Split day with John Resig.) |
TeamCamp |
HTML5 and CSS3. Held an informal session to cover many of the interesting things that browsers are implementing. |
MIX10 |
The Type We Want. After a slow evolution, the landscape for custom type on the web has been changing quickly. This session will cover the history of embedding fonts, diving into the options available to us today and finally taking a look at the hurdles before us. |
uOttawa |
A Presentation on Presentations |
An Event Apart: San Francisco |
Integrating JavaScript Effectively. Whether we're seeking to create an effective dynamic UI, or to satisfy clients in search of the latest whiz-bang effect, JavaScript and the multitude of ready-made libraries and plug-ins have become the preferred tools of choice. We’ll look at common interface problems and solutions and examine how to structure our HTML and CSS to implement JavaScript into our projects effectively. |
jQuery Summit |
RIAs: Building for the Desktop with the Web. This session will take a look at two prominent desktop platforms, AIR and Titanium, and examine some of the pros and cons of developing with that environment. We'll also take a look at ways to speed up development using rich components like jQuery UI and take advantage of the features of HTML5 and CSS3 that can be used right away. |
Fronteers |
The Type We Want. Using your choice of fonts on the web is coming of age. Historically, we've had to make do with a small, safe list of font choices or use images to get more imaginative. From there, we've seen the rise of Flash-based and canvas-based font embedding. CSS3 holds new promise and browsers are implementing the features we need to accomplish easier font embedding on the web. There's still plenty of obstacles and confusion and this session will shed some light on the dark art of font embedding on the web. |
OFPUG (Ottawa Flash Platform User Group) |
HTML in a Flash World. Taking a look at developing with HTML and JavaScript within the Flash environment of Adobe AIR. |
Adobe MAX |
Building Adobe AIR Applications with Dreamweaver CS4. Join me as I shows you how to use existing web and Ajax development skills to build AIR applications using Adobe Dreamweaver CS4 and the Adobe AIR Extension for Dreamweaver. |
jQuery Camp |
Case Study: Snitter |
@Media |
Building on the Shoulders of Giants. Even in the early days, developers had libraries of code that they could bring into their project. Today, this level of sharing has proliferated to every level of development from frameworks, to APIs, from client-side to server-side. Companies such as Google, Yahoo, AOL are opening up their data. This session will examine the pros and cons to building on top of these giants, delve into the tools that are available, and look at how quickly applications can be deployed. |
nurun |
Adobe AIR for Developers/Managers |
Web Directions North |
Working with Ajax Frameworks. It seems like there’s a new Ajax library or JavaScript framework coming out every week, and there probably is! Which is the best one to pick? Will you be up the creek without a paddle if you choose the wrong one? “Working with Ajax Frameworks” will delve into some common Ajax design patterns and how various frameworks can be used to meet those needs. We’ll also take a look at how we can keep our own code flexible as we bridge the gap between it and the various frameworks. |
Webmaster Jam Session
|
Pile it on with CSS |
Future of Web Design |
Ajax and Design. It's time to add some polish to AJAX, a part of the web that has become so popular that everybody wants to get their hands on a piece of its sleek nature. This is a session that focuses on using AJAX effectively in your designs, adding more meaning to the term than just the superfluous effects it's known for. |
SXSW |
The Holy Trinity of Web Design. A panel with Sally Carson, Dustin Diaz, myself and moderated by Cameron Adams. We talked about working within web development teams and having to be able to bridge that gap with sales/managers and the clients. |
Webvisions |
Rapid DOM Scripting |