// 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 ?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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.
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).
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 ...
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.
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.
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.
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.
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
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 ?
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.
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.
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 …).
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 !
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.
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.
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.
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.
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.
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.
Elm #2 - Architecture
Dans cette partie 2 consacrée au langage Elm, nous allons parler architecture et plus particulièrement du model MVU.
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).
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.
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.
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 !
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.
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.
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.