Workshops

Search with
⌘/ctrl + f

ES6 and Beyond

ES.nextES6webpack
slides | workshop repo | app repo
Presentations:

Abstract

The EcmaScript standard is now on a yearly release cycle. With ES6 complete and ES2016 almost ratified, we have a ton of awesome new features to use in our daily software development. In this training, we'll learn about the features you're likely to use and benefit from on a day-to-day basis. In the afternoon, we'll take an existing application and update it to leverage these features using with modern tools like Babel. My goal is that after this training, you'll be able to go back to your projects and add these tools so you can write ES.next code today.

This is a very hands-on training and you'll need to make sure that you're machine is set up. Please ensure that you have git, Node, npm, and a text editor / IDE installed on your machine. With that, you'll be ready to rock and roll. Feel free to hit me up on twitter if you have any questions.

Intro to ReactJS

react ⚛
repo | app
Presentations:
  • Internally at PayPal - video2016-12-13
  • Internally at PayPal - video2016-10-06
  • MidwestJS2016-08-10

Abstract

TODO 😅

How to Write an Open Source JavaScript Library

open source 🌎
repo
Presentations:

Abstract

Participating in open source has been one of the most rewarding experiences of my career. The feeling of sharing something I’ve created, and hearing that others are using it in their applications is incredible. But writing and managing an open source project is challenging. I want to help you get started with open source or improve your current projects with some of the things I’ve learned by publishing and maintaining over 60 npm packages.

  • Learn how to set up a new project locally and on GitHub for development
  • Learn how to configure npm for publishing the project to the npm registry
  • Learn how to transpile the source with babel
  • Learn how to add unit tests and code coverage
  • Learn how to add CI (with Travis CI) to run tests automatically and report coverage stats to codecov.io
  • Learn how to automate releases with semantic-release
  • Learn how to distribute a browser build with webpack

Webpack Deep Dive

webpack
slides | app repo
Presentations:

Abstract

Building and deploying complex frontend applications can get complicated quickly. Webpack simplifies this with a huge list of features that cater to all kinds of JavaScript apps. In this class, we’ll explore these features to optimize an application for performance and simplicity. In this workshop, you'll learn:

  • The role of webpack and fundamental concepts like loaders and plugins
  • How to setup a webpack file (and use webpack-validator to save yourself hours of debugging typos)
  • How to setup a unit testing environment for a webpack project
  • How tree-shaking works and how to leverage it for smaller bundles
  • How to maintain sane file sizes with webpack code splitting
  • How to leverage hashing for long term caching
  • How to group vendor/common files with the CommonsChunkPlugin to save bytes in the code that changes regularly
  • The latest features of Webpack 2!

React + AVA = ❤️

react ⚛testing ⚠️
repo
Presentations:
  • Hangout with my team - video2016-04-13
  • Internally at PayPal - video2016-02-16

Abstract

NOTE: I no longer recommend using AVA in React Projects. Instead I recommend using Jest. Incidentally, I have a workshop for that too: react-jest-workshop.

How to Contribute to an Open Source Project on GitHub

open source 🌎
Presentations:

Abstract

"Feel free to submit a PR!" - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Intro to Webpack and Migrating from Require.js to Webpack

webpack
repo
Presentations:
  • JS @ PayPal - video2015-12-17

Angular and Webpack for Modular Applications

angularwebpack
Presentations:

Abstract

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

angular-formly

angular
slides | repo
Presentations:

Intro to AngularJS

angular
slides | workshop
Presentations:

Abstract

AngularJS is one of the most popular frontend frameworks out there right now. If you haven't tried it yet, prepare to be amazed! Here's what we'll cover:

  1. Templates/Expressions - Your View
  2. Module - Your app's namespace
  3. Directives - DOM Interface
  4. Filters - Display utils
  5. Scope - What on earth is this thing!?
  6. Controllers - The View Model
  7. Services - Common utilities
  8. Working with third-party modules
  9. Routing - Single Page App with state in the URL
  10. Firebase & AngularFire - A full web application with no server setup required!

We'll be following through a repository hosted on GitHub. There's a branch for each concept, so you can play around with the code and then catch right back up with the next branch. So come on, and let's learn AngularJS!

AngularJS Authentication with JWT

angular
Presentations:

Abstract

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

In this series, we’ll be building a simple application to get random user information from a node server with an Angular client. We’ll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

By the end, we’ll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You’ll be able to login, get random users, and logout.

Last Updated: 2017-03-14