Sessions Will Continue to be Added and Updated Over the Next Few Weeks


We are currently in the process of adding sessions. Thank you for all of the wonderful submissions. You will see current sessions for spring soon, and we will be adding more over the coming weeks.

Click the session titles below for more details.

Many web developers are already familiar with JavaScript 6. Maybe you are already using a transpiler and have gotten a glimpse of how much easier JavaScript development can be with features like arrow functions, generators, and destructuring. You may be surprised to learn that JavaScript 6 is only the beginning. The committee is already hard at work on JavaScript 7, and it's not too early to get a glimpse of some of the features being proposed. While version 6 brought JavaScript to parity with other popular scripting languages, version 7 may introduce powerful new features never seen in a popular programming language. Some of these features have already appeared in modern browsers, and it's not too early to start playing with them. Come glimpse into the future and start thinking about how to write forward compatible JavaScript applications today.
Traditional back-end web frameworks like Rails, Django, and Express render template on the server side while newer front-end web frameworks like AngularJS and Ember.js render templates in the browser. Both have their pros and cons.This talk will go over the pros and cons of both systems, as well as how to combine them to get the pros of both, without the cons.
When a software project approaches the scale of, manual testing in many browsers is a tedious task. In this talk we'll show you how you can use Selenium Webdriver to automate manual testing of JavaScript features and ajax applications. By the end of the talk you’ll have the necessary tools to automate testing of your projects using the python selenium library.
I could talk about my experiences building complex 3D applications from polymer components specialized for 3D graphics. First, I could give a quick overview of the components (work in progress / more to come): Then, I can dive deeper into select components and show how they can be assembled into a powerful apps.
Commercial CDNs (Content Delivery Networks) allow storing static content in various locations across the world which allows faster access to such content based on the location where the web request is initiated from. If you think CDN are useful but don't have budget to invest in them, you are in luck. WebRTC technology stack allows real time, peer to peer communication between web users without the use of plugins. Most prominent use cases is multimedia conferencing, however, this talk focuses on data communication between the web users based on WebRTC DataChannel.
This talk will show the adoption of modern web technologies for application development in highly technical fields such as embedded devices, automotive applications, and the biomedical fields. I will do this by explaining how I use HTML5 and JavaScript, along with Node.JS, to power :1. Bionic Eyes, yes, the kind that get put in your head, well more like an electrode array inserted into your own eyeball that stimulates your retina. 2. Talking Electric Motorcycles... real ones that I race at over 100 mph agains gas bikes on some of the most dangerous courses in the world.
It's not uncommon for back-end engineers to outnumber web designers and front-end devs 5 to 1. So, how do we as maintainers of front-end architecture help unruly coders fall in line when they write Sass files? We start by laying out straightforward and precise internal guidelines and style guides, then make sure to communicate these clearly and effectively all while keeping in mind the ultimate goal: building stronger teams that understand the many aspects of the project, styles included. We may not always be able to get engineers to notice when the whitespace is off, but hopefully we can keep them from appending crap to the bottom of every style sheet willy-nilly. In the end, we hope to get everyone excited about Sass that compiles to clean, coherent CSS that makes everyone’s day a little bit brighter.
It's the moment you’ve been dreading: the project of redesigning all consumer facing emails AND making them responsive becomes yours. And you've heard the rumors: designing emails means coding like it’s 1999, creating tables and adding styles inline (heaven forbid!), and throwing best practices and hopes of compatibility out the window. BREATHE. In this session, I’ll help you get your emails in shape for 2014 and ready for the responsive spotlight by showing you:

* Why you need a reusable, maintainable template (or three) and how to do that.
* When and how to use media queries and the ever controversial !important.
* How to make desktop, mobile, and web-based clients play nicely, and which ones to watch out for (sneaky devils).
* Third-party tools and knowledgeable blogs that weed through the ugliness and what parts you still need to code by hand. Zurb Ink, Litmus, Campaign Monitor, Style Campaign [hide list of resources for talk description].
Mobile is here, and here to stay. Running JavaScript on mobile devices has some serious limitations one of the biggest being getting the code onto the device and keeping it there.This talk goes beyond the stand 'minimize your files' advice to guide you through techniques that will get your code onto the device quickly and keep it there. Making it is always available when the user needs it, instantly.The talk will cover various topics: including minimization, browser caching, using localStorage, manifests and CDN's to optimize the availability of JS files for devices connected over slower connections.
Icons are the native language of software. Ironically, while software has been moving at a break-neck pace, the lexicon of our icons and the way we display them have been stuck in neutral. In an era of shrinking screens and a shrinking globe, icons will play an increasingly important role in our interfaces. This talk explores why icons are so vital in tomorrow's interfaces and how we should be thinking about them and making them differently.
This talk will cover the current state of HTML5 for games (both good and bad), and a closer look at the distribution targets for games, including which have worked for us and other developers on our platform (where have analytics).Various platforms and devices that can be reached with an HTML5 game will be covered. These include:
* iOS App Store
* Google Play
* Kik
* Windows App Store
* Facebook
* Firefox OS / Firefox Marketplace
* The open web
Each will go into what's required to do well on each platform/device.
Designing a visualization or animation has to take into account many factors: communication, design, responsive development, and backwards compatibility. There are a variety of new tools that are now being supported. We will look particularly at SVG, VelocityJS, Canvas, and SkrollrJS to see the benefits of each and when they can be used in conjunction. We will evaluate which tool to use depending on what User Experience concerns are the most important to the project.
There are many libraries and tools available for writing Selenium tests. Unfortunately, until recently there have not been good options available if you want to implement your tests using JavaScript. Nightwatch.js aims to solve that problem, by providing a robust solution for writing and running Selenium test automation. This tool runs on Node.js and is growing quickly in popularity, with over 1,500 stars on GitHub and an active development community. In this talk we will explore the capabilities of Nightwatch, and specifically answer key questions around debugging, abstraction using the page object model, reporting options, and more. An in-depth demo will also be shown to give attendees an introduction to setting up and using the tool.
What is and how to use continuation-local-storage. How it works as a segue into the AsyncListener API. How to use the AsyncListener API and how it works as well. What to expect in future Node.js packages that use it.
Over the course of 2 years, Christian has been working on an application that uses Angular on the front-end and Rails on the back-end.
Rails exposes the API REST endpoints while Angular consumes those on the front-end.
In this talk you'll be learning about multiple tools that improve the connection between Angular & Rails. You'll find out about the best way to load Angular templates, optimize the assets pipeline & how to avoid duplication when doing DI (Dependency Injection).
Animations don’t just make things look cool, they provide context and additional details. Animations give us a third dimension with which to communicate: time. The real world doesn’t move in a perfectly linear fashion and when we see things that do, it feels awkward and unnatural. With motion, the difference between dull and delightful often comes down to the math.This talk walks you through the fundamentals and simple formulas that describe all animation. With a playful introduction into interpolation, easing, paths and sequencing you will learn how to create a lot of effects with just a little code. We will also discuss how to make full use of new browser technology to generate cleaner, more performant, transitions with less effort.
Introduction to directives and user created directives. Importance and uses of directives
With an ever growing collection of beer, I am in dire need of a way to store and track it. What better way to do this than to create an application. This will be a hands on live coding session where we will create a RESTful API using Node, Express, Mongoose, and MongoDB. When we are done, we should have an API that supports CRUD operations, have a solid understanding of best practices and tooling, and most important of all, a place to store our beer!
Overuse of Javascript frameworks leads to bloated websites and in most cases is not necessary at all. See how you can effectively build great websites with HTML and CSS and just a little bit of scripting.
Using HTML5 on the front AND on the back end to generate imagery. This allows for imagery to be generated on the front-end in real-time, and simultaneously used the same code to create a sharable image, on the back-end. Here is an example of a recent project that was produced and can be used as a “making of” example -
The rise of single-page apps presents a unique set of challenges for sharing deep links and optimizing search results. Jason Moore presents strategies for generating page metadata, such as Open Graph tags, and making it available to a variety of crawlers via generated static snapshots.
CSS architecture, performance, and manageability techniques for a large-scale, single-codebase responsive web app.
Leveraging HTML5, JavaScript, CSS, and Datadipity ( developers can build internet connected products in 1 day. We have demonstrated this technique by winning multiple hackathons. The products we've created include a connected Dog Collar, a connected door lock for keyless entry, a connected garbage can to weigh your trash and many more. Using this advanced technique, IoT products can be reduced to one HTML file and one Javascript file running inside of a Phonegap application. Developers can leverage existing APIs and cloud services to build a virtual full-stack without having to learn anything new or program any of the API interactions. We believe HTML5 is the future of software development and aim to support HTML5 developers with a fast and stable method to deliver IoT products with HTML5 & Javascript only. Here is an example of an IoT product built in 1 day using this technique:
CSS has always been one of the hardest parts of any codebase to maintain. In CSS, everything is global, and even the tiniest change runs the risk of breaking a completely unrelated feature. Methodologies like BEM, OOCSS, and SMACSS have helped bring some much needed sanity, but they’re largely just filling gaps that should be native to the platform. With Web Components, we finally have the tools needed to write truly modular CSS. They provide real inheritance, sane dependency management, and two-way style encapsulation. Come hear how Web Components will change CSS best practices for the better.
Babylon.js is an open source project that allows web developers to create powerful 3D application for the web using WebGL. During this session, I will show you how to create a complete scene and how to use advanced graphics effects to create tremendous applications.
Imagine rich 3D user-generated content, instantly shared with billions worldwide via social media, viewable in a browser with no download. Imagine multi-player theme parks, desert islands, cityscapes, historical reenactments, flythroughs of deep space, and more, shared with your friends in real time. Now imagine yourself building that, using only a browser, a text editor and an open source technology stack… all programmed in JavaScript. No way?! Way. With HTML5 and WebGL, we now have a platform for building high-performance, open 3D virtual worlds in a browser. No need for proprietary software, client downloads, expensive hosting, or licensing fees. This session covers the development stack for building that Metaverse. On the client side, it’s WebGL for real-time 3D rendering; WebRTC and WebSockets for real-time multiplayer communication; and Web Audio to make it all real with sound. On the server side, we’ll look at Node.js-based application services, storing persistent world state, security, and delivering dynamic, user-generated 3D content.
3D graphics are sexy but difficult to pick up as a beginner. You need to set up cameras, projection matrices, and viewboxes. You need 3D models, and you probably need to know a shader language, some WebGL and some wrapper library like three.js. This talk aims to simplify all that by looking at simple 2D graphics transformations as a foundation for learning 3D for the web. It's the class I wish I had in college. We'll go over CSS transformations, 2D matrix math, linear interpolation / animation, and the Google Closure graphics library. We'll touch on the lightning fast animations with the new W3C spec for the web animations API The talk will commence with coding of a simple asteroids game or something of that nature.
Netflix is transitioning it’s entire web UI stack from Java to Node.js. Throughout this process we have learned (sometimes the hard way) what works for us and might for others. We've built a highly optimized UI layer focused on modular UI components, localization and CSS/JS packaging. Node has enabled us to move quickly and fail fast. We'd like to share some of the lessons we've learned along the way.
ECMAScript 6 has a lot of awesome new features coming. Everyone knows about classes, modules, promises, and generators, but what about the rest? This talk will cover a few of the new features that most developers may not have heard about, including destructuring assignment, computed property names, the “for…of” statement, the rest and spread operators, and others
HTML5 apps are trending towards most (or all) of the behavioral logic running on the client. Because of this, we now need to think about architecting these UI's more like native apps than pages. While this dramatically increases the complexity on the client, it also opens new opportunities to tame that complexity through modern, modular UI component design. Phil Cockfield will talk about practical approaches to writing clean, modular, reusable HTML5 UI components, and introduce a new concept of a UI Harness which brings together the flexibility of manual UI testing with the power of automatable unit tests. Audience members will get an historical view of UI development on the web, showing how we got to where we are today, highlighting what is different in this new world of native like, fully client-side UI development. The talk will illustrate this by delving into real-world examples of UI Harnessing in HTML5 for radically speeding up modular UI development using the Meteor framework.
With modern web layout you can have your content laid out in whatever shape you want as long as it’s a rectangle. Designers in other media have long been able to have text and other content flow around arbitrarily complex shapes. CSS Shapes is now available in Chrome (37 and later) and Safari 8, allowing for these designs to be realized on the web! Learn the basics of CSS Shapes along with tips and tricks to get the most out of the feature.
Well, OK, not quite. But we do have vast numbers of medical and public health researchers looking through large quantities of data. And modern frontend web technologies help us help them find what they are looking for faster and easier than ever before. We'll talk about our UX testing results and how it affected our interface and technology choices.
There is currently a major shift sweeping over the software industry. With each passing day the world is becoming more and more API-driven. When building an API there are many design options and Hypermedia is the new emerging way of designing APIs. Hypermedia APIs are widely used by companies such as Paypal and Amazon. In this session I will discuss the principles of Hypermedia APIs and the different ways to implement one in Node.js. I will first introduce you to a basic implementation using Express and then move on to a more advanced solution using a dedicated framework: Fortune.js. I will also share my experience of building APIbunny (, an API-driven easter game.
The time it takes to download http resources is a corner stone of a website performance, and ultimately user experience. In this presentation, we review the different network and system setup variables that affect the speed at which each piece of dynamic content gets fetched from a client (e.g. browser) , and explain their relative impact. By leveraging the massive web traffic seen on the Akamai platform, the existing literature and the typical website properties listed at we present a performance model both simple and comprehensive. In particular, we share empirical data for the middle-tier observed RTT, which is one of the main factor impacting download latencies over long distances. To illustrate the model via a web-based chart, we plot the expected performance against the distance client-origin, based on a key set of parameters. It will allow its users to better understand what variables really matter and take actions to improve their website performance.
In today’s responsive world, user experience and application performance is becoming more important than ever. Performance optimization has long been considered a task that requires careful manual ‘tuning’ of several application components, as well as continuous testing. In some cases, the effort involved may outweigh performance gains, and this is when developers must walk the tight rope between benefit and cost. With the advent of automated build tools and task runners like Grunt, automating these tasks has become possible. In this session we will cover examples of some of the most common approaches, as well new and more radical methods including unCSS, combining media queries, bunching up API calls, automatic sprite image generation, and others.
Backdrop CMS is a fork of Drupal. The primary goal of the project is to provide an affordable, robust CMS with a low barrier to entry. This will allow include: a more intuitive user interface, code that is easier to grok, and lower system requirements, which will allow for affordable hosting.
Improvements over Drupal include:
* Revamped layout system
* Comprehensive listing builder
* Configuration stored in JSON for easy import/export & migration
* more

Comes see how to snap together complex websites quickly, and take a peek at the underlying code.
When a Node app isn’t making it through the periods of load, how do you get to the root of the problem. Using only open source tools, I’ll show you how to look inside Node, Modules and V8 to discover where the memory or processor is hung up or the data has gotten corrupt or the errors are being thrown.
Developing for mobile web is nothing like developing for desktop. The browser is slower, the mouse and keyboard interface switched to touch, and the usage profile is different - launch quickly, ditch even quicker. In order to get to a native-like experience, developers need to have a deeper understanding of the browser, know the limitations, and get acquainted with new ways to do things that were traditionally coded in a much more tolerant environment. Animations, caching, forms, data, design, scrolling, event handling, etc. - all these have to be treated differently. I will share my findings from several years exploration of trying to get to that native-like promised land on the small form factor. The presentation will encompass several HTML5 and CSS3 features overview, live HTML examples of animation profiling, and a bit of tooling tips.
With the support for buttery-smooth GPU-accelerated 3-d effect with CSS, modern browsers allow an implementation of a stunning fluid and dynamic user interface. To ensure that the performance is still at the 60 fps level, certain best practices needs to be followed: fast JavaScript code, usage of requestAnimationFrame, and optimized GPU compositing. This talk aims to show a step-by-step guide to implement the infamous Cover Flow effect with JavaScript and CSS 3-D. We will start with the basic principle of custom touch-based scrolling technique, the math & physics behind momentum effect, and the use of perspective transformation to build a slick interface. Don’t worry, the final code is barely 200 lines!
Prototypes have an important role in the design process of any web application because they allow to verify new ideas quickly and cheaply. As developers we often avoid working on prototypes, because it seems to be slow and expensive. But it doesn't have to be that way. What if you could prototype new features of your app within existing application code, using production data? What if you could release the prototype to production server and test it on real users? As a developer working closely with UX and design team I'd like to share our hands-on experiences, successes, failures, practical tips and lessons we learned while prototyping some of new features ’in vivo’ inside of our application.
Performance is ultimately about respect. Is your Website fast? What do 'fast' and 'slow' really mean? Can a site ever be too fast? How can you tell? User's perceptions of your site matter as much as quantitative measurements, and designing your site to seem fast is crucial. This talk explores the psychology of the user experience, especially on Mobile devices, and suggests some real-world solutions to optimizing your site in ways that make sense to the people that matter - the end users.
Smart TV's and Web technologies seem like a match made in heaven. However, there are a number of pitfalls for developers looking to take JavaScript to the big screen. In this talk, Roy Sutton discusses the issues that TV Web app developers face and how the Enyo framework team tackled these problems when creating the Moonstone UI library.
Parallel JavaScript provides web developers with a safe, high-level API that allows them to write applications that effectively utilize multi-core and SIMD parallelism as well as GPUs while preserving the programmability and portability of JavaScript. Parallel JavaScript is available in Firefox Nightly today and is being actively considered for standardization as part of the next version of the JavaScript language. This demo will introduce Parallel JavaScript API and highlight the leaps in performance that are possible in representative web applications.
To the Batmobile! Atomic batteries to power, turbines to speed, ready to make some desktop applications with Node.js! Atom-shell by Github is the Batmobile for HTML5. Your website can already zip around Gotham city fighting crime, but sometimes you need more power and tools. Atom-shell combines a Chromium front end with the power of Node.js, allowing you to make some powerful desktop applications on OSX, Windows, or Linux. This session covers how to build an HTML5 based application utilizing features from Node.js that were never possible in your browser. Beginner front-enders will love the ease at which we can create applications, while seasoned veterans will love the potential that Node.js has to offer for creating anything you can think of.
Netflix performs hundreds of UI A/B tests every year. In order to quickly iterate on tests and their results, we have developed several solutions for reducing complexity and streamlining development for UI engineers. Our Node.js stack is tuned for quick feature development and rapid test iteration and has lead to several interesting patterns around template loading and asset (css, js) and HTML (view) packaging.
(alternative titles; Twitter Bootstrap: Stop Doing it Wrong; Stop Abusing Bootstrap) Due to its consistent style, breadth of common components, and relative ease of use, Twitter Bootstrap is everywhere. Its prevalence has lead designers to resent the very look of it (even with varied styling), causing something of a backlash against the whole framework. But the problem isn't with the framework; the problem lies in how we use the framework. It's actually quite malleable, and the look that we've come to loath is but one particular interpretation, manifested in the 'vanilla CSS' version. By embracing semantic markup, and working from the Bootstrap source, we can effectively leverage the power and ease of the framework without being constrained by dreaded 'Bootstrap look'. In this talk, I'll demonstrate the flaws of building on the 'vanilla CSS' version of Bootstrap, and show how working from the LESS/Sass sources is faster, easier, and much more flexible for building a quality design.
Users have grown to expect icons as part of interface design. They offer a common visual language that helps identify key aspects of an interface. But behind the scenes, designers and developers have to do some legwork to make sure icons display well across a myriad of display sizes, resolutions and styles. From grids, pixel densities and styles to fonts, spritesheets and SVG, drop by if you would like to learn more about common problems and solutions in icon design, production, and development.
We love Node.js. But, it doesn't do everything...or does it? Node offers a plugin architecture where you can make your own addons. The downside? It's C++...a far cry from the typeless garbage collected world of Javascript. In this presentation, we'll talk about how you can make your own Node.js addon. Ben Farrell will touch on the C++/Javascript bridge, multiplatform compilation, using shared libraries, and more! Ben will also talk about what motivated him to learn about all this crazy stuff: an open source 3D sensing library that was only available for C++ that he REALLY wanted to get into Node.
During my career as a full stack engineer, i have opportunity to interview many front end engineers. Many a times I meet someone who is awesome in front end technologies but they do not know about simple data structures. In this talk I will first motivate the importance of data structures and then give simple intuitive introduction to data structures like Array, List, Map, Queue, Stack, Set, Tree. Then I will also go through strategies to solve interview problems through some examples.
You could learn about yet another API or framework, but the way we really level up as developers is by seeking out ways to view our programming problems in a different light. Let’s expand our programming minds by thinking about how we can use javascript in experimental and unusual ways. Can we write javascript without ever using the ‘this’ keyword? Would we want to? Can we write javascript without sharing mutable state? Would we want to? You might not leave this talk with code examples that you’ll apply to your production code tomorrow, but you’ll leave with a different perspective and a new way of thinking about how JavaScript can work.
The re-emergence of functional programming coincides nicely with the JavaScript renaissance. But where does the UI fit in? In this talk we'll cover the core concepts of Functional Reactive Programming while learning a practical application of them using Bacon.js. You'll learn how to build user interface components in a clear, declarative style by modeling both user interaction and back-end processing using one clean abstraction: streams of events.
One of the first issues that people run into when starting with ajax calls is manipulating data returned on success and using it outside the scope of the callback function. In this talk, I'll go through my evolution from using _this = this; to make functions local to my module visible to my callback functions to using functions like $.proxy and _.bind to manage scope cleanly without the need for useless scope variables. My goal is to show people who are new to javascript a practical guide to understanding scope and illustrating not only why it is important to understand the scope of your functions, but what can go wrong if you don't.
Almost a year ago the frontend team at Eventbrite introduced RequireJS to our codebase. Through much experimentation we found an ideal way to work in a world where we have legacy scripts and RequireJS based applications.During this talk we'll discuss:
- Why RequireJS is useful
- What the pitfalls of RequireJS are
- How to introduce RequireJS at your company.