As web developers, we sometimes work in isolation. Are the tools and techniques we're using outmoded? Are they best practices? Are we doing something cutting edge nobody else is doing? How do we know? One way is to survey over 7,000 developers and ask them, and that's what we did. Everything from languages and tools through frameworks to how the pandemic has changed your working life, I will give you a picture of what web development looks like in 2021.

In this session you will learn the most common anti-patterns I've seen in the past 7 years implementing and consulting multiple companies in their journey into the micro-frontends architecture
Either you are an expert or a newbie, in this talk you will learn how to structure properly your micro-frontends architecture.

In this live-coding session aimed at beginner frontend testers, Anna McDougall from Novatec Consulting GmbH explains how you can get started with E2E testing using the industry standard: Cypress. Watch your pre-programmed user login, fill out forms, and click through your app in double time right in front of your eyes. It looks amazing and saves you time; all while improving UX consistency. A win for you, a win for your users, and not at all difficult to implement!

Web Platform is developing fast. Too fast. Yesterday I used table layouts to make my website pixel perfect. Today I use flexbox and grid to make it adaptive. Tomorrow I will use cascading layers and container queries to be on the edge of technology.

But where can I find the info about all the new features available? Where can I look to the future?

Forms were not always a part of the web, in fact, they were only added in HTML2, and even to this day writing them feels like they are an afterthought.

Vest is an open source form validations framework inspired by the syntax and style of unit testing libraries. In this talk you'll learn how to easily validate your forms using Vest, making them easier to read, write and maintain in the long run.

This will be fast & furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is!

There are so many discussions about web VS native apps. Will we get to the point where the Web becomes truly Native for the majority of the platforms? Progressive Web Apps, Project Fugu, WebAssembly & other technologies actively contribute to moving in this direction. In this session, we go through a list of details that make the integration of an application & operating system seamless, and map it to the APIs available for the web platform. With the knowledge of what's available today and what's coming soon, you are empowered to build truly Native Web Apps to deliver the best user experience!

Modern frontend applications want to efficiently query data on page load and navigate, format the data with TypeScript, and cache data between repeat requests. Setting that all up on your own is a chore... but with Apollo and Next.js, you can set up your client to auto-generate TypeScript types, cache query results intelligently, and generally be a breeze to work with.

We love JavaScript, but we must admit: it's weird. Why does `this` behave as it does? How does variable scope work? Why do we have such comical behavior when comparing mixed types? Let's pull back the covers of these scenarios, and learn how it truely works. You may find a new reason to fall in love with JavaScript.

Being the missing link for Micro-Frontends, the brand-new Module Federation has been greatly discussed in recent months.

However, once the basics have been mastered, the truly interesting questions arise: How do you deal with version mismatches? How do you load remotes dynamically when you do not know them or even their number upfront? How do you use Module Federation in a monorepo? How do you use Module Federation together with Web Components for multi-version and/or multi-framework scenarios?

This session answers all these questions with a case study and explores the trade-offs. By the end, you will know how to apply this to your projects.

Making sites load fast with current tech is out of reach for most. Builder.io is reinventing server-side generation and front-end frameworks by prioritizing time-to-interactive.

This radical approach is going to change how developers and frameworks approach the problem of initial interaction. The result is not only the highest Google PageSpeed Insight scores but also a user experience previously thought impossible.

In this session, you will see how this is achieved, and gain a peek into the future of frameworks.

We live in a world constantly being tempted with choices. Choices that drain our time and energy.

How do you decide what to use? How do you make sure your choice is the right one? Are you a randomizer, an analyst, or a follower? Who should you trust?

Let me enlighten you on what benefits you will reap by using Nx (and monorepos) in every project size and setup. Let me give you enough arguments to make the right choice. The obvious choice you were missing this whole time.

Let me help you save time and energy, so you can focus on the things you like.

As web2.0 brought html and JavaScript generated website and applications, enterprises sought automation to find ways that can interact, extract, utilize, or read the written code to execute tasks to run their processes. In this session we will talk about 1) how UiPath RPA augments in the web surfaces to execute tasks, extract data from websites and bring automation 2) why it’s more and more important to understand low code / no code for enterprises 3) how a career in RPA can accelerate growth in web automation.

TypeScript nowadays is the hottest trending JavaScript dialect and is becoming more and more popular in the community. We all know, the TypeScript key feature is the introduction of static typing in weakly-typed JavaScript. But that’s not for free!

Let's recap - why do we need types? What are the advantages and disadvantages of using TypeScript? What is its cost and what’s the impact of its adoption?

And then the trick: get the benefits of TypeScript without using it!

I'll take the attendees through a story of when I wanted to build a Node app on top of a public Big Data dataset.

It's a rollercoaster ride of emotions. I use BigQuery to query for data and explain the pain points of querying it directly versus using caching and aggregations through the use of an open-source analytical API server written in JavaScript/TypeScript.

Here's a blog post I wrote about this topic: https://cube.dev/blog/data-warehouse-performance-and-how-cube-can-help/

While our tools and workflows in the world of application frameworks like React continue to evolve and improve developer experience, our styling approaches are often times staying the same. And moreover, our way of thinking about components and variants hasn't changed much. With fresh low performance impact CSS-in-JS libraries like Stitches and vanilla-extract we can catch up with a new mental model of what our components are and can be — combining everything that pure CSS offers and features like type safety, enforced tokens, variants, or critical path CSS generation.

Let's dive in and make our lives simpler and component systems better in everything from your personal project or startup to enterprise level multi-brand solutions.

From loading Ajax requests in browsers to have full-blown frameworks; Javascript has come a long way. While moving stuff from backend to frontend the problems of backend are also ported. The Bigger the code gets bigger the problems, more dependencies, harder maintainability, eventually all the problems of a huge monolith.
With Microfrontends, we can break this monolith into smaller independent, maintainable apps.
Sounds good? Let’s see how in this talk.

At the beginning of the year, I wanted to follow a challenge: helping people on Stackoverflow, everyday. Let me tell you everything about how it started, how it's going so far, what I've learned and what you could do to help the community too.

The Vue 3 core has officially been released as of 18 September 2020. All of the official libraries do already support Vue 3 as well.
Main feature version 3 brings is the V3 composition API - let's learn more about how to use it efficiently.
We'll start with Introduction to Vue3 features. In this session we will cover the following topics:
- Vue router
- Vuex
- writing custom behaviours (hooks) in Vue3
- Using Vue CLI to start projects in Vue3

Automation is the key. I've developed a lot of tool using NodeJS and Puppeteer as stack in order to automate a process, a test, a human task.

In this talk I'm gonna show you two real examples:
- automate a video to audio conversion from YouTube to Anchor.fm
- automate a lighthouse test on your website (with auth support)

There is no code without bugs. But our goal is to minimize them. This is only possible when development and testing work together. In my talk, I will tell about our experience of blending testing and development, about how we automated regression testing, what tools we used, what difficulties we faced, and what came out of it all.

Do you find joy and creativity in coding but get cold chills when you think about things like data structures? Worry not, my friends. We'll use creative analogies and visuals to demystify two fundamental data structures: linked lists and binary trees!

You'll leave with a high level understanding of these structures and see them implemented in JavaScript.

Creating applications that serve users from near and far can be challenging. There are endless things you have to try to normalise across the board. To mention a few you have to watch out for Browser support, accessibly to name a few. It is impossible to make a perfect application but sometimes, especially when we want to use modern JS features.

Polyfills are great but sometimes, they do add extra payload for the users that do not need the polyfills in the first place. Angular's built-in Differential loading helps us achieve an automated way of ensuring that users only get a build that includes only the tools they need and nothing more.

Over the last decade, the web has advanced to be a robust application platform. Most recently, Progressive Web Apps have brought native capabilities to the web. But that’s not the end of the story! Project Fugu, a cross-vendor initiative by Google, Microsoft, and Intel, aims to bring even more native capabilities to the web—native file system and clipboard access, accelerated shape detection in images, home screen icon badges and shortcuts included! Christian Liebel, PWA specialist at Thinktecture, shows you the objective of Project Fugu and demonstrates some of its APIs.

"TDD is great, but it won't work on our legacy code".
I hear that a lot. That's why people don't even give TDD a try. Their code is killing their hope.

TDD's basic examples are, well, basic, and have no relationship to real-world code. But it can work on legacy code, and everyone's got that. You just need to remember a few techniques, stick to the principles, and you can start doing TDD in your application code tomorrow.

In this session I'll show how to do it, the techniques and principles involved. And I'll show how to add TDD code inside an ugly application.

No more excuses then. It's possible to do TDD right there in your own legacy code. Let's do it.

For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.

So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.

It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript

Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!

Figuring out the right balance of collaboration across teams and applications in a codebase is a challenge. Working out the mechanics of building these applications using a monorepo simplifies these challenges. Nx is a build framework for monorepos. This talk shows you how Nx helps you maintain and scale Angular applications, with multiple teams by sharing components and libraries, providing consistent tooling, and an integrated developer experience.

The web is amazing, but it can also be slow, bloated, and fragile. In this talk, we'll explore emerging modern tools and techniques you can use to more easily build fast, resilient sites and web apps.

A large bundle size is the biggest fear to any JavaScript developer, but who knew a large bundle size affects more than your user experience? A large bundle also means that the CO2 footprint of your website is also bigger, as larger bundles need more bandwidth and resources. In 2020 the average website was 4 times bigger than 10 years before, what are the climate effects of this? In this talk I'll show how your website is impacting the climate, and how you can (and should) change this.

Performing safe, pure refactorings is a skill that can make a big difference on your code maintainability. Hopefully, IDE like Jetbrains have automated a lot of them, in many languages.

But what if your text editor doesn't provide automated refactorings for your language?

Consider VS Code: it is increasingly popular, yet it misses most refactorings for JavaScript. However, you can customize VS Code through extensions.

Have you ever thought about creating your own?

In this session, I will show you how to build an extension that refactors JavaScript code for you! You'll learn how to manipulate the Abstract Syntax Tree (AST). Together, we will create, configure, package and publish your first VS Code Extension.

I will talk about Metamask, web3js, and their benefits to the blockchain world. I will also create a simple project to demonstrate how to display an address and balance on a simple webpage.

I was looking for a tiny and free ecommerce solution. Nothing special: just a simple product database, a way to handle the payment and that's it. Finding a solution was really hard. Most of the solutions come with a hundreds of features and ofcourse aren't for free.

Teini (tiny, [ˈtīnē]) is a extremely small open source webshop leveraging awesome and free solutions like Github and Vercel.

In this session I would like to show how Teini is build. Covering the following topics:

* Prisma(.js) as ORM and Typescript make the code so much cleaner and more maintainable.
* Nextjs with its data fetching strategies is a perfect fit for all ecommerce sites.
* Nextjs Image- and Font-Optimizations (I wrote about the image stuff on my blog: https://krey.io/blog/nextjs-image-component

And of course the whole thing is open source because I think open source is the feature for big and living software products. I would cover why this is important as well.

Wanna see some cool tricks with observables?
ToPromise, subscribe, switchMap, and others? Come and let's dive in the operators, subscriptions, and the cool stuff that happens when we use Observables.

Human health is complex - it's not something we can buy; it's something we have to earn! This exact approach goes for open source projects and their communities. A truly dedicated and loyal fanbase cannot be bought; it has to be nurtured. But what do we mean when we call a community and the open source project "healthy"? This question is what we are trying to answer at Facebook!

In this talk, we will look at the approach that Facebook Open Source team takes to measure the current state of Facebook open source projects, and how we use these metrics to prioritize and to direct our DevRel focus. Ultimately, we aim to show how by looking at information about your open source communities, your team can concentrate on the quality of the projects instead of only the quantity of repositories that you make public.

In my journey through nodeland, I always wonder about the cost of my abstractions.

I started a journey to write an HTTP framework with extremely low overhead, and Fastify was born. With its ability to reach an astonishing 90k requests/sec, Fastify can halve your cloud server bill.
In this talk, I will walk you through the basics of the framework: how to route requests, write tests, and use the plugin system.

When the concept of Progressive Web Apps was introduced in 2016, the world of frontend development seemed changed forever. Websites could be ‘installed’ to devices and, better yet, they could be available offline! Surely, this would be the death of native? As we know, that isn’t exactly how things went. PWAs weren’t really able to live up to the ideology at the time. The groundwork was there but, as with everything else on the web, it was to be a slow process of incremental improvements.
Now, five years down the line, things are different. PWAs are truly installable, reliable, and capable. In this talk, we’ll look at how PWAs have matured over the years and just how capable they’ve become.

Requirements for Web applications have never been higher. Developers often have to invest in large monolithic applications with hundreds of thousands of lines of code or develop hundreds of applications which combined together provide consistent user experience.

In this talk, I'll share lessons for development at scale that I learned working with dozens teams at Google and external companies. We'll look into trade-offs for different source code organization strategies, efficient use of conformance, and architectural patterns for micro-frontends.

Bringing inclusiveness to the tech-ecosystem.

How many front-end developers know that in 2021 it is possible to access contacts on a mobile device directly from the browser? Or that recognizing QR codes AI is already in your mobile Chrome? Apart from the fact that the classic "client requests - server responds" scheme we are used to is by no means the only architectural solution for communication between the server and the pages. Let's figure out what modern browsers can do, and how they can help a "regular" project.

Data modeling is the process of figuring out how data should be represented and stored in your software system. Effective data models must balance between application needs, database performance characteristics and the structure of the data itself.
But why would you care about data modeling if you’re a frontend developer? Well, understanding how data flows through your application, will help you consume your backend API in a more efficient way.
In this talk, we’ll go through the basics of data modeling - from identifying relationships and cardinalities, to handling staleness and duplication. We’ll be discussing the data modeling methodology in the context of MongoDB, a NoSQL document database.

Typescript was created by Microsoft to help enterprise C# developers write OOP code in Javascript. For that reason, many typescript codebases look a lot like C# or Java code.
As a brown belt in functional programming, and a fan of the KISS principle, I try to use Typescript differently.
A functional Javascript programmer doesn’t have to use classes and interfaces. A combination of types and functions will do the trick.

Learn how to use the Web-Component-Standard of the W3C without using a external Library or Framework. I like to show you the best pratices and no-gos/bottlenecks on productive project which I experienced myself. You can use these technique to transform your legacy projects for better maintainability.

The only reason developers are in demand is because they have learned the "language" to talk to computers. Yet I find so many of us struggle with "language" in conversations with people.

Come and discover an unconventional look at conversations, and the vital role it plays in your career and leadership.

Understand the 4 levels of listening, the power of our stories, and how to have difficult conversations with ease?

Learn how to build an ultra-secure role-based access control (RBAC) system in Angular & Node in a real-life budget manager application.

Testing is important: You probably already know that and so you do it yourself - or your dear testers do, at least. But as your project grows, this becomes more and more tedious - each of your changes can break something in your project without you noticing it. But chasing these side-effects with a checklist after every merge is no solution either. However, end-to-end tests only do what you tell them to do - so they don't look left or right. For example, styling errors can go unnoticed.

So what now? Visual testing compares the appearance of your application with a previous state. If changes become visible, you can react to them. So you or your testers have their eyes everywhere - without the need to check manually over and over again.

I've been using visual testing for a while now and it has saved my neck a few times. Let's take a look at my journey together and explore if and how visual testing can help in your projects as well.

One of the biggest user experience pinpoints on the internet is creating a username and password for every service you sign up for. Social sign on options like signing in with Google or Twitter have made things a little easier but with the unfortunate caveat of giving a large company all your accounts. The web3 space solves for this with the concept of wallets. In this talk we will go over how authentication in web3 works and how it improves the user experience by taking a look at how to connect with a wallet in a Next JS app and creating user accounts for your application.

The world of machine learning frameworks is complex. What if we can use the lightest framework for inferencing on edge devices? That’s the idea behind ONNX format. Attend this session and find out how to train models using the framework of your choice, save or convert models into ONNX, and deploy to cloud and edge using a high-performance runtime in javascript.

In the past couple of years security has been shifting left into the hands of developers. As a result, attackers have looked all around for means to compromise organizations through developers: malicious 3rd party packages, leaked credentials, unpatched vulnerabilities, and more. But the place that has become the new threat laid under their nose: the IDE.

Cutting-edge tools are making it super easy to get an MVP up and running over an afternoon. We'll use Supabase, Stripe, Next.js, Tailwind, and a headless CMS to set up a fully-featured subscription-based course platform.