JavaScript and Friends

Paths

Expanded

JavaScript and Friends

Author: JavaScript & Friends

The JavaScript and Friends Conference (JS&Friends) is a not-for-profit conference, organized by a team of volunteers. We are all active or aspiring software professionals, and... Read more

What You Will Learn

  • JavaScript
  • React
  • GraphQL

Pre-requisites

None.

JavaScript and Friends Sessions

Lip Sync to the Async in JavaScript

by JavaScript & Friends

Dec 18, 2020 / 37m

37m

Start Course
Description

There is a unique world where single-threaded JavaScript manages to become much more. JavaScript interacts with its environment in ways that allow it to handle asynchronous activities. Using several code examples that shouldn’t be new to most front-end developers, we will examine these scenarios in a unique way to show how the interactions truly work. If you are an experienced developer or new to the field, there is something in this presentation for you. This session takes a look at how JavaScript manages asynchronous events and some of the ways developer decisions may work for or against them. This discussion will examine the ways that JavaScript coordinates and manages events using several coding examples and we can determine which are good, bad, or ugly.

Table of contents
  1. Lip Sync to the Async in JavaScript

Automated Testing All the Things with Cypress

by JavaScript & Friends

Dec 18, 2020 / 50m

50m

Start Course
Description

Thought automated testing was hard? It's not, it's easy. In this talk we'll investigate real life examples of how to write automated tests using Cypress. By the end, you'll walk away a little bit more scared and a lot more prepared with some great practices you can apply immediately to your own applications.

Table of contents
  1. Automated Testing All the Things with Cypress

Styling your React.js Components for Reuse

by JavaScript & Friends

Dec 18, 2020 / 16m

16m

Start Course
Description

Design is very important when building react components for reuse. Reusable React components are components that can be used multiple times in an application. If a React component includes difficult induction inside it, it becomes complicated to reuse and less maintainable. React Hooks is the right fit for building reusable components. Most people have installed a third-party component that fits functional needs only to spare design, hours, and CSS polish making it. Through the use of real-world examples, this talk will examine how to use your favored CSS path to develop widely-customizable components without any headache.

Table of contents
  1. Styling your React.js Components for Reuse

Using the Gamepad API for a Better Gaming Experience on the Web

by JavaScript & Friends

Dec 18, 2020 / 36m

36m

Start Course
Description

This talk explores the usage and impact of the Gamepad API in the web gaming space. The Gamepad API lets you connect and use gaming controllers with browsers. Since it is in early stages, tracking controller inputs across browsers is a challenge. For this purpose, work has been done on an open source library which provides support for button press, axis movement events as well as vibration play effect in browsers. We’ll be focusing on how to leverage this library for providing better gaming experiences to consumers on the web.

Table of contents
  1. Using the Gamepad API for a Better Gaming Experience on the Web

A11y with React Components

by JavaScript & Friends

Dec 18, 2020 / 52m

52m

Start Course
Description

React is a tool. If used improperly, it can be an inaccessible nightmare. If leveraged wisely, it can give you the confidence that components are being implemented in an accessible way. During this talk, you'll hear techniques and strategies to make your React Components more accessible.

Table of contents
  1. A11y with React Components

The ABCs of Architecting Better CSS

by JavaScript & Friends

Dec 18, 2020 / 40m

40m

Start Course
Description

Unregulated, style sheets will inevitably become a mess of conflicting patches and hot fixes as each project faces fast approaching deadlines and bugs. During this session, we will review how CSS applies its styles and learn to use this information to build maintainable style sheets that scale.

Table of contents
  1. The ABCs of Architecting Better CSS

GraphQL Observability

by JavaScript & Friends

Dec 18, 2020 / 52m

52m

Start Course
Description

In this talk, we'll be focusing around observability and the various techniques and tools we can use to get a better understanding of how our GraphQL services are running in production. More specifically we'll be focusing on combining ApolloServer and OpenTracing/OpenTelemetry. From this talk, you'll gain a high-level understanding of the pillars of observability and how to apply them to their systems in production.

Table of contents
  1. GraphQL Observability

Couchbase and the RAGE Stack

by JavaScript & Friends

Dec 18, 2020 / 51m

51m

Start Course
Description

Learn how to build a fullstack JavaScript application with React, Apollo, GraphQL, Express and Couchbase Server in 30 minutes.

Table of contents
  1. Couchbase and the RAGE Stack

Anti-aging: Keeping Your Code Young and Thriving

by JavaScript & Friends

Dec 18, 2020 / 45m

45m

Start Course
Description

This session focuses on slow code quality decreases over time, why it happens, and how you can combat it. Have you ever encountered a code base that you thought should be clean and easy to move about, but it turns into an unraveling nightmare? Why do code bases go bad? We'll explore this question in depth.

Table of contents
  1. Anti-aging: Keeping Your Code Young and Thriving

My Browser Does What?

by JavaScript & Friends

Dec 18, 2020 / 55m

55m

Start Course
Description

The Web evolves quickly. We are far away from the days of Marquees and Blink. But learning the latest features of the latest ECMAScript implementation or the newest PHP framework isn’t everything. New Web APIs are constantly added to the browser. Did you know that your browser can process audio feeds, that it can connect to Bluetooth devices, or that it can send you notifications? Vendors are extending the capabilities of browsers more and more, especially for mobile devices. In this talk, attendees will learn some of the latest features available in their browsers right now and some that will be available in the very near future.

Table of contents
  1. My Browser Does What?

Render Agnostic Architecture

by JavaScript & Friends

Dec 18, 2020 / 40m

40m

Start Course
Description

This architecture, as the name implies, allows for writing web applications least dependent on the rendering engine (react, vue, angular, etc.), behavior testing without starting a browser, to collect combined front-back coverage, and, as a side benefit, change the rendering engine in the least expensive way, if needed. It relies heavily on code generation which reduces amount of code to write and support and deals with major flaws of Redux - noizy syntax and performance

Table of contents
  1. Render Agnostic Architecture

Architecting for Accessibility

by JavaScript & Friends

Dec 18, 2020 / 41m

41m

Start Course
Description

Accessibility has been a part of development since the very beginning of the web. And although we have been talking about it since Tim Berners-Lee was working for CERN, to this day the struggles seem to remain the same. Not just how do we make our applications accessible, but also how do we integrate testing into our workflow? Who should be responsible for what and what questions do we even need to ask?

Instead of looking at code implementation, this talk will cover what questions to ask when getting started and how to read and understand the specification. We will then look at how different roles on the team are affected and the impact and changes including accessibility as part of development will have on the development cycle.

Table of contents
  1. Architecting for Accessibility

From Zero To Hero: The Coder's Archetypal Journey

by JavaScript & Friends

Dec 18, 2020 / 55m

55m

Start Course
Description

Follow along as we describe the story of Steve, a new programmer in a world full of senior developers. While writing code, he notices more and more patterns begin to emerge. Grow with Steve as he begins to learn about design patterns, refactoring principles, and how to talk shop with coworkers.

Table of contents
  1. From Zero To Hero: The Coder's Archetypal Journey

Understanding Probabilistic Data Structures with 112,092 UFO Sightings

by JavaScript & Friends

Dec 18, 2020 / 54m

54m

Start Course
Description

There are three reactions to the title of this talk: 1. What the heck’s a probabilistic data structure? 2. UFO Sightings… wha? 3. 112,092 is an oddly specific number.

This is a talk about the first reaction with the second thrown in just for fun. I like weird stuff—UFOs, Bigfoot, peanut butter and bologna on toast—maybe you do too? As far as the third bullet point, well, that’s how many sightings I have.

Now, if you’re like most developers, you probably have no idea what probabilistic data structures are. In fact, I did a super-scientific poll on Twitter and found that out of 119 participants, 58% had never heard of them and 22% had heard the term but nothing more. I wonder what percentage of that 22% heard the term for the first time in the poll. We’re a literal-minded lot at times.

Anyhow. That’s 4 out of 5 developers or, as I like to call it, the Trident dentist ratio. (It’s actually a manifestation of the Pareto principle but I’m a 70s kid). That’s a lot of folks that need to be educated. So, let’s do that.

A probabilistic data structure is, well, they’re sort of like the TARDIS—bigger on the inside—and JPEG compression—a bit lossy. And, like both, they are fast, accurate enough, and can take you to interesting places of adventure. That last one might not be something a JPEG does.

More technically speaking, most probabilistic data structures use hashes to give you faster and smaller data structures in exchange for precision. If you’ve got a mountain of data to process, this is super useful. In this talk, we’ll briefly go over some common probabilistic data structures; dive deep into a couple (Bloom Filter, MinHash, and Top-K); and show a running application that makes use of Top-K to analyze the most commonly used words in all 112,092 of my UFO sightings.

When we’re done, you’ll be ready to start using some of these structures in your own applications. And, if you use the UFO data, maybe you’ll discover that the truth really is out there.

Table of contents
  1. Understanding Probabilistic Data Structures with 112,092 UFO Sightings

Mobile Wars: The Rise of Cross Platform Apps

by JavaScript & Friends

Dec 18, 2020 / 36m

36m

Start Course
Description

A long time ago in a galaxy far, far away...cross platform app frameworks started coming into existence. In this session we will compare popular cross platform frameworks for mobile and talk about which one you should use next!

Table of contents
  1. Mobile Wars: The Rise of Cross Platform Apps

Create Robust Deployments for your SPA and API

by JavaScript & Friends

Dec 18, 2020 / 53m

53m

Start Course
Description

You've built a SPA and an API backend, and you're now looking to deploy with ease. Docker is the natural fit, but where do we begin? We'll use the Vue CLI and the dotnet CLI to startup our codebases, then craft Dockerfiles to deploy these with ease in various configurations. Whether you'd rather deploy both parts together or scale different pieces separately, Docker can empower you to deploy your solutions at cloud scale.

Table of contents
  1. Create Robust Deployments for your SPA and API

What's Going on in There?

by JavaScript & Friends

Dec 18, 2020 / 50m

50m

Start Course
Description

Monitoring production software can be a challenge, especially if it is hosted in the cloud. Application Insights can tell you what your software is doing. With this tool you will be able to identify performance bottlenecks, detect bugs before they are reported by users, characterize intermittent errors, and understand the usage patterns of your users.

In this session, you will learn, how to add Application Insights to an existing application, how to track custom events, errors, and metrics, how to query App Insights data with the Kusto query language, and how to build a custom Azure Dashboard.

Through demos and real-world examples, you’ll be able to track the inner workings of your software systems.

Table of contents
  1. What's Going on in There?

JavaScript: Past, Present and Future

by JavaScript & Friends

Dec 18, 2020 / 1h 2m

1h 2m

Start Course
Description

Ah, JavaScript! Like it or not, it's a "tragically important" language that is "eating the world." Hate it? Love it? Avoid it? Embrace it?

This talk will be a parade of face-palm JavaScript fails, stupid JavaScript tricks, and bad jokes sure to get an eye-roll from everyone! Along the way, we may even learn a few mistakes to avoid and tips to make our own JavaScript less terrible!

Table of contents
  1. JavaScript: Past, Present and Future

Founder's Journey: Jerry Valentine - Renter Mentor

by JavaScript & Friends

Dec 18, 2020 / 39m

39m

Start Course
Description

Sharing his journey from Housing Authority employee to Founder & CEO of Renter Mentor, and overall experience as a full-time entrepreneur - Suggestions and tips to aspiring entrepreneurs on how they can get started and what community resources which can be used to help founders get stated.

Table of contents
  1. Founder's Journey: Jerry Valentine - Renter Mentor

Testing Complex Interfaces and Visualizations

by JavaScript & Friends

Dec 18, 2020 / 45m

45m

Start Course
Description

Testing real user interfaces is hard. It's fairly easy to unit test the low-level details. Integration tests can cover a couple more layers. But it can be very hard to test that those details add up to something useful, that they add up to an actual feature. Testing data visualizations adds another level of complexity. Often important features depend on interactions like hover or click-and-drag. Even worse, the end result of our code is often many-thousand-character SVG path strings that are very hard to unit test and basically impossible to read. Or maybe what we care most about is highly visual, like the color distribution of a heatmap. Now add responsive window sizing and testing becomes very icky. Automated, browser-based testing can address all of this. This talk will focus on how you can use Cypress and Happo to test actual interfaces with complex data. We can simulate real user behavior to assert that data is displayed accurately, giving us confidence that our code will keep working over time.

Table of contents
  1. Testing Complex Interfaces and Visualizations