SVG and Responsive Images with Sarah Drasner, Kitt Hodsden, and Eric Portis

Join us for an evening of talks all about SVG and responsive images!
Talk #1: Complex Responsive Animations
In a mobile-first world, Front-End Developers work diligently to adjust their content based on myriad viewport sizes. Responsive design and development has to take into account screen resolution, size, and mobile bandwidth. With the more common integration of animation and scalable images on most websites, developers work with usability and engagement in terms of spatial movement and interaction. In this talk, we'll streamline the adjustment of complex animations for responsive parameters with clarity, performance, and functionality in mind. We’ll go over a variety of techniques for adjusting animation to different viewports, from microinteractions to dazzling moving visualizations.
Speaker: Sarah Drasner 

Sarah is an award-winning Speaker, Consultant, and Staff Writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s the author of SVG Animations from O’Reilly and has given a Frontend Masters workshop on Advanced SVG Animations. Sarah is formerly Manager of UX Design & Engineering at Trulia (Zillow). Sarah won CSS Dev Conf’s “Best of the Best Award” as well as “Best Code Wrangler” from CSS Design Awards.
Talk #2: More Than Just Resizing
Website performance! Yes! Resize the images and we're done! Er, well, not quite. Along with image sizes, image formats are important. So is how an image is included in the HTML. How the images are delivered over the network can also affect performance. And not loading an image at all can sometimes be the best choice. In all of this, workflow/tooling ease and developer/editor happiness with the entire process is also important. Let's explore these performance improving ways that are more than just resizing images.
Speaker: Kitt Hodsden

Kitt Hodsden (@kitt) is the 47th laziest developer in the world, a feat which takes considerable effort.  She currently helps companies automate their production workflows and increase their sites’ performance, having previously worked at Shopify, Twitter, Phase2, and PDI/Dreamworks.  She co-founded Hacker Dojo, a community space for hackers, tinkerers, makers and programmers in Mountain View, California; worked on Shrek and Antz; and has built enough websites to lose count.
Talk #3: sizes in Real Life
sizes forces us to distill presentational information from CSS and stick it right in our markup, violating not one, but two core development principles at the same time: Don’t Repeat Yourself, and the Separation of Concerns. sizes is hard to read, tricky to write, a nightmare to maintain.
It also happens to be the best and simplest tool for the job.
In this talk we’ll develop an appreciation for both the paradoxical problem that sizes was designed to solve and its blunt, practical elegance as a solution. And we’ll explore a whole host of strategies for approaching, avoiding, and automating away the task of writing and maintaining this cornerstone of performant responsive image markup.
Speaker: Eric Portis

Eric Portis (@etportis) is a Developer Evangelist at Cloudinary. He’s also a card-carrying member of the Responsive Issues Community Group – a dedicated bunch of everyday developers who worked with standards bodies and browser makers to upgrade the element for the responsive web. He loves learning through teaching and building and lives on an island in Puget Sound.
Event details
Note: Price: $10 online, $15 at the door. No refunds. No ticket transfers.
We charge this small fee to help reduce no-shows. Please contact the organizers (sfhtml5 at gmail dot com) if this is a financial hardship for you. 
Schedule
5:00 PM Doors open, eat and drink (food and drinks catered by Google; limited veg/GF options available; special cocktail by Alcademics; wine tasting by Grant Marie Winery, and live DJ Rocky Lubbers (SmokeJumper). 
Note: The event is on the 7th floor.
6:30-6:40 PM Announcements 
6:40-7:25 SVG (Sarah Drasner)
7:25-7:55 PM Break 
7:55-8:00 Lightning Talks
8:00-8:45 PM Responsive Images (Kitt Hodsden)
8:45-9:15 PM sizes in Real Life (Eric Portis)
9:15-9:30 PM Q&A with all speakers
9:30 PM Raffle
9:45 PM Room cleared
* Contact the Organizers if you'd like to give a lightning talk. 
** You must be present at the venue to qualify for raffle prizes.
Notes
* There is bicycle parking in the garage below the building, but you must bring your own lock and leave your bicycle at your own risk.  * There is also street and garage parking. Check all signs for restrictions and fees.  * Smile! We are recording and photographing this event. If you do not wish to be included in SFHTML5 video or audio recordings or photographs, you can watch the recordings of all of our events at bit.ly/sfhtml5videos from the comfort of your home.
Cocktails by Alcademics

Wine Tasting by Grant and Marie Winery