// BLOG

Je travaille ces temps-ci sur un « side project » que j'ai provisoirement appelé Mastoweb et dont j'ai déjà brièvement parlé sur mon compte Mastodon. J'ai aujourd'huie un prototype qui fonctionne. Dans cet article, je donne un peu plus de précisions sur le concept de Mastoweb.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 ?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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".

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.

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.

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.

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).

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 ...

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.

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.

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.

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.

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

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 ?

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.

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.

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 …).

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 !

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.

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.

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.

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.

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.

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.

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

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).

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.

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.

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 !

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.

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.

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.