JSConf US has pushed the language outside of its comfort zone, the web browser, and into the forefront of servers, drones, robots and video games. 

Enjoy a very special day of exciting activities that are sure to make anyone happy from golfing to robot hacking to segway tours during our "choose-your-own-adventure" activity day only at JSConf US.


JSConf US

Functional programming can be difficult to learn. Although there are many practical lessons, they are often hidden through academic lingo and dry examples. What if these basics could be livened up and taught through the lens of music? 

Together, we will go over some of the basics of functional programming including functional array manipulation, closure, and function composition. As I go through these, I will show how they can be applied to the creation of music and musical instruments using the Web Audio API.

Composing music with composed functions

Do you test your React components? I thought not, but why not? Often developers just don’t know how. CSS is hard. HTML is hard, JavaScript is hard. Conflating CSS, HTML, and JavaScript is exponentially harder. 

TDD can help! Learn how to drive a component's behavior, agnostic of presentational concerns, with tests. Learn how to focus on the look and feel once you have a passing test suite. Learn that it’s possible to build and verify an entire web application, before even looking at it in a browser.

Join me as I share a technique that has fundamentally changed how I build React Applications.

TDCD: Test Driven Component Development

A good case can be made for why boring is preferable to exciting in many aspects of our lives. Yet, we're reluctant to apply this sentiment to the web. Rather, we're in a relentless pursuit of the exciting in this increasingly JavaScript-centric world of web development. A pursuit that, despite our best efforts, litters the landscape of the web with excruciatingly slow and inaccessible pages. As division brews over the roles of HTML, CSS, and indeed JavaScript itself, we need to ask if it's worth making the web boring again.

But why make the web more boring? Because boring is fast, resilient, fault tolerant, and accessible. Boring is the essence of unobtrusive designs that facilitate interactions rather than hinder them. When we rely wholesale on JavaScript to build for the web, we're inevitably reinventing things—things that can hinder or even fail people in unexpected ways despite our best intentions. 

In this session, you'll learn why building for the web with a greater emphasis on core technologies is far from boring, but truly rewarding and exciting work that makes the web more inclusive.

Make it Boring

Browser extensions are a defining feature of the web experience, but they're far from perfect. The Chrome team is planning to make a number of changes to improve privacy, security, and performance. 

In this session we’ll dive into some of the biggest issues with the current platform, where we’d like the platform to be, and how the next version (Manifest V3) will help us get there.

Evolving Chrome Extensions with Manifest V3

A talk on things that make us different & unique (i18n, a11y, l10n). Kat thinks that we should embrace culture in our technical practice, and deeply understand our users.

Flat, muted minimalism, vast fields of whitespace, millennial pink landing pages, and those corporate illustrations that all kind of look the same: the internet today, amirite? Actually, that's just "us". In the West, consumers and web developers have deep and long-held expectations of how the web should work and look that have gone largely unquestioned.

While the internet was born in the West, it is not owned by the West. In this talk, we'll take stock of our own biases and take a culturally relativistic look at the internet outside of our comfort zone. We'll explore questions like: Why are Japanese websites so information-dense? How does a script like Arabic, read right to left, affect web design? What languages and frameworks do (or can) programmers across the world use? I hope that attendees of this talk will walk away with a fresh perspective, widened view, and ideas for how to improve the web in the West and make it more inclusive.

Web Norms of the World

What if we could follow a user request, from a page load in the browser, to our backend, through our services, to the database, and back? What does it look like to see how our UI receives data and renders its views across a timeline? What happens when we put these traces together?!

Distributed tracing is a collection of timings across the entire stack, for any given interaction. Whether it’s a page load or a button click, we can measure time for all of the work in the browser, server, and database. In this talk, we will learn the basics of distributed tracing, and how to get started with instrumenting both our frontend and backend in a real world application. You will walk away with the tools you need to setup distributed tracing from scratch, and ultimately, understand everything that happens when someone uses your app!

The (Full)stack Trace: Understand Your App with Distributed Tracing

The year is 2019, and accessibility is not a buzzword anymore. It's now imperative that information is readily available to everyone, regardless of their disability or financial status.

In this talk, you'll find out how to create accessible real-life objects, using run-of-the-mill JavaScript and the basic principles of Internet of Things.

A11Y IRL (Accessibility in real life)

In the summer of 2019, a somewhat out-of-shape software developer had a terrible idea — to use JavaScript to derive the algorithm that powers Washington DC’s bike-share system and then try to set a one day record helping other people get where they want to go.

In this talk, we’ll learn about how humans can deduce machine learning, how you can turn yourself into your own API, and about how 250 years of history and a few million years of geology influences everyone that lives, works, and plays in our nation’s capital.

Can our heroic speaker overcome DC’s climate, the L’Enfant Plan, AND his own laziness to break a world record? Probably not, but let’s find out together!

Tour de Bikeshare: Setting World Records with JavaScript

Trans and non-binary people are becoming increasingly visible in the workplace, as well as in community spaces such as meetups and conferences. Most managers and event organizers want to be inclusive and welcoming but frequently, in spite of their best intentions, often come up short. 

Wouldn’t it be nice to have an actual non-binary trans person just tell you what you should be doing and why? VOILA! Allow me to swoop in and fix your interview process, your community event, even your office space! Can you believe? Shamazing!

Trans Eye for the Cis Ally: Ensuring an Inclusive Community

Component libraries and design systems are becoming popular and more complex. They abstract our UI to make us more productive. Why can’t they do the same with end-to-end tests? In this talk, we’ll explore how our component libraries can export UI test helpers to make testing easier, faster and more reliable in downstream applications.

Componentizing end-to-end tests

It's 2019, audio packets from streaming services are swirling all around us. Yet, as JavaScript enthusiasts, we are often so focused on the application layer that we miss out on all the quirks that exist in the layers below.

Let's journey from the browser down to the physical layer (and back up) to see how a single audio file travels over the wires and into our lives. This talk will look at audio codecs, compression techniques, and the use of TCP congestion control algorithms (like BBR) to help manage packet loss.

Meet the Packets: How audio travels into your browser

Some things in web development just work; they do what they are supposed to do day in and day out, and we don't ever have to worry about them. It's the "little engine that could" story: it's reliable, it stable, it's trustworthy. The Focus subsystem is one such system... reliable, stable, trustworthy, but is it good... does it meet the needs of modern web development? This talk delves into the Focus subsystem for Web Browsers and asks us to consider is there more it could be doing and how do we make it happen?

Advancing Focus

When it comes to accessibility, in the Javascript community we often forget to talk about what it takes to get on the internet in the first place, yet the Federal Communications Commission estimates that 34 million Americans don’t have access to the internet. 

Where do these people go when they need to check their email, turn in their homework, or apply for a job? To the original open archive for information: public libraries! 

In this talk we will peer into the digital divide and learn about what public libraries across the United States are doing to support their communities access to the world wide web. 

We will discuss how hardware constraints, PC reservation software, browser access, and broadband speeds affect user experience and what we can do to help librarians and the Digital Inclusion movement.

¿Donde Esta La BiblioTech?

Software is the most malleable building material we've ever created, and yet Technical Debt continues to plague the choices we make when building applications.

When we talk about starting new projects, there's always a debate over getting something out the door knowing we're taking on Technical Debt in order to "move faster" versus taking our time to build it properly and risk over-engineering and possibly overfitting our application to an unknown problem. Can we avoid this Kobayashi Maru?

Like what Docker did to decouple the Infrastructure Layer from the Application Layer, we can decouple the Business Application from its Technical Architecture.

From 20 years of experience building software applications for different domains, I'll use many code samples and example applications to show how we can change the technical architectural choices of without affecting the business logic, and prove it's possible to decouple the application from the architecture so we can be fast and build it right.

Decoupling Applications from Architectures

More and more art incorporates LEDs these days, and for good reason. They're eye-catching and can be controlled cheaply by a Raspberry Pi.

The question of course is: how do we animate them from JavaScript? The answer is more complicated than just figuring out how to turn LEDs on and off. Animating LEDs smoothly requires math!

This talk will dive into the theory and practice of using different color spaces combined with some clever math to create beautiful LED animations for your JavaScript-powered art piece.

Creating Beautiful LED Art with JavaScript

"I often worry that my colleagues are smarter than me and one day they'll discover how incompetent I really am." Explore techniques to build confidence as a developer.

I often worry that my colleagues are smarter than me and one day they'll discover how incompetent I really am. I try to learn everything I can and keep up with the latest technology, but is it enough? They always seem to know more. Why do I always fear my success is dependent on my ranking against others?

In this talk, we'll explore techniques I've found to build confidence as a developer. We'll discuss how to honestly inventory our skills, reframe goals, and take an authentic look at our own journey. Our increased confidence will let us escape the alluring imposter syndrome sinkhole and liberate us to maximize our contribution.

Staying confident without feeling like an imposter

Side projects can be daunting if you're new to them. It takes discipline to get started, and even more so to finish. And what's even more daunting is that finishing is only the beginning of maintenance.

In this talk, I'll relate my adventures coming up with dance-mat.js, the project for making a Dance Dance Revolution controller with Raspberry Pi, the Bare Conductive PiCap, and Node.js.

Just go for it: The story of dance-mat.js

Let's have some fun with TensorFlow and React. Not familiar with TensorFlow? No problem, you will get a fast crash course and learn how to track faces and add silly adornments (I bet you would look good with a new set of reading frames) entirely in the browser with TensorFlow and React. 

With a good background in the tech let's expand to tracking multiple limbs and evaluating and scoring some yoga positions. 

We will look at a couple different scoring algorithms, and finally challenge the audience to beat our high score for ultimate bragging rights.

Yoga Pose

As technologists, one of the hardest things to remember is that we’re not our users and our assumptions can easily extend into our work. If we aren’t careful, we can easily end up designing products based on our assumptions and biases rather than insights from the actual audience.

If we want to build better products, we need to include our target audience in the creation process and listen to their feedback every step of the way. 

In this talk, I’ll share what my team and I learned from two different projects where we worked directly with our audiences - busy moms who were raising a child with autism and Gen-Zs experiencing various forms of bullying. 

You’ll learn what types of biases to watch out for, how to challenge your own assumptions, how to engage hard-to-reach audiences, and how the user-driven insights we gained uncovered the struggles unique to their community and informed our design decisions and product iterations. 

Whether or not you work in UX design, this talk will help you create tech solutions that are physically, cognitively and emotionally accessible and ultimately valuable for all humans.

Empathy is not enough - the power of engaging hard-to-reach users

What would it mean if there were an AI musician? An artist that wrote its own drums, keyboards, and complete songs. An artist that generated album art and live visuals. People writing JavaScript are some of the most interesting artists today, and using the latest TensorFlow APIs (and projects like Magenta), we're able to generate sounds and instruments using only JavaScript.

It's a bit ridiculous for a "musician" to be generated using purely JavaScript... but that's exactly why we should do it. In this talk, we'll look at the innards of a couple of digital instruments that use Neural Nets and Machine Learning models to generate music. We'll also compile a complete song, rock out together, and have some fun.

This talk is lighthearted, but will also pose some big questions:

What would it mean if you knew the music you listened to was made by a computer?

Would you like it more? Or less?

By the end of it, you'll be able to take these instruments and build your own songs—or your own musicians.

Creating an AI Musician with JavaScript

Building Open Source Communities is hard. There’s a lot of people that do it, but we repeat the hard lessons again and again. In this talk, we'll go over overlapping lessons from four distinct OSS communities to help the next generation of builders… build.

Building Open Source Communities

Creating a JavaScript application (built with React) for orphans in Ghana offered some unique challenges. Progressive Web Apps (PWAs) are more than just "cool" or "hip" — they can be really important for applications where the internet is spotty, if available at all. 

Learn why I chose React + AWS Lambda for a country with poor internet connectivity, and general lessons on the often messy and exciting world of creating offline applications.

JavaScript: Off the Grid

Introduction to graph federation with Apollo Federation. With a simple example, we will show you how to split your GraphQL Schema into smaller "micro-services" and how to link them back together again.

Building a distributed graph with Apollo Federation

Wait... CSS algorithms? Can one really write algorithms in CSS? According to Lara, absolutely!

This talk is all about CSS algorithms: what they are, how to write them, and the potential impacts of a word like "algorithm" when it comes to positioning CSS expertise in the larger context of web development.

CSS Algorithms

Discussions about "when" to use decoupled architecture are plentiful and important, but it often assumes or ignores another tricky decision: "Where" to decouple. This talk will discuss the "Decouple Line" and how moving it around provides some amazing features to your API.

When designing a content API, the assumption is often that decoupling must take the form of an API that matches your data model, where tables in your data store are mapped to resources in your API (think, /author and /posts). This is often helpful and necessary for exposing the raw data that our UIs need, however, in a cross platform scenario where teams are all building similar features, this can lead to a lot of duplicated efforts and discrepancies between the apps. 

All of these platforms will be writing similar queries, denormalization logic, business logic, and A/B tests, and then finally render the UI with their respective component libraries. This can lead to platform specific bugs, inefficient queries, and design inconsistency across platforms.

Components as Data moves the "decouple line" further toward the frontend to absorb queries, denormalization, business logic, and A/B testing into the backend. In practice, the API serves JSON structured in terms of the tree of UI components that will be used to render the respective data. In doing so, it becomes a quasi frontend in its own right, but it renders JSON instead of HTML or native views. This enables some amazing features:

1. Simpler, presentational frontends

2. Centralized business logic

3. Centralized A/B Testing and Feature Flagging

4. Design consistency via a "Design Schema"

5. Query optimization

Finally, this pattern opens the door for writing a cross platform UI library that implements the "design schema" and can be used as the rendering engine for each platform.

Components as Data: A Cross Platform GraphQL Component API

Can React and JavaScript compete with native toolkits when it comes to making super complex, heavy desktop apps? Can we go further and create better-than-native applications? 🤔 Sounds like a good challenge! And this is what I decided to do with my game making software.

In this talk, I introduce how React, JavaScript and WebAssembly can be used to write new ambitious apps, or port existing ones. I'll show real world examples of how we can leverage them, and the React ecosystem, to create performant applications... and how to go one step further and provide a better user experience as well as a better developer experience.

These apps are not web apps, they are not native apps, they are hybrid "Native Web Apps and can provide the best of both worlds.

Native Web Apps: React, JS & WebAssembly to rewrite native apps

Performance budgeting seems to be the way to go when it comes tackling front-end performance in medium to large organizations. I'll be talking about my journey in front-end focused performance testing automation and where I'd like to see the current state of tooling go.

Automated perf. budgeting into your pipeline with sitespeed.io

How can you include, welcome, provide support, safety and a confidence boost to people from underrepresented and marginalized groups that are absent from your community/workplace?

Deliberate, Directed, Positive ACTION!

This talk will chart the journey, and learnings, of Global Diversity CFP Day which has the sole aim of encouraging underrepresented and marginalized people to take to the conference stage.

Starting with half a dozen workshops in 2016 focussed on two conferences based in Edinburgh, Scotland, this has exploded into a 80+ workshop, tech wide, world wide movement on a single day each year!

Deliberate, Directed, Positive ACTION!

There are so many benefits to using a modern JavaScript build system, but getting one to play nicely with a very old, very large codebase is not always easy. 

I'll go over some of the more interesting problems we ran into at Etsy when migrating to Webpack from a system written in-house. 

We'll talk about working in a large codebase without running out of memory, localizing our JavaScript into 15 languages without building it 15 times, and why 4 milliseconds kept us from launching the new system for 3 months.

We Started Using Webpack and It Took A While

Most of our interactions with technology aren’t really intuitive. We’ve had to adapt to it by learning to type, swipe, execute specific voice commands, etc… but what if we could train technology to adapt to us?

Programming for hardware in JavaScript has already been made accessible with frameworks like Johnny-five, but, combining it with machine learning, we have the opportunity to create new and smarter interactions.

In this presentation, I will talk about how to build a simple gesture recognition system using JavaScript, Arduino and Machine learning.

Strike a Pose - Gesture recognition in JavaScript with ML & Arduino

In the early days of the web, building a new website would often largely involve HTML and CSS with the occasional sprinkling of JavaScript. Over the years the browsers became more powerful and the use-cases more complex. We found ourselves in a world in which we had outgrown jQuery and now faced a vast array of tools, libraries and frameworks to pick from. Sadly, with these choices also came opinions, endless debates and futile statements such as Angular is dead or "React is the best solution because of the vDOM".

I believe that in order to move the web forward we need to take a step back and acknowledge that every developer and project comes with a different background of varying levels of knowledge, use cases and preferences. Framework authors learn from each other, so why shouldn't we?

In this talk we'll take a look how different frameworks over the years have competed and inspired each other. We'll see how we can combine the lessons from the past and present to work together towards a future of peaceful coexistence.

Make Web Not War

Yarns, fibers, and fabrics. You have more in common with the weavers of yesteryear than you realize. In this expedition into the past of fiber arts, we'll explore how our coding art is the continuation of our ancestors at the loom, how you can learn lessons from their patterns, and maybe a thing or two about that nice sweater you're wearing.

Weaving Tapestries of Code

2019 is simultaneously a wonderful and also terrifying time for a newcomer to learn to code. There are so many resources out there! Awesome! But also, there are so many resources out there! Where does anyone even start? 

As a self taught engineer who’s been involved in building things on the web since the early 2000’s, helping a friend with zero previous experience prepare for, and get through, learning to be a junior engineer in 2019 was an eye opening experience – and in turn taught me a lot about being a better engineer.

“WTF does run mean?” & other adventures in teaching others to code

Traveling to JSConf US from another country? You probably had to pay an arm and a leg for a data roaming package on your phone.

But there’s a better way! What if I told you that you could stay connected to the internet with a phone that can only send and receive text messages?

In this talk we’ll build our own browser that makes all requests over SMS, so that next time you can forget about that fancy data package.

Bringing back dial-up: the internet over SMS

This talk will present why we chose functional reactive programming to solve most things in our SPA - state management, side-effects and reasoning about complex data flows. 

RxJS is an extremely flexible and powerful library that allows you to work with streams of data. It has given us the flexibility needed to decouple a monolith, spaghetti-code application mid-flight, but with great power comes responsibility - and a lot of pitfalls. 

We'll reflect on the challenges we're facing as we utilize RxJS’ implementation of Observables and the patterns that have emerged.

“Everything as a stream!”: how we’re embracing functional reactive programming to build a large SPA

Did you know that one of the most headache-inducing problems a programmer will face in their career has only existed for barely 130 years? Time as we know it legitimately is a social construct, invented so we can do everything from predicting where a train is to scheduling a hangout with your international office coworkers.

Together we'll take a wacky adventure through history to learn why timezones are so confusing, why daylight savings time can feel like a form of torture, and why "just use UTC for everything" isn't necessarily the best idea. And while we're not going to walk away with a silver bullet answer to fix all our time problems, we will leave understanding the historical context behind the answer to why your automated emails went out a day early.

Time is a Social Construct

Pokemon filled many of our childhoods, and some of our adulthoods, with joy. In this live coding adventure, we will recapture the magic of playing Pokemon together with the help of a Twilio phone number built with server-side JavaScript interacting with Gameboy emulator scripts. 

By the end of this session, you will learn how to write video game emulator scripts and interact with them using Node.js and Express.

Playing Pokemon Together With Node.js

Mandatory Meeting of Ingen’s Board of Directors regarding The Incident

Hayley has prepared her report about the events that occurred on Isla Nublar and will present her findings to the board. Before we vote on whether to restart the project, we need to understand why the failure occurred and hear any recommendations.