Speaker

m4dz 🎙

m4dz 🎙

Frontend Devtools Advocate

Lyon, France

Mads is a curious animal. Former Frontend Dev, Devtools enthusiast, he has made the Developer eXperience (DX) his cherished topic. Web technologies are under his radar to get things ever simpler. Web Standards are his Fantastic Beasts. His moto: "Developers are users, just like you." As a life-long dreamer his favorite book will ever remains "Alice's Adventures in Wonderland".

Area of Expertise

  • Information & Communications Technology

Topics

  • JavaScript
  • DevTools
  • Developer Experience
  • Design Systems

The Mushin Way to Frontend Performance: Switch Left to a Pure Design System

Have you ever imagined that your task as a User Interface Developer would one day become that complex? We had to support responsive design, and it was already difficult at some point. Truth is it was only the smallest of our daemons.

It's 2021. We still have to address devices with very non-homogeneous screen sizes, but also very diverse SoC, performance variations, users prefs-based themes, network issues from Edge to 5G or WiFi. And the list will go on growing.

Facing this, we can't continue to handle interfaces the way we did for the last years. We need to shift left, and burn into our Design Systems how to address configurations depending on the context. By moving the responsibility to the components level, we would be able to test, adapt, and deploy at scale complex interfaces without having to fear unexpected issues on some configurations.

Here's how to proceed to build context-proof UI as an Interface Developer in 2021.

The Legendary Fountain of Truth: Componentize Your Documentation!

"In Space, No One Can Hear You Scream." The same goes for your super-brand-new-revolutionary project: Documentation is the key to get people speaking about it.

Building well-fitted documentation can be tricky. Having it updated each time you release a new feature had to be a challenging part of your adventure. We tried many things to prevent the gap between doc and code: code-generated documentation, live examples a-la-Storybook, REPL...

It's time for a new era of documentation where people-oriented content lives along with code examples: this talk will guide you from Documentation Best Practices – covered from years of FOSS collaborative documentation – to the new fancy world of Components in Markdown: MDX, MDJS, MD Vite, and all.

Let's build shiny documentation for brilliant people!

SDKs vs Web Components: Place Your Bets

You're offering a fantastic brand new service, and it'll revolutionize your customers' world! Because it's smart, it delivers an API-first solution wrapped in an edge architecture. And because you're smart, you're offering to your end-users several SDKs to let them use those APIs at their full potential: PHP, Java, Ruby, Go, Python, JavaScript… Wait, JavaScript?

When entering the world of frontend architecture in an API-first world, we should take time to answer this simple question: SDK or Web Components? The frontend world comes with a UI-first paradigm, so should we switch our mindset?

On the other hand, Web Components now have a mature ecosystem where you can build advanced UI elements that already embed all the logic they need.

API-first backend only requires HTTP streams, and Web Components embed the required network primitives. Should we distribute a JS SDK or a library of Web Components for our service? Here's the match between the two giants! SDKs vs Web Components: Place Your Bets.

Design Systems of a Down: Steal this Guide!

Remember Atomic Design? It's been a while since we started talking about Design Systems. They're supposed to solve our interfaces inconsistencies issues, as a single source of truth. But do you know well how to build and use them, from a developer perspective?

Here's your ultimate guide to Design Systems, for Devs! From the fundamentals of Design Tokens definition, to how to build advanced versatile layouts. You'll learn all best practices, tips & tricks, components splicing strategies, from this comprehensive step-by-step handbook talk.

Never be lost again in front of a creating Design System from scratch!

Design System for (board) Games: Mark my Wordle!

You may know Wordle, a simple addictive guess-a-word game that went all over the Web in just a few months. Its UI is simple but a perfect use-case for a thing I had in mind for a long time: building a Design System for a board game using Open Standards.

So it is! I rebuilt Wordle's UI components from scratch, in Web Components, so I made an entire Design System for a board game, agnostic of any reactive framework to let others build the logic code part using their favorite tools.

This talk will guide you on the process of making a board game Design System with the same kind of technologies to quickly and efficiently build and ship cool games ♠️! Same player, shoot again.

Build Your Design System from Scratch - A Workshop

Building a Design System for your new project looks like the right way to do so. Unless you're a large front-end team dedicated to it, it's also probably the worst idea to have. Starting a Design System from scratch is often a nightmare that will lead to months of work and a ton of aspirins. Configuring Stories, Documentation, Tests, CI, Deployment… then being able to code your components.

It's time to rule them all in a powerful era of new dev tools. Do designers friends have Figma and Sketch? Developers deserve the same level of advanced tools to do their part in the Design Systems' bright future.

A workshop to discover and practice new tools like Backlight.dev, and start your Design System from Scratch for real, the painless way.

The Eternal Sunshine of the Zero Build Pipeline

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!

m4dz 🎙

Frontend Devtools Advocate

Lyon, France

Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.

Jump to top