Mathieu Desnouveaux

Frontend

10 sketchnotes disponibles pour ce thème

🎨

Développement frontend et UX/UI

← Retour aux sketchnotes
Sketchnote illustrant l'édition simultanée avec Symfony UX présentée par David Buchmann au Symfony Live Paris 2026. Le schéma montre deux cycles sur une même architecture autour d'une App Symfony centrale avec FrankenPHP. Le cycle bleu représente la mise à jour de l'app de la seconde personne : Turbo Stream envoie l'édition au serveur, qui diffuse via Mercure, et Stimulus reçoit la data pour mettre à jour la page. Le cycle orange représente le sens inverse : quand la seconde personne édite, le même mécanisme met automatiquement à jour l'app de la première personne.

Édition simultanée : facile avec Symfony UX

Publié le 31 mars 2026
Par David Buchmann
🐘 PHP 🎨 Frontend
📅 Symfony Live
Sketchnote illustrant le passage du web au mobile avec Symfony et Hotwire Native, présentée par Imad Zairig au Symfony Live Paris 2026. Le schéma montre comment transformer une app web en app mobile sans Swift/Kotlin, sans React Native et sans Store. Symfony UX et Hotwire Native donnent Symfony Native, qui utilise une WebView avec accès à la couche native. Le remplacement des composants web par des composants natifs passe par un Bridge Component. L'exemple d'un bouton illustre comment selon le support (Web ou App), le rendu adapte le composant entre version web et version native.

Du web au mobile avec Symfony & Hotwire Native

Publié le 31 mars 2026
Par Imad Zairig
🐘 PHP 🎨 Frontend
📅 Symfony Live
Sketchnote illustrant Symfony UX présentée lors d'un meetup AFUP Lorraine. Le schéma montre comment faire du front sans être un expert avec des composants Twig (classe PHP + template) incluant du PHP. Les Live Component permettent la mise à jour du front avec des éléments d'interaction dans la classe PHP déclenchant une mise à jour du composant. Les Live Action ajoutent des actions interactives. Les Live Listener écoutent les événements déclenchés par un composant. Le Formulaire permet la validation déclenchée par une Live Action. Stimulus est une librairie JavaScript au cœur de Symfony UX avec la possibilité d'étendre les fonctionnalités en JS.

Découverte de Symfony UX

Publié le 30 novembre 2025
Par Kevin Nadin
🐘 PHP 🎨 Frontend
📅 AFUP Lorraine
Cette sketchnote représente la conférence 'Symfony UX dans la vraie vie' présentée par Amélie Guers lors de l'AFUP Day Lille le 16 mai. En haut, le titre 'Symfony UX dans la vrai vie' est affiché en gros caractères. À gauche, des illustrations représentent 'Turbo' avec des pages liées par des flèches pour le chargement AJAX transparent. Au centre, des annotations comme 'Stimulus' avec des frameworks JS légers et des bundles SF/JS pour l'intégration sont illustrées. À droite, des icônes représentent 'Live Component' avec des composants Twig et des formulaires interactifs. En bas, des icônes illustrent 'Reprise sur les principes de Symfony', 'Peut s'appliquer from scratch projet existant', et 'Commencer par ajouter des live components'.

Symfony UX dans la vraie vie

Publié le 19 mai 2025
🐘 PHP 🎨 Frontend
📅 AFUP Day
Sketchnote du Forum PHP 2023 illustrant la présentation sur l'accessibilité web par Angi Déborah Guyard. La schématisation visuelle présente les concepts ALT (texte alternatif pour décrire une image), les trois types (succinct, informatif/ordonné, contextualisé), les bonnes pratiques à éviter (pas trop synthétique, pas de contenu sans lien, pas le nom de l'image) et les recommandations par type de contenu (graphique: présenter les données, œuvre: décrire ce qu'on voit, icônes: donner le sens si contexte absent).

La positive alt-itude ! Un outil d'inclusion pour votre accessibilité

Publié le 12 octobre 2023
Par Angi Déborah GUYARD
🐘 PHP ♿ Accessibilité 🎨 Frontend
📅 Forum PHP
Design System

Le design system pour les nuls (et pour les moins nuls aussi)

Publié le 30 novembre 2022
Par Valentin Manceaux Panot
🎨 Frontend 🛠️ Tools
📅 Apéro Web
Sketchnote du Forum PHP 2022 illustrant la présentation sur l'accessibilité numérique par Anaïs Sparesotto et Hortense Mahon. La schématisation visuelle présente les enjeux de l'inclusion numérique avec des éléments graphiques sur l'accessibilité, la sensibilisation des équipes, et les outils pratiques pour rendre la tech accessible à tous.

Les femmes à barbe et à capuche sortent de la grotte pour sauver le numérique et son impact

Publié le 13 octobre 2022
Par Anais SPARESOTTO & Hortense MAHON
🎨 Frontend ♿ Accessibilité
📅 Forum PHP
Sketchnote sur l'accessibilité web (a11y). L'illustration présente les principes (égalité, inclusion), l'obligation légale, les éléments visuels (texte alternatif, contexte), les éléments interactifs (sémantique, navigation), les couleurs et contrastes, les ressources (W3C, MDN, RGAA) et les outils (DevTools, Axe Core, JAWS, lecteurs d'écran).

Accessibilité Web (a11y)

Publié le 02 septembre 2021
Par Xavier Chopin
🎨 Frontend ♿ Accessibilité
Sketchnote détaillant l'évolution de l'architecture Arte vers le développement multi plateforme. L'illustration montre la progression depuis les chaînes ARTE TV (1992) et Arte+7 (2009) vers une approche API métier unifiée avec Backend For Frontend (BFF). Le schéma technique présente la stack GraphQL connectant Web, Mobile, Smart TV et Box TV via une API complexe et des données centralisées.

Comment Arte a simplifié le développement multi plateforme

Publié le 26 novembre 2020
Par Lucas Legname & Maxime Richard
🏗️ Architecture 🎨 Frontend
📅 Apéro Web 📅 Forum PHP
Sketchnote illustrant la rétrospective FrenchKit 2019. La schématisation présente les concepts clés abordés lors de la conférence : SwiftUI avec animation et Combine, section Reactive avec State/Props et Models, Design System avec composants, et mécanismes Combine. Des diagrammes de flux, flèches et mots-clés techniques organisés en sections montrent l'évolution de l'écosystème iOS.

Rétrospective FrenchKit 2019 : SwiftUI et écosystème iOS

Publié le 20 décembre 2019
🏗️ Architecture 🎨 Frontend