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.
The gaps between the web platform and native models are disappearing one after another. This talk will present two related such areas.

As JavaScript performance approaches that of the native programming languages through Just-In-Time (JIT) compilation and aggressive type inference, parallelism offers exciting new leaps in performance and power efficiency. While JavaScript programming models for multicore are under development, SIMD.JS, a JavaScript API, currently under active development in a collaboration between Google, Intel, and Mozilla, brings to JavaScript the capability of programming the low-level data-parallelism capabilities of modern microprocessors using their Single-Instruction Multiple Data vector instructions. Already landed in Firefox Nightly and fully prototyped in the Chromium browser, SIMD.JS delivers speedups in the range of 4x and above on compute-intensive kernels. Historically, SIMD has been very successful in dramatically improving application performance of certain domains including gaming, image processing, and computer vision. With the recent TC39 unanimous approval of advancing SIMD.JS to the next stage of standardization for inclusion in ES7, HTML5 runtimes are about to get a lot faster for such domains.

In addition, we will explore and demo awesome experiences one can create using Media Capture Depth Stream Extension, a new technology that is under consideration in W3C.With the arrival of integrated depth-camera through technologies such as Intel® RealSense™ and Google’s Project Tango, depth camera is going mainstream. In addition to color per pixel, 3D cameras provide per-pixel distance. This extra information is essential for certain applications such as real-time hand/finger/object tracking as well as enhanced video conferencing However, up until now depth information was not supported in WebRTC, the HTML5 real-time communication API.
Connected devices are drastically expanding the possibility space of user-machine interactions. Currently, most of these devices require that the user install a native app on their mobile device to allow for such interactivity. As more and more connected devices start to appear around us, installing an app for each one does not scale well. An alternative approach is that these devices simply broadcast a url which users then point their browsers to. The served content can be relevant information or even a direct interface to the device. This Physical Web, if adopted, would allow for on-demand device interactions, all without installing any app whatsoever. This talk will explain the what, why, and how of a proposed open standard Physical Web.
Flux is Facebook's web application architectural pattern that we use with React, our popular JavaScript library. In this talk, Bill Fisher will discuss how Flux is different from MVC patterns, and how it can clean up web applications to make them faster and more maintainable with cleaner code. Flux is used throughout Facebook's various products, is open source and is battle tested. Come find out how we build everything from small widgets to huge, revenue-crucial applications at Facebook, using React and Flux.
What is VR? Why is it special? What will happen when we combine it—spatial, immersive, and performance intensive—with the wild and eclectic web? What creative possibilities will open up? Which web values will be strengthened—interoperability, user privacy, security, etc—and which will change? Virtual reality is a new medium. It presents us with challenges and opportunities completely unlike anything we’ve encountered in mobile or desktop. In this talk we will explore the bleeding edge of the VR web: how developers can create VR web experiences today, what we’re learning about visual and interaction design best practices, how to extend responsive design to VR, and what we as web professionals need to learn from peers in fields like game design, visual effects and architecture.
In many ways, the web grew up on jQuery and jQuery widgets. jQuery welcomed millions of people into the world of development, to being accessible for everyone to learn and to experience the value of putting power into the hands of developers. There are over 1 billion websites and some say that nearly half of them use jQuery in some way. It's ubiquitous, it's part of the web and we have come to love and adopt widget plugins like slider, carousel, lightbox, coverflow and isotope. We asked ourselves, what if we explored a marriage between jQuery and and re-imagined those jQuery Widgets? What if we built new jQuery plugin widgets that were just as easy to use and implement as the old ones but super powered with a 3D layout and physics based animation engine? What if it took as little as two lines of code to replace the old widget with the new one? What if that two lines of code not only gave you a new widget, but it created a fully functional front end container that brought with it 3D layout and animation engines, developer tools and built-in cloud services like widget level CDN hosting, cloud based settings, Analytics and A/B testing? What if this enabled you to upgrade your website, mobile site, or mobile app one widget at a time instead of facing the dreaded re-platforming project? We proudly present the jQuery Carousel. The first of many fully functional front end container plugins that will usher in a new wave of development for web. It's fun, it's powerful and everyone can enjoy it because just like jQuery, and it's Front End Containers are free, open source and accessible to anyone who wants to learn.
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
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.
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.
Enjoy an overview of the multiple ways to connect JavaScript and IoT devices with particular details of the I/O, sensors and actuators. With the advent of low cost Linux hobbyist boards capable of running nodeJS several different libraries have been developed that support digital and analog input and output peripherals. We will present on overview of these somewhat divergent high level API’s, with examples of real use cases developed to take advantage of the new NodeJS support in the Intel XDK Tools. And there will be robots
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.
The Internet of Things (IoT) is defined by embedded computing devices endowed with cross-network connectivity. This era of computing has huge potential for connected enterprises and consumers, and already has many successful use cases. IoT systems encompass many types of connectivity patterns, proprietary systems and network types. Just as the Web plays a significant role in providing an open, interoperable, easily deployable framework for today’s enterprise systems, it is not surprising the Web will provide similar benefits to IoT. New Web standards have allowed enterprises to extend their internal real-time systems over the firewall in a natural, unimpeded fashion to provide real-time, dynamic information to their customers and partners to ensure consistency and efficiency. These same Web standards can and should be applied to IoT systems to obtain advantages such as global reach, ease of deployment, economies of scale, ease of development, etc. We will discuss this evolution, explore the further impact of the Web on IoT and demonstrate some examples. This will be a joint presentation with Kevin Hoyt who will give the demonstrations.
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].
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.
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.
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.
At Pinterest, we've begun experimenting in production with Web Components. This talk will discuss some challenges of implementing Web Components in a large scale production environment such as SEO concerns, reasonable fallbacks for browsers not supported by Platform.js, migrating a large code base component-by-component to mitigate risk, and optimizing page load and scroll performance.
An explosion in the number and variety of Cordova (aka PhoneGap) plugins are invading hybrid HTML5 mobile apps. Cordova plugins provide the extra spice that is often needed to distinguish a plain old vanilla web app with a mint chocolate chip hybrid web app. Where do plugins come from? How do I use them with my HTML5 app? Which ones are okay and which are not? How do I debug my app that contains plugins? We’ll try to answer these questions and more.
Starting with a basic introduction to media queries, we'll see how they can be leveraged by mobile html5 apps to negotiate tablet versus phone, portrait versus landscape. We'll also examine how to tie these in with javascript and solve real-world layout problems that occur when facing so many sizes and dimensions.
Inexpensive computing that connects to sensors has allowed DIY scientists to create automated and connected backyard science experiments. We will present a forensics gathering device and a solar tracking device built with Intel® Galileo and Intel® Edison. We’ll dive into how DIY science fits in with and is aiding professional scientists and researchers. We will talk about how to get started in DIY science including an overview of the Intel® IoT Developer Program. Next we’ll go over the hardware and software APIs used to build these two projects.
Programmers are not like the other kids. Techniques that are effective in managing other professions do not work on programmers. This talk is for managers who want to be better managers of programmers, and for programmers who want to help their managers to be better managers of programmers.
Have you ever wanted to expand your web app to enable a multi-screen experience leveraging large display devices like a television? Google Cast allows you to share content with a Google Cast receiver device, such as a Chromecast. Google Cast web senders use the familiar controls of your desktop browser to control the experience of your application on the big screen. In this talk, Google Developer Advocate Kevin Nilson will talk about Chrome Sender App Development and HTML5/JavaScript Receiver Development. Kevin will also cover some of the best practices to keep your Cast experience simple, intuitive, and predictable.
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.
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.
We'll present a port of the box2D physics engine to JavaScript using SIMD.JS primitives. We'll compare two different ports; a handwritten port and a compiled port from C/C++ using the Emscripten compiler. The tradeoffs and performance differences between them will be shown. We'll cover the type of original C++ SIMD code that can be compiled by Emscripten. Also, the challenges of vectorizing a 2D physics engine, especially vector math, constraint solvers, and batch creation, and how these are applied to the JavaScript version of box2D is covered. Demos using the box2D engine running in the browsers will be shown. The SIMD.JS is a propose standard for doing SIMD programming in JavaScript. It is being considered for inclusion into revision 7 of the ECMAScript standard. The SIMD.JS primitives have been prototyped in both the Chrome and the Firefox browsers. The demos will be done with these prototypes. Emscripten is a compiler, developed by Mozilla, that compiles LLVM bitcode into JavaScript. It can be used with the clang front end to compile C/C++ to JavaScript. We've modified the Emscripten compiler to support generation of SIMD.JS primitives from SIMD code in the original C/C++ code.
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.
We'll present a port of the box2D physics engine to JavaScript using SIMD.JS primitives. We'll compare two different ports; a handwritten port and a compiled port from C/C++ using the Emscripten compiler. The tradeoffs and performance differences between them will be shown. We'll cover the type of original C++ SIMD code that can be compiled by Emscripten. Also, the challenges of vectorizing a 2D physics engine, especially vector math, constraint solvers, and batch creation, and how these are applied to the JavaScript version of box2D is covered. Demos using the box2D engine running in the browsers will be shown. The SIMD.JS is a propose standard for doing SIMD programming in JavaScript. It is being considered for inclusion into revision 7 of the ECMAScript standard. The SIMD.JS primitives have been prototyped in both the Chrome and the Firefox browsers. The demos will be done with these prototypes. Emscripten is a compiler, developed by Mozilla, that compiles LLVM bitcode into JavaScript. It can be used with the clang front end to compile C/C++ to JavaScript. We've modified the Emscripten compiler to support generation of SIMD.JS primitives from SIMD code in the original C/C++ code.
What is VR? Why is it special? What will happen when we combine it—spatial, immersive, and performance intensive—with the wild and eclectic web? What creative possibilities will open up? Which web values will be strengthened—interoperability, user privacy, security, etc—and which will change? Virtual reality is a new medium. It presents us with challenges and opportunities completely unlike anything we’ve encountered in mobile or desktop. In this talk we will explore the bleeding edge of the VR web: how developers can create VR web experiences today, what we’re learning about visual and interaction design best practices, how to extend responsive design to VR, and what we as web professionals need to learn from peers in fields like game design, visual effects and architecture.
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.
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.
Asynchronous functions in Node.js make storing transaction IDs, profiling functions, and getting long stack traces difficult.
These problems become easy to solve when you can tap into the life-cycle of an asynchronous function.
In this talk, Islam will show you how to solve these problems by using continuation-local-storage and the new AsyncListener API.
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!
In the world of creative coding and advertising, many companies are still focused on desktop browsers to deliver their interactive experiences. This is motivated by the fact that mobile browsers are very slow and not capable of rendering much more than a static HTML/CSS layout. But this is no longer true. Equipped with WebGL, Web Audio API and other great technologies, the mobile browser quickly becomes a powerful platform for creative coding. Since mobile is the first, and often the only way that people access content on the web, it's time to explore what this platform offers to creative coders.
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.
HTML5 is now the platform of choice for building 3D applications and web sites. The advanced programming, animation and multimedia capabilities of HTML5, combined with hardware-accelerated 3D rendering provided by WebGL, represents a combination with limitless possibilities. With HTML5 and WebGL, developers can create immersive 3D games, integrated 2D/3D presentations, product displays, social media sites, virtual worlds, content editing systems and more, all running in your web browser.This hands-on course covers developing 3D applications in HTML5 and WebGL, with topics including rendering, animation, CSS3, the Canvas 2D API, 3D libraries and frameworks, 3D tools pipelines, and mobile deployment. The instructor will present several working in examples using Three.js, Tween.js and other JavaScript frameworks, with an emphasis on practical deployment and best practices. This year’s version of the course includes updates on WebGL support in iOS and on virtual reality devices like the Oculus Rift and Google Cardboard.
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:
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.
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.
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.
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.
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.
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.
Using modern web technologies, there's no need to build extra interfaces in formats like JSON in order to transmit data and build proprietary APIs. In this talk, you'll learn how to use easily-parseable microformats and indie web technologies like webmentions to build a fully social activity stream that lets you interact with each item from your own site. You'll leave with an understanding of microformats, h-feeds, webmentions and micropub, and all the ingredients you need to build your own social feeds in standards-based HTML.
Cookies have been around for decades and have served us well. Nobody questions their usefulness. However, modern apps demand a better approach. This session is all about the natural successor to cookies: using a token-based design. Tokens help build apps that are assembled on multiple stacks, that use your own and 3rd party APIs, that run on-premises and the cloud. They help easily “flow” user identity across all layers and security contexts, regardless of how they authenticated. And they help you deal with CORS and XSRF. Join a code session in which we’ll implement a token-based app using AngularJs and an API.
An insight into how SeatGeek was able to achieve a 10x-100x performance increase for our interactive maps by leveraging spatial data structures and tiled canvas elements in LeafletJS.
The aim of this talk is to explain how the responsive web development lives within adaptive. By using simple techniques and highly specialized widget's we can avoid the use of frameworks (i.e: bootstrap, suzy, etc.) that add significant code debt.

The multiscreen (desktop + mobile) is already here, and the focus on maintainability and re-usability is now greater than ever. While building responsive pages we should attempt to have every responsive widget to always be nestable inside any other widget.

I intend to share techniques and lessons learned while developing highly optimized responsive front ends at eBay ( i.e.: )

This is talk is mostly about how to structure and build HTML and CSS in order to make the code extremely modular, re-usable, and testable while providing a beautiful experience to millions of users.
This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization.

This talk was given already twice and the link is here:

I might update it a bit.
Apache Flex FlexJS is an application development framework that uses MXML and ActionScript to create HTML/JS/CSS apps that run in browsers (or anywhere HTML/JS/CSS runs) without Flash.

IE8, 9, 10, Chrome, Firefox, Android, IOS
Mobile Apps via Apache Cordova (PhoneGap)
Bring the advantages of Flex to the JavaScript world
Even if you're using proper HTML semantics, which is the foundation of an accessible site, people dependent on assistive technologies may still not interpret your site the way you intended, or they may still be missing out on some of your awesome content. ARIA is here to help. You'll learn a little about what semantic HTML is, and how you can use ARIA to your advantage.
One year ago when I decided to sacrifice all of my spare time to create Babylon.js. At that time, Typescript was not enough robust so I decided to use plain JavaScript language. But today things have changed and I will show you during this session how and why Typescript can be used as main language for an open source project
(note, while I have quite a bit of production experience with Firebase, I have no professional association with the company and this talk is in no way intended to be a 'sales pitch' for their services)

This presentation will explore advanced Firebase usage for building a production web application with client-side JavaScript. Over the course of the presentation, I will take the shell of an application (dumb pages) and get it online and production-ready by employing the following techniques. Topics include:

1) Querying
How to implement the most common types of queries that appear in web applications using the Firebase query interface, and how to structure data for optimal querying.

2) Indexing
How to appropriately denormalize data to facilitate data retrieval and security rules.

3) Security Rules
How to breakdown the data structures and associated security rules to facilitate access control and schema integrity enforcement. Includes usage of the Blaze Security Rule Compiler for simplified security rule generation.

While this talk is intended for advanced audiences, the basic concepts of Firebase will be briefly reviewed. Understanding of basic JavaScript Web Application development is required.
The conversation is no longer about mobile web vs mobile app, Android vs iOS, but about how to leverage each device and each platform's individual nuances to create a multi-device, multi-platform product ecosystem.

What does it take to build a successful product and what does a product need in order to be “sticky”? This presentation addresses these questions through the learnings of the past four years of offering inclusion for everywhere, everyone,…and every device at Groupon.

Underlying this is understanding the key behaviors of users on each device. For instance, a mobile website might get a lot of first time users whereas a mobile app might tend to have a more loyal repeat-user base. This means on mobile web finding ways to minimize the effort, be it by eliminating unnecessary logins or distracting functionality, may play an important role.

This presentation will consider the key factors that ensure the success of the device/medium individually and within the larger ecosystem.
The SWIK platform was born out of a simple idea - tell a great story, don't worry about the technology. Its goal is to let content creators make media rich interactive narratives, without the need to code. SWIK consists of an authoring tool for creating content and readers on different platforms for consuming that content. The authoring tool makes it easy for users to visually create compelling and complex stories, while the reader lets them enjoy these stories on any device.

The purpose of this presentation is to elaborate on the creation of a browser based reader for consuming SWIK content, the challenges faced in the process and the lessons learned along the way. The presentation is structured around the three core properties of SWIK content: we are telling a story, which is interactive and media rich.

1) Stories:
A story is made up of multiple threads which may be executed linearly (by stepping forward and stepping back) or non-linearly (by jumping). Each thread consists of a number of screens which in turn are made up of several layers. This hierarchy leads to a fairly complex data model. This section will detail how this model was implemented using BackboneJS.

2) Interactive:
SWIK was originally built for consuming content on iOS. Thus, it has support for rich animations and multi-touch gestures. This led to the unique problem of translating touch based gestures and animations into the mouse pointer realm for desktop browsers. This section will highlight the implementation of interactivity using HammerJS (for multi-touch gestures) and Greensock (for animation).

3) Media:
SWIK supports images, audio & video. A requirement that was particularly challenging here was support for multiplexed media viz. more then one video playing at a time or a video playing in addition to background audio. This section focuses on the implementation of rich media support using HTML5.
In the current dynamic and fragmented market of mobile devices, it is a challenge for many companies to continuously maintain and improve the quality and efficiency of their software development. As the market grows and evolves into new areas, the tools must also improve. The time or cost constraints for most companies lead to testing and automation being neglected. This leads to a lack of product quality, customer dissatisfaction, and higher product quality control costs. I will discuss ways to mitigate those risks.
I would like to speak about the challenges and solutions I've come across when trying to build Backbone.Marionette web apps and then trying to re-use components that we have built to be used in other projects. This is not too difficult until you try to use bower and require.js; that's where things got complicated. I would love to discuss the following from the perspective of someone who just started doing this professionally in the last year:
- Development environment
- Trial and error to arrive at our current architecture
- Application architecture
- Refactoring our components into modules
- Creating new repositories for those modules to be accessed via bower
- Tools we've built for maintaining the bower tools.

Never solve the same problem twice.
Building real-time web applications is not enough, we need to talk to 'things' on the internet too. Using a Raspberry Pi is a great way to get introduced to talking with devices and integrating them into a web application. In this code-focused talk, you'll see how to connect to a Pi from a mobile web app and control a presentation via the Pi. You'll learn about Pi's, publish/subscribe messaging, and real-time web apps using Node.js.
Cryptocurrencies like Bitcoin are a form of public decentralized databases. Decentralized systems are very robust and a great building block for applications, but a database alone is not that useful.

We recently announced Codius (, an open-source toolkit for implementing distributed backends in Node.js, Python and more. They can interact with any database, be it Bitcoin, Ripple, Postgres or Redis.

In this talk, Stefan explains how to build decentralized webapps with Codius and what the future of the decentralized web might look like.
In many cases when it comes to designing for the web, we (as designers) often design the best case scenario of a page. It looks beautiful and balanced and aligned... but then we get the REAL copy and it all goes downhill from there.

I have had success recently in taking a content first approach to design. The approach uses what we call a mental model to define and create all of the content first, and then use that content to create our designs.

Not only does this approach create a better design in the end, but it also does it in less time, and with more cross functional collaboration (which reduces review time)
How do we get the best of both worlds by merging the Web we love with the apps our users demand? From “Hosted Apps” to “Packaged Apps” and everything in between, the Web App Manifest can birth true “Web Apps” into reality. But why hasn’t the web yet been transformed? Today’s Web App Manifest seems simple and passive at first glance, but when explored, holds the keys to the future of the web. Jeff will help us truly understand the Web App Manifest and key supporting specs, how the manifest can benefit our apps today and where it can (and should) lead us tomorrow.
Everyone is talking about Web Components and Polymer.js and how they are changing the face of the web.

But do you know, what it takes to launch your next Product on Web Components/Polymer?

In this talk we will show what are the required steps to go from idea to production. The talk will cover areas about design, setting up your project environment, documentation, unit testing and finally publishing your App and Web Components.
Standing out from a crowd, even an exciting new crowd like HTML5, requires differentiating yourself - the more differentiated, the merrier. If you become successful, you will have many competitors very quickly, so you need to continue to innovate.

However innovations don't come out of thin air, they spring from creativity, which, unlike the usual myth, isn't a divine gift, but a skill that can be learnt and practiced.

This talk will uncover core concepts that all creative fields - both arts & sciences - have in common, and show how these can be applied