CSS Dev Conf 2017

Bring your photo ID or registration receipt to pick up your badge and goody bag. Stick around for a drink, some snacks and Photo Booth shenanigans with your fellow attendees. Watch the French Quarter light up for the night as you meet up with friends old and new before heading out to dinner. 

If you haven’t already picked up your badge, bring your photo ID or registration receipt to pick up your badge and goody bag. 

Monday breakfast options include fresh-squeezed fruit juices, fruit smoothies, house-made muesli, oatmeal with all the trimmings, fresh-fruit skewers, bagels with cream cheese and peanut butter, fresh breads including gluten-free options, and plenty of coffee and tea to lift the fog of morning

• Explaining the value of a design system to your team
• Identifying current problems
• Creating scalable and modular solutions to those problems
• Getting everyone on board and contributing to the new design system
• Simultaneously dumping the old and using the new

• Gulp + Sass and the usual suspects 
• UnCSS to check views against Sass/CSS 
• PostCSS and ByebyeCSS to list selectors we want to be removed 
• Some browser and command line tools and tips to measure and test CSS performance

Sweet treats and fresh fruit to help you get through the morning. Served at break stations.

• Android's Shared Element Activity Transitions 
• iOS's Layout Constraint Animations 

• using the Web Animations API 
• using GSAP 

• Overview of Progressive Web Apps 
• User Experience with Progressive Web App 
• How it Works: Web Sockets 
• Push Notifications

• What are variable fonts, and when can they be used 
• Why type is the voice of your words, and how that voice just became a chorus 
• How to expand the dynamic range of your design with type 
• Where to be restrained and when to experiment: think character widths on small screens, or even responding to ambient light with stronger character weights

Lunch is on your own, so grab some new friends and try that local restaurant your friend told you to try. 

Here are some nearby recommendations:

Hotel Monteleone's Criollo Restaurant
214 Royal StNew Orleans, LA 70130
$$$
American (New), Cajun/Creole, Breakfast & Brunch 
Yelp: ⭐⭐⭐⭐
http://criollonola.com/

Johnny’s Po-Boys
511 St. Louis St., New Orleans, LA 70130
A very popular, tiny shop, serving GIANT Po-Boy sandwiches and traditional sides
Yelp: ⭐⭐⭐½
http://www.johnnyspoboy.com

Green Goddess Café
307 Exchange Pl, New Orleans, LA 70130
Vegetarian-GF
$$
Creative New American cuisine & cocktails. Healthy Options. Great dessert.
Yelp: ⭐⭐⭐⭐
http://www.greengoddessvt.com/

Café Fleur-De-Lis
307 Chartres St, New Orleans, LA 70130
$$
Casual, narrow café featuring quick, counter-serve breakfast & lunch with ample portions.
Yelp: ⭐⭐⭐⭐
http://www.cafefleurdelis.com/

Mena’s Place
200 Chartres St, New Orleans, LA 70130
$$
Longtime place serving Cajun fare like omelets, po’boys & seafood platters for breakfast and lunch.
Yelp: ⭐⭐⭐⭐
http://menaspalace.com/

Backspace Bar & Kitchen
139 Chartres St, New Orleans, LA 70130
Veg Options available
$$
Exposed-brick literary-themed spot with a fireplace. Bar food.
Yelp: ⭐⭐⭐⭐
http://www.backspacenola.com/

The Jimani
141 Chartres St, New Orleans, LA 70130
Veg options available.
$$
Sport bar with multiple TVs. Pub fare serve late.
Yelp: ⭐⭐⭐½
http://www.thejimani.com/

Felipe’s Mexican Taqueria
301 N Peters St, New Orleans, LA 70130
Veg options available
$$
Mexican & Latin food in a casual counter-serve eatery.
Yelp: ⭐⭐⭐⭐
https://www.felipestaqueria.com/

Huck Finn’s Café
135 Decatur St, New Orleans, LA 70130
Vegetarian options available.
$$
New Orleans fare – sports pub – lots of TV’s.
Yelp: ⭐⭐⭐½
http://www.huckfinnscafe.com/

Creole House Restaurant & Oyster Bar
509 Canal St, New Orleans, LA 70130
$$
Bright, casual restaurant serving classic Cajun-Creole dishes & seafood platters.
Yelp: ⭐⭐⭐⭐
http://creolehouserestaurant.com/

Palace Café
605 Canal St, New Orleans, LA 70130
$$ - $$$
Modern Creole cooking in an opulent, high-ceilinged room plus sidewalk seating.
Yelp: ⭐⭐⭐⭐
http://www.palacecafe.com/

Welty’s Deli
336 Camp St, New Orleans, LA 70130
Vegetarian options available.
$$
Breakfast & lunch spot serving sandwiches and salads with New Orleans flavor.
Yelp: ⭐⭐⭐⭐½
http://www.weltysdeli.com/

Red Gravy
125 Camp St, New Orleans, LA 70130
Vegetarian options available.
$$
Handmade pasta & other traditional Italian staples.
Yelp: ⭐⭐⭐½
http://redgravycafe.com/

Mr. B’s Bistro
201 Royal St, New Orleans, LA 70130
$$
Modern, seasonal Louisiana fare in a refined, wood paneled space.
Yelp: ⭐⭐⭐⭐
http://www.mrbsbistro.com/

Acme Oyster House
724 Iberville St, New Orleans, LA 70130
$-$$
Lively New Orleans based chain offering oyster, po’boys, gumbo & other Cajun-Creole classic.
Yelp: ⭐⭐⭐⭐
http://www.acmeoyster.com/

Red Fish Grill
115 Bourbon St, New Orleans, LA 70130
$$-$$$
Seafood & Cajun favorites including oysters in a funky & lively space.
Yelp: ⭐⭐⭐⭐
http://www.redfishgrill.com/

Felix’s Restaurant & Oyster Bar
739 Iberville St, New Orleans, LA 70130
$$
Local seafood platters, fresh-shucked oysters & Creole staples in a casual barroom setting.
Yelp: ⭐⭐⭐⭐
http://www.felixs.com/

The Ruby Slipper Café
1005 Canal St, New Orleans, LA 70112
Vegetarian options available.
$$
Cheery café serving signature omelets, Southern brunch fare & cocktails in a relaxed atmosphere.
Yelp: ⭐⭐⭐⭐
https://www.therubyslippercafe.net/

Café Beignet
311 Bourbon St, New Orleans, LA 70130
Vegetarian options available.
$-$$
Charming, counter-serve café with menu of beignets, Cajun & breakfast fare, plus patio seating.
Yelp: ⭐⭐⭐½
http://www.cafebeignet.com/

GW Fins
808 Bienville St New Orleans, LA 70112
Vegetarian and Gluten Free options available.
$$
Creative, ever-shifting seafood menu featuring fresh catches in a stylish updated warehouse space.
Yelp: ⭐⭐⭐⭐½
http://gwfins.com/

Starbucks
500 Canal St, New Orleans, LA 70130
Yelp: ⭐⭐⭐½

CSS feels like magic at times, doesn't it? By understanding how it works, we can not only demystify the magic, but we can improve our sites in real and practical ways. In this talk, we'll take a look at CSS from the perspective of the rendering engine, to peek behind the curtains and take a deep look at how the layout engine handles converting your CSS into pixels on the screen.

The tech industry regards burnout like a weird badge of honor. Dave Ruperts holds a roundtable conversation to talk about burnout in the tech industry--bring your stories and ideas how to stop it. 

Your chance to ward off the afternoon slump! With chips and dips, baked pretzels and even some cookies! 

HTML and CSS are all you need to create a Design System that unifies the visual appearance of your products, but as soon as you want to create consistent behavior between applications, you'll need to turn to JavaScript. More often than not, using a modern framework such as React, Vue, or Angular will save you lots of time, and keep you from reinventing the wheel.

 In this talk, I will discuss how moving interactivity into the Design System is not only a good choice today, but is most certainly how you will be creating Design Systems in the future. I'll also be discussing the React-powered Design System I've been helping to create which powers a few apps you might have heard of, including SharePoint, OneDrive, and Outlook for the web.

• Using CSS Variables to separate out the transform functions effectively as independent properties 
• Thinking in three dimensions 
• Gaining a deeper understanding of 3D perspective 
• To will-change or not to will-change? 
• How Transforms are beneficial for animation 
• What's next in the specification

• Initialization 
• Setup using PostCSS + CSSnext 
• Build a style framework using CSS4 features 
• ...cover css variables, native import, color functions, em/rems, other fun stuff?
• Create a development setup with live-reload 
• Publish to npm
• CCreate docs for your consumers

• Layouts achieved with a few lines of code that previously required messy hacks or JavaScript - Examples of different syntax and units for CSS Grid 
• Fallbacks for older browsers 
• How CSS Grid improves accessibility

Join your fellow attendees, conference speakers, and a few surprise guests as we walk a short parade route through the French Quarter. We’ll be escorted by a second-line jazz band along with New Orleans’ Finest. Costumes and jugglers are welcome! 

We’ll finish the parade at Jackson Square, where tour guides will be waiting to take you on a variety of themed walking tours. Due to the limited number of spots for tours: first come, first serve. You will need your CSS Dev Conf Wristband or official badge in order to go on a tour.

After the tour, your guide will at Café du Monde for beignets and conversation.

Stop by after your tour or after dinner for dessert and coffee at a New Orleans institution. Local Dribbblers are welcome, too! 

Tuesday breakfast includes fresh-squeezed fruit juices, fresh fruit and berries, yogurt, an assortment of cereals, biscuits and sausage, croissant breakfast sandwiches, and all the coffee and tea you need to get going.

If you think outside the box, you can solve almost anything with CSS. Join Estelle Weyl to learn the power of CSS, as she solves several CSS WTFs. Depending on your perspective, that can mean “wonderfully terrific feature” or, very often, “what the @#$%!.” Once you realize the power of CSS, you’ll want to jump back into it (instead of relying on frameworks that were necessary when few knew how to support IE6-8).

Topics may include:

• Vertical centering many ways
• Nifty tricks, like counting form errors, that can be done with generated content (sans JavaScript)
• CSS selector madness, including stupid pet tricks like #myId#myId to overwrite third-party CSS, attribute selectors, and picking the item that is the seventh to last from a list, or something like that
• Understanding specificity, inheritance, and the cascade
• Overwriting !important without killing specificity and avoiding !important by using the above mentioned stupid pet tricks
• Animation, including using animation sprites to create the appearance of someone dancing, riding a bike, or something equally entertaining
• Shaping images and making text flow around them
• Reducing transparent PNG file size by using CSS masking
• Using iconography in an accessible manner
• A CSS only modernizr (no JS necessary)
• Two different ways of creating a slide deck that works without JS and how to make it more accessible

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.

As we start to get comfortable with new ES6 features of JavaScript, both the language and the web platform is charging forward with many new features. This talk will cover some of the best things that are brand new to JavaScript as well as things that we can look forward to in the coming months and years. Strap yourself in for a fast-paced talk full of hot tips as we rocket ourselves into the future of JavaScript. 

Yogurt parfaits and pastries help you power through morning sessions.

As superfluous as something like animation may initially seem, you can tell a lot about framework by the way that it handles the concept of time. Idiosyncrasies and race conditions in rendering reveal themselves, pauses in DOM and virtual DOM diffing can be exposed.  

This is one of the ways Vue shows itself to be uniquely capable and elegant as a framework. In this session, we'll cover how to use the <transition> component and some of its offerings to create fluid effects in the browser. We'll move on to watchers and transitioning state. Finally, we'll talk about lifecycle methods, asynchronous updates, and pushing our animations to the next level.

Lunch is on your own, so grab some new friends and try that local restaurant your friend told you to try. 

Here are some nearby recommendations:

Hotel Monteleone's Criollo Restaurant
214 Royal StNew Orleans, LA 70130
$$$
American (New), Cajun/Creole, Breakfast & Brunch 
Yelp: ⭐⭐⭐⭐
http://criollonola.com/

Johnny’s Po-Boys
511 St. Louis St., New Orleans, LA 70130
A very popular, tiny shop, serving GIANT Po-Boy sandwiches and traditional sides
Yelp: ⭐⭐⭐½
http://www.johnnyspoboy.com

Green Goddess Café
307 Exchange Pl, New Orleans, LA 70130
Vegetarian-GF
$$
Creative New American cuisine & cocktails. Healthy Options. Great dessert.
Yelp: ⭐⭐⭐⭐
http://www.greengoddessvt.com/

Café Fleur-De-Lis
307 Chartres St, New Orleans, LA 70130
$$
Casual, narrow café featuring quick, counter-serve breakfast & lunch with ample portions.
Yelp: ⭐⭐⭐⭐
http://www.cafefleurdelis.com/

Mena’s Place
200 Chartres St, New Orleans, LA 70130
$$
Longtime place serving Cajun fare like omelets, po’boys & seafood platters for breakfast and lunch.
Yelp: ⭐⭐⭐⭐
http://menaspalace.com/

Backspace Bar & Kitchen
139 Chartres St, New Orleans, LA 70130
Veg Options available
$$
Exposed-brick literary-themed spot with a fireplace. Bar food.
Yelp: ⭐⭐⭐⭐
http://www.backspacenola.com/

The Jimani
141 Chartres St, New Orleans, LA 70130
Veg options available.
$$
Sport bar with multiple TVs. Pub fare serve late.
Yelp: ⭐⭐⭐½
http://www.thejimani.com/

Felipe’s Mexican Taqueria
301 N Peters St, New Orleans, LA 70130
Veg options available
$$
Mexican & Latin food in a casual counter-serve eatery.
Yelp: ⭐⭐⭐⭐
https://www.felipestaqueria.com/

Huck Finn’s Café
135 Decatur St, New Orleans, LA 70130
Vegetarian options available.
$$
New Orleans fare – sports pub – lots of TV’s.
Yelp: ⭐⭐⭐½
http://www.huckfinnscafe.com/

Creole House Restaurant & Oyster Bar
509 Canal St, New Orleans, LA 70130
$$
Bright, casual restaurant serving classic Cajun-Creole dishes & seafood platters.
Yelp: ⭐⭐⭐⭐
http://creolehouserestaurant.com/

Palace Café
605 Canal St, New Orleans, LA 70130
$$ - $$$
Modern Creole cooking in an opulent, high-ceilinged room plus sidewalk seating.
Yelp: ⭐⭐⭐⭐
http://www.palacecafe.com/

Welty’s Deli
336 Camp St, New Orleans, LA 70130
Vegetarian options available.
$$
Breakfast & lunch spot serving sandwiches and salads with New Orleans flavor.
Yelp: ⭐⭐⭐⭐½
http://www.weltysdeli.com/

Red Gravy
125 Camp St, New Orleans, LA 70130
Vegetarian options available.
$$
Handmade pasta & other traditional Italian staples. 
Yelp: ⭐⭐⭐½
http://redgravycafe.com/

Mr. B’s Bistro
201 Royal St, New Orleans, LA 70130
$$
Modern, seasonal Louisiana fare in a refined, wood paneled space.
Yelp: ⭐⭐⭐⭐
http://www.mrbsbistro.com/

Acme Oyster House
724 Iberville St, New Orleans, LA 70130
$-$$
Lively New Orleans based chain offering oyster, po’boys, gumbo & other Cajun-Creole classic.
Yelp: ⭐⭐⭐⭐
http://www.acmeoyster.com/

Red Fish Grill
115 Bourbon St, New Orleans, LA 70130
$$-$$$
Seafood & Cajun favorites including oysters in a funky & lively space.
Yelp: ⭐⭐⭐⭐
http://www.redfishgrill.com/

Felix’s Restaurant & Oyster Bar
739 Iberville St, New Orleans, LA 70130
$$
Local seafood platters, fresh-shucked oysters & Creole staples in a casual barroom setting.
Yelp: ⭐⭐⭐⭐
http://www.felixs.com/

The Ruby Slipper Café
1005 Canal St, New Orleans, LA 70112
Vegetarian options available.
$$
Cheery café serving signature omelets, Southern brunch fare & cocktails in a relaxed atmosphere.
Yelp: ⭐⭐⭐⭐
https://www.therubyslippercafe.net/

Café Beignet
311 Bourbon St, New Orleans, LA 70130
Vegetarian options available.
$-$$
Charming, counter-serve café with menu of beignets, Cajun & breakfast fare, plus patio seating.
Yelp: ⭐⭐⭐½
http://www.cafebeignet.com/

GW Fins
808 Bienville St New Orleans, LA 70112
Vegetarian and Gluten Free options available.
$$
Creative, ever-shifting seafood menu featuring fresh catches in a stylish updated warehouse space.
Yelp: ⭐⭐⭐⭐½
http://gwfins.com/

Starbucks
500 Canal St, New Orleans, LA 70130
Yelp: ⭐⭐⭐½

• Explaining the value of a design system to your team
• Identifying current problems
• Creating scalable and modular solutions to those problems
• Getting everyone on board and contributing to the new design system
• Simultaneously dumping the old and using the new

• Layouts achieved with a few lines of code that previously required messy hacks or JavaScript - Examples of different syntax and units for CSS Grid 
• Fallbacks for older browsers 
• How CSS Grid improves accessibility

Chips, mini-sandwiches, and traditional pralines to keep you going. Served at break stations

• Using CSS Variables to separate out the transform functions effectively as independent properties 
• Thinking in three dimensions 
• Gaining a deeper understanding of 3D perspective 
• To will-change or not to will-change? 
• How Transforms are beneficial for animation 
• What's next in the specification

• What are variable fonts, and when can they be used 
• Why type is the voice of your words, and how that voice just became a chorus 
• How to expand the dynamic range of your design with type 
• Where to be restrained and when to experiment: think character widths on small screens, or even responding to ambient light with stronger character weights

Enjoy a cocktail or two, some lovely hors d’oeuvres, and good company before heading out for dinner. Don’t forget to get your tarot cards read!

Join us for the return of Drink & Draw, a creative and occasionally epic drawing game. Get ready to rumble!

Workshop attendees who also attended Dev Conf can skip registration and just use their conference badge to attend the workshops. Your workshop session appears on the front of your badge.

Workshop attendees who are joining us for the first time on Wednesday should bring a photo ID or registration to check in for the day. Be sure to stick around for breakfast!

Workshop-day breakfast includes fresh-squeezed fruit and vegetable juices, assorted cereals, yogurt, a selection of pastries, bagels and cream cheese, fresh fruits, scrambled eggs, bacon, sausage, roast potatoes, stone-ground grits, and lots of caffeinated beverages.

Get up and running with web animation in less time than it would take to read all the tutorials you have bookmarked. In this workshop, you'll get an in-depth look at animating with CSS, JavaScript, and SVG through hands-on exercises while learning how to make your project stand out from the competition with effective animation.

By coding along with Sarah and Val in this workshop, you’ll learn:

• The essentials of CSS animation
• Principles of UI/UX for animation
• Basics of TweenMax and TimelineMax
• SVG workflow and optimization
• SVG animation, both with a library and without

Sarah and Val will also show you:

• How to choose which web animation technologies are best for your projects, with an overview of the animation landscape, explaining which tools to choose and why
• What CSS transforms, transitions and keyframe animations can do and how to use them effectively in your work
• Best practices and principles to follow to ensure the animations you create are adding something positive to the user experience, not distracting from it.
• How to bend SVGs to your will- both regarding optimization and performance, as well as creating dazzling visual effects that bring your project to life.

Join Micah Godbolt, Senior Design Developer at Microsoft and author of Frontend Architecture for Design Systems, as he shows the Four Pillars of Frontend Architecture and how to deploy scalable and sustainable websites. Attendees will learn about popular tools and techniques as we build a fully featured design system from the ground up.

By coding along with Micah in this workshop, you will learn:

• How to establish proper coding standards, and how to enforce them.
• How to create a streamlined and automated process for turning user stories into deployed frontend code.
• The value of automated testing in all areas of your site, including visual, functional and performance.
• And the best tools for creating living, powerful and useful documentation that will be the center of communication between every member of your team.

Micah will also show you:

• How to create consistent methodologies and coding standards for HTML, CSS, and JavaScript.
• How to make a fully automated process from the editor to the style guide to the production environment.
• How to develop a full testing suite using a combination of multiple testing approaches.
• And how to write a fully documented system using various automated and manual documentation systems.

It’s an ever-evolving field, they say, and the job of a front-ender these days is broad. It’s not just “I write the HTML and CSS” anymore if it ever was. It’s part designer, part coder, part empath, part interaction designer, and part futurist. Let’s talk about all that by actually building a website. We’ll start from scratch, work through the stages of the process, and end up with a finished website. This will give us an excuse to talk about all the big topics in front-end development and what our jobs really are.

How will this happen? Among other things:

• We’ll scaffold out a design in HTML, giving us an opportunity to talk about things like HTML5, semantics, and accessibility in their native contexts.
• We’ll lay out the site in CSS, and in the process talk about things like modern layout techniques (flexbox! grid!), preprocessing, and the role of build tools in the front end process.
• We’ll use some JavaScript to do things that only JavaScript can do, but we’ll do it in a responsible way that performs well and doesn’t cripple the site if it doesn’t load.
• At every turn, we’ll consider performance and user experience, making sure we’re building something for human beings, not spec sheets or portfolios.
• And we’ll think about how to make the offline experience the best it can be because we never know when someone will suddenly lose bandwidth due to network outages, subway tunnels, or holding the phone wrong.

All this in just one day? Yes! By the time we’re done, we’ll have reconsidered not just what we do, but why we do it, and how to do it better moving forward.

React is a JavaScript library that has become the tool the choice for easily building dynamic user interfaces. The power is in the Virtual Dom — when your application’s data changes, React figures out which parts of your document need to be changed, and immediately update only those parts.

Hundreds of thousands of developers from small agencies to large companies use React to deliver top notch experiences in their apps and dynamic website components:

• Facebook.com is made up of thousands of React components.
• Instagram web viewer is entirely built in React.
• The brand new Netflix movie browsing experience is powered by React
• and much more!

You will learn:

• How to build an entire App or Website Component in React.js from start to finish.
• Understanding React Components and writing markup with JSX
• Maintain your Application’s State
• Communication between components
• Working with State and HTML5 LocalStorage
• Real-time web socket data with Firebase
• Creating maintainable code with JavaScript Modules
• URL routing with React Router
• Taking advantage of new ES6 Features

Lunch includes plenty of traditional Louisiana favorites: seafood gumbo & rice, potato salad, field greens with plenty of salad additions and dressings, fried catfish, fried chicken, muffalettas, veggie wraps, and Zapp’s chips. Finish it off with a selection of southern pies—apple, cherry, pecan, and lemon. Hmmhmmm!