Conference Madrid 2023 | Front-end

Description:
Cascading Style Sheets (CSS) is cornerstone web technology which enables beautiful web pages across a range of devices. CSS was first proposed by Håkon Wium Lie while working with Tim Berners-Lee at CERN in 1994. Since then, CSS has added many features, and most of the information you read today will be presented by a CSS rendering engine. The exception may be paper-based books, magazines and newspapers. But this may be about to change as CSS in implemented by an creasing number of print-centric rendering engines. During the talk, you will be challenged to write a book in HTML and CSS.

Description:
In this presentation, we'll explore how to build a full-stack, cloud-first web application that is completely serverless. You'll learn how to leverage cloud functions, change streams, and full-text search to create a real-time bidding platform that can handle high volumes of data and traffic. We'll do live coding during the presentation, giving you a hands-on learning experience and the chance to see these technologies in action. By the end of the session, you'll have the skills and knowledge needed to build your own cloud-based web apps, and you'll be able to apply these techniques to a wide range of projects.

Description:
Currently, we're seeing the rise of new frontend frameworks like Qwik, Astro, and SolidJS. This talk explores why they're attractive and teaches attendees practical skills they can use at work inspired by these tools. We also explore where React, Vue, and Angular stand in the middle of this.

Description:
Animatron is an experimental environment (very much “work in progress”) that enables creation of “visual poetry” in the form of animations and images, created in real-time through live coding. It’s implemented using the open-source Godot game engine, and communicates with any “client” application or live coding language — such as SuperCollider — via the network, using the Open Sound Control (OSC) protocol and MIDI. The OSC interface has been designed to be extendable using OSC itself. All configuration files and custom commands are lists of OSC messages. Everything in Animatron is done through OSC using it as a proto-livecoding language.

Description:
Microservices nowadays is a well known concept and maybe you are using it in your current company. Do you know that now you can apply similar ideas in the Frontend? Today we already divide the Frontend into several components at development time, but at compile time these components are merged into one monolithic Frontend and this is where this new architecture comes into play. In this talk we will understand the reasons behind micro-frontends and we will also explore one of the most interesting ways of applying them using Webpack Module Federation and Svelte

Description:
You have done it. You've managed to apply clean architectural principles to your front-end code. But you still have many challenges to solve. How do you optimally send your use cases to the client? How do you make sure you have observability of what is going on? How do you manage to maintain a similar code among all developers? How do you make it coexist with the concept of isomorphism? These and other questions we will try to solve in this talk.

Description:
Después de años de evolución en el frontend nos hemos complicado tanto la vida que tenemos que volver a los orígenes. ¿De qué herramientas disponemos hoy para hacer frontend? ¿Qué librerías podemos dejar de utilizar gracias a los estándares web? Veremos muchas utilidades que podemos usar ya que nos ahorrarán dependencias y ganaremos en rendimiento.

Description:
Location Data and Maps are becoming more and more important nowadays in applications. However, while they make lives easier for many people, others still suffer from using them. Let’s understand why accessibility in maps is essential, see how to make a Google Map more accessible, and find out about still unsolved problems.

Description:
The web is fast becoming the main means through which people interact with all sorts of technologies. With every new invention, users ask "but can it work with a browser?" With Web APIs, the answer is almost always yes; even to the question "can you fly a drone with a banana?" In this talk, I show the audience the power of APIs and discuss a few cool experimental APIs. I do this by taking them through on a journey through my experience of trying to hack a drone and fly it with a banana. If you're interested in all things web, custom controllers, Bluetooth technology and accelerometer-based controls or if you just like fruit and seeing silly applications of technology, this talk is for you.

Description:
The collective frustration about CSS is through the roof. From centering things to magic browser-specific hacks, you either have that “CSS gene” or you don’t have it. Developers enjoying coding with CSS seems to be the exception to the rule. But fear not! This is not inevitable. Through my experience of teaching CSS to dozens of developers during the last 5 years, I developed a mental model that helped me understand this CSS issue and how to overcome it. In this talk, we’ll go over: where does the CSS frustration stems from actionnable tips & tricks to level up your CSS skills how to build the correct mental models to integrate any complex design At the end, you might even make peace with CSS and start to love it!

Description:
A veces los ingenieros caemos en la tentación de elegir grandes soluciones para pequeños problemas. Creo que nos pasa porque solemos aprender con la misma aproximación: usando grandes herramientas especializadas que ofuscan lo que hay debajo, la esencia. No quiero de decir que éstas no sean geniales y necesarias, pero un ingeniero de pro debería empezar más abajo, tocando las las tripas de sus bestias. Os propongo prescindir del arrastrar y solar y ver hasta donde llagamos desentrañando MQTT sólo con scripts de Bash y nada mas allá de lo que podemos entener sin mucho esfuerzo. Por diversión, sí, y por la necesidad de entender y explicar desde la sencillez. ZeroPPT y en directo (eso incluye que fallemos). Raspberry Pi, ESP8266, ESP32 y un tilín de LoRA. ¿Me acompañáis?

Description:
Hay demasiadas charlas hablando de cómo desarrollar buen Software. Sin embargo, crear mal Software requiere de disciplina, perfeccionismo y un gran nivel de dedicación y artesanía. En esta charla aprenderás a crear Software verdaderamente engañoso, que parece que hace una cosa pero que hace otra muy distinta. Lograrás crear código que, modificándolo, se romperán partes de la aplicación que aparentemente no tienen relación alguna. Introducirás tanta entropía en los proyectos, que tus compañeros de equipo se replantearán por qué eligieron la programación como carrera. ¡Únete a esta charla y creemos juntos Software que haría vomitar a una cabra!

Description:
La colección de NFTs Stargons Genesis Edition, en colaboración con DragonStake y Crypto Plaza, consta de 968 NFTs únicos con imágenes de dragones. Durante la presentación se detallarán los diferentes pasos necesarios para crear una colección de NFTs, desde la generación de imágenes con inteligencia artificial hasta la curación y preparación de las mismas. Además, se mostrarán las distintas formas de hacerlo mediante Stargaze, una plataforma dedicada a los NFTs en el ecosistema blockchain.

Description:
Uno de los recursos de más peso en nuestras webs son las imágenes, optimizarlas mejorará la User eXperience, así como adaptarlas el tamaño correcto según el dispositivo, y servirlas formatos de nueva generación según el soporte. En esta charla veremos: Formatos de nueva generación Compresores y aplicaciones de optimización Responsive images Optimización automática Validación del nivel de compresión Optimización de la carga para mejorar la Web Performance Después de la charla, serás capaz de mejorar las imágenes de tu web para conseguir una mejor experiencia.

Description:
This talk will focus on how to turn awareness of accessibility issues into actionable steps to make a real difference on the web. We will discuss how to develop expertise in accessibility, how to perform accessibility testing, how to learn to use a screen reader, and how to effectively work with people with disabilities. We will explore how to leverage ARIA and WCAG for compliance, and how to use them to create an inclusive and accessible web experience for all users. With practical advice and real-world examples, this talk will provide tools and resources to help make a meaningful contribution to the world of accessible web development.

Description:
Common patterns implemented with JavaScript are being replaced with "native" CSS and HTML equivalents that end up being more performant, more accessible and more resilient. Features like accordions, Autosuggest, smooth scrolling, dialogs, parallax scrolling and more no longer need JavaScript to work. We'll walk through common JS features that now have CSS and HTML equivalents that you can use, or will soon be able to use.

Description:
Guaranteeing that your application doesn't break while constantly shipping new features is tough. Obviously, with a continually growing app or site, you can't test everything manually all the time! Test automation and monitoring are crucial to avoiding shipping broken apps and sites. But what functionality should you test? When should you run your tests? And aren't complex test suites super slow? In this session, we'll get our hands on Playwright, the end-to-end testing framework, and learn how to automate headless browsers to ensure that you confidently ship new features.

Description:
At Mattermost we use React Native for our app. It is a fairly complex project with more than X number of lines of code, with plenty of challenges, like performance, reliability or offline support. This talk will cover some of those challenges and several design decisions we have made so far to address them, along some other decisions to keep the code base readable and navigable.

Description:
Las ideas de dominio, arquitecturas limpias durante años se han relacionado en el mundo web con el backend, pero cada vez más hablamos de apis ricas en backend y nuestros fronts contienen más lógica. Mi charla está dirigida a enseñar los beneficios de este tipo de arquitecturas para protegernos de los contínuos cambios tecnológicos en el front. La charla sería un live coding, con un problema del que iríamos descubriendo su solución en base a hacernos preguntas sobre el código y lo que queremos conseguir.

Description:
The Web has progressed by leaps and bounds over the last decade, and with that, so too have user expectations. By giving frontend developers the infrastructure they need, baked directly into the framework, they are empowered to build a better, more performant Web. And while the world’s most beloved frontend frameworks like Next.js, Nuxt, and Svelte are creating a new era of developer experience, there is still room to grow. In this session, Guillermo Rauch, CEO/Founder of Vercel (and the creator and maintainer of Next.js),  will discuss his vision for a next generation frontend where global developers can create freely and execute new ideas that enable everyone to experience a faster, more distributed, performant web regardless of device or geographic location. Drawing from real-world experience amplifying the power that engineers and developers have built over the last ten years, including his own, he will dive into the state of frontend frameworks and how this will redefine the frontend experience.