25+ WORKSHOPS

In this two-day workshop, you’ll find out how to design, build and deploy custom web components built with pure native JavaScript. Over the course of the workshop, attendees will build several web components, from a simple “Hello World” app to an interactive puzzle game implemented entirely as a custom element built with HTML and JavaScript.

This workshop starts off basic but dives deep, but by the end of the day gets very far into strategies and patterns you can use with RxJS to build applications anywhere JavaScript runs.

This is a framework-agnostic class. We will talk about React, Angular, Node and others as we learn the fundamentals and hidden secrets of RxJS, starting with subscriptions, going through multicasting, creating custom operators, testing strategies and more.

Web Performance Back to Front starts on the server—the back-end—and makes its way to the user—at the very front of the front-end—looking at what parts of the journey can slow us down and what we can do to mitigate it. CDN configurations, TLS performance, protocols, network utilisation, resource scheduling, critical path optimization, asset delivery and optimization, CSS performance, runtime and rendering, caching, and more.

The workshop begins with lessons on capturing rich and insightful data, and subsequent modules will be spent with the tooling needed to dissect and analyse it.

The workshop ends with discussions around performance culture and monitoring, as well as ideas on how best to present findings and improvements to the business.

Once teams are set up with CI/CD as part of their workflows, the next natural question is: what do you run in CI? and when do you run it? Adding a mix of end-to-end and component testing using tools like Cypress allows you to form a mature testing strategy, cover hard-to-test code (like CSS!) and deliver your application’s front end code continuously — with confidence!

In this workshop, we will walk through integrating your frontend applications with CI/CD using CircleCI, and then adding frontend unit- and component-testing with Cypress.io.

It's the complex stuff we will be talking about in this workshop. Remix will ensure that you can keep things as declarative as possible and keep your app bug-free. And to make it even better, you can ship something simple that works well to start and iterate to the more complex solution without having to rearchitect everything because the mental model remains the same.

By participating along with us in the workshop, you'll learn:
- Mutations Mental Model – Understand how mutations work and how Remix helps you manage them.
- Skip busy spinners when you can – Use "Optimistic UI" to make your UI snappier and how to handle errors.
- Build server-intelligent UI components – Make reusable components that manage that server component as well.
- Create app-level navigation indicators – Give the user feedback and a smooth experience as they navigate around your app.
- Accessibility with a focus on focus – Use hooks Remix gives you combined with useEffect to help get the user's focus where it needs to be.

Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?

Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?

SVG animation is a brilliant way to bring personality and character to an online experience. But in an industry focused on metrics, these whimsical details are often overlooked or undervalued.

In this hands-on workshop, you’ll learn how to craft delightful animations using SVG and GSAP, and have a ton of fun whilst doing it.

This workshop will go over the basics of setting up with SvelteKit and querying data from a GraphQL API and using that data in SvelteKit to retrieve data for use in the client (browser).

In this workshop, you'll learn the basics of using Svelte to build a site that will get content from a GraphQL endpoint. We'll be building a blog! Sorry, I know the blog is the new ToDo list but it's a great way to understand what we'll be covering in the workshop.

A workshop on Rust especially for JavaScript Developers

You'll learn how to give your web application a rock solid foundation that will scale with the needs of your users and team. You will bootstrap a complete application, tooled and tested using TypeScript with clean separation of your applications and library code that they can freely share.

The web platform is versatile, capable, and can go far beyond the browser tab while keeping its open and universal nature. We call “progressive” the web apps built using the latest browser APIs to achieve a new level of user experience. In this framework-agnostic workshop, we’ll convert a "classic" web application to progressive using Workbox 6 - the latest version of the service worker automation library. So you can do the same with an app you or your company is developing now!

During this hands-on task-based training you will learn about:
- Progressive Web App concept pillars
- Service Worker API fundamentals
- Current platforms' PWA support (and workarounds when needed)
- Workbox library - an industry-standard in the automation of network-related PWA tasks

Learn the fundamentals of TypeScript by building a library end to end, publishing it on npm and using it in a production app.

Advanced TypeScript and complex types are cool and all but, do you really need it to ship TypeScript to production? No, you don’t.

What you need is the end-to-end experience taking from a blank editor to battle-tested production code.

And that’s exactly what this is: a hands-on workshop where we build a library from scratch, share it with the world and consume it in a production application. The full spectrum.

Want to learn about accessibility through hands-on experience? Then check out this workshop where we'll go over these highlights:

- Gain practical knowledge around disabilities and accessibility without getting overwhelmed.

- Discover tools and methods to improve how you audit your own projects for accessibility.

- Practice hand-on empathy exercises.

Learn how to navigate applications with a keyboard and screen-reader.

- Build reusable components that enforce accessible practices.

- Recognize common pitfalls in component design.

- Incorporate tooling to catch errors in your editor, UI, Git workflow, repository, and CI/CD pipeline.

Accessibility on the web is increasing in visibility, yet some web creators are still unfamiliar with how to create an amazing, accessible user experience. Spoiler alert, it starts with design, but what happens after that?

In this workshop, I will walk the attendees through a site that has multiple violations, and a low score in Lighthouse. I will also touch on aXe Core, what it is, and how to use it. After we comb through the site, I will introduce easy wins like semantic markup, alt attributes, and ARIA labels to remove all violations.

Angular is a powerful framework to create a SPA. In this workshop, developers will learn about:
1. Data Binding
2. Dependency Injection
3. Routing
4. Guards
5. Pipes
6. Angular Material
7. State Management
8. Creating APIs using NestJS and using MongoDB

Design systems -collections of common components, colors, and other constants- are a key way to scale teams and web applications on the modern web. They're particularly handy for deduplicating frontend development costs for microfrontends and remote teams. But how do you create one from scratch -- or, much more commonly, in-flight from an existing service?

In this workshop, we'll go over how to build common user interface flows using state charts, and then implement them in a React web app.

We'll start with what state machines are, and build up from the very simplest state machine.

Then we'll add a library (XState) to help us visualize our machine.

Then we'll add side effects to cause things to happen in the real world.

And we'll tie it all together in a React app.

As developers, our responsibility broadened, and more software means more software security concerns for us to address. Join Liran for a hands-on Node.js cloud native live-hacking session, to show common threats, vulnerabilities and misconfigurations

You may have already heard about the Jamstack. You have probably used Next.js, and recently you may have heard a lot about headless CMSs.

In this quick course, we will put all these pieces together, and we will show you why Storyblok — in combination with Next.js — is the best combo for your next project. Join us so that you can try it yourself!

This workshop is meant for intermediate JavaScript developers that want to learn to build modern web applications with Svelte.

We’ll take it one step at a time as we build the frontend and backend of an invoicing app that uses SvelteKit and Supabase.

We’ll explore topics like Svelte routing, animations, authentication, and more!

Learn how to code your own plugin and break free from the existing Gatsby Plugin Ecosystem.

We'll cover how to:
- hook into the Gatsby lifecycle
- source and transform data
- utilize the Gatsby Cache
- handle image the Gatsby way
- play nice with other plugins

A beginners guide to getting up and running with Svelte and Svelte Kit to effortlessly build modern applications quickly and easily.

In this workshop we will make a smart webcam application with a pre-trained Machine Learning model that runs on the browser, using the most popular ML framework for Javascript: TensorFlow.js

There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.

Defining a product strategy goes beyond defining the requirements. It is important to identify the business drivers, technology aspects and Human Centred Design components.


Applying this pragmatic approach as part of our Devbridge methodology we are able to better understand the initial needs of our clients and propose products that will bring a positive impact to their business rather than be one more touchpoint.

If you're an experienced Angular developer or team lead but you still don't feel like an expert, this training was created for you!

Angular rocks at enterprise scale but can get messy without solid architecture, resulting in slower apps and slower dev teams.

Join us to for a high level, fun, and interactive discussion of the most common architectural mistakes Angular teams are making, how to avoid them, and how to confidently build apps that will stay clean and fast at enterprise scale.