Alsacreations.com - Apprendre - Archives (aout 2025)
Les dernières ressources publiées sur Alsacreations.com
Imaginez une scène sur laquelle le ou les artiste(s) n’utilise pas d’instrument traditionnel, mais des ordinateur sur lequel ils écrivent des lignes de code en temps réel qui donnent naissance à de la musique et des effets visuels projetés en live.
Bienvenue dans l'univers du live coding, et plus spécifiquement de l'Algorave, une subculture dans laquelle la programmation algorithmique devient une performance artistique et musicale !
Qu'est-ce que le Live Coding ?
Fait référence à une pratique d'improvisation musicale et/ou visuelle, généré avec des langages de programmations en directe.
Généralement, l’artiste partage son code au public en projetant son code sur une surface, il écrit et/ou modifie des algorithmes en temps réel au fur et à mesure de la performance.
On assiste alors à un processus créatif, qui montre l’esthétique, la logique et la beauté du code.
Le live coding, du fait de son histoire, est aussi un domaine de réflexion critique autour de notre rapport à l'informatique, à la technologie et à la culture numérique.
De nombreux live coders sont traversés par l'influence de la culture hacker, par les philosophies du logiciel libre et open source.
Cette pratique, mécaniquement, encourage à percevoir les logiciels comme des supports exploratoires ou conversationnels, et non seulement comme de simples outils pour la création.
Source : livecoding.fr
Source : Youtube - DJ_Dave & Char Stiles Livecoding Performance @ Algowave Algorave
L'Algorave
Le terme "algorave" est une contraction de "algorithme" et de "rave", ce qui est assez explicite.
L’algorave c’est l’événement où le "live coding" prend vie est où l’expérience est partagée avec le public ! Elle emmène le livecoding dans la culture de la fête et du partage.
Plus qu’un genre musical, l’Algorave est une pratique : une scène. Elle réunit des musiciens, programmeurs, hackers, artistes numériques et amateurs de musiques électroniques radicales autour d’un même postulat.
L’ordinateur n’est pas un outil caché, mais est au cœur de la scène et de la création.
Source : tsugi.fr
Un exemple vidéo vaut mille mots !
Source : Youtube - DJ_DAVE - GitHub Universe 2020
Vous souhaitez vous lancer dans l'aventure du live coding
Suivez le lapin blanc ! ðð³ï¸
Ma première réaction après avoir découvert, ça a été "Ok, trop cool, je veux essayer !”, Mais c’est écris avec quel langage de programmation ? Ils utilisent quoi comme outils !?
Après quelques recherches rapides, je découvre qu'il y a pleins de possibilité, mais ce qui revenait le plus souvent c'était TidalCycles basé sur Haskell qui permet d'écrire des motifs algorithmiques et SuperCollider avec SuperDirt qui gère la synthèse audio en temps réel souvent utilisé en backend pour le traitement audio.
La documentation est assez bien faite pour mieux comprendre et installer tout ça. Vous pouvez utiliser VSCode pour écrire vos premiers patterns et utiliser l'extension TidalCycles recommandé dans la documentation.
Il est aussi possible d'utilser du Python avec foxdot et toujours SuperCollider, un peu plus abordable que Haskell si vous avez déjà fait du Python.
Bref, vous avez compris il y a beaucoup à découvrir et à apprendre et je n'ai abordé que le côté musicale, car pour la partie visuel c'est pareil, c'est très, très vaste !
Mais rapidement je peux vous citer Orca ou gibber.
Bonus :
Directement dans votre navigateur web avec :
- strudel (à ne pas confondre avec la pâtisserie ð) ! une version JavaScript de TidalCycles !
- hydra un synthétiseur vidéo en temps réel !
Source : Youtube - jam room @ London Algorave April 2025
Quelques ressources et liens
Si vous souhaitez aller plus loin, je vous partage quelques liens qui mon permis d'écrire cet article et de mieux comprendre cet univers.
Vidéos :
Sites :
Reddit :
N'hésitez pas à partager d'autres ressources dans les commentaires et si vous êtes livecodeur partager vos créations ! ð
Il existe plusieurs façons de forcer le téléchargement d’un fichier côté navigateur, que ce soit pour un fichier statique déjà hébergé sur votre serveur ou pour des données générées dynamiquement (à la volée dans la page).
Utiliser l’attribut download
En ajoutant l’attribut download à une balise <a>, le navigateur téléchargera le fichier au lieu d’ouvrir le lien. C'est un attribut qui a été ajouté en HTML5, et qui est très bien pris en charge désormais, que ce soit sur mobile ou navigateurs desktop.
<a href="/chemin/vers/le/fichier" download>Télécharger</a>
Cet attribut est très pratique pour des fichiers statiques (PDF, images, etc.) mais que l'on souhaite proposer au téléchargement plutôt que de les "afficher" dans les onglets du navigateur.
En ajoutant une valeur à l'attribut download, on pourra préciser le nom du fichier qui sera écrit ou proposé dans la boîte de dialogue pour sauver le fichier localement, même si c'est un nom différent.
Simuler un clic par JavaScript
On peut créer un lien <a> dynamiquement (sans l'afficher), définir ses attributs, et finir par déclencher un événement click en JavaScript.
// Crée un nouvel élément <a> avec
const link = document.createElement('a');
link.download = 'Recette-du-cake-au-kiwi.pdf';
link.href = '/recette-generator.php?kiwi';
// Ajoute l’élément au document
document.body.appendChild(link);
// Simule un clic
link.click();
// Supprime l’élément car il est désormais inutile ð§¹
document.body.removeChild(link);
Cette technique est pratique si l’on veut déclencher un téléchargement à la suite d’une action utilisateur, sans disposer d'un lien explicitement visible et cliquable. Attention cependant à l'accessibilité d'une telle technique, qu'il faudra tester et à adapter à vos besoins.
Télécharger des données générées dynamiquement
On peut aussi vouloir télécharger des données produites côté navigateur, c'est-à-dire en front-end seul, sans que le serveur n'y soit pour rien. Cela peut résulter de données en JSON, texte, et même binaires en image, etc.
Pour cela, on peut
- transformer les données en Blob (voir aussi l'article sur les blob URLs)
- créer une URL temporaire avec
URL.createObjectURL() - utiliser la méthode précédente pour déclencher le téléchargement
Exemple avec un fichier JSON basique :
// Objet JavaScript brut
const obj = { recette: 'Rôti au kiwi', duree: 120, ingredients: 3 };
// Données à exporter converties en chaîne de texte
const data = JSON.stringify(obj);
// Crée un blob à partir des données
const blob = new Blob([data], { type: 'application/json' });
// Génère une URL temporaire
const url = window.URL.createObjectURL(blob);
// Crée un lien et déclenche le téléchargement
const link = document.createElement('a');
link.href = url;
link.download = 'data.json';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Libère l’URL temporaire et la mémoire ð§¹
window.URL.revokeObjectURL(url);
Avec ces 3 petites techniques, vous pouvez proposer des téléchargements sans recharger la page dans le navigateur, par exemple dans le cadre d'une SPA.
Une question se pose fréquemment : quel est le "bon" usage des balises <strong>, <b>, <em> et <i> ? La tendance générale est à remplacer systématiquement <b> par <strong> et <i> par <em>. [...]
Depuis l’arrivée du Full Site Editing (FSE) avec WordPress 5.8 en 2021, notre manière d’envisager la création de sites web évolue profondément ; l’architecture de création de thèmes et la gestion de la structure front-end ont profondément évolué. Dans cet article, on vous explique ce qu’est le FSE, pourquoi il change la donne, ses avantages et ses limites dans un contexte d’agence, et comment l’activer concrètement dans vos projets.
Le Full Site Editing (FSE) de WordPress
Le Full Site Editing (FSE) est une fonctionnalité de WordPress qui permet de concevoir et de modifier l’ensemble d’un site (en-tête, pied de page, templates, contenus) directement via l’éditeur de blocs Gutenberg, sans avoir à écrire de code PHP.
En clair : on ne passe plus uniquement par le back-office ou le code pour modifier un site, on travaille visuellement, par blocs, dans une logique modulaire.
Fichiers et dossiers essentiels
| Fichier | Description |
|---|---|
theme.json |
Fichier de configuration global du thème : palettes de couleurs, typographies, espacements, activation/désactivation de fonctionnalités. Cœur du FSE. |
/templates/ |
Contient les fichiers HTML des templates (ex : index.html, single.html, archive.html). Remplace les anciens fichiers PHP comme index.php. |
/parts/ ou /template-parts/ |
Contient les blocs de mise en page réutilisables (ex : header.html, footer.html). S’utilisent via wp:template-part. |
style.css |
Toujours requis pour déclarer un thème, même vide. Sert à l’en-tête du thème (nom, auteur, version, etc.). |
functions.php |
Peut encore être utilisé pour ajouter des filtres, blocs personnalisés, ou déclarer des supports. |
Conditions préalables : avoir un thème compatible FSE
Pour activer l’édition complète (FSE) sur WordPress, il est nécessaire de remplir deux conditions :
- Utiliser WordPress Version Récente : pour une utilisation optimale, il est recommandé d'utiliser la version 6.6 ou ultérieure de WordPress, car les fonctionnalités FSE sont en constante amélioration.
- Choisir un Thème Bloc Compatible FSE : il est indispensable de sélectionner un thème bloc (block theme) prenant en charge le Full Site Editing (FSE). Le thème Twenty Twenty Five est un excellent choix pour cela.
Le thème Twenty Twenty Five est spécialement conçu pour exploiter toutes les fonctionnalités de FSE. En utilisant ce thème, chaque aspect de votre site (page d'accueil, en-têtes, pieds de page, etc.) peut être modifié directement à partir de l'éditeur de site WordPress, rendant la personnalisation plus fluide et accessible.
L'Éditeur de Modèles (Template Editor)
L’une des fonctionnalités les plus puissantes de FSE est l'éditeur de modèles, qui permet de personnaliser les mises en page globales de votre site.
Création de Mises en Page Personnalisées : avec l'éditeur de modèles, vous pouvez créer des mises en page personnalisées pour la page d'accueil, les archives des articles, ou même des modèles spécifiques pour des types de contenu particuliers.
Gestion Visuelle des Modèles : les utilisateurs peuvent créer et gérer ces modèles directement via l'éditeur visuel intégré, ce qui rend la tâche beaucoup plus intuitive et accessible.
Les blocs prédéfinis et les Variations de Style
Le thème Twenty Twenty Five met à disposition des blocs prédéfinis qui simplifient la création et la gestion du contenu. Ces blocs sont conçus pour s'intégrer parfaitement à l'éditeur FSE.
- Blocs Prédéfinis Spécifiques à FSE : Par exemple, des blocs tels que Post Title, Post Content, Author Info, ou Featured Image sont disponibles pour être utilisés et personnalisés sur chaque page de votre site.
Pour un exemple concret : Avant FSE, les blocs comme Post Title ou Post Content étaient utilisés uniquement dans le contenu d'une page ou d'un article. Avec FSE et Twenty Twenty Five, ces mêmes blocs peuvent être utilisés dans des modèles de page, dans l'en-tête ou dans le pied de page. Cela permet une personnalisation globale de l'apparence et du contenu de chaque section de ton site, et non plus juste du contenu d'une page individuelle.
- Variations de Blocs : Twenty Twenty Five inclut également des variations de blocs, permettant de personnaliser rapidement des sections en appliquant des styles prédéfinis. Ces variations s'adaptent au thème et permettent de modifier l'apparence des blocs sans effort.
Structure des fichiers à prévoir pour un thème maison (stricte minimum)
Les fichiers requis pour un thème FSE sont similaires à ceux d’un thème classique, avec des ajouts spécifiques :
| Fichier | Description |
|---|---|
functions.php |
Gardez les appels classiques, ajoutez add_theme_support('block-templates') si besoin |
style.css |
En-tête standard compatible WordPress |
theme.json (v3) nouveau |
Déclarez styles globaux, variantes, presets |
templates/index.html nouveau |
Nécessaire pour que l’éditeur de site apparaisse |
/styles/variation-1.json |
(optionnel) Variante de style pré-définie (couleurs, typo etc.) |
Cela garantit que votre thème sera prêt à prendre en charge toutes les personnalisations proposées par FSE.
Les atouts du Full Site Editing
Une approche modulaire plus rationnelle
Grâce à la logique par blocs, il est plus simple de créer des structures réutilisables, de normaliser les composants, et de proposer une base plus maintenable à long terme.
Productivité accrue pour les projets standards
Pour les sites simples, la combinaison FSE + thème block-based réduit drastiquement le temps de développement, en limitant le recours au code PHP.
Moins de dépendances externes
On s’affranchit progressivement des page builders lourds (coucou Elementor) ou de solutions propriétaires, avec un gain en performance et en pérennité : tout est natif et plus léger. Votre admin restera donc rapide, ce qui est très important si vous y passer beaucoup de temps.
Personnalisation en temps réel
Une autre grande avancée dans FSE est la possibilité de personnaliser le site en temps réel, ce qui veut dire que chaque modification apportée est immédiatement visible dans l’éditeur. Cela inclut non seulement les couleurs et typographies, mais aussi la structure des pages (ajouter ou déplacer des sections de blocs par exemple).
Structure versionnable et stockée dans des fichier
L’un des avantages majeurs du FSE, contrairement à d'autres thèmes builder, est que la structure du thème (templates, template parts, styles globaux, etc.) est désormais stockée dans des fichiers (.html, theme.json) et non plus uniquement dans la base de données.
Cela signifie :
- Meilleure gestion en versioning (Git)
- Déploiements plus propres et reproductibles
- Possibilité de travailler en équipe sans conflit lié à l’éditeur de contenu
- Restauration facilitée via des commits, et non via des exports SQL fragiles
Ce qu’il faut garder en tête
Changer sa façon de penser
Avec le FSE, on ne pense plus en pages statiques, mais en blocs dynamiques, organisés en modèles réutilisables. C’est une nouvelle grammaire pour les développeurs : pas de functions.php à tout va, mais des fichiers block-templates, un theme.json, et une logique HTML/CSS/JSON plus que PHP.
Pas encore optimal pour les projets complexes
Sur des projets sur-mesure avec logique métier poussée, l’approche FSE atteint ses limites. On continue à s’appuyer sur ACF, CPT, et du code PHP quand nécessaire.
Un écosystème en évolution
Certaines extensions (plugins) ne sont pas encore pleinement adaptées à cette nouvelle logique. Il faut vérifier leur compatibilité FSE dès la phase de cadrage.
Pour conclure, le thème Twenty Twenty Five est l'un des meilleurs points de départ pour exploiter tout le potentiel de Full Site Editing dans WordPress. Grâce à sa compatibilité native avec l’éditeur de site, il permet une personnalisation sans précédent des sites WordPress, même pour celles et ceux qui n'ont pas d'expérience avec le code. Il est conçu pour rendre l’édition de site accessible à tous, que ce soit pour les blogueurs, les entreprises, ou les designers.
ð Et vous ? Avez-vous franchi le cap du Full Site Editing ?
Partagez vos retours d’expérience ou vos interrogations ! Discutons de ce que cette évolution peut apporter à notre métier.
Cela faisait un an que l'éditeur open source de Microsoft ramait derrière les éditeurs Cursor et Windsurf, puis derrière l'agent Claude Code. En juillet 2025, le retard est comblé. VS Code est devenu l'un des environnements de développement qui intègre le mieux l'intelligence artificielle. [...]
Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com