JSConf Hawaiʻi is the newest in the family of JSConf events. For our second year, we're planning to bring about 400 people together for a three-day single track conference. Our goal is that by the time you leave, you'll have seen some new ideas, learned some more JavaScript, and made new friends to keep in touch with.

The small, single-track nature of the conference means that it's easy to figure out what to do! We'll have lots of time to meet your fellow attendees and share ideas outside of the sessions.

JSConf Hawaiʻi

Learn the benefits of introducing cultural and thought diversity into an organization, along with core concepts that can lead to positive contributions in the tech space.

Diversity, in both small and large tech companies, is now understood as a critical component to innovation. In the same way individual generalists are able to make connections across disciplines, members of a diverse team contribute perspectives that would have otherwise been unknown. This is perhaps what Steve Jobs was referencing to when he eloquently recited “Think Different”. This talk uses my experiences as a Native Hawaiian programmer and designer working at Twitch as a launching point to discuss the benefits of introducing cultural and thought diversity into an organization.

This talk will also discuss core concepts I’ve learned from a Hawaiian upbringing that I believe can lead to positive contributions in the tech space, such as the benefits of being kolohe(having a rebellious nature), encouraging ‘imi ‘ike(the pursuit of knowledge), the complementary forces of a‘o aku and a‘o mai(to learn and to teach), committing to aloha(in part the generous spirit of giving without expecting), favoring laulima(group cooperation) over personal gain, the practice aloha ‘aina(the love of one’s environment) and more.

The power to think like a Native Hawaiian in tech

Learn how to build a simple gesture recognition system using JavaScript, Arduino and Machine learning.

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 JS with Machine Learning

Take a deep look at the principles of framework design and how we can apply them to build better software.

Building frameworks is fun. And even if your project is using one of the awesome open-source frameworks, it might at some point reach the point where you need just a little bit more software infrastructure then you find on npm: Things may start with a custom build script and end with your own full blown framework.

But building frameworks is also difficult. And many folks might have read the first paragraph thinking “That is us, but I wish we had something clean, stable and most importantly standard instead”.

In this sequel to the popular “Designing very large (JavaScript) applications” talk, we’ll take a deep look at the principles of framework design and how we can apply them to build better software. We’ll look at how to go about designing a framework, how to ensure that developers like it, and how to make sure that systems get into a clean and stable state as quickly as possible.

Designing Even Larger (JavaScript) Applications

Learn how to build a search query parser, in JavaScript. Starting with the building blocks of all languages and what a parser is, to a practical implementation.

Have you ever wondered how your code goes from being characters in a file to something that the computer can "understand" and do something with? A key part of this is the parser. 

In this talk, we’ll look at building a search query parser (all in JavaScript, of course). On this journey, we’ll first take a step back and learn about the building blocks of all languages, from letters to grammars, and how they represent meaning. 

Then, we’ll talk about what a parser is and does and why we might want one for our task. With this new knowledge, we’ll dive into building the parser, from tokenizing to building a data structure that represents the query and lets us build a UI around it.

Parsing Parsers

How do you set up Typescript and other static checking? Do you target ESM or CJS builds? Is integration testing even possible?

So you have a great idea for the perfect JS library... but the implementation is only half the battle. You also need to configure infrastructure to develop, test, build and deploy your package. How do you set up Typescript and other static checking? Do you target ESM or CJS builds? Is integration testing even possible? There’s so much extra to consider!

Let’s learn what makes up the “perfect” library tooling. Familiarity with developing JavaScript packages will help you get the most out of this session, but you will gain plenty of helpful insights even if you have yet to build one. Oh, and don’t worry if you don’t understand all of those terms — you soon will after this video!

The "Perfect" Library Tooling

Is your first thought when thinking about cryptography, “nope, that’s not for me!”? This talk explains the basics of encryption and hashing through simple examples.

Is your first thought when thinking about cryptography, “nope, that’s not for me!”? There’s no need to. When explained with simple examples, you can see the basics are not that complicated. The Javascript Object Signing and Encryption, or JOSE for short is a framework that helps us deal with encryption. It describes ways to securely transfer data either signed (JWS) or encrypted (JWE). Let’s take a leap of faith and explore the wonderful world of cryptography together, shall we?

In this talk, I will try to explain the basics of encryption and hashing through simple examples. We’ll look into how the JOSE standard can help us with encrypted content on the web using JSON Web Encryption (JWE) and JSON Web Keys (JWK). The audience does not need any specific knowledge about cryptography as this talk will go through the basics. Some JavaScript knowledge can be useful but not necessary as code examples will be simple and explained.

Why? The times when websites were just simple pieces of information is long gone. These days the web handles more sensitive data than ever before. To securely handle this data, we sometimes need to hash, encrypt or sign it. Sure there are a million tools, libraries and pieces of software that handle this for you, but knowing the basics can certainly come in handy!

No Way, JOSE

Take a journey into the Web MIDI api where the possibilities of the web aren’t just at your keyboard fingertips anymore, they’re literally any MIDI compatible controller you have connected!

Who loves pushing buttons? You? And you over there? And the person behind you? Oh wait, everyone loves it?!!? Of course they do, a button is irresistible. Now… what if I told you that you could hook up a LOT of buttons to your computer… and use it to do wild things with the web?

I’m glad you’re listening! Let’s take a journey into the Web MIDI api where the possibilities of the web aren’t just at your keyboard fingertips anymore, they’re literally any MIDI compatible controller you have connected! Want to make glitchy audio responsive visuals with WebGL shaders? Rad, we can do that. Want to create custom beats and have those input as a drum machine? No problem when you throw a little Web Audio API in the mix. Let’s dive in and find out how!

Look What You MIDI Me Do!

GitLab doesn't have any offices. How do they do it?

The one question I'm asked more than any other when talking about working at GitLab is: wait, you don't have any offices? That is often followed by a confused look or the direct question: How?

Writing down decisions, asynchronous communication, measuring results, not hours. Companies often aspire to these goals...however in an all-remote company, they aren't aspirational - they are requirements. GitLab has grown from 9 people in 2014 to over 900 people in 55 different countries with a valuation of almost $3 billion.

In this talk, we'll discover some of the not-so-secret sauce that GitLab has leveraged to achieve this growth. On this journey, our values have remained the same. We value collaboration, results, efficiency, diversity & inclusion, iteration, and transparency. And we've done all that without having any office, headquarters, or anything that looks like one.

The Asynchronous Enterprise

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices.

Variable Fonts allow typography on the web to adapt to the flexible nature of screens, environments and devices.

We can use variable fonts with pre-existing technologies to improve the performance, design, accessibility and usability of our websites. We can start to design our typography to adjust to various inputs, situations or events using Media Queries, JS events and the Sensor or Audio Apis. This will allow us to modify our fonts to aid in storytelling, achieve improved readability and legibility in different situations, environments or on larger or smaller screens.

Let’s explore new and exciting creative opportunities for storytelling, design and expression in ways standard fonts could never provide us. This is just the beginning of our journey to discover what we can do with variable fonts.

Very Responsive Typography with Variable Fonts

Many companies often only dedicate the time and effort to create SOME accessibility. What they choose to make accessible doesn’t always reflect what users want or need.

The sad truth is that even companies that wish to have accessible websites often only dedicate the time and effort to create SOME accessibility. What they choose to make accessible is often based on what a handful of people, often abled bodied ones, decide, and doesn’t always reflect what users want or need.

Using a series of surveys and discussions with other disabled people, I have synthesized suggestions and examples of what makes the most impact for many users or gigantic impacts on usage for smaller groups.We'll go over the look, feel, and functionality of websites and some basic design changes that can be used to great benefit.

Impactful Accessibility: The Changes that Mean the Most

Inclusion doesn't just happen. It has to be intentionally and continuously cultivated. Learn the ways we can all be responsible for building communities with an inclusion-first mindset.

Inclusion doesn't just happen. It has to be intentionally and continuously cultivated. In this session, we'll discuss the ways we can all be responsible for building communities with an inclusion-first mindset. I'll describe my lessons learned and walk through a framework for optimizing for inclusion.

A Seat at the Table: Building Inclusive Ecosystems

See examples of magical thinking as a design methodology for technological innovations.

This session present several examples of magical thinking as a design methodology for technological innovations.

Did you know that hackers and shamans have a lot in common? What does the practice of Santeria can teach us about digital security? Did you know that there's an android in a temple in Kyoto teaching Buddhism? Which elements of ancestral knowledge can we borrow in order to design solutions for migrants and refugees?

We will review the answers to these questions and will elaborate on the potential of magical thinking as a fundamental resource for innovation. "Magic is the mother of technology" said Peter Sloterdijk, thus we definitely shouldn't be afraid of combining this two realms in order to promote scientific innovation to its maximum potential.

I've been doing this research thanks to several sources of funding, mostly through my Mozilla fellowship and other sponsors I had in the last two years. Therefore, specific parts of this session have been presented in conferences such as HOPE in New York City and the Internet Freedom Festival in Valencia, Spain. JSConf Hawaii will be the first time in which my research on digital witchcraft will be publicly presented as a finalized product.

Digital Witchcraft: Magical Thinking for Digital Design

How to make sure a design system specifies design choices and allows users to build quickly, but doesn't lock you into specific frameworks or trendy tools out of the gate.

"Design Systems" and component libraries are a popular solution for abstracting common UI elements and flows to be reusable across many applications.They allow you to spend more time on the details, and reduce the complexity of implementing consistent experiences.There's a good chance that you're using one already!

Scaling these systems to provide value to *lots* of teams across your organization, or in open - source - land, requires solving for each team's different use-cases simultaneously. How do you add in support for internationalization, accessibility, theming (dark mode!), server rendering, or multiple render targets? How do you support the teams that need it in React *and* the teams that need it in Svelte? How do you provide a system that is flexible enough, but doesn't become prohibitively complex? How can you export your components to popular design tools for your designers to build with?

Let's dive into approaches to solving these problems in scalable ways, and take a look at how Stripe has chosen to tackle some of these issues in the real world. Let's look at how to make sure a design system specifies design choices and allows users to build quickly, but doesn't lock you into specific frameworks or trendy tools out of the gate.

Advanced Design System Considerations

It can be hard for developers to keep up with the newest trends and frameworks. What if you could use machine learning to help you keep up with all of the changes? 

The world of UI/UX is changing every month. It can be hard for developers to keep up with the newest trends and frameworks because of all the responsibilities they have. What if you could use machine learning to help you keep up with all of the changes? While it’s far from taking all of the programming jobs, machine learning can help developers make more user-friendly web applications. With the use of Brain.js, you can do text prediction, make small layout changes, check for malicious users, and more.

In this talk, attendees will learn some background on machine learning and algorithms and see examples of where Brain.js can be used in real applications. We’ll cover business cases in web development where machine learning can help, how neural networks work, and how JavaScript can be used to train a model and make real-time updates for users. By the end of the talk, attendees should have a good understanding of basic machine learning concepts and an idea of how they could get started with Brain.js.

Using Machine Learning to Improve UI/UX

Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

Automation has come a long way in assisting with regression testing efforts. Teams worldwide are successfully running hundreds of functional regression tests at every check-in. While this provides a great source of confidence, critical regression bugs are still missed using this approach. That’s because these tests can only assert on what their human programmer asks them to. Additional errors with functionality, UX, and usability often go uncaught using today’s most common test automation techniques.

For this reason, the top companies in all sectors of the industry are turning to visual validation. Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

In this talk, you’ll learn how visual validation works, see an integration into an existing test code base, and discuss the pros and cons of using various visual validation techniques.

Your Tests Lack Vision: Adding Eyes to Your Automation Framework

How good are your tests? Would they still pass if the tested code was changed? If so, there may be problems with your code, your tests, or both!

How good are your tests? Would they still pass if the tested code was changed? If so, there may be problems with your code, your tests, or both!

Mutation Testing helps reveal these cases.It makes lots of slightly altered versions, called "mutants", of your functions, and runs your functions' unit tests, using each of its mutants instead. If a mutant makes any test fail, that mutant "dies". "Survivors" imply flaws: your code might not be meaningful enough that a slight mutation would change the behavior, your tests might not be strict enough to catch the difference that the mutation made, or both!

This talk will tell you how to use mutation testing, its benefits, drawbacks, and pitfalls, and how it works under the hood.There will be several examples(in clear pseudocode), and a list of tools for some popular languages(including of course Javascript).

You will come away equipped with a powerful new technique for making sure your tests are strict and your code is meaningful.

Kill All Mutants! (Introduction to Mutation Testing)

Take a peek behind the layers of the event loop, select/epoll nonblocking I/O, and hardware architecture to answer a simple question: what is waiting, and how does a program wait?

Our story begins with a humble 'await fetch': your script fires off an HTTP request and settles down to nap, trusting that it'll be awoken when response data is available. While your program does nothing, a cascade of activity is now taking place: in your JS runtime, your operating system, and your hardware. What happens while your code is waiting for something to happen? 

In this talk, we'll peek behind the layers of the event loop, select/epoll nonblocking I/O, and hardware architecture to answer a simple question: what is waiting, and how does a program wait?

How to Wait

Node.js 10.5.0 introduced 'worker_threads', enabling the creation of simple multi-threaded applications in JavaScript. This is a quick introduction to the fun of worker_threads.

Node.js 10.5.0 introduced 'worker_threads', enabling the creation of simple multi-threaded applications in JavaScript. This may sound daunting if you've never dealt with threads before in another language. But JavaScript threads are pretty simple and, very importantly, fun. This talk will be a quick introduction to the fun of worker_threads.

I promise not to make any "you got your multi-threaded chocolate in my single-threaded JavaScript peanut butter" jokes.

A Crash Course on Worker Threads

Commenting code is a more nuanced thing than we give it credit for.

Commenting code is a more nuanced thing than we give it credit for.

There are a couple of schools of thought on this. One states that if you feel a comment is necessary, you should rewrite it to be more legible. This is true. But it's also not true. In the process of writing a comment, you can often find things that could be written better, but it's not an either/or, for the following reason: Code can describe how, but it cannot explain why.

There is just not one right way or one reason to write a comment.In this session, we'll dig into some of the many beneficial types of comments that might all serve a different purpose, followed by patterns we might want to avoid. In the process we'll talk about being good teammates, collaborating, and writing the most legible code we can.

The Art of Code Comments

Who's the jock? The nerd? The misfit? Who's the type A overachiever, or the moody artist, or the partier? Get to know each of these JavaScript frameworks through the hallowed medium of the teen comedy.

Who's the jock? The nerd? The misfit? Who's the type A overachiever, or the moody artist, or the partier? Get to know each of these JavaScript frameworks through the hallowed medium of the teen comedy.

In this talk, we'll dig into what makes these frameworks unique, as well as the things they have in common. And, as in every good millennial teen movie, you'll leave with a better understanding of each one.

React, Vue, and Svelte as Teen Movie Archetypes

Custom Hooks in React are useful for much more than just managing the local state and one-dimensional side-effects you see in almost every React Hooks example.

Custom Hooks in React are useful for much more than just managing the local state and one-dimensional side-effects you see in almost every React Hooks example.

They can be used to build sophisticated memoization pipelines and chained-effects that automatically manage local and network resources.

But most importantly, they provide a new new layer of abstraction to accomplish new and amazing patterns that we couldn't have just over a year ago.

On the surface, this abstraction layer is simply collection of custom hooks, but when unlocked, it can be the most powerful piece of your application architecture.

Custom Hooks in React: The Ultimate UI Abstraction Layer

See effective ways to progressively render a webpage from the server to the client, and important performance aspects of rendering modern websites.

Modern web applications have become increasingly costly in terms of size resulting in slower page load times in slower networks. Client Side Rendering (CSR) becomes a bottleneck in slower networks whereas Server Side Rendering (SSR) becomes a bottleneck when large volumes of content need to be generated in one-go.

Progressive rendering is a technique that allows us to flush portions of a webpage to the browser in chunks as soon as they are rendered on the server without having to wait for the whole page to be rendered. This will massively improve the FCP (First Contentful Paint) and FMP (First Meaningful Paint) metrics and reduce page load time in slower networks.

This talk will demonstrate effective ways to progressively render a webpage from the server to the client and highlight important performance aspects of rendering modern websites.

Progressive Rendering: Improve Performance on Slower Networks

TC39 is the international standards committee in charge of charting the future of JavaScript through the ECMAScript standard. In this panel, members of the committee join Cassidy Williams to answer questions sourced from the JSConf Hawaii audience, including questions about how the committee decides on changes to the language, and how companies, organizations, or individuals can get more involved.

JSConf Hawaiʻi 2020

Feb 5 - Feb 7 | Hawai, USA