Tech: a11y, JavaScript, web accessibility

We create websites and applications so that it could be used by people, but do we think about access seriously?

Often web accessibility is considered as an afterthought. In this session, we will explore the intricacies of a11y and learn tips and tools which will enable us to create accessible websites and applications using JavaScript.

Key takeaways - You will learn why accessibility is important and why the development should be access focused. Also, you would learn some tips which you could start using from the very next day and contribute towards a more inclusive world.

Tech: CSS, Sass, SCSS

Don't miss out the third piece of the Frontend Pie: CSS

It just needs a quick look at the Frontend trends to realize that recently the spotlight is on the JavaScript and all of its frameworks, But the Frontend pie has three pieces (HTML, CSS & JS). Without the other pieces, you cannot have a complete pie.

Tech: Open Source Designers, Community

Getting into an open-source can be quite intimidating as a designer. It's not something that you can just wake up in the morning and start doing if you've never been a designer before. From a high level, let's "design" our first open-source project, complete with quick methodologies, tips, tricks, and some extra bits.

This talk was crafted with the aim of lowering some of the barriers for designers to contribute to open-source, How designers can actually contribute to open-source "live-designing" and providing some direction and resources to help people get started with contributing to design from a realm of open-source.

Key Take-Away:
- How not to be intimidated as a designer in open-source.
- Tools to enable designers to contribute to OSS.
- How to inspect design.
- Designing and implementing a feature to production as a designer on an enterprise product.
- Getting started with designing for designers.
- Building or joining a Designers Community as a Designer contributing to open-source.

Talk: Time Management

Do you ever feel like you’re stuck in your career? Do you constantly feel like you don’t have time to work on your projects? Do you want to learn something new, expand your knowledge, develop yourself and be the best you can be?

In this session, I am going to share my story on how I started coding, how I make time to work on side projects and how you can grow and advance in your career. After this talk, I hope you ‘ll be inspired to work smarter, make new habits and continue pushing yourself even when things fall apart.

I will present some helpful tips about self-motivation, time-management, setting priorities and goals, staying organized, believing in yourself and keeping a balance between your career and personal life. To do so, I’m going to use as an example my personal story of how I got into the tech world, the struggles, the rejections, what I’ve learned and how you can succeed by being consistent and determined. Additionally, in this session, we are going to talk about building the habit of coding and the benefits of it. We are going to explore ways of finding mentors in your job and outside of it and also expanding your social network.

This talk is not only about getting better at your 9 to 5 job but also about developing yourself."

Tech: CSS, JavaScript, Vue, Angular, React

A tech snack or for Day 1 called a Design Snack is a version of "This Edition at Jsworld Conference", which is an short but practical presentation where we share updates from the latest on Javascript, tech news all across the web, and some existing things our speakers are doing.

In this series, we'll be bringing the Tech Snacks section to everyone where we share tech updates and new releases from all across the web and updates from our speakers.

Tech: Front-end Architecture, Maintainable Codebases

Front-end apps are growing in complexity, so we need to uncover better ways to build durable, maintainable codebases.

In this talk, we'll discuss some ideas, principles, and patterns that might help us regardless of the framework we're using.

Tech: Fastify, Node.js, Live-Coding

Fastify is a web framework for Node.js that has a great satisfaction across developers with a 89% rating in the last state of javascript.

Fastify combines an amazing developer experience with top of the class performance, with minimal reduction on top of Node.js core.

In this talk, Matteo will go through the fundamentals of the framework as well as a live coded example.

Tech: Frontend Testing, Page Speed, YSlow, Cypress, Jasmine

Nobody wants to work with Legacy Code. Yet it’s what many of us do.

Michael Feathers wrote - short, painful and beautifully true: Legacy Code is code without tests. It doesn’t matter how old it is or who it was written by.

Complexity in frontend development grew rapidly in the last years. The habit of writing tests did not. Now they are everywhere: Grown software systems without any tests in the frontend.

Tech: Scalable Architecture, semantic versioning, Vue Server Renderer Plugin, TypeScript

Everybody is talking about slicing up the monolith. The goal is to create scalable architectures. But how can we achieve that?

For one project, we have decided to give everything, using cutting edge technology, micro-services, verticals, server-side rendering, and more. Talking about upgrading the legacy code base, the plan was to have this greenfield project on separate URLs.

We wrote micro-frontends in Vue.js + Vue Server Renderer Plugin, UI Components as web components and first-party libraries in Typescript.

In this talk, we'll go through the example of an online shop. I won't try to sell you the idea of micro-frontends. But I can show you what we've learned on this bumpy road with memory leaks and semantic versioning.

Tech: Webpack5, Micro Frontends

How can Webpack Module Federation be a Micro Frontends game changer

During this talk we will discuss Webpack 5 most awaited for feature, Module Federation, and discuss how it could become a game-changer for very valid use cases of micro-frontend implementations.

Tech: JamStack, Magic Authenticaiton

Sean will be giving an introduction to Magic passwordless authentication and how it enables developers to effortlessly build more feature-rich Jamstack applications with just a few lines of code.

Tech: Solutions Architecture

If there is something we learned this past 2020 is that we need to build resilient architectures now more than ever.

Belén works as a Director of Solutions at Vercel and previously Lead Frontend Engineer at Mozilla.

Tech: Lambda, Edge, Microfrontends

At DAZN we successfully moved our frontend from a Monolith to Micro-frontends. We did that worldwide, with more than a hundred people involved and gradually, to mitigate any possible disruption for our users.

We leveraged AWS Lambda @ Edge functions to deliver a combination of blue/green and canary deployments, to suits different needs at different stages of the rollout.

Join me to learn the technical and organisational challenges we faced in this journey to Micro-frontends.

Tech: Documentation

We often treat documentation as a by-product of our offering. But wait a second. Where do developers spend most of their time? You’re right, digging your documentation to find an answer to their question. So, why not spend some time improving our documentation? In the end, developer experience matters more than ever before. Developers often choose between products based on the user-friendliness of the docs you offer. This talk provides you with love-filled ideas to take your documentation to the next level.

Tech: Serverless, GraphQL, AppSync, Lambda, Algolia

Building a social network in under 4 weeks with Serverless and GraphQL

You get great velocity without sacrificing quality and reliability when you combine Serverless and GraphQL. It’s really the best of both worlds.

In this talk, Yan Cui shares his experience of building a new social network for university students in just 4 weeks, using AppSync, Lambda and Algolia.

Tech: Web App Security, XSS, XSRF

I know we are front end developers but is also our duty to take care and stop delegating (or relegating) the security of our web apps. We handle a lot of sensitive information, but more importantly, we handle the user’s trust and we have to make the commitment of taking it seriously. This talk is an introduction to Web Apps security. We are going to review fundamentals, best practices, scenarios for developing secure web apps from scratch, and stop thinking of security as a feature.

Tech: No-Code, No-Hype, No Code Phenomenom

It's all about abstraction and separation of concerns.

Read and write text is not about communication since text is just a poor representation of the intentions behind the writer.

- Is code just a poor representation of the solutions for our problems?
- Is it the best representation to maintain?
- Is it accessible?

Only 0,02% of computer users know how to read and write code, being most of the users merely victims and not part of the change.

You can't control the code, you can't control the world.

The computer was created, to be the machine that the user would be able to control its behaviour. But here we are 2021 and it looks like that the computer as it was imagined just exists for 0,02% of its users.

No-Code with No-Hype - is an honest approach to how I believe the no-code phenomenon will change our industry technically, our market drastically and our society positively in the next years.

At Data² we are working hard to create as we call The Next Generation No-Code Platform, that will fight against our current scalability framework which is: "Be a user - Be used".

We could be wiring the world's neurons and together we would become more conscious, everyone's frequency just one pulse.

We are not going to have less change.
We are not going to change slowly.
We are not going to be less conscious.

We gonna break the walls - Everyone could also be a provider, everyone could also be playing actively, creating relevant messages, products and services for a world where truth is measured, helping everyone to adapt and thrive in order to assist the future. Rising for something new aligned with the world we want to live in.

Disrupting the software providing development for the rest of us...

Tech: Graph Database, SQL Query, Coding Demo

Are you an adventurer? Do you want gold? Experience? Levels? Of course you do! And where do you get these things? The dungeon, where else? That wonderful container of all things adventurous! But, unfortunately, dungeons aren't setup for the convenience of adventurers who wish to extract these fine things. It’s almost as if the dungeon master just made the dungeon up at random. And so you wander about and you get what you get.

But you’re also a developer. You could build a database of all the rooms with their shiny and monstrous content. Then you could query it and find the optimal route to get the gold and the experience and the levels. But how would you model this data and write these queries? The rooms. The corridors. The monsters. The sparkling hoozits. That’s a lot of entities to relate to each other. And that’s gonna be a monster of a SQL query. Whoa–look at that JOIN! Better get my text editor ready.

Or, you could use a graph database. A graph database allows you to model these relationships simply and intuitively with nodes and edges. Being schema-free, you can evolve your graph as you encounter new things such as traps or secret doors. And, using the Cypher query language, you can write elegant and easy to understand queries that find the best routes to get the stuff adventures desire most.

In this talk, I’ll use the aforementioned example to introduce you to the concepts of graph databases. I’ll compare how to solve this problem with a relational database and how a graph database makes it easier. I’ll show you how to query and modify your graph. And, as no talk would be complete without a live demo, I’ll do it all using a real-time procedurally generated random dungeon (I am a dungeon master after all).

So come, have a flagon of mead as you learn about graph databases, optimize your dungeon crawl, and equip another weapon in your quest for better software!

Tech: Cost of Bad Code

Understanding the effects of how bad code and inefficient pipelines affect us individually as developers, the team, and the health of the project.

Tech: PaaS, Firebase, Vercel, Heroku, Netlify, Digger

The world of PaaS has exploded and includes great tools such as Firebase, Vercel, Heroku and Netlify. The choice can become overwhelming and confusing at times. Should you chose a Platform as a Service (PaaS) platform to deploy your app, or build directly on AWS? If you go with PaaS, which one should you pick? This talk will present a framework for choosing the right platform for your needs.

Tech: AWS Amplify, Cognito, Appsync, S3, Cloud Deployment

There's a lot that goes into building a modern application: the frontend for users, data persistence, user authentication and authorization, business logic, cloud deployment, and much more.

The AWS Amplify Admin UI allows users to create and deploy an offline-ready application backend in clicks and then extend it with code, lowering the complexity of full-stack development for frontend and mobile developers.

We'll build a full-stack application backed by multiple AWS services including Cognito, Appsync, and S3 in minutes.

Tech: regression tests, visual validation, cross-device testing

Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

Automation has come a long way in assisting with regression testing efforts. Teams worldwide are successfully running hundreds of functional regression tests at every check-in. While this provides a great source of confidence, critical regression bugs are still missed using this approach. That’s because these tests can only assert on what their human programmer asks them to. Additional errors with functionality, UX, and usability often go uncaught using today’s most common test automation techniques.

For this reason, the top companies in all sectors of the industry are turning to visual validation. Visual validation is a relatively new concept that can be used to enhance existing automated tests and provide an easy way to perform those difficult checks for things like UX, localization, usability, responsive design, and cross-device testing.

In this talk, you’ll learn how visual validation works, see a live integration into an existing test code base, and discuss the pros and cons of using various visual validation techniques.

Tech: SPA, API, Vue CLI, dotnet CLI, Kubernetes

You've built a SPA and an API backend, and you're now looking to deploy with ease. Kubernetes is the natural fit, but where do we begin?

We'll use the Vue CLI and the dotnet CLI to startup our codebases, then craft Dockerfiles to deploy these with ease in various configurations.

Whether you'd rather deploy both parts together or scale different pieces separately, Docker can empower you to deploy your solutions at cloud scale.

Tech: Cross-Platform, Capacitor

Rethinking Cross-Platform

Building "cross-platform" apps is often a loaded term. With previous experiences defining how people think about the subject. But times have changed, and so has our technology for building cross-platform. In this talk, we'll look at Capacitor, a new way to build for iOS, Android, and most importantly the web, all with one codebase.

Tech: DXP, JAMstack

The Modern DXP - How JAMstack will change the world.

Tech: Angular, RxJS

7 healthy reactive recipes with Angular and RxJS

The talk will highlight solutions for some common use cases in a reactive application using Angular and RxJS through an example of 7 recipes on what your possibilities are.

Tech: ES Modules, Polyglot Tooling, ES5, Node, ActionScript

Every 10 years there is a changing of the guard in JavaScript. The First Age started with Brendan Eich and ended with ActionScript.

The Second Age started in 2009 when npm, Node, and ES5 all gave new life to JavaScript.

In the Third Age we will see the confluence of a few megatrends – ES Modules, polyglot tooling, collapsing layers, and the slow death of IE.

Let us explore the implications.

Tech: reusable React Component, React Context

If you've ever created a complex reusable React component one of the first questions you probably got asked is how can it be extended, right?

The immediate solution will be to provide props as extension points but soon we will realize that no matter the amount of props we provide there is always going to be a case we forgot to cover.

There is a better way -> React Context.

Tech: TypeScript, React Component API

TypeScript is often praised for adding a layer of bug protection on top of JavaScript applications. But, how can we also use TypeScript to improve the readability of our React component interfaces for our fellow team members?

Just because types compile, doesn’t mean they are helping to document and describe our code for our future selves and others.

Perhaps we can shift our perspective about TypeScript from a bug catching tool to a developer experience tool that enables us to write reasonable and intuitive code interfaces.

In this talk, you will learn how to think like a consumer and take advantage of basic and advanced TypeScript types to enhance the readability of your React component APIs.

Tech: ROLP, Code Writing

When writing computer programs, one is often faced with a choice between multiple ways to express a condition, or to perform an operation, or to solve some problem. The "Rule of Least Power" (extended) suggests choosing the least powerful way suitable for a given purpose.

Tech: Next.js, React Applications

In the past few years, UI libraries have taken the web development world by storm, however, this shift in how web applications are built has also increased the complexity of tooling needed to be productive.

In reality, it has gotten easier as new a new segment of tooling was created to aid in creating scalable and performant web applications. These frameworks focus on providing great end-user experience while also making developers more productive.

Tim explores why Next.js exists, and how you can improve your end-user experience and developer experience by leveraging Next.js.

He also hints at the future of building React applications and what it will look like.

Talk: Narritves we believe in and how they shape our behavior

(This is mostly a non-technical talk) Recent (and still ongoing!) events with Gamestop stock got me thinking about the narratives we believe in and how they shape our behavior and reality, whether in finance or in programming. These metaphors that we believe by matter: it determines how we think about technological systems that we use (open source) and the underlying people that work on it. Wanted to offer up some connections and open questions about where we might be heading.

Tech: Reusable Composable, Vue

Natalia Tepluhina is a Vue.js core team member and a Staff Frontend Engineer at GitLab. She is a conference speaker and author of articles on different topics related to Vue.js . Thanks to these activities Natalia has got a title of Google Developer Expert in Web Technologies.

Her talk will be focussed on Truly Reusable Composables

Tech: Vue3 Applications, Composition API, Modals, Vue-Router

Vue 3 and its ecosystem bring quite a lot of new features and improvements to your applications. Some of these can be directly implemented like the composition API but others are more subtle or require combining multiple of these new features like showing Modals with Vue Router.

In this talk I will go through a few of these tricks I use myself to build applications and explain them so you can benefit from them too!

Tech: Vue3, TypeScript

Vue 3 and Typescript - did we just become best Friends?
We cover Vue's complicated past with TS, the problems, preliminary solutions, and then have a look at the rich TS support that Vue 3 provides today, even with a few small caveats, as well as a brief outlook into the things to come

Tech: Nuxt3

Pooya Parsa is the Head of Framework at Vue.js who will bring us the State of Nuxt3 during Vuejs Amsterdam 2021. With exciting times ahead we can not wait what Pooya will bring us with the latest on Nuxt.

Tech: Creator of Nuxt

The co-author of Nuxt.js, Sebastien Chopin will bring us Nuxt3 in Action! With something new coming we can't wait what this presentation will bring!

Tech: Nuxt 3, Nuxt 2, SSR Vue Apps

Take a sneak peek at the next-generation rendering engine that will power Nuxt 3 and Nuxt 2.

We'll look at how this revolutionises building SSR Vue apps, and what you need to do to use this today.

Tech: Vue3 Migration, key API's

When migrating to Vue 3, there are some breaking changes and key API differences you’ll need to understand in order to effectively compose your components. If you have an application that is currently using props, receiving attributes, or emitting events, this talk will help you transition these components gracefully from Vue 2 to Vue 3.

Tech: Vue3, Composition API

Curious about Vue 3's new Composition API but still haven't had the time to learn what it's about? Be sure to check out this talk where I'll walk you through the fundamentals of the Composition API. By the end of the talk, you'll have the confidence you need to begin exploring the Composition API on your own!

Tech: TypeScript, VueDX

A status report on the Typescript plugin for Vue and VueDX project.

Tech: Vue CLI (5)

Haoqun is a Vue.js Core Team Member and works full-time for the Vue.js Organisation. Haoqun maintains several build tools for Vue.js including VueCLI, Vue Loader for Webpack and the Vue JSX Plugin.

At Vue.js Amsterdam 2021 Haoqun will talk about lessons learned from maintaining Vue CLI in the past years, and the ongoing work of Vue CLI 5, centered around the idea of the inevitable complexity of frontend tooling and how to keep a project maintainable in such a trend.

Tech: Vuex 5

At the last Vue.js Global on September 2020, I've talked about the future of Vuex, the Vuex 5. This time, I'll walk through the latest Vuex 5 proposal, challenges, and how it works.

Look forward to more comfortable, more straightforward, and more powerful global state management of Vue.

Tech: Vue i18n, New Architecture, Composition API, Intlify

State of Vue i18n

Kazupon has been contributing in many Open Source activities as a Vue.js core team member so far. Think about vue-i18n, vue-i18n-loader, i18n custom block for SFC, vue-i18n-extensions, extensions for Vue I18n lik ESLint plugin for Vue I18n and more!

Supporting Storybook for Vue.js and Kazupon is Organizing the Vue.js Japan community and organiser of Vue Fes Japan 2018, Vue Fes Japan 2019

He has contributed to Vue.js official some open source projects, he has developed i18n related library and tools for Vue.js, and In Japan and translated official documents translation.

Tech: Vue Devtools, Plugin API, Extensible Devtools

Guillaume is a VueJS core team, Frontend Engineering at Livestorm and Open Source contributor.

Guillaume truly loves Open Source & JavaScript! He is also a team and Apollo GraphQL contributor. I maintain official tools in the Vue ecosystem like the devtools.

During his talk you can learn more about the new Vue devtools architecture and plugin APIs.

Tech: Vite, VueCLI

How Vite Changes the Game for Vue and Web development. Vite is a new build tool, created to make web developers of any kind happier and more productive. Vite is created by Evan You and significantly improves the frontend development experience.

In this talk you will learn what is Vite, why it is so great, and why you want to use it ASAP. You will also learn how to use Vite with Vue.js or React, and what is Vitepress and how to use it.

Alex Kyriakidis, founder of Vue School, will also answer the most frequently asked questions around Vite, including production use, Vite and test runners, what is means for Nuxt, and many more. 

Tech: Nuxt.js Performance

Performance is super important for any app. Did you know all the cool things Nuxt does for you out of the box, to make sure your app is as performant as possible? Let’s take a look at them and dive into some more performance enhancements for your Nuxt app.

Tech: VueStorefront, CompositionAPI, Nuxt, REST API, GraphQL

How we are optimizing Nuxt without removing features in VueStorefront

One of the implications of web shifting to mobile is the fact that we have to optimize our apps for mobile devices. With the overall complexity of our apps growing this task could be hard. We spend a lot of time figuring out how to make the new version of Vue Storefront that is based on Nuxt and Composition API as fast as possible. In this talk I want to share all, sometimes very hacky techniques we used to make Vue Storefront scoring great on Lighthouse (85-90+) despite significant complexity and inability to use static mode.

You will learn which modules we used to optimize our bundles, when to preconnect and prerender, how we're making use of `transpile` property to use treeshaking more effectively, how we saved around 100 kb by proxying our client-side GraphQL requests via REST API to Nuxt middleware and how we're making sure that our project bundles will not grow over time and responses will always be extremely fast by keeping our business logic on the server-side.

This talk is a deep dive into various hacks we used to keep our Nuxt app and that you can use in your apps to achieve great results with a relatively small amount of work.

Tech: UI Components, State Graphs, isLoading, State Machines

UI components are built on user flows or state graphs. To manage these states, we usually resolved to boolean variables system like isLoading.

But this proves to be buggy and hard to maintain as the codebase grows. Is there a better solution?

In my talk, we will explore how we can fully control our Vue app's states and develop a more adaptive UI system to users' behavior while keeping the codebase scalable with state machines.