Mes compétences en détail

Cette page me permet de centraliser les différents savoirs que j'ai pu obtenir avec le temps, et de retracer l'origine de ces compétences.
La liste ne se veut pas exhaustive, j'y indique les éléments les plus importants pour faciliter la lecture. Les premiers éléments de chaque liste sont les plus récents chronologiquement.
Si une ressource est indiquée, c'est que je l'ai totalement vue (souvent plusieurs fois), puis intégrée et mise en pratique.

Travaillons ensemble

HTML

Franca lingua du Web

Le HTML est beaucoup plus riche et vaste que ce qu'on pourrait imaginer au premier abord. Je suis toujours surpris d'y découvrir de nouvelles choses régulièrement.

Je me rappelle encore bien mes premiers pas dans le développement avec ce langage en 2013, pour créer le site d'une association.

  • Utilisé dans tous mes projets clients depuis 2015, soit 37 projets actuellement pour un total d'environ 11200 heures de pratique, sans compter les projets perso et la formation.

  • HTML Email Development v2 - Frontend Masters

  • Complete intro to Web development v2 - Frontend Masters

  • HTML5, une référence pour le développeur web - Rodolphe Rimelé

  • HTML5 pour les web designers - Jeffrey Zeldman

  • Parcours complet HTML/CSS - CodeSchool

  • Réalisez votre site web avec HTML5 et CSS3 - Mathieu Nebra

CSS

Avec du style

Ah les Cascading Style Sheets, c'est beau. J'aime vraiment beaucoup écrire du CSS.

Quand je travaille sur un projet comme Agricool ou ENEA Consulting, la rigueur est de mise et j'aime me rapprocher du pixel perfect pour honorer le travail du designer, surtout quand il est de grande qualité.

Ces derniers temps, j'écris beaucoup de JS avec React, j'ai un peu décroché des dernières nouveautés, mais je compte bien me prendre un moment pour rattraper ça !

  • Comme pour le HTML, utilisé dans tous mes projets clients.

  • CSS 3 Flexbox - Raphaël Goetter

  • CSS 3 Pratique du design web - Raphaël Goetter

  • CSS Avancées - Raphaël Goetter

  • CSS 2 Pratique du design web - Raphaël Goetter

JavaScript

Langage le plus utilisé au monde ? (à part l'anglais)

Le JavaScript est un langage étonnant, tant par sa structure que par ses usages et plus encore sa spécification !

Le futur à l'air de se tourner vers WebAssembly, mais le JS a encore certainement de très beaux jours devant lui.

  • Je fais du JavaScript depuis quasiment le début, mais de manière réellement significative depuis 2017 avec l'utilisation de React

  • J'ai réalisé quelques modestes vidéos sur YouTube pour vulgariser quelques concepts en JavaScript.

  • Getting started with JavaScript v2 - Frontend Masters

  • CodeWars: réalisation de nombreux Katas pour m'entrainer sur le langage et découvrir des solutions.

Version Control Systems

Et toi, tu git push ?

On ne débat plus la pertinence d'utiliser git. Un code non versionné, c'est un parachutiste amnésique qui risque d'oublier quelque chose d'important à chaque saut.

  • L'utilisation de git est juste obligatoire pour toute codebase. Puis, en fonction de la préférence du client, je push le code sur Gitlab, Bitbucket ou bien Github.

CSS Architecture

CSS c'est simple, tant que c'est bien cadré...

Une bonne architecture permet d'éviter de créer des bugs visuels sur la durée sans s'en rendre compte, et permet de travailler à plusieurs sur la même codebase.

  • Seuls mes premiers projets ne disposent pas d'une réelle méthodologie. C'est absolument indispensable pour s'y retrouver.

  • Quand je ne peux pas mettre en place des outils de CSS moderne (voir plus bas), j'utilise généralement la méthodologie BEM et un peu d'OOCSS

  • SMACSS, Scalable and Modular Architecture for CSS - Jonathan Snook

CSS Preprocessors

Des boosters parfois essentiels

Les préprocesseurs sont là pour étendre le CSS. Ils permettent de gagner du temps, des lignes de code et d'éviter certaines répétitions.

CSS évoluant, il n'y a généralement plus besoin de préprocesseurs comme Sass, mais PostCSS permet entre-autres d'utiliser dès aujourd'hui le futur du langage, ce qui en fait un candidat de choix.

  • La plupart de mes projets clients utilisent un préprocesseur CSS, j'ai beaucoup utilisé Sass, un peu Less, et surtout PostCSS avec React

Linters et Formatters

Du joli code mignon tout plein

Qui a envie de passer des heures en revue de code par ce que l'on ne passe pas à la ligne après les "{" ? Et qui a déjà passé 30 minutes à débugger du code alors qu'il manquait juste un ";" ?

Prettier et Eslint sont là spécifiquement pour vous faire gagner ce temps-là.

React

Framework React et son écosystème, ses meta-framework

Même si j'ai un peu joué avec Angular et Vue.js, et que j'ai participé à des projets fullstack en Ruby on Rails, c'est React que j'utilise au quotidien depuis 2017.

J'ai décidé d'en faire ma spécialité, et d'exploiter particulièrement le meta-framework Next.js (bien que Remix.run me fasse de l'oeil !).

  • À ce jour, j'ai travaillé sur 12 projets clients en React / React Native, sur des durées allant de 2 mois à plus d'un an et demi

  • Epic React : je ne l'ai pas encore terminé, j'en suis à plus de la moitié. Formation très conséquente et très complète, avec des usages bien avancés.

Modern CSS

Il y a du nouveau dans le game

L'enjeu principal du CSS moderne est de tirer partit des bundlers et du système de composants pour éviter d'avoir à gérer une architecture CSS.

  • CSS Modules : mon favori du moment, en combinaison avec TailwindCSS. Utilisé sur la plupart de mes projets récents comme SuperReco, ENEA Consulting et EDF Store & Forecast.

  • Styled JSX : utilisé sur le site d'Agricool car choix par défaut sur Next.js. Très efficace en réalité.

  • Styled Components : mon choix par défaut jusqu'en 2020

CSS Frameworks

Parce que gagner du temps, c'est cool

Il faut bien différencier les frameworks proposant de l'UI (comme bootstrap) et ceux proposant des utilitaires (comme TailwindCSS). Ils répondent à des besoins totalement différents.

  • Tailwind CSS : Absolument génial, la dernière version permet d'à peu près tout faire avec. Je le couple parfois avec CSS Modules si jamais je suis limité.

  • Material-UI : Pas mal utilisé il y a quelques années. Efficace sur codebase React pour aller vite au début, mais pas toujours simple à customiser.

  • Bootstrap : Beaucoup utilisé, bien que souvent à contrecœur, car pas toujours évident de partir d'une base Boostrap pour aller vers du custom.

Testing web apps

Certainement mon sujet préféré

Une bonne stratégie de tests permet majoritairement 2 choses : gagner du temps lors du développement, et pouvoir modifier du code avec confiance.

  • Cypress : outil génial permettant de tester exactement comme un vrai utilisateur avec un navigateur. Idéal pour tester des parcours, mais commence à devenir aussi utilisé pour tester des composants directement. J'ai commencé réellement à l'utiliser sur mon dernier projet client : EDF Store & Forecast.

  • Storybook Interaction Testing : permets d'écrire ses tests au même endroit que ses Stories. Absolument génial, ultra performant, tourne dans un navigateur, utilise Jest et React testing Library. C'est ma nouvelle solution par défaut pour tester les composants et les vues (unitaire + intégration).

  • React Testing Library : idéal pour tester des composants et même certaines intégrations.

  • Jest : pour tester des fonctions directement, les snapshots sont parfois utiles pour tester des retours assez lourds comme de gros objets.

  • Testingjavascript.com : Standard Testing course

Type Checkers

On n'est jamais assez sûr

TypeScript est devenu la référence dans le domaine. Utilisateur assez tardif, je me vois mal commencer un projet sans désormais...

  • TypeScript: je l'utilise sur quasiment tous les projets, et sur 100% des projets critiques.

  • Sur EDF Store & Forecast, l'utilisation de TypeScript est très complète, en complément avec des règles strictes et de nombreux plugins ESlint. Le gain de temps est considérable.

  • Total TypeScript - Zod tutorial: validation de schémas avec type inference

Best practices

Comment s'assurer d'un travail de qualité

Je regroupe ici en vrac tout ce qui fait un travail de qualité, que ce soit par des audits automatiques, des checklists ou tout simplement un savoir-faire acquis avec l'expérience.

  • Lighthouse : obtention d'un score de 100% sur ENEA Consulting.

  • Certification OpQuast : Expert en qualité web

  • Front-End Checklist : ensemble de points à checker pour les projets front + liste de ressources

  • Frontend Masters - Modern Search Engine Optimization (SEO) + une checklist pour facilement mettre en application

  • Ryan Chenkie - React security course (JWT, routes privées, maintient du state logged in, sanitize user input, etc.)

Containers

🐳

Docker est la référence dans le domaine. J'ai réussit à éviter d'avoir à utiliser cette techno jusqu'à fin 2021, mais finalement je trouve que c'est une excellente ressource et je vois plein de cas où ça me sera utile dans le futur !

  • Sur EDF Store & Forecast, j'ai pris en main l'écriture du Dockerfile pour les déploiements.

  • Frontend Masters - Complete intro to Containers (feat. Docker)

Package managers & tools

Car on ne travaille bien qu'avec de bons outils

Les outils ne font pas uniquement partie du setup d'un projet, ils évoluent aussi dans le temps et il est important d'améliorer constamment ses pratiques, surtout sur une partie aussi critique et liée à l'architecture globale du projet.

  • J'ai une grande préférence pour utiliser directement NPM, mais je reste ouvert aux autres possibilités si jamais c'est justifié.

  • Pour ENEA Consulting, on a choisi d'utiliser Yarn workspace pour monter un monorepo qui partage des composants et quelques configurations entre 2 projets Gatsby

  • Sur tous les projets, je mets en place husky et lint-staged afin de lancer une série de commande en pre-commit : eslint, TypeScript, tests unitaires et d'intégration. Je lance généralement les tests E2E directement sur la CI car ils sont très longs et il est très rare de faire une régression sur ces tests-là.

Static Site Generators

Qui dit Jamstack, dit Jamtax !

Moyen efficace de générer un site facilement, avec une bonne DX (Expérience de Développement) et souvent de le déployer sans coût sur des services comme Vercel ou Netlify.

  • Next.js : utilisé pour Agricool (en mode SSR à l'époque), EDF Store & Forecast et ce site même !

  • Gatsby Theme Authoring - Egghead.io

  • Gatsby : plateforme choisie pour propulser ENEA Consulting

Mobile Applications

La quête du Graal, et des Stores

J'ai pas mal utilisé React Native à une époque, mais j'ai décidé de me recentrer sur le web, car ce n'est pas évident d'être à jour sur le web + le mobile...

Ces références sont donc données à titre indicatives, il n'est pas utile de me contacter pour des applications mobiles.

  • Sport Managing : Intervenu en renfort sur un projet existant.

  • The Geek Family : Intervenu en renfort sur plusieurs projets en React Native pour intégrer de nombreuses vues en un délai très court.

  • Poi Pay : Réalisation d'une V1 pour une application mobile dans le domaine de la cryptomonnaie. Sur cette mission j'ai eu la chance de pouvoir former un dev junior en React Native venant de l'univers Java.

  • Stryng Messaging : j'ai eu la chance de réaliser un POC (Proof Of Concept) d'une migration d'une grosse app de messagerie de React.js + Cordova vers React Native.

  • Startup on Rails : petit projet startup qui m'a introduit à la techno en 2017.

Freelancing

Tips Business / Productivité / Organisation

Assurer en freelance demande plus que de simples compétences techniques. Voici les ressources que j'ai utilisées et qui m'ont été les plus utiles.

  • The PARA method: Simplify, Organise and Master Your Digital Life - Tiago Forte

  • Rest: Why You Get More Done When You Work Less - Alex Soojung-Kim Pang

  • Remote - Jason Fried

  • Getting Things Done - David Allen

  • The personal MBA - Josh Kaufman

  • Rework - Jason Fried

  • The pomodoro technique - Francesco Cirillo. C'est devenu ma méthode de gestion du temps par défaut.

Profil de Thibaud Duthoit, développeur front-end spécialisé en React.js

Je m'appelle Thibaud Duthoit, et je suis développeur front-end depuis 9 ans, spécialisé en intégration et en React.js.

Si vous cherchez un développeur passionné, je serais ravi de prendre contact avec vous.