Archived Event

April 2020

JavaScript Marathon is a full day of free, online courses on React, TypeScript, GraphQL, and more. Come learn about some of the leading web development technologies and concepts!

Stay for one training, or stick around for the whole day! No two sessions will be the same!

1 Hour to Learn ReactJS

Learning React is easy. We’re going to create a new project using the Create React App CLI, and introduce the JSX templating syntax. We’ll then define components in the context of React, and describe how to create them. We’ll also learn how to manage state and complex features with hooks, and how to access data from a third-party service.

An Introduction to Gatsby with React

Static site generators are one of the hottest technologies, and GatsbyJS is one of the most popular static site generators (especially for React). But, Gatsby is a lot more than just a blog builder. In this training, we’ll introduce the Gatsby architecture for building sites. We’ll generate a new Gatsby site, explore and utilize Gatsby plugins, and ultimately show how to augment our site with dynamic content.

An Introduction to Netlify with React

Netlify is a service for automating your site’s hosting, continuous integration, continuous deployment, and serverless requirements. In this training, we’ll take a Gatsby site and deploy it using Netlify. We’ll show how to use serverless functions to give our site dynamic content. Finally, we’ll review the JAMstack architecture and how it represents the future of website development and deployment.

Using GraphQL with React

GraphQL provides a strong-typing system to better understand and utilize our API to retrieve and interact with our data. We can then utilize this typing system in our application to build resilient components that know what data they are going to be retrieving and interact with it. This training will focus on the GraphQL system, libs we can use to interact with GraphQL APIs, structuring our components to think in our graph type system, and using this type system to build resilient components.

1 Hour to Learn Angular

This is an introduction to Angular. We will walk through what the Angular CLI is, and how it can help us. We’ll explore a newly created Angular application, as well as data binding (interpolation, attribute vs property bindings, class bindings), and components using input and outputs. We will introduce a service to fetch async data as well as a custom pipe to render data differently from the underlying model. We will do this using the Angular CLI to show the participants how much is done for them. Last but not least, we will add some custom CSS to ensure everything looks as pretty as possible.

The Best Pro Tips for A11Y in Angular

In this training you’ll learn how to make your Angular applications more accessible. We’ll teach you what NOT to do, and provide you with some best practice tips on what to do to ensure accessibility compliance.

Master PWA in Angular

In this training, you will learn how easy it is to convert your Angular application into a PWA with just one command. We’ll also dive into the files generated by the Angular CLI that make your application a PWA, and help you better understand what Angular is doing under the hood.

Advanced NgRx: Complex Angular State Management

State management libraries like NgRx can be simple to learn, but difficult to master. Managed correctly, NgRx can be a powerful tool for isolating complexity and separating concerns, greatly speeding up development, and reducing errors. However, when applied incorrectly, NgRx can overwhelm your team and actually worsen errors. Luckily, there are a handful of tips that can help you, and your team, reach state management bliss. In this training, we’ll discuss event-based actions, event storming, how to write more resilient effects, how to determine what data belongs in your store, how to build more maintainable selectors and components, and how to identify when your team is heading down the wrong path. NOTE: This training expects that attendees already know the basics of the NgRx architecture (selectors, reducers, actions, and effects)

Easy Angular Unit Testing in NgRx

NgRx is awesome, but testing can be a complex job. We’ll cover some of the common patterns to test NgRx’s reducers, selectors, effects as well as components that are using those selectors and actions. We will also cover a bit of marble testing as well to help you along in your testing journey.

A Guide to Advanced Angular Patterns (Route Guards, Pipes, Interceptors & more)

It’s easy to write websites and applications in Angular using mostly basic components, services, and the built-in Angular tools (such as pipes). But, there’s a lot more you can do in Angular to build your own utilities, and extend the Angular platform! In this training, we’ll learn how to take full advantage of the Angular platform. We’ll explain and build sample route guards, pipes, interceptors, and directives. Along the way, we’ll call out some common pitfalls that trip up teams as they start to build their own utilities.

1 Hour to Learn VueJS

In this Vue.js training, you will learn how to create a sample blog application from the ground up. This training includes how to set up a project with the Vue CLI, a basic understanding of the framework structure, understanding async data loading, mixins and much more.

Master State Management in Vue with VueX

State management is an extremely important feature of web applications. In this training, we are going to walk through VueX. Topic covered will include: Installation, basic usage, best practices, modules and much more.

Master PWA in Vue

Progressive web apps have recently become an industry standard, and in this training, we are going to learn all the steps necessary to add this feature to a Vue application. The session will cover topics such as installation, offline support, push notification, caching offerings, and more.

Learning Unit Testing in Vue

TDD (Test driven development), is every developer’s dream. This training will teach you how to do testing right in Vue.js with the help of vue-test-util and jest. We will also cover a variety of test scenarios to support you in improving your testing knowledge.

Pro Tips on Using AWS with Vue

Cloud infrastructure can be scary, but AWS makes this task so much easier. In this training, we are going to walk you through how to set up your Vue.js application on AWS with Amplify. This session will cover topics such as registration, cost control, application setup, CI and much more.

Debugging Vue: Quick Tips and Tricks

Let’s face it - our code is never perfect! There are times when debugging is necessary, and debugging a Vue.js application has never been easier. This session is going to show you how to debug your code using Vue Devtools and Visual Studio Code. Topics include Components analysis, data modification, handling events and code breakpoints.

Web Performance: Basics

Users demand a fast experience and with an ever changing landscape of device and connection types, web performance possible is no longer a secondary consideration. This session introduces you to the basics of web performance and the tools you use to start exploring your web performance today.

Web Performance: Budgeting for the Critical Rendering Path

Understanding the critical rendering path and how the browser handles the code and assets we deliver is important not only as an engineering exercise: it directly contributes to what we should prioritize to our users based on their taken action. In this session, we'll learn about how the critical rendering path works and how to start setting budgets for your web application deliverables to allow for a smoother user experience.

Web Performance: Rendering faster with a shade of PRPL

PRPL is a performance pattern that originated from Google that allows you achieve faster render speeds with your applications. In this training session we’ll cover an overview of the PRPL pattern which consists of , Push: the most important resources, Render: initial route as soon as possible, Pre-cache: remaining routes/assets, Lazy-load: other routes and less important assets/resources.

Web Performance: Tracing with DevTools

DevTools are an important part of understanding web performance. In this training, we’ll share an overview of the performance tab in Google Chrome and how to maximize its usage. We’ll also talk through the benefits of flame graphs and how they can help you find performance hot spots in your code. Finally, we’ll show you how to ensure performance on mobile and in developed markets using Chrome’s throttling tools.

Web Performance: Always Auditing with Lighthouse

Lighthouse is now built into Chrome, making it even easier to see an instant overview of your site’s performance, accessibility, and SEO. In this training we’ll show you how easy it is to make Lighthouse a core part of your performance auditing pipeline, and the parts of reports to pay attention to at the start of a performance deep dive. Did you know Lighthouse also runs from the command line? We’ll show you how to integrate it into existing build or CI tools.

Web Performance: Maintaining web performance in the long term

Once you have web performance improvements, how do you keep them as features are added? In this session we’ll cover automating web performance testing with Lighthouse CI, Github Actions, and other local tools to help make your web application continue to shine.

1 Hour to Learn RxJS

Learning about Observables and operators including how to build an Observable from scratch with Ben Lesh, author of RxJS.

Flattening Operators in RxJS 101

Learn about mergeMap, concatMap, switchMap, exhaustMap, and which ones to use when with Ben Lesh, author of RxJS.

Subjects in RxJS 101

Learn about Subjects, multicasting, common mistakes, and how to use them properly with Ben Lesh, author of RxJS.

need private training for your company?

If you would like to learn more about how you can leverage This Dot’s expertise to upskill your team, and reinvigorate your developers with new knowledge about the web’s leading development technologies, visit the trainings page.