// BLOG

La méthodologie CSS GPS

Ecrire du code CSS n'est pas très compliqué, en revanche organiser ses CSS et choisir une méthodologie de nommage pour s'y retrouver facilement et favoriser la maintenance de ce code dans le temps est une autre affaire. Et plus le projet prend de l'ampleur plus le problème se pose.

Rédigé le 28.05.2024
Par Gilles Vauvarin

HTML CSS Méthodologie Kirby CMS

Kirby CMS - Lire ses données via l'API à l'aide du plugin KQL

Kirby nous permet d'accéder à nos données via une API. Pour faciliter l'accès à ces données via l'API, l'équipe Kirby a développé un plugin appelé KQL que je vais vous présenter dans cet article.

Rédigé le 29.04.2023
Par Gilles Vauvarin

Kirby CMS PHP Plugin KQL

Kirby CMS - Composer

Dans vos projets Kirby CMS, vous pourriez avoir besoin d'utiliser un outil de gestion des dépendances appelé Composer. Composer est à PHP ce que NPM est à JavaScript, c'est à dire un outil en ligne de commande pour installer, mettre à jour ou supprimer les packages dont dépend votre projet.

Rédigé le 14.12.2022
Par Gilles Vauvarin

CMS Kirby PHP Composer Packages

Kirby CMS - Rôles et permissions des utilisateurs.trices

Un site web basé sur un gestionnaire de contenu peut nécessiter que tous ses utilisateurs ou utilisatrices n'est pas les mêmes droits sur les actions à effectuer ou sur les accès aux données. Si c'est le cas dans votre projet, savoir comment définir différents rôles et permissions sur vos utilisateurs.trices va vous être très utile.

Rédigé le 11.11.2022
Par Gilles Vauvarin

Permissions Rôles Utilisateurs Kirby CMS

Kirby CMS - Internationalisation

Kirby gère nativement l'internationalisation de votre site web, que se soit côté Panel ou du côté de vos vues frontend. Dans cet article nous allons voir comment configurer votre installation Kirby pour activer l'internationalisation, comment traduire les textes des blueprints et les textes présents dans le code de vos templates.

Rédigé le 17.10.2022
Par Gilles Vauvarin

Internationalisation Traduction Kirby CMS

Kirby CMS - Sécurité

Bien que Kirby ne soit pas une cible privilégiée des hackeurs, la sécurité est un sujet à ne pas prendre à la légère. Il y a différentes actions à mettre en oeuvre pour sécuriser son projet Kirby, cela peut se situer au niveau de votre serveur, de votre politique de mot de passe ou dans la façon dont vous allez coder notre application.

Rédigé le 12.06.2022
Par Gilles Vauvarin

Kirby CMS Security

Kirby CMS - Les représentations de contenu

Kirby vous donne la possibilité de mettre à disposition votre contenu dans différents formats (JSON, txt, XML ...). On parle alors de "représentations de contenu". Cela peut être intéressant si vous souhaitez utiliser Kirby en mode headless ou fournir du contenu consomable par une autre application.

Rédigé le 20.05.2022
Par Gilles Vauvarin

Kirby CMS JSON Représentations

Kirby CMS - Les pages virtuelles

Dans un site web Kirby, tout le contenu provient généralement des pages créés dans l'application. Cependant, parfois, il peut être intéressant de concevoir des pages avec des données provenant d'une source autre que les pages Kirby. On parle alors de pages virtuelles.

Rédigé le 19.05.2022
Par Gilles Vauvarin

Virtual Page Kirby CMS

Pourquoi je n'utilise plus exclusivement WordPress ?

J'ai travaillé 13 ans exclusivement avec WordPress et je vais vous expliquer pourquoi aujourd'hui, je considère d'autres solutions pour réaliser mes projets de sites web. L'objectif de cet article n'est pas de dénigrer WordPress, ça reste pour moi un superbe outil, mais d'expliquer les raisons qui, personnellement et au fil du temps, m'ont donné l'envie d'étudier des alternatives.

Rédigé le 16.05.2022
Par Gilles Vauvarin

Kirby WordPress CMS

Kirby CMS - Les routes

La notion de route dans les applications web correspond à l'adresse qu'il faufra indiquée pour arriver à bonne destination, en l'occurence une page web. Kirby étant par défaut en mode "Flat file", la notion de route à toute son importance. Vous n'avez généralement pas à vous souciez du routing des pages dans Kirby qui le gère de manière transparente. Cependant, dans certains cas particulier, vous pourriez être amené à définir vos propres routes.

Rédigé le 14.05.2022
Par Gilles Vauvarin

Kirby CMS PHP Route

Kirby CMS à la sauce JAMStack pour de l'éco-conception

Internet évolue sans cesse et actuellement les frameworks JS dominent le paysage du développement web. Mais le développement web n'a jamais été aussi complexe et le nombre d'outils à maitriser s'agrandie chaque jour. Tout cet écosystème engendre des couches de technologies qui s'empilent les unes sur les autres au risque de générer de la dette technique et de consomer des ressources inutilement. Ne peut-on pas revenir à des fondamentaux avec une pincée de modernité pour avoir le meilleur des deux mondes ?

Rédigé le 05.05.2022
Par Gilles Vauvarin

Static Kirby CMS Pre-rendering

Kirby CMS - Les layouts

Si vous êtes familié des frameworks JS comme React, Vue ou Svelte, vous connaissez la notion de slot. Les layouts dans Kirby sont des structures de contenu dans lesquelles on place des "trous" ou "slot" qui peuvent être remplis par d'autres contenus.

Rédigé le 22.04.2022
Par Gilles Vauvarin

Layout Kirby CMS PHP

Composants Svelte + Custom Element + Vite + Tailwind CSS

Svelte est généralement utilisé pour créer des Single Page Application (SPA) ou des applications Web avec du Server Side Rendering (SSR) via Sveltekit. Mais vous pouvez aussi utiliser Svelte pour créer des composants web (ou des Custom Element) "universels" qui viennent s'intégrer dans une application existante qu'elle soit programmée en PHP, Python ou autre. Dans cet article, je vais vous montrer comment faire en utilisant Vite et en intégrant le framework CSS Tailwind pour styler vos composants.

Rédigé le 19.04.2022
Par Gilles Vauvarin

Svelte Web Component Custom Element Vite TailwindsCSS

Kirby CMS - Les pages models

Kirby offre de nombreuses méthodes sur l'objet Page pour retrouver et manipuler nos données. Cependant, parfois, il peut être nécessaire de soit surcharger une méthode (modifier une méthode existante) soit d'ajouter une méthode pour nos propres besoins. Pour cela, nous utiliserons les pages models.

Rédigé le 14.04.2022
Par Gilles Vauvarin

Page Models Kirby PHP CMS

Kirby CMS - Les collections

Dans un projet web, il n'est pas rare d'avoir à manipuler des listes d'éléments de même nature (articles de blog, projets de portfolio, news, produits ...) pour les afficher à l'écran à l'aide d'une boucle de programmation. Si une liste d'éléments est utilisée plus d'une fois dans votre projet, Kirby vous offre la posibilité d'en faire une "Collection" pour factoriser votre code.

Rédigé le 07.04.2022
Par Gilles Vauvarin

Collections Kirby CMS

Kirby CMS - Les hooks

Déclencher l'execution d'une portion de code lorsqu'un évènement précis se produit dans votre site web est un mode de fonctionnement courrant dans les CMS. Ces évènements sont appelés "Hooks" et il en existe de nombreux dans Kirby CMS.

Rédigé le 30.03.2022
Par Gilles Vauvarin

Hooks Kirby CMS

Kirby CMS - Gérer ses JS

Comme pour les CSS, Kirby propose une fonction "helper" pour gérer nos scripts JavaScript. Elle fonctionne de façon assez similaire à la fonction helper css(). Voyons cela plus en détail.

Rédigé le 19.03.2022
Par Gilles Vauvarin

JavaScript Kirby CMS

Kirby CMS - Gérer ses CSS

Il est important de bien gérer ses fichiers CSS dans un projet web et de controller l'ordre dans lequel on souhaite les charger dans la page. Kirby met à notre disposition une fonction pour y parvenir facilement.

Rédigé le 18.03.2022
Par Gilles Vauvarin

CSS Kirby CMS

Kirby CMS - Les snippets

Il est courrant dans un site web que certaines parties du code se répètent à plusieurs endroits. Pour éviter de dupliquer des lignes de codes dans vos fichiers, Kirby met à votre disposition un type de fichiers bien pratique : les snippets.

Rédigé le 16.03.2022
Par Gilles Vauvarin

Snippets Kirby CMS PHP

Kirby CMS - Les contrôleurs

Le pattern "separation of concerns" est un principe de conception visant à segmenter un programme informatique en plusieurs parties, afin que chacune d’entre elles isole et gère un aspect précis de la problématique générale. Les "controllers" permettent de mettre en place cette bonne pratique dans votre projet Kirby.

Rédigé le 15.03.2022
Par Gilles Vauvarin

Controllers Kirby CMS PHP

Kirby CMS - Les templates

Les templates correspondent aux vues frontend de votre site Kirby. Ils sont chargés d'afficher et de présenter votre contenu à l'écran. Nous allons voir dans cet article comment fonctionne les templates et comment ils sont liés à vos fichiers textes.

Rédigé le 12.03.2022
Par Gilles Vauvarin

Kirby CMS Templates PHP

Svelte - 20 micro-projets

Après ma formation Fullstack JS effectuée en juin 2021 chez O'Clock, je souhaitais apprendre un framework JavaScript en autodidacte autre que React ou Angular, trop verbeux à mon goût. J'étais d'abord attiré par VueJS mais j'ai entre temps découvert le compilateur JavaScript Svelte et j'ai tout de suite accroché. Après avoir suivi quelques tutoriels en ligne, je me suis dis que ce serait bien de mettre mes nouvelles connaissances en application en réalisant une série de micro-projets Svelte.

Rédigé le 20.02.2022
Par Gilles Vauvarin

Svelte JavaScript Micro-projets

Kirby CMS - Le panel

Le panel dans le vocabulaire Kirby designe l'espace d'administration permettant aux utilisateurs de gérer le contenu de leur site web. Nous allons voir dans cet article comment fonctionne le panel et comment le personnaliser pour répondre aux besoins de son projet.

Rédigé le 16.02.2022
Par Gilles Vauvarin

Kirby CMS Panel Yaml Blueprints

Kirby CMS - Concepts de base

Kirby n'est pas un CMS très compliqué à utiliser si on connait les bases du développement web (html, css, php) et quelques concepts de son fonctionnement. Dans cet épidode, nous allons explorer comment installer et mettre à jour Kirby, comment s'organise le système de fichiers et comment créer ses premières pages.

Rédigé le 13.10.2021
Par Gilles Vauvarin

Kirby CMS Concepts de base Système de fichiers Pages

Kirby CMS - Présentation générale

Je me suis intéressé au CMS Kirby pour la première fois en 2016 suite à des avis positifs que je voyais passer régulièrement sur Twitter. A l'époque, j'utilisais princpalement WordPress. Ajourd'huie, en 2021, j'aimerais faire découvrir ce CMS plus largement à la communauté francophone par une série de "post-vidéo-cast".

Rédigé le 31.07.2021
Par Gilles Vauvarin

Kirby CMS PHP Vuejs

Eleventy, un générateur de site statique flexible

Mardi 6 juillet 2021, j'ai eu la chance de faire une présentation à l'occasion des "Webmardi", cycle de conférences organisé par les agences web Liip et Antistatique. Ce talk est disponible sur Twitch et Youtube et vous présente le générateur de site statique Eleventy.

Rédigé le 10.07.2021
Par Gilles Vauvarin

SSG Eleventy JAMstack Webmardi

Quick Merise

Tout projet informatique manipulant des données doit réfléchir en amont à la façon dont il va organiser ses données. La méthode Merise est l'une des techniques pour nous aider à concevoir un model relationnel de données.

Rédigé le 18.09.2020
Par Gilles Vauvarin

Merise BDD

Formation JS O'Clock - Saison 05 à 08

En cours de formation Fullstack JavaScript chez O'Clock, je vous fais un retour d'expéreince saison après saison. Présentation des saisons 05 à 08.

Rédigé le 05.09.2020
Par Gilles Vauvarin

Formation JavaScript

Formation JS O'Clock - Saison 01, 02 et 03

Les choses sérieuses ont commencé ! Depuis le 2 juin 2020, je suis en formation "Fullstack JS" chez O'Clock 5 jours par semaine en téléprésentiel (9h00 - 15h00).

Rédigé le 13.07.2020
Par Gilles Vauvarin

Formation JavaScript

JavaScript - Manipulation du DOM

Le DOM est une interface de programmation qui est une représentation du HTML d'une page web et qui permet d'accéder aux éléments de cette page web et de les modifier avec le langage JavaScript. Voyons comment ...

Rédigé le 22.06.2020
Par Gilles Vauvarin

JavaScript DOM

Formation JS O'Clock - La pré-rentrée

Chez O'Clock, le programme est divisé en saisons, chaque saison dure entre 1 et 2 semaines. La saison 0, qui dure 2 semaines, correspond à la pré-rentrée et permet à la promotion et l'équipe pédagogique de faire connaissance. Pendant cette période, tous les outils et ressources dont nous aurons besoin pendant la formation sont mis à notre disposition.

Rédigé le 28.05.2020
Par Gilles Vauvarin

Formation JavaScript

Formation JS O'Clock - La présélection

Si vous souhaitez suivre une formation O'Clock, la première étape consiste à vous inscrire sur leur site web. Vous serez ensuite contacté par mail pour vous donner accès au test en ligne de préséléction.

Rédigé le 06.05.2020
Par Gilles Vauvarin

Formation JavaScript

Formation JS chez O'Clock, retour d'expérience

Je débute une formation Fullstack JavaScript en juin prochain avec l'organisme de formation O'clock. J'ai décidé de vous faire un retour d'expérience au fur et à mesure du déroulement de cette formation.

Rédigé le 26.04.2020
Par Gilles Vauvarin

Formation JavaScript

Le framework TailwindCSS

TailwindCSS est un framework CSS créé par Adam Waham. Ce framework fournit des classes utilitaires de bas niveau c'est à dire des classes prédéfinies qui ne font qu'une seule chose à la fois (une seule propriété:valeur par classe). Il gagne de plus en plus en popularité mais aussi en détracteurs. Personnellement, je l'apprécie beaucoup et l'utilise sur tous mes projets personnels.

Rédigé le 10.04.2020
Par Gilles Vauvarin

CSS Framework

Le framework AlpineJS

AlpineJS est un micro-framework JavaScript pour réaliser des interactions de base dans des pages web. Le code s'écrit à l'aide de directives que l'on ajoute aux balises HTML et dont la synthaxe s'inspire fortmement de celle du framework Vue.js

Rédigé le 04.04.2020
Par Gilles Vauvarin

JavaScript Framework

Bien petit-déjeuner pour bien coder

Le petit-déjeuner est une étape importante pour bien commencer sa journée. Est-ce que la formule du petit-déjeuner telle que nous la connaissons en France est vraiment la meilleure façon de partir du bon pied ?

Rédigé le 05.03.2020
Par Gilles Vauvarin

Lifestyle

Quick JavaScript

Je vais suivre une formation de 3 mois chez O'Clock intitulé "Socle Fullstack javaScript" afin d'acquérir les bases de JavaScript et de son ecosystème. En attendant la formation qui débutera début juin 2020, je redige ce petit pense-bête pour avoir sous la main rapidement les structures de base du langage.

Rédigé le 19.02.2020
Par Gilles Vauvarin

JavaScript

The whale - version 2

Courant novembre 2018, j’ai mis en production sur mon serveur VPS la version 2 de The whale, mon site de veille technologique pour les dévelopeu.se.rs web. Ajustement et petit bilan après quelques mois en production.

Rédigé le 03.12.2018
Par Gilles Vauvarin

Entrepreneuriat

Elm #10 - Intégration d'un projet

Dernière partie de cette série sur la découverte du langage fonctionnelle Elm, comment intégrer Elm à ses projets. Vous pouvez utiliser Elm pour construire une application à part entière en full js ou pour construire des fonctionnalités que vous intégrerez dans un projet web classique (HTML, CSS, un langage back …).

Rédigé le 29.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #9 - Initier un projet

Maintenant que nous avons vu les bases du langage Elm, nous allons voir dans cette partie 9 comment on initialise un projet Elm. Faite chauffer votre termina, c'est partiel !

Rédigé le 28.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #8 - Opérateurs

Les opérateurs c'est barbant ! Ce chapitre ne va pas être très passionnant, je vais juste énumérer les principaux opérateurs disponibles dans Elm à titre de pense bête.

Rédigé le 15.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #7 - Expressions

La partie 7 se concentre sur la synthaxe des expressions dans Elm. If, Case of, Let in ... après la lecture de ce chapitre, les expressions Elm n'auront plus de secrets pour vous ! Petite chose déroutante, les boucles de type foreach n'existent pas vraiement avec Elm.

Rédigé le 14.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #6 - Collections

Elm propose différentes structures de données pour stocker un ensemble de données, on les appelle les "Coillections". Dans cette partie 6 nous allons voir plusieurs types de collections.

Rédigé le 13.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #5 - Types

Elm est un langage avec un typage statique. Cela signifie que les types des données sont connus à l’avance et que le compilateur vérifie que les valeurs correspondent bien aux types annoncés.

Rédigé le 12.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #4 - Fonctions

Dans cette partie 4 nous attaquons le nerd de la guerre de la programmation fonctionnelle, j'ai nomé "les fonctions". Nous allons voir les différents types de fonctions et comment les manipuler.

Rédigé le 11.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #3 - Modules

La partie 3 va nous enmener dans le monde merveilleux des modules Elm. Un programme Elm peut êre décomposé en plusieurs fichiers constituant des modules. Ces modules sont appelés dans d’autres modules et exposent soit une partie soit la globalité de leurs fonctions.

Rédigé le 10.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #2 - Architecture

Dans cette partie 2 consacrée au langage Elm, nous allons parler architecture et plus particulièrement du model MVU.

Rédigé le 09.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

Elm #1 - Présentation

N’étant pas un fan du JavaScript et de son environnement, j’ai décidé de m’intéresser au langage Elm. C’est un langage qui, comme JavaScript, permet de construire des interfaces utilisateur web interactives et des applications web sur le modèle SPA (Single Page Application).

Rédigé le 08.10.2018
Par Gilles Vauvarin

Elm Programmation fonctionnelle

La baleine du web

J’ai lancé la semaine dernière un site de curation de liens “The whale” afin d’aider les développeu.r.se.s web à faire leur veille technologique. En partageant publiquement ma propre veille, je la valorise en construisant une communauté ciblée qui va me permettre d’avoir une meilleure visibilité sur le web pour mes autres projets personnels. Ce fut également l’occasion de tester des outils web tels que le CMS Kirby et le framework Tailwind CCS. Rien de tel qu’un side project pour apprendre par la pratique.

Rédigé le 09.09.2018
Par Gilles Vauvarin

Entrepreneuriat

Confdays - Améliorer le référencement

Améliorer le référencement du site Confdays fait partie des stratégies marketing que je souhaite mettre en place pour favoriser la promotion de mon service Saas dédié aux organisateurs de conférences.

Rédigé le 01.03.2018
Par Gilles Vauvarin

SEO Entrepreunariat

Confdays - Bilan et retour d'expérience

Nous sommes fin février et le site confdays.com est prêt pour la mise en production. J’ai reçu mon numéro de Siren, le compte en banque dédié à mon activité est ouvert, le système de paiement est activé et fonctionnel. J’entame donc une nouvelle étape, celle de la promotion du service Confdays. Je vais être honnête, je suis total noob dans ce domaine !

Rédigé le 24.02.2018
Par Gilles Vauvarin

Entrepreneuriat

Confdays - Création du projet

Dans cet article, je vais revenir sur les étapes, les difficultés et les solutions que j’ai mises en place pour créer le service Confdays, projet en solo-preneur sur lequel je travaille depuis plusieurs années sur mes heures de temps libre.

Rédigé le 22.01.2018
Par Gilles Vauvarin

Entrepreneuriat

Solo entrepreneuriat

Trouver sa place dans le monde du travail n’est pas chose facile. Certains ont des vocations très jeune alors que pour d’autres, c’est une longue traversée du desert. Je fais partie de la seconde catégories.

Rédigé le 21.11.2017
Par Gilles Vauvarin

Entrepreneuriat

Créer un blog avec Hugo

J’ai profité d’un week-end pluvieux pour prendre le temps de remettre sur pied mon blog pixenjoy.com Pour cette nouvelle version, j’ai décidé d’utiliser non plus un CMS lié à une base de données type WordPress, mais un générateur de site statique. Le concept de site statique n’est pas nouveau en revanche les outils pour générer ce type de site se sont multipliés.

Rédigé le 27.02.2016
Par Gilles Vauvarin

Hugo SSG JAMstack