Speakers

Venture deep into the belly of the browser to uncover the secret incantations to instantly load anything. We’ll even back it up with rock-hard data. Will we use preload, prefetch and preconnect? What about HTTP/2 Server Push? or Service Worker? and how the heck do we ship JavaScript bundles that don’t break the bank on mobile? Discover this and more tips to delight your users in the Browser Hacker’s guide to instantly loading EVERYTHING.

Functional programming has been gaining a lot of popularity in the JS community, and with good reason: rejecting side-effects and mutability - in-place changes to data - helps avoid a lot of headaches. But when you refuse to mutate objects, you have to create a whole new object each time something changes, which can slow things down and eat up memory, making functional programming seem inefficient.

That’s where immutable data structures come in - to save the day, and time and space! Also called “persistent data structures”, they help you efficiently make new “modified” versions of immutable objects, by reusing parts of the old object that you don’t need to change.

In this talk we’ll take a look at how these data structures work, why they’re fantastic for functional programming, and how we can easily use them in our JS code thanks to libraries like Mori and Immutable.js.

Want to know how JavaScript engines work? Why is JavaScript so fast? What is just-in-time compilation? We’ll look at basic concepts of compilers, challenges posed by modern JavaScript, and how to write compiler-friendly JavaScript.

WebAssembly is fast. It’s being called “the future of the web”. It’s speed and potential have major browser vendors working together to make it a reality. And it’s on it’s way—the MVP hit multiple browsers in October of last year.

But what makes it fast? Starting from the basics, this talk will walk you through what WebAssembly is, and then why it’s fast.

Parsing JavaScript fast is critical for fast web page startup. We’ll look at challenges posed by complex frameworks and new language features and how V8, the JavaScript engine behind Google Chrome, solves them. You’ll learn how to write and bundle your code in a way that is fast to parse.

Some topics I’ll cover in the talk:

• How does V8 parse JavaScript and how does it decide what parts to parse / compile upfront?
• Recent and upcoming improvements in the area of parsing JavaScript better
• What should developers do to make parsing be less of a bottleneck?
• Why is benchmarking parsing hard?

Rather than just playing videos in the browser; what if you could edit and composite them on the fly?

Just as the Web Audio API allowed for dynamic audio manipulation, we can now do similar things for video, opening up the creative possibilities for interactive visual experiences on the web.

In this talk I’ll show you how, with some live coded demos using an open source library. I’ll also talk about how the BBC is using these techniques to explore the future of TV.

Early look in to the upcoming JavaScript features SharedArrayBuffer and Atomics. I will show you, how to craft complex applications using shared memory and gain massive performance boost by utilizing all available CPU cores for parallel computation on same data. I will also teach you how to write safe code while using shared memory and avoiding deadlocks of web workers. I will introduce a custom TypeScript like language called TurboScript for easy parallel programming which will generate efficient asm.js like JavaScript. Finally I will do a live demo of an app created using shared memory and TurboScript “A Global Illumination Ray Tracing Renderer for Three.js”

Today’s most popular frameworks come from a time when the world was a different place. Ember’s first rendering engine, for example, was optimized around the performance gotchas of Internet Explorer 6. IE6 has since faded into history, and smartphones with spotty connectivity and occasionally dodgy hardware have become the lowest common denominator that we must optimize for.

In this talk, we’ll discuss how smartphones fundamentally change the assumptions we make about architecting applications for the web. Then, we’ll cover how we can embrace these new mobile constraints to build even better apps—for everyone. Finally, we’ll look at the techniques used by desktop-era libraries and what they’re doing to become great for the mobile web.

Creative expression on the web shouldn’t be limited to people who know how to code. In this talk, we’ll explore how to repurpose the sophisticated tools that designers already know to build interactive, dynamic art on the web.

I’ll demonstrate this principle through a JavaScript library that allows designers to create full-bleed animated comics, graphic novelas, story boards, sequential art and so on, using a tool they already know: Adobe Illustrator. By combining SVGs with powerful three-dimensional motion effects, we’ll learn how to tap into unexplored capabilities in the browser and break out of the 1D world and into the 3D universe.

We’ll use simple techniques to build animations that are high-resolution, performant, and best of all, easily accessible to designers by allowing them to use their own tools to “code” in their own language and thus deliver cinematic-quality stories on the web without ongoing engineering assistance.

Today’s Javascript developers are working at an intersection of user experience, security, and the next generation of connected technologies. With the growth of full-stack JS tools and the expansion of the Internet of Things, robust Javascript applications will play an even bigger role in the devices and tools we use every day.

With this great power comes an even greater responsibility to our users, and to their privacy and safety. How can we advocate for and build the future of usable and trustworthy security? We’ll discuss real-life examples of improving the user experience of security tools for generalist developers, and learn some key tactics for user advocacy.

The Internet of Things is quickly entering our lives with stunning feats of innovation–and sometimes absurdity. Internet connectivity in household and industrial devices truly holds a great deal of promise, but is the pace of innovation too fast and is the design praxis sufficiently rigorous? Is JavaScript well-suited to control devices that can cause material and physical harm? By way of case study, this talk explores ethical issues with IoT technologies and transfers lessons learned from biomedical, automotive, and aerospace engineering industries.

Research shows that by simply regulating their breathing, one may experience less fear, anxiety, and improve memory. Sure, we all could strive to become more mindful and self-aware, but in true programmer fashion, I ask, “why not use technology instead?” Even better, why not use open-source technology to monitor and alert ourselves of these arrhythmic respiratory changes?

In a few months time, I had created a new calendar for our partners at Booking.com. Months? Yes, months. Creating a calendar that works correctly all across the world for 42 different languages and even more locales, is not something that you do in a week. In this talk I will talk to you about the weird things I learned. From Brazilian Summer Time and Slovakian date formatting, to surprises in open-sources libraries and dealing with wrong assumptions. And how to avoid the many (many!) mistakes I made.

“MAKE IT MODULAR,” they said. “IT WILL BE BETTER,” they said. Modularity is a term so common in today’s software industry, that it’s easy to uncritically accept it as a fundamental software development principle. but what does “modularity” actually mean? Where does this idea come from? Where is it going? This talk will walk us through the technical etymology of “modularity”, stepping through the intellectual breakthroughs alongside the fast spread misconceptions. We’ll conclude by exploring the implications of modularity’s ill-examined history on both its current use today, and where it’s heading in the future.

Every other week there seems to be a new dump of cracked passwords, hurting innocent and unbeknownst users. It seems as if keeping users passwords safe is an herculean task, even beyond the most resourceful organisations. However it doesn’t have to be.

Password hashing is a important discipline in cryptography. Securing passwords has become so integral to our society that in 2013 a Password Hashing Competition was announced, for the academic community to band together and develop a common recommendation for future use. In this talk I’ll showcase how to handle passwords correctly and safely and clear out misinformation that is still abound in tutorials and blog posts. All with heaps of demos to motivate, make the material concrete and so everyone can follow along!

In the last 10 years the number of internet users has grown from 1,162,916,818 to 3,424,971,237, and by 2017 many more are expected to come online from emerging nations. These nations lack fast internet speed and, for most, internet data is expensive. People from these nations will occupy a large percentage of our user base, and as developers, are we prepared to serve them? Have we thought of how our apps will respond in scenarios of poor or no connection, or how users will react if it consumes too much data? In this talk, I’ll tell you from my own experience as a citizen of an emerging nation (Nigeria) about these users, the kind of challenges we face, how we can build apps for them, and principles I think if followed, will make our apps work for the next billion internet users.

Over a year ago, the nested loops opened jsconf.eu 2015 with their debut single (and only song to date) “Javascript, what are you?”. Buttons were pressed, videos were played and music was heard, but nobody was really sure what even happened.

This year, we will be back.

And we want to answer the simple question: “How is it made?”. We’ll show you why and how Javascript and a lot of other web-technologies were involved in making an opening performance for jsconf.eu.

In 2016, we at The Financial Times launched a new version of our website to great success. It broke ground on key areas in which we’d set out to excel and measured very closely, like performance, resilience and usability. But one day, and rather serendipitously, we realized we had largely forgotten to measure one thing: accessibility. And you can’t improve what you don’t measure.

In this talk I will go over how we went from being generally oblivious about accessibility to making it a core part of our process across multiple divisions. I will share the roadblocks we found and the lessons we learned, along with tangible solutions you can integrate them into your own project today, regardless of available time, budget or support.

If you’ve spent much time writing (or debugging) JavaScript, you’ve probably come across some quirky behavior, especially in the strange and wonderful ways JavaScript handles math. How can we figure out why JavaScript behaves this way? To unravel the mystery of JavaScript addition, we will go on an empirically-structured adventure through the JavaScript web console, Mathmagic Land, and the ECMAScript Language Specification. With some help from Donald Duck, you will emerge with greater knowledge of mathematics in JavaScript, some new perspective on the methods behind the JavaScript madness, and the inspiration and tools to explore new mysteries in JavaScript yourself!

How did piece of satire lead to a ASCII picture of Guy Fieri getting merged into the Babel source and our t-shirt design? Who is left_pad? How did I go from complete ignorance of one of the biggest tools used in the JavaScript ecosystem to becoming a user, contributor, and eventually maintainer? What are some of the interesting stories that maintaining a project lead to? In this talk, I hope to bring home the fact maintainers are just developers and people like everyone else.

Making art on the web is easy, if you got the right tools. HTML has styled divs. JavaScript has canvas. I have an emoji keyboard. But what if our tools were better, and making art was easier? What if there was a magical widget that transformed any word into emoji word art? Or an image into pixels, which you can then style with CSS? What if it was easy to build these tools, embed them on any sites, and give them out to people, so that they can make art? Spoilers: it is, and I’m going to tell you about it.

NESpectre is a genuine 8-bit NES videogame console that’s been transformed to accept massively-multiplayer input from an entire audience via our JavaScript stack. Come haunt our NES with your supernatural influence and expect the wildly unexpected to happen! Visual and audio glitches, impossible game scenarios, 100-player versions of classic games and more will all be at your fingertips. Come for the mayhem, stay for the networking and hardware hacking knowledge dump. NESpectre is a one-of-a-kind system that has never been shown at a JS conference!

Breaking the API of a package can create severe disruptions downstream, but package maintainers have flexibility in whether and how to perform a change. Through interviews and a survey, we found that developers within a community or platform often share cohesive practices (e.g., semver, backporting, synchronized releases), but that those practices differ from community to community, and that most developers are not aware of alternative strategies and practices, their tradeoffs, and why other communities adopt them. Most interestingly, it seems that often practices and community consensus seems to be driven by implicit values in each community, such as stability, rapid access, or ease to contribute. Understanding and discussing values openly can help to understand and resolve conflicts, such as discussions between demands for more stability and a pursuit of frequent and disruptive innovations.

Fade in. An opened terminal window. iTerm2 is the flavour. Dracula, the theme. You split the panes in two. You are at it again: a stash of audio buffers and that dream of manipulating a lossless file. With node as your language of choice you embark on the night. You manipulate, you transform, you have your byte order sorted, on their own accord your fingers type gzip -f yourFavPhilCollinsSong.mp3. All of a sudden, a whisper:

But what if.

we stream.

file compression.

on the fly.

Fade to black.

In this talk we will walk through file compression algorithms in node as well compression standards. We will cover working with streams, audio buffers, and typed arrays to get us to compress and decompress files, and yourFavPhilCollinsSong.mp3.

JavaScript is notoriously bad when it comes to date and time problems. The built-in Date object has so many quirks and implementation differences that many developers have abandoned it, in favor of libraries. How did we get here, and what can be done about this? This talk is in three parts, and led by maintainers of the Moment.js library. First, you’ll understand how the Date object came to be, what parts of it are useful, and where the problems are. Next, you’ll learn about the present-day alternatives. We’ll cover three modern JavaScript libraries: Moment, date-fns, and js-joda, all of which are viable solutions. Lastly, you’ll hear about how we are working through the ECMAScript technical committee to get better support for dates, times and time zones built-in to the language.

Front-end developers sit atop a massive amount of technology, often treating whole pieces of our application as opaque functionality. Grab a hard hat and follow me down into the internals of Preact, a tiny 3kb alternative to React. Along the way we’ll shed light on fundamentals like JSX & Virtual DOM, demystify DOM diffing, and see how keys work up-close. On our way back to the surface, we’ll stop at the Museum of Lost Hours to see some performance and size optimizations. Hope you’re not afraid of the dark!

You’re probably familiar with source maps – they let you debug your original, unminified and untranspiled code in the browser. But ever wonder how they actually work? In this talk, we deep dive into the source map format to see what’s under the hood. We’ll cover source map generation tools and parsers, and learn how to manipulate source maps directly for fun and profit.

Come and be fascinated by the world of audio visualisation in a browser. This isn’t just about creating stunning data vis to music! We see how we can pipe data realtime into custom properties to enhance our visuals. The speaker re-addresses how we analyse sound via the Web Audio API and proposes a better way of processing the data to better suit music. And, to top it all off, we harness the Web MIDI API for full hardware control as well. You may not think it, but this really is a talk with a great deal of take-aways and new techniques for you to consider in your coding life.

JavaScript Style Sheets (JSSS) was a technology introduced by Netscape in 1996. Chances are, you’ve never heard of JSSS, since it was available in Netscape Communicator 4.0. They allowed you to define custom styling rules for your web pages. You’re probably more familiar with its competitor at the time—CSS. They were pretty cool though. JSSS allowed the developer to style the DOM using a full programming language with variables, conditionals, and functions.

The obvious spoiler alert here is that CSS won and JSSS lost, right? It’s not that simple. A lot of the ideas from JSSS have slowly been creeping back into our toolset. SASS brought programming logic back into styling our applications. CSS picked up variables and the ability to do calculations. Finally, the React community has been—maybe unknowingly—bringing JSSS back from the dead. In this talk, we’ll take a good hard look at JSSS and the ways in which JSSS has had enduring legacy after its untimely demise.

Every talk you’ll hear about ‘web performance’ will tell you that shaving 100ms from response time produced a 1% sales yield for Amazon, or maybe that 40% of web visitors will abandon your site when it takes more then 3 seconds to load? While those are impressive, there are some more interesting metrics that we need to talk about.

Did you know that 43% of the humans on this planet have access to the internet, but 57% do not? Did you know that in 2016 India brought 100 million NEW users to the internet for the very first time? When you take a glance into the current state of global connectivity, you might realise that the internet you think you know so well exists on an entirely different plane.

Through the guise of user-experience and empathy, we’ll study the state of global connectivity, connection speeds, population, and the costs of data in order to re-centre how we think about our role as designers and developers for the web today.

Did you know that how we learn JavaScript has changed a huge amount over the last ten years? Lots of small changes in how we introduce people to JS have built up over time into a radical difference - these changes are based in sociolinguistics!

Our community’s communication has evolved rapidly. We’ve moved from only valuing the opinions of senior developers to recognising the importance of contributions from people at all stages of learning. Learning itself has become a form of participating. These are examples of the sociolinguistic concepts of legitimation and positive welcoming.

My talk will introduce the basics of sociolinguistics, how we are already using them, and how we can integrate them more effectively to start building a more inclusive and welcoming space for everyone in the JS community.

Https is the new normal. We all knew that the CAs are not working properly. The chain of trust between the website and “me” is founded on the believe of the “green lock”. If we dissect this chain of trust we find the “weakest link” the private-key’s. This discovery leads to question how we manage our digital identity. And leave the unanswered question, how could we rebuild trust?

How can we know how good we’ve got it without really understanding how good we used to have it? JavaScript was first released with Netscape Navigator 2.0 in September 1995 - can an application from today exist in the browsers of yesterday?

Just how different was the development experience then compared to now? Is it feasible to implement a modern Web application in the browser that pioneered client-side development? What would code from 1995 look like rewritten with today’s JavaScript?

In this talk I will answer those questions by implementing TodoMVC in some early browsers. When we’re through, we’ll leave with an appreciation of just how far the Web and Web development have come in the last 20 years.

We’re accustomed to great connectivity but what if you need to access important info when you’re disconnected? This session will uncover the approaches used in successful real world examples of Offline First and show you the tools and techniques that will allow you to build the same kinds of things. From supporting hospitals in Africa to providing electric power to Haiti to supporting families in rural Alaska, the Offline First approach to app development is truly saving the world.

Every time I have to check the “Male” or “Female” boxes, it feels :poop emoji:. By building and shipping expanded gender options at my $DAYJOB, I learned how to convince folks that gender options in product matter, how to get time and resourcing for social justice projects at work, and how to measure the success of a feature that only a small portion of users interact with.

What even makes sense in Javascript ?

For a language originally created in 10 days it surely has a lot of quirks and perks many JS developers are unaware of. Sometimes, it might even seem like we fell down the rabbit hole only to find that NaN is actually a Number, undefined can be defined, +!![] equals 1, Array.sort() may not work as you suspected and so much other nonsense that can trip any JS developer’s mind.

This talk is a collection of Javascript’s oddities and unexpected behaviors that hopefully will prevent some future headaches and help understand the language that we all love in a more deeper and meaningful way.

Two web developers who are full of curiosity to learn all about machines and code met at a meetup. Unsatisfied with traditional computer science textbook and what we felt like not so learner friendly software engineering landscape, we decided to learn by working together in the format we enjoy the most - creative project.

We are building machines (both software and hardware) in JavaScript to send secret messages to each other. Different forms of data blob are exchanged periodically as a message. In order to read those messages, each has to learn and build a system to decode the data.

This talk will tell the story of the machines, their parts, and the possibilities of remote creative collaboration. You’ll come away with fresh inspiration on how JavaScript can be used to learn computer science concepts the enjoyable way.

But it makes things so nice and easy :) AMP at its heart is a JavaScript library for building super fast static web pages. Being purely web tech based, we can understand how it works and take the best ideas and use them in non-AMP projects. This talk will dig into the nitty gritty details of AMP and uncover how the sausage is made so to say. We’ll talk about network concurrency, font loading, image optimizations, and this magic thing called pre-rendering. Even if you never plan to use AMP, you’ll learn new tricks that you’ll be able to use to speed up your next project!

Do you want to show your caring for the JavaScript community by doing some sharing? At work, are you thinking that the code you keep pasting in project after project should become an internal library? The key to creating a great library is designing an API that people love using. We will walk through API design patterns in popular JavaScript libraries, including LoDash, Q, Moment, and Request. You will learn what patterns work, what mistakes have been made, and how to apply this knowledge to your own JavaScript libraries and tools.

There’s an old software joke that goes: “Some people, when confronted with a problem, reach for regular expressions. Now they have two problems.” Regular expressions are a web developer’s best friend and worst nightmare. Sure, you’re glad someone posted the regex pattern for a phone number on Stack Overflow, but when the intern asked you to explain what a “capture group” was, you broke into a cold sweat. So is a “regex” the same thing as a regular expression? How are regular expressions implemented in JavaScript? And just what do Alan Turing and Noam Chomsky have to do with all of this?

Do you feel limited, boxed in, like you are unable to grow? Try to imagine how numbers in JavaScript feel - they are stuck between +/- 9007199254740991. Unable to breathe, they are stuck.

I will talk about how we can free numbers in JavaScript to represent values much larger than their natural constraints. The talk will navigate through increasingly creative techniques to represent numbers of ever increasing values - freeing numbers from their constraints as well as ourselves.

Of course you know what beautiful code looks like. Too bad nobody actually agrees with you. So, what exactly makes beautiful code? Is it readability? Elegance? Simplicity? How much of it depends on the programming language, on your coding style and on the actual code you’re writing? The presentation will contain nothing but code and thus the talk will be largely non-technical.

The early 2000s bred a new generation of web developers and designers out of the pure need of creative expression. Teens didn’t have access to StackOverflow, and couldn’t easily Google their coding problems—so they turned to each other. Through collaboration and inspiration from others that were blazing their own way, they created their own unique personal sites without any regard for standards. Let’s explore the world of CSS via ‘filter: dropshadow’, JavaScript snippets, 8 pixel fonts and take a look back at what the web looked like before we followed the rules.

August 30, 2016, was by all accounts an average Tuesday, and release number 523 just a simple re-factor, but something went horribly wrong that day: bad code escaped from the office, and it quickly spread to infect tens of thousands, giving rise to a hoard of zombie ServiceWorkers!

This is a disaster about a typo. This is a thriller about technology out of control. This is a tragedy about wasted CPU cycles. This is a cautionary tale about living in the age of ServiceWorker.

Jet Propulsion Laboratory - scientific institution making research and development for NASA. Their portfolio includes such famous missions as Curiosity Mars rover and Voyager probe which left solar system after 25 years of flight and still providing scientific information. High level of automation and long duration of missions led to superior demands to software quality. As a result of JPL amazing experience a set of code guidelines was developed and published recently. Since demands to web-driven software constantly increase and more critical tasks are entrusted to JavaScript, lets apply NASA coding guidelines to JavaScript / HTML applications for higher performance, reliability and the better world.

In this talk, I’ll share what it was like for me as a new JavaScript programmer from a minority background. We’ll then discuss some ideas for creating more welcoming environments.

I decided to teach myself programming while working on a startup. When I started out in the JavaScript world, I encountered a variety of challenges. I tried participating in various communities but felt out of place. It was difficult for me to ask questions and I rarely met anyone from a similar background. There were also many people I met along the way who helped me grow as a programmer. We’ll talk about the obstacles that I faced, how I overcame them, and offer suggestions for what we can do to lower the barriers to entry for others.

Jest was adopted widely across 100s of companies recently and provides an immersive testing experience. We’ll take a deeper look at JavaScript Testing with Jest and what it takes to turn a tool into a product with a delightful experience.

The vast majority of website owners (and therefore JavaScript users) are non-technical. They don’t know how to copy-paste an embed code, much less how to use ES7 or React. But these website owners have a right to the same high quality tools we use every day.

By building tools which can be dropped into pages, which learn their configuration from their environment, which assume reasonable defaults and deliver value without having to be told how, we can make what we build work for everyone, not just the lovely people in this room.