The workshops from the list below are the complimentary part of full tickets.
Workshops will be run remotely via Zoom. The recordings will be shared with full ticket holders after the conference.
Please note, you are able to add the session to your calendar but it's not the same as the registration. You'll need a separate link that will be sent via the ti.to platform for registration.
Publishing, Automating and Monitoring your JS App on Azure
In this workshop you're going to deploy a JS app to our Azure Services. Obviously, we don't want to do this manually, so you're going to use GitHub actions to streamline this experience. Now that our App is on Azure, we want to make sure that we're aware of crashes and performance issues, so we'll add some App Insights in the mix. During the workshop, we'll show some cool features you could leverage!
Date & time – May 31, 16:00-18:00 CEST. Remote.
Build React-like apps for internal tooling 10x faster with Retool
- - The challenges with internal tools
- - What is Retool? A walkthrough of the tool and how it works
- - How to connect to your datasources (APIs/databases)
- - Walk through building a simple admin panel
- - How to use custom React components and reuse modules
- - Connecting to custom APIs
- - Questions and answers
- A free Retool.com trial account or a willingness to watch and discuss.
Date & time – May 31, 18:00-21:00 CEST. Remote.
Build an IoT App With InfluxDB
InfluxDB is an open source time series database that empowers developers to build IoT, analytics and monitoring software. It is purpose-built to handle the massive volumes and countless sources of time-stamped data produced by sensors, applications and infrastructure.
- - InfluxDB open source project - Introduction
- - IoT Center Introduction
- - Hands-on Workshop - Install IoT Center
- - Hands-on Workshop - Data Explorer & Flux lang examples
- - JS Client - Introduction (show code examples)
- - Hands-on Workshop - Add geo widget for mobile devices
- - InfluxDB as monitoring platform for node.js
- - Q&A
Date & time – June 1, 16:00-18:00 CEST. Remote.
JS Security Testing in GitHub Actions
Leading teams are realizing that periodical penetration testing and security audits is not enough when code is being shipped daily. Instead, these teams are using developer-centric tools to run automated security testing in a CI/CD pipeline. Join Zachary Conger as he walks through how to automate application JS security testing using GitHub actions.
- - Set up a GitHub Action basic JS build workflow
- - Add Dependabot for SCA dependency checking
- - Add StackHawk or ZAP for DAST
- - Add CodeQL for SAST
GitHub Account, Docker + Docker Compose knowledge.
Date & time – June 1, 18:00-19:00 CEST. Remote.
The Crash Course for Continuous Code Improvement
Every business today is a software business. Software is made of code. And code is meant to be improved. Yet developers get stuck reactively monitoring, investigating, and debugging code to fix issues. They lose too much time manually searching through logs, APM, and observability tools. Instead, they could be using that time to innovate. In this workshop, the participants will be introduced to the continuous code improvement platform that can help them see errors in real-time and gives them the tools needed to automate how they respond. Participants will learn how to instrument Rollbar's lightweight SDKs into their applications to capture uncaught exception errors as they happen along with the surrounding context and details. Participants will walk away with complete visibility on every error in their application, coupled with all the important data needed to make resolution painless.
- - 1. Introduction to the topic of Continuous Code Improvement
- - 2. Demo - Lifecycle of A Bug
- - a. Demonstration for real time alerts about errors in the applications, at any stage of the software development lifecycle
- - b. Reveal contextual metadata included with every occurrence of a bug
- - c. Error Classification: Default Grouping + Custom Grouping
- - d. Querying for Custom Workflows - Improving Signal with Custom Alerts
- - e. Focus on New Bugs Every Release
- - 3. Training Session - How to get started with your first project setup
- - 4. Wrap-up Time - Beyond The Demo: Getting Value from Error Data
Date & time – June 2, 16:00-18:00 CEST. Remote.
Getting Comfortable with Angular and UI
A workshop for UI and Angular beginners alike. Let's pull down the Tour of Heroes app (written by John Papa and found throughout the Angular docs) and give it a UI upgrade! All you will need is a laptop and your favorite data set (mine, of course, will be ponies.)
- - Dive into the Tour of Heroes demo application like never before!
- - Learn about integrating SASS into your Angular Project.
- - Learn how to include a Component Library into your Project. (We will be using Kendo UI but the principles are to implement a UI Library are pretty universal.)
- - Play around with customizing styles and writing custom CSS from scratch.
- - Go over UI/UX principles and implement them on the fly.
- - Take part in UI challenges throughout the Workshop and win prizes!
Date & time – June 2, 18:00-21:00 CEST. Remote.
Jamstack eCommerce 101
Date & time – June 3, 16:00-19:00 CEST. Remote.
Build your own live streaming platform
In this workshop we will go over the basics of streaming video over the internet including technologies like HLS and WebRTC. We will then build our own React app to play live streams and recordings of live streams.
Date & time – June 3, 18:00-20:30 CEST. Remote.
Full Stack Cloud Development with Next.js, AWS, and Tailwind
In this workshop you'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.
We'll build out a multi-user blogging platform, implementing a database with DynamoDB, authentication with Amazon Cognito, and a GraphQL API with AWS AppSync and connect to the app from the Next.js client using AWS Amplify. Users will be able to edit and delete their own posts as well as add rich media like cover images using Amazon S3.
By the end of the workshop, you should have a good understanding of how to build full stack apps on AWS with Next.js and AWS Amplify.
Date & time – June 4, 16:00-19:00 CEST. Remote.
Building a Hyper Fast Web Server with Deno
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server by utilizing Hyper under the hood and boost the performance for your web apps.
Date & time – June 7, 17:00-20:00 CEST. Remote.
Shipping High Performance React Apps with Datadog and Real User Monitoring
The way you observe your Web App’s performance over time can make or break the experience of your users. Fortunately, you can continually stay informed about the health of every delta in your UX using Real User Monitoring, and immediately identify any issues that are holding your current users back. With it, you can manage optimizing how long it takes for users to load your App on mobile, round trip times for asset fetching, the average latency between user actions and component updates, and more (by adding a small block of code in the right place). In this workshop you’ll learn how to leverage Real User Monitoring in order to track and resolve the issues that prevent your App’s greater adoption, and retention. We’ll discuss how to think about performance from the user perspective, gauge what metrics are important to monitor continuously, and define a good strategy for alleviating the latencies and issues that affect your users most.
- - Interactive Demo: See and hear latency (Web App performance and user joy scale linearly)
- - Add Real User Monitoring to Conduit (an open source clone of medium.com built on React)
- - Identify performance bottlenecks and anomalies in Conduit using Datadog’s RUM Explorer
- - Resolve Conduit’s issues
- - Verify the problems have been fixed using the RUM Explorer
- - Monitoring the user experience with Dashboards: User Sessions, Performance, and custom Dashboards for valuable metrics and BI
- - Q&A, and additional resources
Date & time – June 7, 18:00-20:00 CEST. Remote.
- - Regular Expression Literal vs. RegExp object
- - RegExp methods
- - a. test (yes, or no?)
- - b. exec (probably not what you want, let's talk about why)
- - c. match objects
- - String methods
- - a. match, matchAll (so much better than exec ;-) )
- - b. search (take a number)
- - c. split (make me an array)
- - d. replace (with fixed string or function output)
- - Summary cheat sheets
- - a. What does each method do?
- - b. When would I want to use one over another?
- Node 12+
- Array methods: map and filter
- Knowledge of regular expression syntax helpful but not required
JS devs who avoid regular expressions because who has time to figure out which method to use? Level: beginner / intermediate.
Date & time – June 14, 18:00-20:00 CEST. Remote.
Data Visualization for Web Developers
Data Visualization, aka "dataviz", is much more than drawing some pretty charts; it's a process of discovering & communicating insights derived from data. As web developers, we are luckily swimming in data about the apps we build, the users who interact with them, and the development workflows we use to build them. We may be used to looking at certain visualizations of that data - e.g. a simple line graph or bar chart presented by our analytics platform - but many developers don't realize that with very little time & effort, we can build our own visualizations to dig deeper and answer the specific questions that really matter to us and our work.
- - Introduction: What is dataviz?
- - Answering the right questions
- - Project 1: What devices are users browsing with?
- - Features & encoding channels
- - Project 2: (How quickly & reliably) are integration tests passing?
- - Interactivity & user inputs
- - Project 3: How fast are (certain types of) API responses?
- - Takeaways & next steps
No development setup required! All you need is a browser, as we'll do all our work in Observable (signing up for a free observablehq.com account is optional, but not required).
Date & time – June 14, 18:30-21:30 CEST. Remote.
DevOps 2.0: The ultimate JS delivery pipeline
- - Introduction to CI/CD (essential info only, up to 10 minutes)
- - Basic delivery pipeline: dependencies, builds, deployment, restarting app
- - Managing different Git workflows: Gitflow, trunk-based development
- - Securing code and Production with PR’s and GitHub Branch Protection Rules
- - Improving JS code quality in 5 minutes with smart automation
- - Testing: what to test, when, and what tests should I use
- - Browser tests: Cypress, Puppeteer, Selenium
- - Visual tests: comparing new website versions with Production before manually accepting deployment
- - SEO in delivery pipeline: Google Ligthouse, link scanning, SSL checker, image compresion
- - Tips and tricks to speed up your delivery pipelines (trigger conditions, cache, Docker, changeset deployments, parallelization)
- - Troubleshooting and edge cases: how to debug and evolve pipelines to fix problems
- Code Editor, Git installed
- GitHub account
Date & time – June 15, 15:00-18:00 CEST. Remote.
Micro-Frontends with Module Federation and Angular
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
- - Using Module Federation to load separately compiled micro frontends
- - Using Module Federation with Angular and the Angular CLI
- - Sharing dependencies
- - Strategies for dealing with version mismatches
- - Communication between Micro Frontends
- - Mono repos vs multi repos
You should have some experience with Angular.
Date & time – June 15, 18:00-21:00 CEST. Remote.
Painting with Data: Intro to d3.js
- - Introductions: Who am I and who are you?
- - A quick tour of d3.
- - Setup.
- - The Data: fetching & loading; CSV & JSON in the browser.
- - Part I: The Visual. We build up a scatter plot using d3 and SVG. We focus on fundamentals so you can feel comfortable building with your own data later.
- - Part II: The Magic. This is where we depart from pre-built capabilities of most charting libraries and explore the possibilities opened up by d3.js.
Date & time – June 15, 16:00-19:00 CEST. Remote.
Micro Frontends with Module Federation and React
Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends.
- - Micro frontends architectures
- - How to share dependencies between apps
- - How to break up a monolithic app into multiple sub-apps
- - Implementing soft navigations between micro frontends
- - Micro frontends with monorepos
- - Tools, frameworks, and libraries: Module Federation, Lerna, Next.js and React
You should have some experience with React.
Date & time – June 16, 17:00-20:00 CEST. Remote.
Web Components in Action
Date & time – June 17, 18:00-21:00 CEST. Remote.
We'll take a look at the different tasks AI can help solve, and how to use Tensorflow.js to solve them. You don't need to know any AI to get started - we'll start with the basics, but we'll still be able to see some neat demos, because Tensorflow.js has a bunch of functionality and pre-built models that you can use on the server or in the browser.
After this workshop, you should be able to set up and run pre-built Tensorflow.js models, or begin to write and train your own models on your own data.
Date & time – June 18, 16:00-18:00 CEST. Remote.
Vue3: Modern Frontend App Development
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
- - Introduction to Vue3
- - Composition API
- - Core libraries
- - Vue3 ecosystem
- IDE of choice (Inellij or VSC) installed
- Nodejs + NPM
Date & time – July 8, 16:00-19:00 CEST. Remote.