Sur l’application, différents cas d’usage existent. Un praticien peut :

• enregistrer une nouvelle personne qui vient le consulter ainsi que sa séance
• accéder à l’historique des séances pour une personne
• saisir ses dépenses pour son cabinet
• suivre ses revenus

On l’a ouvert à d’autres praticien·ne·s : c’est devenu un vrai produit utilisé au quotidien par un petit nombre de personnes ! J’y ai accumulé de la dette technique, et un de mes gros sujets de 2025 était de migrer le projet vers TypeScript.

Cette migration est finie et en prod depuis quelques mois ! Je prends donc le temps de faire le bilan calmement sur comment j’ai réussi à mener cette migration et sur l’évolution de mon usage de l’IA.

Contexte

L’organisation de mon projet a facilité sa maintenance : tests unitaires en place, architecture Atomic Design (surtout des molécules, des organisms et des pages, mes atoms étant les composants de Chakra).

J’ai choisi de migrer progressivement mon projet, ayant initié cette migration à un moment où c’était un peu le rush sur d’autres projets professionnels 😅

Une configuration dans le tsconfig.json permet à des fichiers JavaScript et TypeScript de cohabiter dans le même projet : allowJs: true. Ça m’a permis de déprioriser parfois cette migration au profit d’une correction de bug / demande de feature d’une personne utilisatrice.

Démarche

J’ai commencé par les plus petits composants - sans IA d’abord pour valider ma démarche. J’exploitais parfois les types natifs React pour les handlers DOM par exemple.

function handleChange(
  event: React.ChangeEvent<HTMLInputElement>,
  prop: keyof Expense,
) {
  let { value } = event.target;
  if (prop === "amount") {
    value = formatAmountMoney(value);
  }
  setExpense({ ...expense, [prop]: value });
}

Exemple sur cette fonction qui traite un formulaire permettant l’ajout d’une dépense financière.

Petite subtilité : le pattern { ...expense, [prop]: value } ne compile en mode strict que parce que toutes les propriétés de Expense sont des string — le montant est stocké sous forme de chaîne formatée, pas de number.

J’ai hésité à mettre en place react-hook-form sur ce projet mais je n’avais pas envie de me disperser sur trop de sujets.

Si tu as des retours d’expérience sur react-hook-form, n’hésite pas à m’en faire part dans les commentaires !

Une fois que j’ai réussi à migrer quelques petits composants, j’ai commencé à utiliser un agent Cursor pour itérer - tout en relisant ce qu’il faisait. J’avais besoin de d’abord mettre les mains dans le cambouis pour savoir quoi demander dans mon prompt ^^'

Utilisation d’agents

J’utilise Cursor comme IDE. Il a une fenêtre dédiée à la gestion d’agents. J’ouvrais un agent, voici le prompt que je lui donnais initialement - avec un exemple sur un composant qui affiche le détail d’une séance d’acupuncture.

Migre ce composant SessionLine.jsx vers .tsx. Je veux un typage strict des props (type dédié, pas de any), typage des retours de hooks, et des handlers d’événements avec les types React natifs (React.ChangeEvent<HTMLInputElement> etc.). Crée un test unitaire associé à ce composant couvrant les scénarios suivants :

1. La sauvegarde d’une séance
2. L’affichage de la dernière séance
3. L’affichage d’une séance

Explique chaque choix de type non trivial.

J’ai remarqué que l’agent créait parfois des types en double : j’ai donc ajouté dans mes instructions de ne créer un type que si c’était nécessaire et qu’il ne trouvait pas un type exploitable dans le dossier types (où je place tous mes types pour l’instant).

Tous mes types sont isolés dans un même dossier. C’est là l’intérêt des fichiers comme AGENTS.md (ou Claude.md)- cette documentation liée aux agents spécifie de privilégier des types existants lorsque je les mets sur une tâche. On évite ainsi de le répéter à chaque prompt.

Je l’exécutais d’abord en mode “Plan” pour analyser ce qu’il allait faire puis le lançais en mode Agent et je faisais ensuite une review de son code.

L’interface de Cursor simplifie la relecture via l’IDE, on peut aussi y installer des skills et accéder à différents modèles (Composer, Grok, GPT5.6, Fable, Codex …).

Je n’ai pas exploité de skills particuliers dans le cadre de cette migration.

Les tests unitaires à l’ère des agents IA

Le projet était initialement très peu testé - en utilisant des agents, j’ai compris que j’allais devoir très vite en mettre en place.

Les tests sont encore plus primordiaux quand on commence à utiliser un agent IA pour coder : l’agent a besoin d’exécuter une commande pour vérifier la validité de son travail, c’est ce qui va lui permettre de détecter une potentielle erreur qu’il commet et la corriger en conséquence.

C’est une des choses qui m’enthousiasme le plus avec l’ère de l’IA : un argument de plus pour l’ajout de tests automatisés dans une codebase !

Filets de sécurité

Toujours pour donner un filet de sécurité à l’agent IA, j’ai mis en place des hooks de precommit afin de permettre l’exécution des tests unitaires et end-to-end (faits avec Cypress) avant chaque commit.

J’avais mis ces tests Cypress en place mais sans les exécuter dans un pipeline - la question de l’automatisation étant encore hasardeuse car la partie back du projet est sur un autre repo.

J’ai inclus le lancement des tests Cypress dans mon hook de precommit, mais ça risque de devenir très lent dans le temps. C’est quelque chose que je vais enlever une fois que j’aurai fusionné le back de mon projet avec mon front dans un monorepo.

"scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest run",
    "typecheck": "tsc --noEmit",
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "format": "prettier --write ./src"
},
"pre-commit": [
    "format",
    "typecheck",
    "test",
    "cy:run"
],

Extrait de mon package.json - Si simple, mais si précieux pour les agents

À noter : c’est bien vitest run qu’il faut dans un hook (par défaut, vitest se lance en mode watch et ne rend jamais la main). Et attention au script format : prettier --write reformate les fichiers sur le disque mais ne les re-stage pas — sans un git add derrière (ou un outil comme lint-staged), le commit part avec la version non formatée.

Basculer sur un monorepo fait partie de ma longue todo pour ce projet 😅

Renforcement de la validité des données

TypeScript permet une validation à la compilation mais pas à l’exécution réelle. Or, quand on communique avec un système externe comme une API … Tout est imprévisible, le format des données peut très bien changer.

Je ne m’étais pas trop préoccupée du sujet, gérant moi-même l’API exploitée par le front, mais j’avais envie de me pencher sur le sujet pour améliorer la qualité de mon front.

J’ai installé zod, chose que j’ai longtemps procrastinée. L’utilisation de schémas Zod me permet de vérifier la validité des réponses d’un système externe lors du runtime. Et pas juste l’existence d’une propriété dans un JSON mais aussi sa bonne structure !

Plus j’utilise TypeScript, moins je m’imagine travailler dans un projet sans ! Il encourage vraiment à la rigueur dans son code, c’est vraiment appréciable.

Mise en place d’ADR

Ce projet a vraiment commencé en 2022 avec l’intention de monter en compétences sur React.

Aujourd’hui, il est utilisé au quotidien par plusieurs personnes : sa stabilité est nécessaire. Si je n’ai pas spécialement envie de monétiser ce projet, j’ai quand même envie qu’il reste utilisable et exploitable par ces praticien·ne·s en acupuncture sans que ça me prenne trop de temps.

Je me cherche encore sur la structure de mon ADR. Voici l’exemple de mon ADR sur le choix de l’architecture Atomic Design :

# ADR : Choix de l'architecture des composants et de la bibliothèque CSS

- **Date** : 2022-07-24

- **Contexte** : Le projet Acupio démarre sur un temps très restreint. On a besoin d'une bibliothèque de composants CSS nous permettant de faire un design minimaliste mais utilisable.

## Décision

Il a été décidé d'adopter une architecture "Atomic Design" (organismes, molécules) pour faciliter la maintenabilité du projet dans le futur.

(...)

## Conséquences

_(Section complétée a posteriori, en 2025)_

Cette décision a permis de faciliter la migration vers la bibliothèque Chakra v3 et a facilité la migration vers TypeScript. On a pu visualiser facilement les composants "feuilles" (les plus petits enfants) à migrer vers TypeScript avant de s'attaquer à des composants plus gros.

Il a été envisagé de se séparer de Chakra lors de la v3 qui a introduit un nombre de changements énormes. Cette migration a cependant été facilitée par l'utilisation d'agents IA pour la réécriture du code.

J’essaie d’y déposer vraiment tous mes souvenirs, mes hésitations mais je me questionne sur le format et le détail d’information à consigner dans ces ADR …

Bref, à voir comment ces documents vivent dans le temps ! Je pense que ça peut devenir une véritable mémoire du projet.

Conclusion

Même si cette migration est finalisée, j’ai quand même des petits ajustements post mise en prod - avec par exemple l’utilisation du type React natif PropsWithChildren, je suis complètement passée à côté et j’ai dû le recréer …

C’est déjà une étape très positive de ne plus avoir de code JavaScript sur mon projet.

TypeScript encourage à la rigueur et l’utilisation d’agents IA me force à redoubler de vigilance sur la présence des tests.

PHP

match

match, un opérateur qui n’existe que depuis PHP 8.1 et que je n’avais encore jamais utilisé. Il sert à évaluer une valeur et à retourner directement un résultat, comme un switch mais en plus concis.

Avant, avec un switch :

switch ($invoice->getPaymentMode()) {
    case PaymentMode::CB:
        $payment_mode = "Carte bancaire";
        break;
    case PaymentMode::CHEQUE:
        $payment_mode = "Chèque";
        break;
    case PaymentMode::ESPECES:
        $payment_mode = "Espèces";
        break;
    case PaymentMode::VIREMENT:
        $payment_mode = "Virement";
        break;
    case PaymentMode::LYDIA:
        $payment_mode = "Lydia";
        break;
}

Après, avec match :

$payment_mode = match (PaymentMode::tryFrom($invoice->getPaymentMode())) {
    PaymentMode::CB => "Carte bancaire",
    PaymentMode::CHEQUE => "Chèque",
    PaymentMode::ESPECES => "Espèces",
    PaymentMode::LYDIA => "Lydia",
    PaymentMode::VIREMENT => "Virement",
};

Je trouve ça beaucoup plus lisible, surtout quand on veut juste faire une correspondance valeur -> label.

TypeScript

La différence entre as et satisfies, découverte au travers d’un post LinkedIn.

type Colors = "red" | "green";

const favoriteColors = { red: "yes", green: false, platypus: false } as Record<
  Colors,
  unknown
>;

Ici, on force le typage avec as sans que le compilateur TypeScript vérifie vraiment la cohérence de l’objet.

type Colors = "red" | "green";

const favoriteColors = {
  red: "yes",
  green: false,
  platypus: false,
} satisfies Record<Colors, unknown>;

Avec satisfies, le compilateur TypeScript peut lever une erreur.

J’ai aussi découvert le blog de Christian Ekrem, et surtout ces deux articles :

• Why TypeScript won’t save you
• Parse, don’t validate TypeScript

Why TypeScript won’t save you - Ce que j’en retiens

• TypeScript peut donner l’illusion d’une codebase plus sécurisée alors qu’il garantit surtout que le code est cohérent avec les types créés.
• Il existe des moyens de contourner TypeScript (as, any, ts-ignore) qui peuvent créer des failles potentielles.
• Les systèmes externes avec lesquels on interagit (API, etc.) restent hors de portée de TypeScript.
• TypeScript disparaît à l’exécution.
• D’où l’importance de la validation des données au runtime.

Ce point m’amène au second article.

Parse, don’t validate - Ce que j’en retiens

• La différence entre parsing et validation.
• On valide souvent une donnée en entrée d’un contrôleur puis on passe à autre chose.
• Plutôt que de faire transiter un User brut, il vaut mieux créer un type dédié (ValidUser) avec des propriétés métier explicites.
• Le parsing permet à TypeScript de retenir le type valide de la donnée et de propager cette garantie dans le reste du programme.

Citation clé de l’article :

If I had to compress King’s idea into a sentence I’d actually remember at 11pm before a release: make the type system carry the proof, not your memory. Every time you check something and don’t encode the result in a type, you’re asking your future self to remember. Future you will not remember.

Activer un debugger TypeScript sur Cursor

J’ai dû débugger quelques scripts Node. Plutôt que de jongler avec les console.log, j’avais envie de tester un debugger plus efficace.

• Ajouter dans le fichier tsconfig l’option "sourceMap": true
• Lancer la commande avec l’option --inspect-brk
  • node --inspect-brk ./node_modules/.bin/tsx leetcode/linkedlist/mergeLinkedList.ts
• Placer un point d’arrêt
• Menu Run > Start debugging

Images responsives

C’est la fin d’une époque !

Historiquement, on gérait les images responsives avec les attributs srcset et sizes : pour chaque breakpoint, il fallait spécifier quelle image utiliser.

Désormais, grâce à l’attribut sizes=auto, le navigateur va sélectionner la bonne image automatiquement à partir de celles définies dans l’attribut srcset !

Les images responsives ne disparaissent pas mais seront plus simplement maintenables. Cette valeur est encore expérimentale mais devrait être déployée d’ici quelques mois.

The End of Responsive Images par Mat Marquis

Le sélecteur CSS du jour ::search-text

Ce sélecteur permet de personnaliser l’occurence de texte trouvée à partir d’une recherche sur la page du navigateur (le bon vieux “Ctrl+F” / “Command+F”).

::search-text {
  background-color: purple;
  color: white;
}

Si tu lis cet article depuis une version récente de Chrome/Edge/Opéra, tu peux le tester en action :)

C’est disponible sur le mode expérimental (sur Chromium), il faudra surveiller le support sur tous les navigateurs.

DevTools

Il est possible de débugger avec l’IA via les DevTools, désormais intégré dans Chrome !

On peut cibler un élément HTML et démarrer un chat pour débugger son comportement.

Google Sheets API

À partir d’une URL d’un Google Sheet public, il est possible d’extraire du JSON ou du CSV en changeant l’URL.

Pour du CSV :

.../pubhtml?gid=1877378934 -> .../pub?gid=ID_GOOGLE_SHEET&single=true&output=csv

Pour du JSON :

https://docs.google.com/spreadsheets/d/e/.../gviz/tq?tqx=out:json&gid=ID_GOOGLE_SHEET

Productivité

Entre mes différentes activités, je me suis longtemps cherchée sur la gestion de mes tâches.

J’ai découvert l’application TickTick : une app installable sur Mac qui permet d’avoir une vision de ses tâches sous la forme d’une matrice d’Eisenhower.

Cette représentation des tâches a été un GameChanger de mon côté. Il y a aussi un petit timer Pomodoro intégré.

Chakra est une bibliothèque de composants React, avec un focus particulier sur l’accessibilité.

Je l’utilise depuis 2022 pour Acupio, mon side project de gestion de clientèle pour acupuncteurs dont je vous ai déjà parlé ici.

Toutes les personnes suivies par un praticien s’affichaient sur une page, avec la possibilité de filtrer par nom/prénom. Toutes les personnes apparaissent sur la page quand aucun nom n’est saisi dans la recherche.

Je viens de dépasser les 500 patient·e·s suivis pour un des praticiens sur l’application … Le sujet commençait à devenir urgent ! J’ai découvert un composant de pagination Chakra très pratique pour gérer ça.

Problème : Il n’était utilisable que sur la version 3 du framework! Il devenait donc grand temps que je m’attaque à cette mise à jour.

Qu’introduit cette mise à jour vers Chakra v3 ?

Le guide de migration disponible est très exhaustif, on voit qu’énormément de changements ont été introduits.

• Amélioration de la performance lors du render de composants React (grâce à une nouvelle gestion des styles)
• Amélioration de l’inférence de types sur TypeScript
• Polymorphisme : Utilisation du pattern asChild

Je ne vais parler dans cet article que des changements qui ont été le plus difficiles à suivre pour moi sur mon projet : la mise en place du Compound Pattern.

Changements de paradigme - Compound Pattern

Chakra v3 généralise l’utilisation du Compound Pattern pour la plupart des composants m’a forcé à revoir la structure de presque tous mes composants.

Il existe souvent des composants fortement couplés dans une application. Par exemple, un composant utilisable forcément au sein d’un composant : ce sont deux composants à part mais l’un va de pair avec un autre. Ce Compound pattern permet de créer des composants séparés mais fortement couplés.

J’utilisais des composants comme les Drawer, les Modal, des tableaux qui ont tous été impactés par ce changement de paradigme : il a fallu les revoir.

Avant / après sur un tableau - Les Td deviennent des Table.Cell, les Tr deviennent des Table.Row

Face à cette petite montagne de refactoring, j’ai eu envie d’utiliser l’IA pour m’aider dans cette tâche un peu ingrate. N’était-ce pas une des cas d’usages qu’était censé faciliter l’IA ?

Utiliser l’IA pour faire du refactoring

Mon rapport à l’IA est très… frileux.

En 2023, j’ai utilisé ChatGPT comme beaucoup de personnes, je me suis renseignée sur comment ça fonctionnait mais sans aller plus loin dans l’utilisation de l’IA au quotidien.

Refactoring with AI the wrong way : Jongler entre IDE et onglet navigateur Claude

J’ai d’abord commencé en tentant de copier-coller un de mes templates dans une conversation Claude en demandant de migrer ce composant vers Chakra 3. Les suggestions de Claude ne compilaient pas, ce qui est assez logique puisqu’il n’avait pas accès à l’intégralité de ma codebase.

J’en ai discuté au sein du Slack de la communauté Ladies of Code Paris et une de nos membres (coucou Sara !) me disait qu’il serait préférable de commencer par des composants plus petits qu’une page entière.

Ayant une approche Atomic Design sur le projet, c’était un conseil facilement applicable. Ça me permettait d’être plus en contrôle sur les changements introduits. Cela fonctionnait un peu mieux mais jongler entre mon navigateur (avec Claude) et mon IDE était frustrant. J’oubliais régulièrement de lui donner certains fichiers dont il avait besoin.

Utilisation d’agents Cursor pour faire du refactoring

Les agents rendent ces allers-retours obsolètes : l’agent met en place ce que l’on ce qu’on lui demande de faire via l’interface de discussion intégré à l’IDE, y compris sur le plan gratuit de Cursor.

J’avais notamment de vues qui faisait un filtre par date (sur différentes pages de l’application).

Plutôt que de dupliquer cette gestion de date, j’ai décidé d’en faire un composant réutilisable en utilisant mon agent Cursor en lui donnant ce prompt.

J’aimerais que tu sortes ce filtre par date dans un composant qui se nommerait PeriodPicker. Place le dans le dossier components > organisms. Le composant PeriodPicker doit permettre de sélectionner une période donnée. Il doit être exploité dans les composants StatsScreen et UrssafDeclaration. Merci

L’avantage d’un agent, c’est de pouvoir review les fichiers, comme si c’était une PR faite par un·e autre collègue. La précision dans le prompt est importante, y aller de manière atomique évite de se lancer dans des changements trop compliqués et durs à débugger par la suite.

Durée d’une migration de Chakra 2 à Chakra 3

Cette migration s’est passée plus facilement que je ne le pensais. Je n’y ai mis que quelques jours là où je pensais en voyant la montagne y passer plusieurs semaines. J’hésitais même à changer de bibliothèque - quitte à y passer un temps aussi long.

Je n’ai utilisé des agents IA que sur la fin : je pense que j’aurais pu gagner du temps en les utilisant dès le début de ce projet (en commençant par les atoms du projet). Les agents IA sont très efficaces sur des tâches locales et bien définies que sur des refactorings globaux.

De nombreuses personnes dans la communauté ont arrêté d’utiliser Chakra en raison de cette montée de version de ce que je vois sur Reddit.

Bien préparer sa migration vers Chakra 3

La construction du projet en suivant les principes d’Atomic Design m’a encore une fois été très précieuse. J’ai pu commencer par les plus petites molécules en allant ensuite vers les écrans plus grands.

Cette migration m’aura pris au final quelques jours.

Si je devais conseiller une personne qui hésiterait à se lancer dans cette mise à jour

• Voir dans le guide de migration quels sont les composants supprimés qu’il va potentiellement falloir migrer pour estimer la charge de travail
• Faire ça à plusieurs si possible
• Utiliser des agents pour faciliter le travail en commençant par de petits composants d’abord puis en visant plus haut.

Bonne chance :) Et au plaisir d’avoir vos retours sur l’expérience de refactoring avec des agents Cursor !

Je ne m’étais pas trop penchée sur le sujet jusqu’à ce que la mise à jour de TypeScript soit rendue impossible par les packages react-scripts présents dans mon application qui n’arrivaient plus à suivre.

Il est temps d’enlever ce package déprécié de mon application !

Mais… À quoi sert Create React App ?

La promesse de Create React App était de “masquer” tout le nécessaire à la création d’une application React – compilation du JSX, linting – pour qu’on puisse se concentrer sur l’écriture du code uniquement.

C’était magique : tu installes une bibliothèque, tu donnes le nom de ton projet en prompt et voilà : tu as une application qui démarre sur le port 3000 sans trop d’efforts. Et sans vraiment comprendre aussi ce qui s’était passé sous le capot…

Si Create React App permettait de démarrer une application React facilement, il manquait certains éléments essentiels à toute application : le routing, le code splitting, la récupération de données, entre autres.

Faute de mainteneurs actifs et de par les alternatives pérennes en place aujourd’hui, il a été décidé de déprécier create-react-app et d’encourager la communauté à migrer vers d’autres outils.

L’article suggère deux options : migrer vers un framework ou vers un outil de compilation.

J’ai décidé de tester les deux options sur un side-project pour voir laquelle était la plus rapide à mettre en place, en me fixant un maximum d’une journée par option.

Contexte du side-project

J’en ai déjà parlé rapidement ici mais sans entrer trop dans le détail de la stack technique !

Il s’agit d’une application que j’ai faite pour un proche, praticien en médecine traditionnelle chinoise. Cette application lui permet de suivre ses patients, d’enregistrer les séances qu’il fait avec eux, de suivre ses dépenses et d’avoir des statistiques de performance. Cette application existe depuis maintenant 3 ans et est utilisée quotidiennement.

Stack technique :

• Front
  • React, Chakra
  • Gestion des routes : React Router Dom
  • Gestion de l’état : TanStack Query
• Back
  • Symfony
  • BDD : MySQL
• Tests
  • PHPUnit côté back
  • Vitest côté front
  • Cypress pour les tests E2E
• Déploiement et CI/CD : GitHub Actions

Maintenant que vous en savez plus sur le projet, voici comment se sont passées les explorations des deux options suggérées par l’article.

Passer par un build tool (Vite, Parcel…) : Migrer de Create React App (CRA) vers Vite

Les étapes vont très… vite (pun intended 🥁 ).

• J’ai renommé tous les fichiers .ts qui retournent un composant en .tsx (ou en .jsx, ma migration vers TypeScript n’est pas complètement terminée 🫣)
• Il faut enlever toutes les références à process.env : Vite passe par import.meta.env pour la lecture des variables d’environnement
• Le numéro de port changeant de 3000 (CRA) vers 5173 pour Vite, il a fallu que j’adapte mes tests pour qu’ils pointent vers le nouveau port.
• J’ai adapté le fichier package.json pour que l’environnement de développement et le déploiement se fassent avec vite plutôt que react-scripts.
• J’ai dû ajuster aussi mon fichier tsconfig.json pour qu’il reconnaisse les types liés à Vite et éviter les erreurs de typage sur mes fichiers JSX.

Et la migration était finie. Je plaisante à peine !

La documentation fournie dans cet article est super exhaustive.

Même si le nombre de fichiers de ma PR est grand, j’aboutis à un POC stable rapidement.

Ayant un peu de temps devant moi, j’hésite quand même à migrer ce side-project vers Next.

Mon side-project utilise aujourd’hui :

• Tanstack Query pour la gestion d’état
• React Router pour les routes
• React Testing Library pour les tests

Next a l’avantage de gérer à minima les routes, ce qui aurait réduit le nombre de dépendances. De plus, la partie SSR est séduisante, je l’aurais bien exploitée pour un éventuel blog ou des landing pages …

Je décide donc de me donner 1 jour supplémentaire pour défricher une éventuelle migration Next.

Migrer vers Next - Comment remplacer Create React App par Next.js ?

Là aussi, j’ai suivi la documentation de migration sans trop d’encombres.

J’ai réussi à avoir mon premier écran de login en place assez rapidement et à configurer Chakra, mais j’ai vite réalisé que la suite allait demander bien plus de travail.

Pas plus complexe spécialement mais, une réécriture complète de l’application allait être nécessaire.

J’ai identifié les étapes suivantes sur la route :

• Revoir l’ancien fichier App.js pour le migrer vers le layout principal de l’application
• Se débarrasser de React Router pour utiliser le système de routing intégré de Next
  • Donc retirer tous les <Link> ainsi que le fichier router.js pour utiliser uniquement la logique de Next
• Revoir le système d’authentification
  • Appeler Symfony depuis les Server Actions de Next ?
  • Mais ai-je même encore besoin d’un back-end en Symfony ? J’aurais très bien pu mettre en place Prisma avec Next (https://github.com/prisma/nextjs-prisma-postgres-demo) et interroger directement ma base de données depuis mon application Next.

L’utilité de mon back-end Symfony était remise en question par les Server Actions de Next.

Des composants Next (SSR) auraient pu directement interroger une base de données avec un ORM comme Prisma.

L’architecture complète de mon projet était remise en question.

Mon back-end Symfony devenait inutile. Cependant, il y a un contributeur PHP sur le projet… qui est en plein apprentissage de cette techno. Migrer vers Next m’aurait fait réécrire l’entièreté de l’application. C’était faisable mais la valeur ajoutée était assez réduite et je ne souhaitais pas allouer autant de temps à refaire quelque chose de déjà fonctionnel.

J’ai donc préféré rester sur l’option 1 en utilisant Vite : j’ai pu avoir un état fonctionnel de mon application très rapidement. Au bout de quelques heures, le setup était finalisé.

J’ai créé un environnement de test rapidement sur Vercel, histoire de vérifier le bon fonctionnement du déploiement avant d’envoyer la migration en production.

Et là, c’est le drame.

Migration Create React App (CRA) : problèmes et solutions

J’ai trois tests front sur l’application, j’aurais pu ne pas les migrer… Mais même chose, c’est au moment du merge que j’ai réalisé que mes tests ne passaient plus 🤡

Cet article me fut d’une grande utilité pour la mise en place de vitest.

Il me manquait l’installation de la bibliothèque js-dom, j’ai installé Vitest qui a fonctionné presque right away.

J’en ai profité pour déplacer mes tests dans un dossier dédié. Je réalise que j’ai une tâche “Lancer les tests en pre-commit” que j’ai procrastinée trop longtemps… et qui m’aurait pourtant pu voir ce problème bien plus tôt dans le parcours 🤦🏽‍♀️

Faire ce déploiement m’a permis de réaliser que mes variables d’environnement étaient mal nommées (REACT_APP_ comme l’exigeait le préfixage du package create-react-app).

Je décide de rendre les noms de variable agnostiques côté GitHub Actions pour ne pas avoir à les renommer à nouveau si jamais un jour Vite devient déprécié…

Autre étape : le ménage

Autre étape à ne pas oublier : la suppression des fichiers générés automatiquement par create-react-app et devenus obsolètes !

        deleted:    src/reportWebVitals.js
        deleted:    src/service-worker.js
        deleted:    src/serviceWorkerRegistration.js
        deleted:    logo192.png
        deleted:    logo512.png
        deleted:    manifest.json
        deleted:    robots.txt
        deleted:    setupTests.js

J’ai supprimé les références au serviceWorker dans mon index. Je ne me suis pas penchée sur comment CRA l’utilisait.

A voir si je reprends son utilisation pour optimiser le cache de mon application mais je préfère l’occulter pour l’instant.

Le bilan

Pour mon side project, migrer de Create React App vers Vite a été rapide et fluide. Si tu cherches une alternative moderne à CRA, Vite est aujourd’hui l’option la plus simple à mettre en place de ce que j’ai pu voir.

Quel soit l’outil choisi, je suis très impressionnée par l’effort de documentation fourni par le blog de Robin Wieruch et par la documentation de Next/React. Ces différents articles se lisent très facilement et fonctionnent presque sans encombres.

Migrer de Create React App vers Vite m’a aussi permis de conscientiser les petits éléments manquants dans mon expérience de développement (comme les hooks de pre-commit).

Une migration peut être l’occasion de ne pas uniquement se débarrasser d’une dépendance dépréciée mais aussi d’améliorer des points dans l’expérience de développement “en passant”.

Accueillir un nouveau contributeur aide aussi à améliorer l’expérience mais ça sera sûrement le sujet d’un article à part entière !

Et toi ? react-scripts fait toujours partie de tes dépendances ? Tu t’en sépares quand ? 👀

Hello !

Un peu triste d’avoir abandonné ce format d’articles que j’affectionne pourtant beaucoup, je me remotive ce mois-ci pour remettre le pied à l’étrier !

L’idée des TIL, c’est de partager mes apprentissages et découvertes du mois écoulé. C’est parti !

HTML

J’ai découvert l’existence <input type="month" /> qui fournit un datepicker pour récupérer le mois/année. Attention cependant, il n’est pas encore bien supporté par Firefox …

Node

J’ai découvert une chouette bibliothèque Node pour gérer de l’interaction avec l’utilisateur sur une application accessible via ligne de commande. Elle permet de créer des menus interactifs assez satisfaisants visuellement et avec un minimum d’efforts !

Golang

J’ai découvert sur le tard la série d’Aurélie Vache d’articles sur l’apprentissage de Go à travers des cas d’usages très concrets.

Un groupe d’apprenants et d’apprenantes chez Ada m’ont fait découvrir le framework web Gin, écrit en Go.

Terminal

Il est possible d’exécuter une commande en se faisant passer pour un autre user 👀 sudo -u www-data bin/console c:c par exemple (coucou les symfonoss)

Comme quoi, on ne cesse jamais d’apprendre, même avec les commandes qu’on utilise régulièrement.

Cloud

Hébergements

J’ai découvert Appwrite, qui permet de déployer facilement des projets PHP ! J’ai enfin testé Koyeb sur un projet perso, une autre solution de déploiement sur le nuage qui m’a été recommandée par un apprenant Ada (coucou Jérémie 👋). Il y a même la possibilité de déployer des projets dockerisés !

Reconversion Devops

Suite à des questions récurrentes chez Ada Tech School sur les principes devops et les éventuels métiers existants, j’ai demandé sur Twitter quelles étaient les bonnes ressources pour débuter et des idées de projets personnels.

Je suis très reconnaissante des personnes qui m’ont répondu, je transmettrai ces ressources. Vous pouvez voir les réponses par ici.

Si vous n’êtes plus sur ce réseau, voici les ressources qui m’ont été recommandées :

• L’excellent blog de Stéphane Robert (et effectivement, quelle mine d’or)
• La chaîne Youtube des Compagnons du Devops et leur mindmap autour du devops
• La roadmap Devops (dense mais a le mérite de donner une vue sur les technos existantes)
• La chaîne Youtube de TechWorld with Nana 🇺🇸
• La chaîne Youtube de Xavki 🇫🇷
• La chaîne Twitch Cuistops
• Le blog Une tasse de café
• Les bouquins O’Reilly de Google
• Témoignage de la formation Devops de O’Clock
• SadServers (un équivalent de Leetcode pour ops!)
• Le talk de Denis Germain sur le métier SRE
• Le repository Devops-Exercises pour se préparer à des entretiens techniques ops.

Et enfin MyJobGlasses pour entrer en contact avec des SRE/Devops en poste.

Chrome Devtools

Prendre un screenshot d’un bout de votre page web grâce à la console, c’est désormais possible ! Merci à la newsletter DoctoTechLife pour cette découverte !

Il suffit d’inspecter l’élément que l’on souhaite capturer et cliquer sur “Capture Node Screenshot” pour obtenir sa capture d’écran.

Hors tech

Parce qu’il n’y a pas que le code dans la vie, je partage quelques musiques et podcasts qui m’ont touchée dernièremen.

Sons du moment

• Passion pop japonaise des années 80 avec Miki Matsubara et son très célèbre Stay with me !
• Ces deux artistes (merci Ségolène !) qui me détendent bien : Eda Diaz et Mazalda

Podcast du moment

• Le podcast “Attendre d’attendre un enfant” où Sophie Riche raconte son parcours de PMA avec sa compagne. C’est drôle, ça donne envie de frapper son poing contre un mur, de pleurer, de rire … et c’est riche en enseignements sur l’état des droits à la PMA en France.

C’est tout pour ce délicieux mois de mai ! Quels furent vos découvertes ?

J’ai un side-projet en React qui fête ses 2 ans en ce joyeux 26 mars 2024 ! (ça grandit si vite!)

Je l’avais démarré dans le but d’appliquer les riches enseignements vus lors de la formation Progressive Web Apps en React suivie chez Delicious Insights.

J’ai eu envie de me lancer dans l’apprentissage de TypeScript cette année et souhaitais l’appliquer à ce projet.

Ce projet étant utilisé aujourd’hui et ayant une certaine quantité de fonctionnalités, il était exclu de le refaire from scratch. Je me suis motivée en me disant que l’exercice de migration serait plus riche qu’une refonte.

Voici donc l’histoire de comment j’ai commencé à migrer un side-project React sur Typescript.

TypeScript ?

Pour la faire courte, c’est une couche qu’on peut appliquer sur tout projet Javascript afin de renforcer le typage des variables et de faire de la vérification statique des types (c’est-à-dire avant que le code soit exécuté par le client).

Cela peut permettre d’anticiper des bugs et comportements inattendus non souhaités, dès le développement !

Il y a plein de comportements un peu tristes en Javascript (possibilité d’accéder à une propriété qui n’existe pas …) qui conduisent à des bugs, leur documentation liste des exemples de cas problématiques. Typescript prévient ce genre de comportements.

La démarche

• Installation de Typescript dans le projet npm i typescript
• Ajout du fichier de configuration Typescript tsconfig.json
• Création d’un nouveau composant en Typescript pour se familiariser doucement avec la syntaxe
• Reprise d’un petit composant (login) existant dont l’extension a été renommée en .tsx
• Collecte des problèmes … Correction des problèmes …
• Configuration d’Eslint pour Typescript (sinon ça passait pas)
• Et on passe au composant suivant ! ⛏

Le point fort de cette migration est que j’ai pu envoyer en production un premier lot de composants sous Typescript qui continuaient à vivre leur vie avec d’autres composants JS, pas encore ré-écrits.

Vous n’êtes pas obligés de tout migrer d’un coup, ce qui facilite grandement une démarche itérative !

Enseignements

• Commencer du plus petit composant au plus gros !

J’ai commencé par typescriptiser (est-ce un verbe?) tous mes fichiers qui requêtaient des API par ex. pour ensuite aller vers les composants qui exploitaient les fichiers.

• Je me suis remerciée d’avoir adopté une approche Atomic Design dans le projet

J’ai pu m’attaquer aux atomes, puis aux molécules, aux organismes pour finir avec les pages.

• Tout ce qui retourne un composant doit être dans un fichier tsx

Y compris les contextes qui même s’ils fournissent des méthodes, restent des composants …

Interrogations

Quelle est la différence entre type et interface ?

Une interface reste ouverte à la différence d’un type. De ma compréhension, ça s’utilise plus quand on veut entrer dans une logique de composition. Les types peuvent utiliser les types primaires (booléen, number) et ne peuvent pas être modifiés après déclaration.

C’est encore flou pour moi le “quand utiliser l’un ou l’autre”, je n’ai pas encore eu de besoin où l’un s’appliquait mieux que l’autre mais j’ai préféré garder une consistence sur le projet. Je suis preneuse de vos retours sur le sujet :)

Pièges

Configuration de Eslint

J’avais Eslint en place sur mon projet. J’ai oublié d’installer une dépendance typescript-eslint, j’avais des erreurs liées à mes déclarations de type très obscures, je pensais que la syntaxe était incorrecte alors que le problème venait de Eslint qui n’était simplement pas configuré pour comprendre du Typescript…

En réaction à chaud, j’ai quand même beaucoup de mal avec la syntaxe Typescript mélangée aux concepts React comme le useState

 const [sessions, setSessions] = useState<Array<Session>>([]);

Je trouve qu’à la lecture, ce n’est pas du tout “intuitif”… J’imagine qu’il faut se laisser le temps de s’y habituer ! 😅

Appréciations

Le code produit est plus lisible, on gagne en rigueur aussi sur les objets qu’on manipule.

La démarche itérative qu’on peut avoir ! Les fichiers .ts, .tsx et .js peuvent cohabiter dans le même projet, c’est un travail de fond qui peut se faire au fur et à mesure qu’un projet vit.

Ressources utiles

Je finis cet article sur cette liste de ressources qui m’a été utile pour le premier lot envoyé en production !

• Comment organiser son projet et où mettre les types / interfaces ?
• Migrer des contextes React sur Typescript
• Tuto React Typescript
• Cet article m’a l’air plus complet car il aborde également l’angle des Context
• Un autre cours de Grafikart qui a l’avantage d’être en français

Et vous ? Comment se sont passées vos migrations vers Typescript ? Des traumas à me partager ? 😅

J’ai lu cet excellent article via la newsletter de Doctolib, qui parle de comment documenter “par le code”.

L’idée de cet article est d’encourager à automatiser les tâches répétitives de créations de fichiers, plutôt que de documenter comment faire cette tâche.

Qui n’a jamais crée un composant en copiant/collant le contenu d’un autre fichier pour ensuite écrire son code ?

L’objectif de l’automatisation est non seulement d’éviter ce copier/coller mais aussi de diffuser la connaissance sur les standards exigés par l’équipe pour la création d’un composant.

Pour tester ce concept, j’ai décidé de l’appliquer sur la création d’articles sur mon blog.

La création d’articles sur Hugo passe par la création d’un fichier markdown. Ne retenant ✨ jamais ✨ la syntaxe précise, je copiais/collais systématiquement l’en-tête d’un article d’avant.

L’automatisation passe par la bibliothèque Plop, qui permet de créer des fichiers automatiquement à partir d’un template.

Installation de la bibliothèque Plop

Comme toute bonne vieille dépendance, on peut l’installer via npm (ou yarn, faites comme voulvoul, je ne suis pas sectaire!)

npm i plop --save-dev

💡 Je l’installe en devDependencies avec l’option --save-dev car je n’en ai pas besoin en production !

Création du prompt

La bibliothèque Plop repose sur une autre dépendance Inquirer.js qui permet de gérer des prompts de terminal (du simple input à la checkbox!)

Vous allez donc créer un fichier plopfile.js à la racine de votre projet.

Le fichier contiendra les instructions pour créer la commande d’automatisation et la récupération des données saisies via le terminal.

Voici l’exemple du fichier plopfile.js pour mon besoin de création d’un article vide.

export default function (plop) {
  const today = new Date()
  const date = `${today.getFullYear()}-${today.getMonth()+1}-${today.getDate()}`
	plop.setGenerator('article', {
		description: 'Créer un nouvel article',
		prompts: [
          {
            type: 'input',
            name: 'name',
            message: 'Nom ?'
          },
          {
            type: 'input',
            name: 'metadescription',
            message: 'Méta-description ?',
          },
          {
            type: 'input',
            name: 'cover',
            message: 'Cover ?',
          },
          {
            type: 'checkbox',
            name: 'language',
            message: 'Langue ?',
            choices: [
              {name: 'fr', value: 'fr'},
              {name: 'en', value: 'en'}
            ]
          },
          {
            type: 'input',
            name: 'slug',
            message: 'Slug ?',
          }
        ],
        actions: [
            {
              type: 'add',
              path: `content/posts/${date}--{{slug}}.{{language}}.md`,
              templateFile: 'templates/plop-article.md'
            }
        ]
	});
};

Création du fichier template

J’ai choisi de mettre mon template dans un dossier dédié. Toutes les variables récupérées via le prompt seront exploitées par le template.

Mon fichier plop-article.md (mentionné dans mon plopfile.js) ressemble à ceci 👇

---
title: {{ name }}
slug: /{{ language }}/{{ slug }}/
summary: "{{ metadescription }}"
cover: "img/{{cover}}"
---

Les noms de variables réferrent aux variables mentionnées dans le prompt crée par le fichier plopfile.js !

Déclaration du script

Je définis une commande pour pouvoir la lancer depuis le terminal dans mon fichier package.json.

Dans le fichier package.json à la racine du projet, j’ajoute la définition d’un script new_article en ajoutant ceci

"scripts" : {
  "new_article": "plop"
}

A la fin, mon fichier package.json ressemble à ceci 👇

{
  "scripts" : {
    "new_article": "plop"
  },
  "devDependencies": {
    "plop": "^4.0.1"
  },
  "type": "module" // Pour pouvoir utiliser la syntaxe d'export en Node dans mon fichier plopfile.js !
}

Démonstration

Désormais, à chaque fois que j’écrirai un nouvel article, je n’aurai qu’à lancer la commande npm run new_article (oula, c’est long à taper, je sens que je vais déjà raccourcir l’alias 😅 …) ! Et je n’aurai plus qu’à écrire ensuite :) Ca donne ceci 👇

Dans l’exemple de cet article, j’ai automatisé la création d’un article mais rien ne vous empêche de faire la même chose pour un autre “standard” de votre codebase :)

Que pensez vous de l’automatisation ? Automate all the way ou avec parcimonie ?

L’intégration continue (Continuous Integration - CI en anglais) et le déploiement continu (Continuous Deployment - CD en anglais) sont deux concepts au coeur de beaucoup de projets logiciels.

C’est quoi l’intégration continue ?

L’intégration continue est un ensemble de pratiques dédiées à vérifier que les nouvelles fonctionnalités qu’on intègre à une application ne “cassent rien”.

Prenons un petit exemple !

Bob et Alice sont tous les deux dev sur un site e-commerce.

Bob est sur une fonctionnalité de “Wishlist” tandis qu’Alice implémente un paiement par Paypal.

Ces deux fonctionnalités seront intégrées au projet du site e-commerce. Même si on ajoute un nouveau mode de paiement “Paypal”, on veut pouvoir continuer à payer par carte bleue si on le souhaite sans supprimer cette fonctionnalité.

C’est la raison d’être de l’intégration continue.

Cela se manifeste via l’utilisation d’un outil de versionning (comme Git), l’exécution de tests unitaires, de tests fonctionnels et de tests e2e selon ce qui est mis en place dans le projet.

Ce fonctionnement par branches varie selon les équipes (vous entendez parler de git flow ou de trunk based development), mais ce qui est sûr c’est qu’on ne commit jamais tous en même temps sur la branche principale main 😅

C’est quoi le déploiement continu ?

Le déploiement continu est une stratégie où tout nouveau code envoyé sur un outil de versionning (comme Git) est automatiquement envoyé sur un environnement.

Cette stratégie se met en place via des outils et des scripts qui s’exécutent automatiquement à chaque fois qu’un commit est envoyé en production.

Selon l’organisation de l’équipe, les stratégies de déploiement peuvent différer.

Une stratégie classique est d’avoir la branche main déployée systématiquement sur l’environnement de production (l’environnement accessible au public qui utilise l’application!)

Exemples d’outils

Il existe une multitude d’outils de déploiement continu sur le marché. Je ne vais parler dans cet article que de deux solutions que j’ai particulièrement utilisé récemment, CircleCI et Github Actions.

Les deux solutions permettent d’exécuter des scripts (permettant de déployer / exécuter des tests…) lorsque de nouveaux commits sont faits sur une ou plusieurs branches Git (en se connectant à un repository distant Github, Bitbucket, Gitlab…).

Les règles de déclenchement de ces jobs sont paramètrables sur le fichier de workflow (qui définit et décrit en détail les jobs à exécuter).

CircleCI

👵🏼 J’ai travaillé avec CircleCI entre 2018 et 2022. Mes retours sur cette solution se basent essentiellement sur cette expérience, il est possible que la solution ait évolué depuis !

J’ai apprécié travailler avec CircleCI. Il y a les Orbs, des applications réutilisables sur un workflow Circle.

Une marketplace d’orbs existe avec plein de fonctionnalités (ex: mettre en place des notifications Slack à l’issue d’un job de déploiement)

Je me souviens que le dashboard qui permettait de visualiser les différents déploiements en cours était complètement bugué. L’équipe a été assez réactive et a rollback à peine une heure après l’incident.

Je garde quand même souvenir de nombreux incidents sur CircleCI, ce qui n’indique pas une stabilité de la plateforme (du moins, à l’époque!)

Github Actions

Sorti plus récemment sur le marché, on retrouve sur Github Actions les mêmes possibilités que sur Circle CI (ajout de secrets, variables d’environnement).

Le dashboard qui permet de visualiser l’exécution des tests ou des déploiements par les jobs est peut-être moins user-friendly par rapport à CircleCI (mais c’est très subjectif comme avis 😅)

Un concept similaire aux orbs de CircleCI existe aussi sur Github Actions: les actions sont disponibles sur une marketplace et vous évitent de recoder des fonctionnalités pour des besoins assez classiques (notifications Slack, installation d’outils de code coverage…)

Ce que j’apprécie particulièrement dans Github Actions, c’est le fait d’avoir tout au même endroit: mon code, mes jobs de déploiement, mes tests…

Bilan

Ayant déjà bossé à l’époque dans une équipe qui avait à peine Git en place, je peux vous assurer que c’est un état d’esprit qui permet d’avoir un produit logiciel plus sain et d’être plus en confiance sur le code qu’on produit.

Pour aller plus loin sur le sujet, voici quelques articles que je recommande et qui m’ont été d’ailleurs utiles dans la rédaction de cet article (le blog d’Atlassian est très cool et en français !).

• Cinq conseils pour vos dépôts Git permettant l’intégration continue
• Qu’est-ce que l’intégration continue ?

Les schémas de cet article ont été réalisés avec Excalidraw !

Ca fait plusieurs années maintenant que je suis fidèle au générateur de sites statiques Hugo, et n’ai aucune envie de migrer vers autre chose.

Je l’utilise pour mon blog technique (vous êtes dessus!) et mon blog de critiques culturelles (où je raconte mon humble avis sur des films/lectures/expos…).

Ecrire du markdown est bien plus rapide que de se connecter à un backend d’administration à la Wordpress. Je peux écrire facilement depuis mon téléphone tout comme mon ordi.

Cependant on peut avoir besoin d’écrire un contenu en HTML dans un article (post embeddé, …). Si vous avez besoin d’ajouter du HTML dans un post en markdown avec Hugo, vous pouvez utiliser la fonctionnalité des shortcodes Hugo !

C’est quoi un shortcode ?

Un shortcode est une sorte de balise que vous allez pouvoir ajouter sur vos articles pour pouvoir ajouter un certain formatage.

Ce concept existe également sur Wordpress !

Créer un shortcode avec Hugo

On va créer un fichier rawhtml.html dans le dossier layouts/shortcodes qui devrait être à la racine de votre projet.

💡 A noter, le nom de votre fichier match avec le nom de votre shortcode! (Si vous appelez le fichier patate.html, le shortcode sera appelable avec {{ <patate> }} 🥔)

Une fois le fichier rawhtml.html crée, mettez le contenu suivant 👇

{{.Inner}}

Comment ajouter du HTML dans un article Hugo ?

Dans le corps de cet article, j’ai ajouté le code suivant 👇

{{ < rawhtml >}}
  <style>
    .text {
      padding: 2px;
      text-align: center;
      background: yellow;
    }
  </style>
  <p class="text">
    <mark>Je suis du HTML custom</mark>
  </p>
{{ < /rawhtml >}}

💡 Il faut enlever les espaces autour de rawhtml pour que ça soit bien interprété !

Ce qui devrait donner ceci 👇

Je suis du HTML custom

Happy blogging ! 🫶🏽

Le rythme des études et d’autres choses m’ont éloigné de la lecture. Je ne trouvais plus de temps mais n’avais surtout pas la motivation de lire. J’avais fait aussi une overdose de livres de développement personnel qui m’avait dégoûtée de la lecture en général.

En 2023, je me suis fixée pour objectif de lire au moins un livre par mois. J’ai la joie d’atteindre mon 16è livre lu en même pas dix mois !

Disclaimer: C’est OK de ne pas aimer lire ! Cet article n’a pas pour but de te vanter les mérites de la lecture, c’est surtout un guide pour les personnes qui se sont éloignées de ce plaisir et qui aimeraient y revenir !

Voici quelques astuces que je pourrais donner si toi aussi, tu aimerais te reconnecter avec la lecture.

S’autoriser l’exploration de nouveaux genres

A l’image du snobisme musical, je trouve qu’on peut être rapidement jugé sur ses goûts littéraires et sur ce qu’on lit.

J’ai recommencé à lire en commençant par du “Cosy Mystery”: C’est un genre littéraire loin de prétendre un jour au prix Goncourt mais ce livre avait le mérite d’être drôle et gourmand !

Commencer par des romans graphiques, BD …

On perd vite l’habitude de se poser devant un livre, surtout quand on a du mal à rester attentif.

Un livre avec “des images” mine de rien, ça aide à lire plus rapidement et ça m’a permis de mettre le nez progressivement dans la lecture en me réhabituant déjà à l’exercice simple de rester attentif devant un livre pendant quelques heures.

Je peux te recommander:

• L’excellente série autobiographique de l’Arabe du Futur de Riad Sattouf
• The Promised Neverland, un manga où des orphelins réalisent que l’établissement où ils ont grandi est plein de mystères et de dangers …
• Death Note, un manga addictif où un adolescent reçoit d’un Dieu de la Mort un cahier où il peut tuer des gens en écrivant leur nom …

Exploiter les “temps morts” de sa journée

Tu prends les transports en commun? Tu fais quoi en attendant tes temps de cuisson ? Ce sont des moments où tu peux en profiter pour avancer quelques pages sur ton roman !

Aie toujours un livre sur toi

Qui n’a pas un ami qui arrive toujours en retard ? Avoir un livre à portée de main permet de profiter de n’importe quel moment dans sa journée pour avancer un peu sur sa lecture !

N’aie pas peur d’arrêter un livre qui te plaît pas

Ce tip peut paraître contreproductif. A se forcer à lire qui ne nous plaît pas, on se dégoûte de la lecture. C’est ce qui m’est arrivé quand j’ai enchaîné trop de livres de développement personnel qui se répétaient, se ressemblaient.

Un autre piège auquel j’ai pu être confrontée était de lire un bouquin qu’une personne m’avait recommandé alors que le pitch initial ne me plaisait pas. Si la thématique ne t’intéresse pas, il y a peu de chances que tu arrives à aller au bout de ta lecture. Il y a de tout dans la nature et c’est ok de ne pas aimer un livre plebiscité par tel ou tel prix littéraire !

Suivre un bookclub

J’ai découvert qu’il existait des “booktubeuses”, des personnes créatrices de contenu autour des livres sur les réseaux sociaux (TikTok, Instagram, Youtube…). Je suis le bookclub d’Isadora et Marisa qui recommandent un livre chaque mois.

Il m’est arrivé de zapper quelques mois et de lire deux livres le mois d’après mais au moins, ces bookclubs permettent de créer une “pile de lectures” et de ne jamais être à court d’idées lecture !

Troquer son temps “Réseaux Sociaux” pour du temps livres

C’est probablement un constat qui m’a horrifié: je passe en moyenne 2h sur les réseaux sociaux dans ma journée. 2h à regarder des reels certes hilarants pour la plupart mais qui me font un peu perdre du temps. Temps qui pourrait être rentabilisé pour avancer ma lecture ^^ La mise en place de minuteurs aide à se sevrer progressivement de ces applications, mais j’ai encore du chemin à faire sur ce sujet.

J’espère que ces conseils t’aideront à te remettre en selle ! Si tu as d’autres conseils auxquels je n’ai pas pensé, n’hésite pas à les partager en commentaire.

En dehors de ça :

Javascript

• La refonte de la documentation de React est un bonheur. J’avais beaucoup de mal à rentrer dans l’ancienne, la présence de table de matières fait du bien.

Cloud

• Dagger est un outil permettant le développement de pipelines dans des containers 🤯

CSS

• Il y a une variable scroll qu’on peut exploiter en CSS : https://css-tricks.com/books/greatest-css-tricks/scroll-animation/
• Locomotive Scroll, une bibliothèque faite par une agence Montréalaise !
• Ce repository Github est plein de bonnes pratiques CSS avec de petits exemples concrets à côté.

Hors tech

J’ai lu le livre Les délices de Tokyo, écrit par Durian Sukegawa. C’était un bonheur à lire, j’en parlerai prochainement sur mon blog dédié à mes découvertes culturelles :)

Ladies of Code Paris était partenaire communauté du Kubernetes Community Days qui a eu lieu le 7 mars dernier au centre Georges Pompidou à Paris.

J’ai eu l’opportunité d’animer deux tables rondes dans l’après-midi et j’ai pu profiter de quelques conférences sur le reste de la journée.

Le replay des conférences devrait être disponible mais voici ce que j’ai retenu !

Conférences

Il a fallu faire des choix: l’inconvénient des confs par tracks, tu n’es pas encore doté du don d’ubiquité pour en voir plusieurs à la fois…

Voici celles auxquelles j’ai assisté !

Building Container Images in k8s : it’s been a journey !

J’ai démarré la journée avec une conférence donnée par Laurent Bernaille et Mayeul Blanzat de chez Datadog qui ont fait un retour d’expérience sur leur manière de builder leurs containers sur kubernetes.

Les containers ne devraient jamais se lancer en tant que root.

buildkit exploite la notion de rootless build où on crée un user namespace avec des “faux root” (user root dans le container est différent du root de la machine hôte).C’est une fonctionnalité interne au kernel Linux. Plus d’informations sur le mode rootless.

Le mode rootless affecte le montage du système de fichiers qui occasionne des problèmes parfois difficiles à débugger (ils ont montré notamment un souci de “fichiers fantôme” qui pouvaient perdurer dans leurs builds et causer des problèmes de compilation: derrière un simple git checkout se cache d’autres manipulations sur le système de fichiers!)

Ce qui m’a marqué dans cette conférence, c’est les détails donnés sur la manière dont ils ont débuggé leurs problèmes de build avec deux commandes que je ne connaissais pas 👇

• strace pour surveiller les appels reçus par un processus ainsi que les signaux reçus.
• netstat -tulnp pour voir les ports utilisés du début à la fin du process de build.

De ces cas concrets se dégage une bonne pratique liée aux images Docker: on évite de démarrer un démon au démarrage d’une image docker (ou on les kill en sortant).

A case for a developer portal

Contexte: Une architecture avec un monolith qu’on souhaite exploser. On a du mal à visualiser les dépendances, qui est responsable d’une brique, monter l’infrastructure liée à chaque microservice prend du temps… Sounds familiar ? 😄

Backmarket avait une architecture monolithique qu’ils ont explosé en une trentaine de microservices. Avec cette nouvelle architecture, l’équipe “Infrastructure” devenait le bottleneck de leur organisation.

Est venue alors la nécessité d’avoir un “Developer Portal”: c’est un outil pour permettre de mieux visualiser les différences briques et faciliter la création de nouveaux microservices. Sami Farhat de Back Market a présenté leur utilisation de backstage.io en interne, un outil pour fournir un developer portal.

Le Central Hub permet de visualiser la stack technique. On peut déclarer une nouvelle “entité” (API, SDK…) aux moyens de YAML. Il existe des extensions permettant de se brancher à Github, CircleCI…

Le Service Bootstrap était la première fonctionnalité la plus demandée pour faciliter la création de microservices. La team Dev n’a qu’à décrire la stack souhaitée, indiquer le dépôt Git, les outils dont ils ont besoin (dashboard qualité, etc.) et tada 🧙🏻 Grâce à Terraform et Chassis (un outil maison qui fournit un skeleton d’application), le microservice est crée au bout d’une heure. Ils travaillaient encore sur l’accélération du process mais déjà, l’automatisation fait gagner du temps à l’équipe infrastructure qui est moins sollicitée par les équipes de développement.

Des Coupling Scores sont donnés pour chaque service grâce à un outil qui crawle le code source des différents microservices. Les sources à optimiser sont ainsi détectées plus facilement par les équipes dev.

La mise en place du dev portal est longue, il faut y aller par itérations. Vendre cette solution n’est pas facile mais met en lumière toutes les inconsistances du projet et apporte beaucoup sur le long terme. Ca encourage aussi à être rigoureux sur les RBAC du projet.

En ayant un Developer Portal fiable, cela inspire la confiance des utilisateurs et encourage l’adoption de l’outil.

Comment créer un plugin kubectl?

k8s est fait pour être étendu: on le voit avec les opérateurs mais aussi avec les plugins.

Les plugins peuvent être un moyen d’enrichir son utilisation de kubernetes en encapsulant des commandes qu’on a tendance à répéter.

Il est possible de créer simplement un plugin, il faut juste lui passer un binaire à exécuter (codé en Rust, Quarkus, Python, Go…).

La recette est simple :

• On crée un fichier touch kubectl-monsuperplugin
• On lui donne les droits d’exécution chmod +x kubectl-monsuperplugin
• Mets le DTP (Dans Ton Path) mv ./kubectl-monsuperplugin /usr/local/bin/
• Run kubectl monsuperplugin et ça devrait marcher.

Il est possible de déployer le plugin sur un index privé pour le rendre utilisable par ses collègues (pour des plugins relatifs à de la tambouille interne à une entreprise, par exemple!).

Des plugins sont trouvables d’autres gens sur Internet sont trouvables via krew (c’est comme brew mais pour des plugins kubectl)

Quelques plugins cools partagés par les speakers:

• kubectl view-secret monsecret -a
• kubectl pod-inspect pour une inspection moins verbeuse
• kubectl neat qui nettoie le YAML

Quelques bonnes pratiques pour le développement de plugins k8s :

• Le Go est à privilégier
• Attention au naming et aux mots clés réservés à kubectl
• krew-release-bot et GoReleaser pour générer des versions du plugin.

Mention spéciale au binôme Aurélie Vache et Sébastien Blanc pour leur énergie et qui transmettent leur savoir avec beaucoup de pédagogie et des exemples simples mais concrets 💕

J’ai découvert lors de cette conf l’existence des outils suivants:

• stern pour tail les logs de plusieurs pods à la fois
• ktail pour observer plus joliment les logs d’un pod

Comment rendre les secrets Kubernetes vraiment… secrets?

La conférence a été donnée par Julie Hourcade, Ingénieure Devops chez Formance. Les secrets sur Kubernetes ne sont que des données encodées en base64. Ce n’est pas du chiffrement et ça n’assure pas vraiment la sécurité des secrets.

On peut utiliser un Secret Vault Manager (je découvre leur existence !) et déporter ainsi ça côté tiers (AWS, Google Cloud Platform, HashiCorp Vault). Vault s’utilise en CLI avec curl.

Le manager s’installe via un Secret Store DSI Driver, une interface qui s’installe au niveau du cluster kubernetes.

On peut définir des politiques d’accès plus restreintes d’un pod à une liste de secrets.

Il est possible aussi d’utiliser un SDK pour la gestion des secrets et complétement externaliser cette problématique.

Quelque soit la solution choisie, il faut avoir conscience de la complexité introduite et s’assurer que cette complexité est raisonnable pour nos besoins.

Chaos Engineering Journey - Injecting harms

La conférence a été donnée par Si Li, développeuse et SRE chez Carrefour.

Le concept a été propulsé par Netflix. L’objectif était de générer des problèmes sur leur infrastructure pour l’éprouver dans un contexte sécurisé et ne pas attendre de faire face à ces problèmes en production.

chaoskube est un outil permettant de tuer des pods de manière aléatoire (selon des annotations, labels ou âge) dans un cluster donné. Il s’installe facilement via helm.

Un process de chaos engineering va de pair avec un bon monitoring pour pouvoir voir les points d’amélioration sur une infrastructure: litmuschaos permet de metttre en lumière les défaillances sur une infrastructure. On peut générer un chaos sur un node, des pods ou sur un network entier avec des scénarios installables.

Tables rondes

J’ai eu l’opportunité d’être la modératrice de deux tables rondes. Il n’y avait malheureusement pas d’audience en raison du lieu qui ne s’y prêtait pas mais elles étaient enregistrées. C’était des vastes sujets mais nous n’avions que 30 minutes pour en parler !

Ops / Dev / DevOps

Avec Juliette Audema, Angélique Jard et Hugo Lassiège, nous avons pu discuter autour des pratiques ops.

Ce que je retiens surtout de cet échange, c’est à quel point la notion de “DevOps” a des définitions variantes: pour certains, c’est un ensemble de pratiques, une philosophie pour d’autres, c’est devenu un métier “Un dev qui fait aussi de l’ops”.

Je retiens aussi l’importance quand on est dev d’être responsable de son code du début à la mise en production et donc de s’intéresser à l’infrastructure.

En tant que dev, on peut souvent galérer sur des problématiques d’infra car ce n’est pas notre spécialité: Les pratiques DevOps augmente notre charge cognitive déjà élevée juste sur le métier de dev.

Accorder du temps et de l’énergie à la “Developer Experience” fluidifie le rapport à l’infrastructure pour un dev, et fournit aux équipes de développement les connaissances nécessaires en infra.

Open-source: Comment contribuer ?

Avec Zineb Benhiba, Christophe Chaudier et Rémi Verchère, nous avons discuté open source et les freins aux contributions.

Ce que je retiens de cette table ronde, c’est qu’il y a plein de manières de contribuer à un projet open source qui ne sont pas nécessairement liées au code: une bonne manière de débuter sont bien sûr les “good first issue” identifiées par le maintainer, il y a aussi communiquer sur les projets open-source (via Youtube, Linkedin, Twitter ou autre réseau social). Contribuer à un projet qu’on utilise est aussi une manière simple de se lancer: on est plus à l’aise de “tester” notre contribution.

En tant que maintainer d’un projet open source, il est important de veiller à l’inclusivité dans son projet: accueillir en ayant un processus bien clair dans le README, avoir un code of conduct, faire preuve de bienveillance envers les membres. Zineb s’est lancée dans sa première contribution lors d’un meetup, organiser une rencontre “dans la vraie vie” peut être un moyen efficace d’attirer de nouvelles personnes contributrices.

Si on est perdu devant la license à choisir pour créer son projet, choosealicense (pour un projet code) et creative commons (pour du contenu vidéo ou écrit) peut nous guider vers la license la plus adéquate selon nos besoins.

Cette discussion a germé des graines en moi 🌱 En rentrant, j’ai réalisé qu’une PR traînait sur le welcome kit de la communauté Ladies of Code sans que j’y prête attention … Je visualise le chemin à parcourir, que ce soit en tant que maintainer et contributrice ! :)

Bilan

La journée est passée très vite, le lieu était vraiment canon aussi, mêlant art et tech. J’ai passé un super moment et ressors de là énergisée et inspirée pour la suite !

Un grand grand merci aux speakers pour leur partage de connaissances, à la communauté Duchess France et Ladies of Code Paris: c’est sincèrement toujours un plaisir de vous voir à ces événements ! Et last but not least, merci à Aurélien Violet, Denis Germain pour l’invitation et l’organisation de l’événement :)

Point bonus pour le sticker bar, la récolte a été fructueuse !

Voici quelques notes des différents talks que j’ai pu écouter. J’ai pas forcément noté les noms de tous les speakers par manque de temps 😭 Les replays seront bientôt disponibles !

Sauvegardez et restaurez proprement vos applications kubernetes

Velero est un utilitaire facilitant la gestion de backups sur Kubernetes. Au delà des fichiers de confs, ça permet aussi de gérer les volumes qui peuvent être associés à des StatefulSet par exemple.

L’installation se fait via un chart helm.

On détermine quels volumes sauvegarder via des annotations sur les pods.

Possibilité d’avoir des hooks sur lesquels se brancher avant ou après backup. Ca peut être utile pour déclencher certaines requêtes SQL par exemple ou notifier.

Le monitoring du backup se fait également via annotation.

Kyverno: Outil permettant de vérifier la déclaration des backups.

Bonnes pratiques pour les backups:

• Appliquer la règle du 3/2/1 pour les backups: 3 copies des données sur 2 supports différents dans au moins une autre localisation.
• Toujours tester la création de backups mais surtout sa restauration !

Testing microservices

Problèmes: Dépendances entre les microservices. Plusieurs bdd. Test d’intégrations compliqués.

White box testing Framework de test associé au langage. Black box testing Code inconnu, on se base sur les entrées/sorties pour vérifier le bon comportement du programme. Gray box testing la jointure des deux mondes.

Chez OVHCloud, ces deux outils sont utilisés:

• Venom, un launcher de tests opensource: https://github.com/ovh/venom
• Smocker, un serveur de mocks http: https://github.com/Thiht/smocker

Une demo est accessible ici.

Find your application bottlenecks with tracing

Opentelemetry (logs : elasticsearch, Loki…). Metrics montrent la conséquence. Les traces (tempo, Jaeger) générées par les requêtes pour voir ce qui prend du temps.

Les spans sont des traces filles à la trace principale. Le tracing sert à identifier les problèmes.

L’autoinstrumentation permet de générer des traces sans changer le code. Ca peut se faire grâce au standard opentelemetry.

Les librairies tierces se rattachent aux hooks des bdd (.net, python, java, node.js).

Collector: ne pas perdre de temps/perf à logger, fonctionne en udp + asynchrone. Il peut y avoir en sidecar par pod, daemonset par node ou central.

Annotation k8s pour activer le tracing sur le pod ( Instrumentation.opentelemetry.io/inject-python: true).

Exemple disponible ici

Une application résiliente dans un monde partiellement dégradé

Probablement mon talk préféré de la journée ! 🎖

Règle des X-nines : Taux de disponibilité, permet de donner une estimation de jours d’indispo. 4 neuf => 99,99%

Les taux de disponibilité se multiplient. Quand il y a des dépendances entre plusieurs api, on multiplie les taux de chacune. Quand on a plein de services dont on dépend, cela a un impact négatif sur notre propre taux de disponibilité.

Le “Blast radius” d’une application : l’impact de son downtime sur les autres applications qui la consomment.

Service Level Indicator : Mesure qualitative d’un aspect du niveau de service. Taux d’erreur, latence, nombre de requêtes traitées - débit , durabilité.

Service Level Agreement: Contrat avec l’utilisateur. Qu’est-ce qui se passe si nos objectifs sont pas respectés ? Généralement, on offre un petit discount financier au client.

• Mettre en place une alerte uniquement quand il faut faire quelque chose ! Sinon, on se retrouve innondé d’informations.

Alerte sur un niveau de CPU useless: ça peut être pertinent que le CPU s’active s’il y a bcp de traitements. Toujours se demander lorsqu’on crée une alerte si quelqu’un a besoin d’être réveillé pour ça.

Architecture Des microservices sans communication asynchrone, c’est monolithe distribué.

Ajouter un cache augmente pas la résilience. Ça ajoute un intermédiaire et réduit le taux de disponibilité

Tips

• Mettre des durées de cache aléatoire pour éviter qu’une DB soit sur-solicitee d’un coup pour plusieurs entrées qui expirent en même temps.
• Heures aléatoire sur les crons, ne pas tous les jouer en même temps.
• Une requête a échoué? On peut réessayer mais on limite le nb de fois. (Exponential backoff: on attend de plus en plus lgtps entre les tentatives.)
• “Choose boring tech”
• Penser son application en mode dégradé: jeter 10% du trafic pour soulager DB ou ne pas afficher des parties d’une application en cas d’indisponibilité du service qu’elles consomment.
• Chaos engineering: prévoire que tout peut va casser. Provoquons des pannes en prod pour avoir l’habitude de réparer.

Merci @pascal_martin !

Comment gérer des journées de 35h

• Multiplier ses activités pour s’habituer

• Rainbow Calendar Permet de voir en un code couleur les différents activités.

• l’asynchrone

Ane en a fait un très bon sketchnote.

https://twitter.com/ane_naiz/status/1621199493118009345

Vanilla js - Web Platform

La web platform (HTML, CSS, Javascript) fournissent un standard dont l’apprentissage servira une vie.

Parmi la web platform, se trouve les web components qui permettent de créer ses propres balises. Cette spec a bientôt 10 ans et sert encore.

Playwright » Tests end to end

The web platform is back.

WebPaaS - Déploiement d’applications sur le cloud

Marine Gandy a fait une démonstration du déploiement d’une application Drupal sur le WebPaas d’OVHCloud.

On peut gérer une multitude de services grâce à une gestion complétement externalisée, ça donne envie!

Code promo pour tester: vtt23webpaas

Dis c’est quoi ton setup ?

Fleet : IDE alternatif Finicky : App qui permet de définir par URL quel browser on choisit pour l’ouvrir. Brave: Navigateur permettant de gérer plusieurs profils selon l’utilisation (pro, perso…) Raycast: Déjà testé et approuvé, c’est un Spotlight sous Mac mais en bien mieux ! Kopia pour faire des backups.

Terminal OhMyZSH fournit des plugins plutôt cools :

• Zsh syntax highlighting
• Zsh autosuggestions
• Starship pour changer le thème

Tmux - tmuxinator

• Nvm gestion de node. Jenv.
• Upterm pour partager un terminal via ssh. Pour accéder à des serveurs. Ou tmate
• Github cli.
• Httpie au lieu de curl
• Bat au lieu de cat
• Tldr au lieu de man (sympa et coloré)
• O au lieu de open.
• GTI pour la blagounette quand tu mistype git.
• dotfiles. Repo got qui contient ta config de terminal. Y a un script dans la racine.

@v_maerten @cedric_gatay

Les replays des conférences seront bientôt disponibles. Encore merci OVHCloud !

J’en profite pour souhaiter une douce année 2023 à celles et ceux qui liront cet article: que cette année vous apporte ce que 2022 ne vous a pas donné !

Au menu ce mois-ci, un peu de front et des utilitaires pour BDD.

Extension navigateur

Chrome fournit une documentation très complète sur comment créer une extension pour Chrome.

Elle débute ici: https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/

Intégration CSS

Ces quelques jeux permettent d’appréhender le système des flexbox de manière ludique !

• FlexboxZombies
• FlexboxFroggy

Le site FrontendMentor fournit des maquettes en libre accès et permet de s’entraîner à l’intégration. Il y a ensuite un système de reviews où des mentors commentent le code soumis !

Pour revoir les notions de positionnement en CSS, je trouve cet article hyper complet ! (en anglais)

Base de données

Ca fait plusieurs mois que je cherche une alternative à MySQL Workbench que je trouve un peu lent et pas très agréable à l’utilisation. Je ne sais plus qui m’a parlé de MyCli mais c’est un utilitaire qui permet d’explorer des bases de données depuis son terminal. Je suis particulièrement fan de l’autosuggestion parce que tmtc 🦥 …

SupaBase est une alternative open-source à Firebase. Si vous souhaitez héberger une base de données Postgres gratuitement à des fins de test, ça peut s’avérer utile !

A bientôt pour une nouvelle veille :)

J’ai découvert une extension pour navigateur bien sympa pour avoir un petit feed d’articles à chaque ouverture d’onglets: https://daily.dev/

Google a sorti une série de cours pour l’apprentissage de kubernetes: https://learnkubernetes.withgoogle.com/kubernetes-essentials-series

Débugger depuis un device Android

Je le fais depuis mon Pixel 3A en passant juste par Chrome, c’est un bonheur: https://developer.chrome.com/docs/devtools/remote-debugging/

https://stackoverflow.com/a/58834623/1704966

Vous pouvez avoir besoin de jouer sur le forwarding de ports pour que votre environnement local soit bien accessible.

Docker

Utilitaire pour voir en un coup d’oeil les différents containers Docker qui tournent sur la machine (thx Jules!)

https://github.com/jesseduffield/lazydocker

Vue

Passage de propriétés d’un petit-fils à son grand-parent : https://forum.vuejs.org/t/how-do-i-pass-an-event-to-two-parents-up/111901/4 Accéder à l’instance racine: https://fr.vuejs.org/v2/guide/components-edge-cases.html#Acceder-a-l%E2%80%99instance-racine Reacting to params changes: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

Vue X

https://vuex.vuejs.org/api/#subscribe

• Difference entre les formatters / linters

Nouveautés PHP 8.0 ⏬

Nullsafe operator

// PHP7
$address = $user->getAddress();
$country = $address ? $address->getCountry() : null;

// PHP8
$country = $user->getAddress()?->getCountry();

Manipulation de chaînes de caractères

// PHP7
$contains = strpos('Cette chaine contient pouet', 'pouet') !== false;

// PHP8
$contains = str_contains('blabla', 'bla');
$debut = str_starts_with('caillou chou pou', 'cai');
$fin = str_ends_with('caillou chou pou', 'pou');

Constructeurs

// PHP7
class User {
  public string $email;

  public function __construct(string $email) {
    $this->email = $email;
  }
}

// PHP8
class User {
  public function __construct(private string $email) {
    $this->email = $email;
  }
}

Arguments nommés

// PHP7
function foo(int $a, ?int $b = null, ?string $c = null, ?int $d = null) {

}

foo(2, null, null, 40);


// PHP8 - Evite de mettre des null pour rien, on met juste les paramètres obligatoires selon la signature de la fonction
foo(a:2, d: 40);

Typage d’arguments

Possible aussi sur le typage de la valeur de retour

// PHP8
public function bar(array|string $bla) : int | float {

}

Virgule finale

// PHP7
function foo(int $a, string $b) {
}

// PHP8 - Pouvoir ajouter de nouveaux arguments facilement
function foo(int $a, string $b,) {
}

Elle va consommer différentes API dans le but de tout féderer dans un tableau de suivi, pratique à consulter pour l’équipe coorganisatrice.

L’architecture de l’application est plutôt simple.

Création de la fonction Netlify

Il est possible d’héberger une fonction. On exploite une technologie Serverless: on ne sait pas du tout dans quel contexte cette fonction va s’exécuter, ni les caractérstiques du serveur qui l’héberge.

Création du cronjob avec Github Actions

• Il est possible de créer simplement un workflow via l’interface de Github.

name: refresh-stats
on:
  schedule:
    - cron: '*/15 * * * *'
jobs:
  cron:
    runs-on: ubuntu-latest
    steps:
      - name: Refresh members count
        run: |
          curl --request GET \
          --url 'https://meetup-watchtower.netlify.app/.netlify/functions/members_count'          

• Il y a possibilité de définir des variables d’environnements qui seront exploitables par les workflows Github.

Troubleshooting

Il faut exécuter vercel dev à la racine du projet

 > node_modules/mongodb/lib/encrypter.js:15:40: error: Could not resolve "mongodb-client-encryption" (mark it as external to exclude it from the bundle)
    15 │ const mongodbClientEncryption = require('mongodb-client-encryption');
       ╵                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~

J’ai eu l’erreur suivante après avoir installé Mongodb, lancé le client.

Variables d’environnement

• En local, créer un simple fichier .env
• Pendant le build, créer les variables d’environnement via l’interface de Netlify.

HTML

https://twitter.com/everestpipkin/status/1381053241543245825

CSS

• On ne peut pas accéder à l’élément parent en CSS. Cascading Stylesheet for a reason …

Tools

• On peut rejouer des requêtes XHR via l’onglet “Networks” sur Chrome (et probablement d’autres navigateurs)
• On peut prettifier une requête SQL sur MySQL Workbench en cliquant sur le petit pinceau.

Il est possible d’empê

Sur les Internets

Tu es développeuse mais tu passes beaucoup de temps sur des choses pas liées au code: onboarding des nouveaux, planification de la roadmap et autres réunions qui t’éloignent de ton terminal? Cette lecture te parlera sûrement ! Merci à Morgane pour le partage de cet article “Being Glue” qui m’aura fait prendre conscience de beaucoup de choses sur mes envies professionnelles.

Les facteurs clés pour garantir une bonne qualité logicielle ne sont pas ceux que vous pensez. Spoiler alert: ça ne touche pas qu’à la manière dont on refactore notre code. Lecture ici.

Je prends beaucoup de plaisir à lire les newsletters de Women on Rails et Doctolib.

À travers cet article, je vais répondre aux questions que j’ai le plus souvent entendues et donner les bases minimales de ce merveilleux outil qu’est Git.

ℹ️ Disclaimer: J’utilise essentiellement Git par ligne de commande. Il existe aussi des interfaces (notamment Github Desktop, Sourcetree) qui font la même chose.

C’est quoi Git ?

Git est un gestionnaire de version. Il représente votre projet logiciel comme un arbre. Votre projet logiciel pousse et évolue comme un arbre.

Grâce à Git, vous pourrez :

• Identifier des versions précises de votre projet
• Collaborer à plusieurs sur un projet
• Restaurer des versions précédentes de votre projet
• Et bien plus encore !

Rares sont les équipes qui n’utilisent pas Git (ou un autre gestionnaire de version). C’est pourquoi j’ai souhaité démystifier à travers cet article les fonctionnalités principales à connaître sur Git.

Récupérer son projet

Soit on se trouve dans un cas de figure où on doit initialiser son projet. Il suffit de se placer à la racine du répertoire que l’on souhaite versionner et taper la commande suivante :

git init

Soit on récupère un projet existant.

git clone url-du-projet

Avec cette commande, vous pourrez juste récupérer le projet pas forcément y contribuer. Il faudra vous assurer d’avoir été ajouté en collaborateur par le gestionnaire du projet.

Les branches

Une branche est l’équivalent d’une “version” de l’application qu’on est sur le point de créer.

git checkout -b nom-de-ma-branche

Les noms de branche suivent généralement une nomenclature. On démarre généralement :

type-de-branche/numéro-ticket-feature

• feature/PRP-101-add-button
• fix/PRP-202-remove-bug
• hotfix/PP-394-everything-down

Cela va dépendre de l’équipe projet que vous intégrez et des normes que vous décidez de vous imposer 😄

La branche main | master représente la version la plus stabilisée du projet, c’est la branche principale. Toutes les branches que vous créerez ont vocation à être “mergées” avec master.

“Merger une branche” avec master signifie déporter les modifications qui ont été faites sur la branche dans la branche principale du projet.

Cycle de développement

Quand on code, on va éditer des fichiers. Git détectera les modifications faites aux fichiers. Il est possible de visualiser les modifications courantes grâce à la commande

git status

Une fois notre développement prêt, on va pouvoir commit. Un commit est une “capture” de votre application à un instant donné.

Il va falloir ajouter les fichiers à son commit puis commiter.

git add fichier
git commit -m "message de commit"

💡 Il arrive parfois que des fichiers se trouvent dans notre arbre de modifications. J’évite soigneusement le git add . pour mieux maîtriser ce que j’envoie dans mon commit !

Il est recommandé de mettre un message le plus clair possible. Chaque équipe projet a ses habitudes mais nombreuses sont celles qui utilisent la convention de nommage Conventional Commits

Il m’arrive aussi de mettre des emojis dans mes messages de commit sur mes projets personnels.

Les relectures de code

Les Pull Request (ou Merge Request) permettent aux autres développeurs du projet de contribuer. Selon l’outil que vous utilisez (Github, Gitlab, Bitbucket…), l’ouverture d’une Pull Request sera différente mais l’objectif est le même : soumettre votre code à vos pairs afin qu’ils vous donnent des feedbacks.

Une bonne PR doit contenir :

• L’objectif de la modification en quelques lignes dans le titre de la PR
• L’issue liée: ça peut être une issue Github, un ticket Trello bref, ce qui peut aider votre reviewer à comprendre le contexte dans lequel le code que vous soumettez est nécessaire.
• Les éventuels points d’attention à apporter via des commentaires au fil de votre PR.

Pour faciliter les relectures de code, Ségolène de la communauté Women on Rails a écrit un brillant article.

Merge vs Rebase

Une fois votre branche prête et approuvée par la team, vous avez deux options: merge ou rebase

Les deux commandes intégreront vos modifications dans la branche que vous souhaitez.

Une des différences majeures est quegit merge va préserver l’historique de vos commits à la différence de git rebase qui va les condenser en un commit.

git merge va créer un commit de merge lors du merge de deux branches, permettant ainsi de mieux identifier quand les branches ont été regroupées.

Les tags

Les tags sont rattachés à des commits. Ils sont utilisés pour “identifier” une version précise de l’application.

Dans un environnement d’intégration continue, on peut soit écouter les derniers commits sur master ou les derniers tags crées. Encore une fois, Git propose des fonctionnalités diverses mais chaque équipe choisit ses rituels de mise en production !

La différence entre Git et Github ?

Prenons un exemple.

• Vous créez votre branche sur votre ordinateur, vous commitez sur la branche sans la pousser
• Vous vous faites un petit goûter gourmand pour vous récompenser.
• Un cambrioleur vole votre ordi en passant par la fenêtre de votre bureau.
• Votre travail est perdu.

Github est donc une sorte d’hébergeur en ligne de projets Git, afin qu’ils ne soient jamais perdus. Leur responsabilité est d’héberger vos projets Git et de s’assurer ainsi qu’ils ne soient jamais perdus 🤞

À noter qu’il existe d’autres solutions conccurentes à Github : Gitlab, Bitbucket…

J’espère que cet article aura pû vous aider à éclaircir quelques points obscurs concernant Git !

Y a-t-il d’autres questions que vous vous posez sur Git ? Je serais ravie d’y répondre en commentaires !

Vercel (anciennement Zeit) est une plateforme JAMStack qui permet de déployer facilement des applications à partir d’un repository Git distant. Le service fourni est similaire à celui de Netlify, l’objectif est d’améliorer l’expérience de développement et faciliter les déploiements.

On peut héberger des applications (un blog Gatsby par exemple!) mais aussi des fonctions Serverless. Une fonction Serverless est une fonction qui est exécutée à la demande (lors de la réception d’une requête HTTP par exemple) par un service de Cloud tiers (AWS Lambda, Cloud Functions…) : on ne paie donc pas un nombre de serveurs mais plutôt à l’usage des fonctions.

J’ai voulu tester en créant une API très simple qui retourne une citation aléatoire de Jul (jugez moi).

Ces citations sont stockées dans une collection sur une base MongoDB.

Pré-requis

Avant toute chose, j’ai installé vercel-cli, qui permet de gérer les déploiements mais aussi de démarrer un environnement local similaire à la production, ce qui est bien pratique pour éviter les mauvaises surprises

Création d’une base de données

Il est possible de créer une petite base MongoDB gratuite sur le cloud, parfaite pour une sandbox. Il est possible de créer des secrets sur Vercel très facilement à l’aide de la commande

vercel secrets add "NOM_DU_SECRET VALEUR"

On oublie pas les quotes !

Création de l’application

Vercel impose une structure dans la manière de déclarer sa fonction serverless. Il faut que la fonction se trouve dans un dossier api.

Il suffit de démarrer son environnement local à l’aide de la commande vercel dev.

J’ai choisi d’utiliser Node.js pour mon API mais il est possible d’utiliser Go, Python ou Ruby également. La documentation est exhaustive sur la manière de démarrer un projet dans différentes technos.

Bilan

Le setup de l’environnement local est très agréable. Il vient même avec un hot-reload, l’expérience de développement est painless. Les commandes de Vercel ressemblaient à celles de Kubernetes ce qui m’a moins mêlée.

Attention si vous utilisez Docker en parallèle, il est possible que Vercel conflicte avec des ports déjà en usage. Pensez à stopper les applications (je n’ai pas trouvé de moyen de faire démarrer Vercel sur un autre port).

J’aurais du mal à utiliser un service de ce type sur un projet réel. J’ai l’impression que ça s’adapte plutôt bien pour des mini-projets de test ou des proof of concepts mais que les prix peuvent rapidement s’envoler dans un contexte de production normal.

En tout cas, je recommande l’outil pour tous ceux qui souhaiteraient construire un portfolio sur leurs projets open source !

Ressources

• https://vercel.com/guides/deploying-a-mongodb-powered-api-with-node-and-vercel
• https://www.lambrospetrou.com/articles/battle-of-jamstack-platforms-netlify-vercel-aws/
• https://jamstack.org/

Je déclare officiellement mon amour pour la simplicité. Et ce, dans tous les axes de ma vie.

Dans mon code

J’aime avoir un code simple, compréhensible par n’importe quelle personne qui le lirait, que ce soit un vieux roublard des Internets ou encore un poulain novice. J’aime me relire six mois plus tard et comprendre la logique de Laila du passé.

Le bonheur d’un code simple, c’est qu’il est savoureux à lire et à maintenir. Le code simple rend tout le monde heureux: la machine qui l’interprète / le compile mais aussi les humains qui le lisent.

Dans mes mots

J’aime la simplicité dans mes articles: elle les rend plus digestes.

La simplicité d’un article le rend accessible à tou·te·s. N’importe qui peut s’y reconnaître et y tirer une graine à semer dans son esprit.

Dans mes interactions

J’aime interagir avec une personne et qu’elle comprenne tous les mots que j’emploie. Il n’y a pas de non-dits, de mauvaises interprétations.

J’aime quand on me parle avec des mots simples.

J’aime la simplicité dans l’administration. J’aime quand il ne manque aucun papier, quand la liste est claire et qu’on ne me demande pas plus que nécessaire. J’aime la simplicité en politique : quand un politicien parle avec des mots simples, de problématiques qui concernent son peuple. Je commence à déborder …

Pourquoi se passe-t-on de la simplicité aujourd’hui ? Pourquoi vouer un culte à la complexité alors que la simplicité peut nous faciliter l’existence ?

J’ai l’impression que c’est lié à l’effort à fournir pour la simplification. Derrière la simplicité se cache des efforts invisibles de clarification : comment optimiser ma parole pour qu’elle soit bien comprise de mon interlocuteur ?

Je m’engage désormais à faire de mon mieux pour garder les choses simples. Que ce soit dans mon code mais aussi dans ma vie.

Outils

Visual Studio Code a un ZenMode : c’est hyper agréable de naviguer, on peut passer d’un fichier ouvert à l’autre avec le raccourci Ctrl + Tab.

Liens chouettes

En cherchant les différences entre les objets XMLHttpRequest et fetch, je suis tombée sur ce blog très cool qui poste quasi quotidiennement des articles à propos de Javascript.

https://gomakethings.com/why-i-still-use-xhr-instead-of-the-fetch-api/

J’ai découvert cette API qui retourne des propriétés de plantes. Je l’ai trouvée via le repository d’APIs publiques utilisables pour des projets personnels !

https://trefle.io/api/plants?q=rosemary

Mes moments de procrastination sur Twitter m’ont fait découvrir le super portfolio de Bruno Simon: https://bruno-simon.com/ Mention spéciale aux Easter eggs.

CSS

Il est possible de rendre un sélecteur CSS case insensitive.

CSS Tip 🔥️ There's a special operator you can use in CSS Attribute Selectors

The operator is `i`, here's how it works:

// Case insensitive match
a[title="home" i] {
Will match Home or even HOME
}

// Case sensitive match
a[title="home"] {
Will only match home
}#css pic.twitter.com/UIJTGTUczt

— Umar Hansa (@umaar) June 23, 2020

Javascript

Il est possible d’observer le changement de taille d’un élément en Javascript via l’API ResizeObserver.

ResizeObserver lets us observe changes to the layout size of elements: https://t.co/ZIswQyNemT It's in the latest Safari!

Now in *all* modern browsers, we can efficiently design components responsive to their container vs. just the viewport. pic.twitter.com/TNK9VDjSAZ

— Addy Osmani (@addyosmani) April 11, 2020

Il est possible de grouper les messages en console via la fonction console.group.

DevTools Tip: https://t.co/mUe3Mc48hz() is great for grouping console messages to make them more readable 📖 pic.twitter.com/xem3kfkvn8

— Addy Osmani (@addyosmani) November 3, 2019

Si vous ne suivez pas Addy Osmani, je vous le recommande vivement. Ses contenus sont toujours pertinents et applicables.

J’ai découvert qu’on pouvait rendre un objet immutable grâce à la fonction Object.freeze.

DevOps

J’ai appris à supprimer les images Docker qui ne sont pas associées à un container.

docker rmi $(docker images --filter "dangling=true" -q --no-trunc)

J’ai aussi découvert comment lister les fichiers existants sur un volume Docker via busybox.

https://stackoverflow.com/questions/46866933/is-there-a-way-to-list-files-inside-a-docker-volume

Fun

Le compte Twitter CuriositesJuridiques pour ses extraits … insolites.

N'est pas un accident de travail la blessure infligée pendant une bagarre survenue à la cantine car une fonctionnaire voulait absolument récupérer le dessert de la cantine déjà mangé par un collègue.

Cour administrative d'appel de Versailles, 15 juin 2020, n°18VE02936

— Curiosités Juridiques (@CJuridiques) July 1, 2020

C’est tout pour aujourd’hui !

N’hésitez pas à faire part de vos découvertes dans les commentaires :)

Le confinement m’a fait découvrir l’association Descodeuses qui propose des formations à des femmes pour devenir développeuse web. Je suis encore aujourd’hui mentor pour cette association.

Dans le cadre de cette expérience de mentorat, une des apprenantes m’a demandé comment gérer l’intégration d’un feed Instagram sur une application. Je lui ai donc proposé une session de live-coding où elle me verrait faire.

Voici quelques conseils si vous souhaitez préparer un livecoding.

Vérifier son installation technique

Avoir une bonne connexion Internet est évidemment indispensable pour ce genre d’exercices. Un micro peut s’avérer tout aussi utile pour éviter les bruits de fond parasites de ton voisin qui retape sa maison pendant le confinement (true story)

Déterminer son sujet

L’exercice de live-coding est une “improvisation” mais il y a un équilibre à tenir: il faut préparer un minimum son sujet avant la session mais pas trop pour que l’audience puisse suivre le processus de développement.

J’aime voir ça comme une recette de cuisine: quand on regarde une vidéo explicative, la personne ne nous emmène pas faire les courses avec elle et a déjà les ingrédients à disposition !

Préparez donc votre “liste d’ingrédients” avant la session de live-coding. Dans mon cas, je me suis assurée d’avoir:

• Lu la doc de l’API Instagram avec laquelle j’allais interagir
• Crée mon application
• Une page HTML vierge pour pouvoir y ajouter mon code Javascript

N’allez pas trop loin dans la préparation: il faut que votre audience puisse voir les éventuelles erreurs dans votre processus et comprendre comment est-ce que vous résolvez les problèmes.

Verbaliser son processus de débugage

Ce qui est particulièrement intéressant dans l’exercice du live coding, c’est qu’un développeur montre son processus de réflexion à une autre personne.

Il faut penser à dire tout haut ce que vous pensez et à détailler le plus possible ce qu’on fait.

Comme “on ne voit pas” son audience, il est facile de la perdre. Il est important de :

• Clarifier au début de la session qu’il faut pas hésiter à interrompre à tout moment
• Demander régulièrement à l’audience si elle arrive bien à suivre (quitte à reprendre les étapes à partir du moment où elle a décroché)

Ça serait dommage que l’audience finisse comme ça ⬇️

Fixer le scope du live coding

Au fur et à mesure des questions de l’audience, il est facile d’être tenté de retravailler son code en live pour répondre aux questions. Il vaut mieux éviter de se disperser: vous risquez de perdre l’attention de votre audience.

Proposez plutôt une autre session durant laquelle vous répondrez à la nouvelle question posée.

Avez-vous déjà tenté l’expérience du live coding ? Si oui, qu’en avez-vous pensé ?

Ce blog en a connu des vertes et des pas mûres en 8 ans!

• Simple fichier HTML hébergé sur un serveur Free 👵🏼
• Passage sur Wordpress hébergé chez 1&1
• Migration vers Jekyll hébergé sur Github Pages pour jouer avec Ruby
• Migration vers Gatsby hébergé sur Github Pages

Aujourd’hui, ce blog est propulsé par Hugo et hébergé chez Netlify. Et évidemment, j’ai écrit très peu d’articles sur ce temps là.

Inspirée des trouvailles de madmoiZelle, j’ai décidé d’écrire un article par mois listant mes trouvailles de dev sur les Internets (avec peut-être quelques blagounettes au passage).

Pourquoi ?

1. C’est plus pratique de fouiller sur mon blog pour retrouver des bons liens que de fouiller sur mon fil Twitter x)
2. Ca me motive à écrire

TIL au passage est un acronyme pour Things I’ve Learned.

C’est parti !

Front

Le confinement m’a fait rejoindre l’association Descodeuses en tant que mentor. Cette activité m’a amené à faire beaucoup de front ce mois-ci.

L’API IntersectionObserver permet de détecter la collision de deux éléments du DOM. Ses performances sont meilleures que l’écoute des événéments scroll/resize auxquels j’aurais pû penser pour ce problème jusqu’à maintenant. Voici un petit codepen d’exemple ici https://codepen.io/leiluspocus/pen/oNjExNg.

Cette démo avec la grande Rachelle McAndrews m’a bien aidé à préparer mon live coding sur les Grids CSS avec les apprenantes

Il est possible de transformer un document HTML en un beau document LaTeX en utilisant cette bibliothèque: https://latex.now.sh/

Il existe des frameworks CSS sans classe comme (Water) qui redéfinissent simplement le style des balises HTML. Pratique pour un MVP.

David Walsh m’a fait découvrir l’interface AbortController qui permet d’annuler des requêtes fetch en Javascript.

Hugo

Comme je disais, j’ai refait pour la n-ième fois le blog et je suis conquise par Hugo. Les p’tits plus qui me font kiffer:

• La rapidité de l’environnement local
• Les shortcodes utilisables dans les markdown (pour intégrer un tweet, une vidéo Youtube)
• La facilité d’overrider le thème installé

DevTools

J’ai l’impression de découvrir régulièrement de chouettes features sur les DevTools de Chrome.

• On peut copier du CSS à la volée.

  #DevTools Tip ⚡️ Copy and extract all the CSS for an element on the page
  
  Right click element > Copy > Copy Styles
  
  Useful as styles can often be scattered across many selectors! ⭐️ pic.twitter.com/YHmdxoj9fh

  — Umar Hansa (@umaar) May 21, 2020

• On peut voir les dépendances entre les requêtes sur l’onglet Network

  Tip: In @ChromeDevTools, hold shift while hovering over a request and it will highlight the initiator in green and dependencies in red. pic.twitter.com/Xd9l2BCoC9

  — Addy Osmani (@addyosmani) May 13, 2020

Communauté

BenjaminCode a sorti une vidéo sur le niveau minimum requis pour avoir une première mission en tant que dev frontend. C’est une question qui nous est régulièrement posée par des juniors chez Ladies of Code, ses conseils sont très pertinents et applicables concrètement !

Paola m’a fait découvrir Streamyard, une solution pour gérer facilement un stream depuis… un navigateur web. Vous pouvez voir le résultat sur un meetup Ladies of Code.

Autres

• Yoga With Adrienne Est-il encore nécessaire de présenter cette chaîne Youtube en 2020 ? J’ai suivi le challenge “Home” sur 30 jours, une routine que j’espère maintenir le plus longtemps possible post confinement.

• FlightRadar24 C’est un service qui trace le trafic aérien en temps réel.

Meanwhile at London Heathrow Airport... pic.twitter.com/yNFtksYEJg

— Flightradar24 (@flightradar24) May 29, 2020

C’est tout pour ce beau mois de mai !

Merci de m’avoir lue jusqu’ici, n’hésite pas à me partager tes découvertes dans les commentaires ci-dessous 👋

J’ai eu la chance d’assister à dotJS cette année grâce à des places qui ont été offertes par les dotConferences à la communauté Ladies of Code.

@Jawache a pris la parole sur notre impact environnemental en tant que développeur. L’électricité est responsable à 30% des émissions de CO2. On ne peut se permettre d’en gaspiller. Google Cloud serait un cloud Carbone neutral (ça m’étonne un peu). Les servers produisent du carbone, on pollue moins avec le serverless.

Le serverless présente aussi des avantages économiques

• Autoscaling
• On paie selon la durée et la consommation mémoire des fonctions que l’on exécute.

Nitr.ooo fireship.io = gcp functions nest.js

Si le sujet vous intéresse, consulter climateaction.tech pour s’impliquer plus.

@devdevcharlie nous a montré les possibilités de recognition de sounds en exploitant la WebAudio API en javascript et le Machine Learning (avec TensorFlow). La WebAudio API récupère les données du microphone.

Sa démo présente un spectrogramme (la photo d’un son). Plus le son est fort, plus la couleur sur l’amplitude du spectrogramme est lumineuse.

Gather data from WEBAUDIOAPI and transforme it for tensorflow. Multidimensionnel array with labels for pattern recognition. La démo est accessible ici, et c’est plutôt impressionnant : acoustic-ml.netlify.com

BertBelder nous a présenté Deno, un runtime for JavaScript and Typesvript (webassembly) qui vise à résoudre les soucis que Node pose. Il utilise V8, Rust, Tokio (event.loop), TypeScript.

Node a un système de modules complexes, exposé aux failles et il existe un tas de tooling parallèle là où Deno a une API web et un tooling intégré.

Quelques talks qui m’ont été recommandés en discutant durant les breaks: Universe in a single arrow et Mother of all demos (la première démonstration d’une souris, d’un clavier pour les amateurs d’images d’archive).

@stefanjudis a donné un lightning talk super sur les expressions régulières. Les slides sont claires, je vous recommande de les checker, une bonne piqûre de rappel pour les humains nuls en regexp comme moi ^_^

?: Omit captions group
?<rest> capture group
\p{Emoji} capture emoji 

Vlad Filippov a donné un talk sur WebAssembly (wasm). C’est un nouveau language bas niveau, similaire à l’assembleur, conçu pour compléter des applications web javascript. On peut charger des modules WebAssembly dans des applications Javascript : certaines bibliothèques l’utilisent déjà comme pica.

L’objectif est d’améliorer les performances. Attention cependant aux cas d’application: il faut toujours benchmarker les gains et être vigilant sur la taille du module WASP.

WebAssembly.studio

Vladimir Agafonkin (créateur de Leaflet) a donné un talk sur l’optimisation d’algorithmes.

Il a présenté le cas d’une bibliothèque Delaunay qui a subi plusieurs optimisations sur des modules npm. ( delaunay-fast // faster-delaunay // delaunator étant le plus rapide)

Étapes pour optimiser un algorithme:

• Trouver le bottleneck (parties les plus longues) grâce à des outils de profiling (on sous-utilise celui de Chrome).
• Le code lent est du code pas nécessaire
• Être vigilant sur les complexités, faire varier le code selon les tailles d’input.

O(n) loop 
O(n2) o(n3) boucles imbriquées

Attention aux fonctions natives Javascript (Array.indexOf, etc.) qui ont aussi leur propre complexité (assez grosse).

accidentallyquadratic.tumblr.com

Memory complexity _ allocate Much memory than we need Ces fonctions : slice concat Map filter split utilisent plus de mémoire que nécessaire.

O.log(n) best complexity. Binary search.

Astuce d’optimisation: Trier les données en entrer pour processer les données plus rapidement. En faire plus au début (tri) pour en faire moins après.

HashTable -> Array peut faire gagner en performance.

1. Learn how things work under the wood ! Surtout dans les fonctions JS par défaut qu’on a l’habitude d’utiliser.
2. Tout peut être amélioré !

James Long, créateur de Prettier, a donné un talk sur la synchronisation des données sur des applications distribuées.

Il y a parlé de la complexité de la synchronisation d’applications hors-ligne et notamment la garance de la consistance des données.

Un point critique est l’ordre de réception des données: utiliser un timestamp pour réordonner les datas (Vector clock, Hybrid logical clock). Un timestamp existe par device et est généré / assigné à un changement émis.

Il faut trouver des solutions les plus simples possible pour garantir la fiabilité dans un système distribué.

Les slides sont disponibles par ici.

@nodebotanist nous a joué un son de guitare connecté à une application Node qui changeait la couleur d’une LED branchée à sa guitare. Le tout réalisé avec des bibliothèques npm suivantes: midi tonal color ws (websocket).

@nodebotanist a aussi mis au défit les recruteurs présents de recruter quelqu’un de différent d’eux.

@maggiepint a présenté la nouvelle librairie Temporal qui vise à résoudre les soucis actuels de Date en Javascript. (Months index from 0, Mutability, Timezone gaps, No date only représentation).

Daniel Ehrenberg a ensuite présenté TC39, une communauté de développeurs qui améliorent Javascript et comment nous pouvons les aider.

tc39.es

# is the new _ for strong encapsulation.

J’ai passé deux jours très enrichissants et plein de découvertes / belles rencontres. J’espère pouvoir renouveler l’expérience l’an prochain ! :)

J’ai eu la chance d’assister à dotJS cette année grâce à des places qui ont été offertes par les dotConferences à la communauté Ladies of Code.

En discutant avec quelques personnes, j’y ai appris l’existence d’un framework Node.js, Nest.js qui permettrait d’avoir une application plus structurée qu’une app Node classique qui n’utiliserait qu’Express pour le routing.

Eduardo San Martin Morote a donné un talk plutôt sympa intitulé Modern Front-end Routing. Il y a décortiqué l’API History en évoquant la complexité entre les différents navigateurs (UrlSearchParams notamment mal supporté par IE et Safari). Les navigateurs encodent les caractères spéciaux dans une URL différement et leur récupération via les API disponibles en JS en est affectée. L’encodage des URLs est donc recommandé (même si ce n’est pas “joli”).

EncodeURI //path and hash
DecodeURI //Path and hash
EncodeURIComponent //Query keys only

Ses slides sont disponibles ici.

S’en est suivi un talk “Complexity in Simplicity” chouette donné par Sara Viera où j’y ai appris des fun-facts tels que:

• les placeholders ne sont pas traduits automatiquement par le navigateur
• les placeholders ne sont pas lu par les technologies VoiceOver, d’où l’utilité des labels
• On peut récupérer le language du navigateur via un objet navigator.language

Ses slides sont très claires et par ici. Une phrase choc de ce talk :

Your pretty code won’t make your users come back

Côté lightning talks, il y a eu:

• une présentation dense mais qui donnait envie de Breeze un ORM pour applications Javascript.
• une présentation de Svelte.js comparé à React et Vue.
• une bibliothèque de test côté front, DOM Testing Library

Ce dernier talk était particulièrement intéressant et m’a donné envie d’y jeter un oeil. Il y a possibilité de simuler le click sur un component en appelant FireEvent.click(). Adria Fontcuberta donnait également le conseil d’écrire des tests qui ressemblent le plus possible à ton application pour éviter les Faux positifs.

On a eu un talk de Jana Beck sur la visualisation de données côté browser en utilisant Web Workers et Offscreen canvas.

Quelqu’un (oui, je n’ai pas noté son nom -_-’) a présenté le compilateur javascript Stencil. Le truc plutôt cool: il génère un graphe de dépendances, les bundles sont optimisés selon les liens entre les components, ce qui optimise les appels HTTP.

Igor Minar a expliqué comment ils géraient les montées de version d’Angular. La mise en place de dépréciations en amont a aidé les utilisateurs à migrer plus facilement. Il conseille d’allouer un vrai budget pour les updates réguliers et d’automatiser les updates mineurs en utilisant des outils comme Dependabot. Il a montré un retour d’expérience de KLM qui prend de moins en moins de temps à migrer son application Angular (30jours sur les premières versions d’Angular contre 1 journée sur les versions récentes).

Il y a eu une présentation trop cool de qui a montré une application full serverless. Il a utilisé Evently (static site generator), FaunaDB en base de données et les fonctions Netlify, webtask.io : register crons online. Sa présentation est ici: https://findthat.at/servered

Sur la dernière présentation, Evan You a présenté un comparatif de la construction de components entre Svelte, Vue et React, faisant un parallèle entre les hooks (React) et Vue Composition API.

C’est ce que j’ai retenu de cette première journée ! Plein d’enseignements, j’ai bien apprécié aussi le jour 2, dont le compte rendu arrive bientôt également :)

J’ai eu la chance d’assister à dotCSS cette année grâce à des places qui ont été offertes par les dotConferences à la communauté Ladies of Code.

La conférence a commencé très fort avec une conférence de Sarah Dayan, ingénieure chez Algolia. Elle y a introduit le concept d’utility-first CSS CSS est plus efficace lorsqu’on utilise comme une bibliothèque en raison des dépendances entre le HTML et le CSS. Un composant ne sera pas réutilisable dans sa globalité, autant factoriser de plus petits éléments (typographie similaire, ou icône). Le CSS est plus petit à parser par le navigateur puisqu’à un seul niveau de profondeur, plus rapide à resolve. Elle y fait une démonstration d’un outil qu’elle a crée pour la factorisation des classes redondantes entre éléments du DOM grâce à Brotli (algorithme de compression). Le benchmark de performance est impressionnant. Sa présentation est accessible ici.

S’en est suivi des présentations autour de l’accessibilité et l’importance de réfléchir avant de défaire un comportement natif du navigateur.

:focus {
    outline: none;
}

div {
    display: contents; // pouvoir être lu par le VoiceOver
}

Ces propriétés peuvent être utiles dans un contexte d’accessibilité où l’utilisateur est contraint d’utiliser un clavier pour sa navigation ou un système de voice-over. Il est possible de créer des règles spécifiques pour les utilisateurs qui ne peuvent pas voir d’animations pour des raisons d’handicap: prefered-reduced-motion à ajouter dans une media query séparée.

Transition: all 600ms // not working on Chrome.

J’y ai appris l’existence du site http://www.testmycss.com/ pour l’analyse et l’optimisation d’un fichier CSS.

Jérémie Patonnier nous a raconté la belle histoire d’amitié entre SVG et CSS et m’a donné envie de jouer un peu plus avec ces deux là :)

@emplums a présenté PrimerComponents, une bibliothèque de components React qui implémentent le design system de Github.

Durant un lightning talk (je n’ai pas noté le nom de la personne malheuresuement), j’ai appris qu’il était possible de runner du JS dans du CSS ! 😱 (je prendrai un peu de temps pour fouiller sur Twitter et updater cet article avec son incroyable codepen!)

Jason Pamental a parlé typographie et a présenté le concept des custom properties et variables fonts. J’ai aussi découvert dans ce talk qu’il était possible de target le dark-mode en CSS encore via… une media query ! (Moi qui pensais bêtement qu’on ne pouvait mettre que des tailles de device dans ces petites choses !). Ses slides sont par ici.

Pour finir, Ires nous a plongé dans l’état actuel et futur de CSS (spoiler alert: on est déjà dans le futur!). J’y ai découvert Houdini, un set d’API qui exposent une partie de l’engine CSS. Je creuserai définitivement la doc MDN à ce sujet.

Elle nous a expliqué le concept des Features Queries en CSS sous-utilisées à son goût, qu’il vaut mieux utiliser positivement que négativement (et mettre le fallback dans le body par défaut). Elle nous a rappelé de tirer profit du rôle “cascade” de CSS, de tirer profit des préférences utilisateur pour une meilleure accessibilité (color scheme // animations // adapt data consumption preferences).

Elle nous a aussi parlé d’un futur où il faudra considérer plus de pays et des problématiques d’inclusivité plus diverses pour le web: les concepts d’internationalisation seront à prendre en compte. Un margin-left n’aura pas le même sens pour un européen habitué à lire de gauche à droite et de haut en bas que pour une personne asiatique ou arabe. Les problématiques de données seront aussi. Je vous recommande vraiment de revoir son talk qui était très agréable à écouter.

C’est tout pour moi ! C’était top, j’y retournerai définitvement l’an prochain si j’en ai l’opportunité :)

Mais qu’est-ce que je retrouve ? Des notes que j’avais prises en mars 2019 lors de la Symfony Live à Paris !

NDLR: Elles sont un peu en vrac.

Talk #1: Open Source - Renouveau de l’humanisme

• Principe anthropique = Tout est orienté pour faire apparaître la vie organique.
• Interdépendance entre chaque membre d’une communauté = ubuntu
• “Ubuntu” = I am because we are.
• Symfony Diversity Initiative
• Communauté Drupal => Clash lié à la diversité.
• L’inclusivité ne s’arrête pas à l’égalité F-H.

Talk #2 : Passion Doctrine

Derrière le Query Builder, Doctrine prépare un statement.

Doctrine construit un objet a partir de la BDD: hydratation. Changer l’hydratation pour les performances. L’hydratation en object surtout avec des objets associés est très lourde.

Changer le mode d’hydrataion

HYDRATE_SIMPLEOBJECT => warning avec getters.

Partial object.

Il faut se souvenir des champs que l’on récupère pour éviter des NPE.

Partial references

Récupérer une entité que pour son ID: $entityManager->getPartialReference

orphanRemoval => Un article est associé à un blog et ne peut exister sans blog.

Dans la mesure du possible, Doctrine propose du lazy loading : proxy ou une PersistentCollection à la place des entités jointes.

• Les proxies supportent mal la sérialisation.
• Utiliser les criteria dans le getter de l’entité.
• Utiliser les filtres

Organiser ses repositories

• Factoriser les clauses where appelées régulièrement.
• Ou faire un builder de QueryBuilder

Lifecycle callbacks

• Implémenter les Entity Listener
• On a pas besoin de persist() par défaut. Possibilité de changer ça via la trackingPolicy

Optimiser la trackingPolicy pour les perfs

• Deferred Explicit (utilise moins de ressources mais attention aux cascades)
  • Les annotations ne suffisent pas.
• Notify : le plus optimisé mais lourd à mettre en place
• On ne peut pas faire de flush depuis un listener Doctrine

Mappings

Embeddable

Annotation \Embeddable pour embarquer directement une classe dans une entité. DQL on peut directement faire un join dans la classe MappedSuperclass : déconseillé. Si pas d’héritage, utiliser les Traits.

Caches

• **metadata_cache_driver (cache annotations) + query_cache_driver (cache DQL) à activer en prod ** !
• result_cache_driver: apcu (optionnel et manuel)
• second=level cache

steevanb/DoctrineStatsBundle => bundle sympa pour débugguer + optimiser les performances de page.

Slides à venir sur le twitter de @romaricdrigon Présentation hyper complète, on adore.

Talk #3 : API Platform

Twitter @gheb_dev

• Annotation @APIResource : CRUD complet disponible + doc swagger.
• mercure=true / messenger=true option dans l’annotation APIResource
  • plutôt que de l’envoyer en BDD, APIPlatform va intercepter la ressource et l’envoyer sur AMQP ou al.

Talk #4 : Symfony HTTP Client

@nicolasgrekas Package standalone. Implémente PSR-18. Utilisable même sur des projets hors Symfo.

• Faire des requêtes facilement
• Remplace GuzzleHttp\Client

Découplage du composant. Il consomme une abstraction (HTTPClientInterface). Stateless (autowired) service.

Bearer / JSON payload peut être passé dans les options de la requête (3ème arg).

Form parameters (form_params sur guzzle) peut directement être passé dans le body de la requête.

Options de $client->request

• proxy - get through an http proxy
• on_progress - afficher une progress bar / interrompre une requête
• base_uri - construire une URL absolue
• resolve - bypasser résolution DNS : empêcher d’appeler des endpoints internes
• max_redirects - désactiver ou limiter les redirections

FailSafe par défaut : si on recoit un statut code 3/4/5xx ça jette une exception (désactivable mais pas cool)

Streameable downloads sur une réponse.

Les Responses sont lazy et les requêtes sont concurrentes. $response->getStatusCode() On attend pas que la totalité de la réponse arrive pour retourner la réponse. On attend juste les headers.

Sur les chunks, il existe une méthode isLast pour détecter que c’est le dernier du stream.

$response->getInfo('user_data')

• Avoir des infos sur ce qui s’est passé au niveau de la réponse.
• Recopie une valeur passée au moment de la request.

379 requêtes en 0,4s (utilise curl sous HTTP2) sur l’ex de la demo.

Fait pour HTTP/2 PUSH.

Component consommateur

NativeHttpClient utilise fopen, CurlHttpClient basé sur curl.

• Beaucoup d’infos sur les temps passés dans la requête

NativeHttpClient est la plus portable. Bloquant jusqu’à ce que les réponses de header arrivent.

CurlHttpClient utilise ext-curl. Gère le multiplexing au niveau des entêtes et du body. 0 latence. La quasi totalité des options curl sont couvertes par l’abstraction à la différence de Guzzle où on peut forcer les options #notclean

Décorateurs

• MockHttpClient - Pour les tests, ne fait pas de requête
• CachingHttpClient - Headers Cache Controls gérés (cf: slides)

Talk #5: React-admin - Admin Generator d’API Platform

@francoisz marmelab/react-admin

Conseils pratiques: Comment se mettre au développement front quand on est dev Symfo ?

<HydraAdmin entrypoint="api"></HydraAdmin>

• Ejecter l’AdminBuilder et utiliser le composant natif de react-admin : Admin
  • Avoir la main sur son admin.
• Éviter les entités embeddées

Annotation @Group pour préciser les colonnes qu’on veut récupérer côté admin.

Onglet Redux sur Chrome ! (Comme Vue)

react-admin communique avec l’API au travers du data provider.

Évaluer la variable d’environnement dans l’objet window :

window.config = {
    edit: false
};
// Immutable Web Apps

Récupérer aussi les slides, y avait une alternative intéressante UI pour ouvrir un panel.

Talk #6: Rabbit MQ

Déclarer les messages persistants si on veut qu’ils restent dans la queue au redémarrage.

Par défaut, rabbitMQ cnsomme trois messages. Reject / NACK : Possibilité complémentaire: rejeter les messages dans prefecth, tout repart dans la queue. Oublier reject.

On publie un message dans un exchange (point de diffusion d’un message). La queue se binde dans l’exchange. Sans queue, pas de message.

On publie le message avec une routing key unique. Chaque queue peut s’abonner à différences keys.

• “topic” permet d’avoir des wildcards dans les binding keys auquelles s’abonner.
• “direct” routing key doit être identique à la binding key.
• “headers” message porte l’information de routing
• “fanout” on distribue tout à n’importe qui.

Dead Letter Exchange : Récupérer les messages en erreur et les envoyer sur un exchange sur lequel une queue pourra être bindée. Un TTL peut être défini pour envoyer le message en DLX.

conposer require messenger

NotifyMessageHandler qui implèmente MessageHandlerInterface. Prend un MessageBusInterface et peut envoyer un message à Rabbit.

composer require amqp-pack : possibilité de configurer un transport avec son DSN.

Talk #7 : TDD Symfo et ses amis

Slides accessibles ici: https://bit.ly/real-world-tdd

Cycle :

• Failing Test
• Make test pass
• Refactor

Codeception ?

• DTOs = Data Transfer Objects

Test-Driven Repositories

• Unit Test: ORM branché sur une base de donnée en mémoire (ex: SQLite)
• Manuellement: Branché sur MySQL

migration:diff -> compare les schémas et crée les migrations nécessaires pour mettre le schéma de la BDD à jour.

https://bit.ly/tdd-vids

Brancher Doctrine :

• config_test.yml <– Utilisé par PHPUnit

doctrine:
  dbal:
      driver: pdo_sqlite 

Mais qu’est-ce que je retrouve ? Des notes que j’avais prises en mars 2019 lors de la Symfony Live à Paris !

NDLR: Elles sont un peu en vrac.

Keynote

Symfony Mime > Swift_Mailer

• Moins d’objets à serializer
• Headers pas determines a l’avance
• intégration native avec twig, embarque l’objet email : méthode template / textTemplate / htmlTemplate à utiliser.
• Inky pour simplifier templating
• séparation envoi et création
• Symfony mailer juste pour mails transactionnels

http : body déjà construit, api: il le construit par le provider

Security.symfony.com : On peut y uploader composer.lock pour checker les failles de sécurité

Symfo / React

insights.symfony.com

• Mutations induites par changement sur l’UI.
• Mutations complexes à reproduire appliquer DEBUG.
• Dispatcher > Store > view React rerenders view when data changes » slow.
• La fonction render fabrique un arbre de composants correspondant à la représentation de la vue.

Webpack encore

Symfo / Vue.js (Les Tilleuls Coop)

Approche Rich client ==> API driven. joind.in => noter conférences. symfonycon.les-tilleuls.coop

bin/console make:entity pour générer des entités CLI

Côté server: hypermedia API / Client-side: web components JS. Recette dispo sous Symfo 4 pour API Platform. Code dispo sur Github.

BrowserKit > simuler des scénarios de navigation sur browser (PHP)

Symfony Panther => test end to end. Quelques méthodes intéressantes > attendre qu’un élément apparaisse sur la page. Rien à configurer officiellement.

Fixtures

composer req alice. Implémenter ReloadDatabaseTrait » Reload les fixtures avant chaque test. Plus besoin du script pour lancer les fixtures. (Panther vs Behat ?). Fait des screenshots aussi.

mercure.rocks > Hub maintient les connexions persistantes. (intéressant pour les notifs)

Annotation Mercure true sur API Platform pour broadcaster derrière une info au hub.

Elasticsearch + Symfo

Pas de données critiques sur Elasticsearch. Noeud : Instance d’ElasticSearch qui tourne. Création d’index dans le cluster. Elastica => Bibliothèque recommandée pour manipuler ElasticSearch.

noyaml.com yawl anchor dynamic false pour ne pas laisser elasticsearch deviner le type de la donnée à indexer

Indexer le minimum de données, juste le nécessaire à la recherche.

Accélérer indexation

Côté PHP:

• Faire des traitements par bulk
• Black fire pour tracer
• Utiliser un serializer rapide (Jane?)
• Doctrine iterate.

Côté elasticsearch:

• refresh_interval à augmenter + désactiver les replicas.
• optimiser le temps passé sur le réseau côté infra (node es qui communique avec frontal php, node communique avec es clusters)

Pertinence des résultats :

• ?explain=true pour avoir une explication du score de la recherche donné par elasticsearch.

SQL avec ElasticSearch:

POST /_sql {query: “select * from table” }

Kibana = PHPStorm d’ES.

HTTP/3 @bjacquemont

HTTP/2 = 2015 HTTP/2 = 2018

TCP Client -> Syn Serv -> Syn Ack Client -> Ack Client -> Requête

TCP Handshake => Latency.

Latence : on se heurte à des limites physiques (vitesse de la lumière). 3 important time limits in UX :

• 0.1s: instantaneous feeling limit
• 1s flow of thought limit
• 10s user attention limit

ennemi of UX.

HTTP2: Multiplexer les requêtes au sein d’une connexion HTTP

TCP + TLS (8 étapes) + TLS => 90% du temps de latence est passé dans l’établissement de la connexion. TCP ne connaît pas TLS. TCP établit connexion mais n’est pas au courant de sa sécurisation. QUIC : Protocole de transport remplaçant TCP basé sur UDP. Qui Handshake Initiator : Quickness’s hello -> Quickness’s token -> quickness’s hello + token: en trois étapes, on génère une connexion fiabilité et chiffrée avec moins de latence que TCP / TLS.

Quic va devoir implémenter les fonctions manquantes perte de paquets réémission + réordonnancement de paquets : navigateur / serveur

Couplage fort entre TCP et réseau internet : si un casse, l’autre se casse aussi. (déconnexion quand on change de réseau).

Réduction de la latence, migration de réseau possible sur QUIC (couplage faible). HTTP2 : Possibilité de faire plusieurs requêtes en parallèle. Connectivité mauvaise (métro) : streams can fail easily. QUIC a conscience des streams HTTP. Possibilité d’utiliser les données qui sont arrivées en attendant le reste. Streams QUIC sont indépendants les uns des autres même si on est dans la même connexion QUIC.

HTTP3 = HTTP2 basé sur QUIC. Sémantics ne changent pas. HTTP/3 is a drop in replacement for HTTP/2 : préparations pour HTTP/2 seront valides.

Firewall configuration: Firewall usually opened only for TCP for 80 and 443.

Maturité de QUIC : Lancé en 2013 par Google, enbled sur Chromium. Standardisation en cours via l’IETF. Sortie officielle cette année ou 2020.

Cloudflare support QUIC. Varnish: WIP. Pas de module Nginx / Apache.

daniel.haxx.se/blog/tag/auic

Images sous Symfo

DPR : Device Pixel Ratio. mydevice.io pour voir les dimensions physiques + leur device pixel ratio. width et height dans balise img pour réserver l’espace dans le layout.

Navigateur selon la qualité du réseau va pouvoir changer sa source d’images.

Chargement des pages:

• Navigateur charge le DOM
• Le parse
• Lance les requêtes pour loader les assets externes.

Au parsing du DOM, le navigateur connait le DRP de l’appareil, les dimensions du viewport et la qualité du réseau.

https://responsivebreakpoints.com génère breakpoints d’images.

github.com/clavetage/daltons : Utilitaire CLI pour générer des breakpoints d’image à partir de données analytics

attribut srcset + sizes pour indiquer au navigateur la largeur de la balise img. L’ordre des sources dans secret n’a pas d’importance. L’ordre des medias queries dans l’attribut sizes a une importance (premier saisi premier interprété). Le premier attribut media utilisé est vérifié.

Glide + LiipImagineBundle (gère pas la sécurité) - Symfony pour la génération d’images.

Du développement à la prod : une architecture grandissante

Accès au site = File d’attente Vitesse de chargement des pages = Traitement du service

Optimisation des requêtes / processus PHP / nb dépendances / poids images js html css / optimisation des redirections ==> Effet Papillon

DevOps Lifecycle Mesh.

Fastly = version CDN de Varnish. Ajout de layers : serveurs de cache HTTP (Varnish), cache de persistence de données (Redis Memcached).

etag : hash correspondant à la ressource, être sûr de son unicité.

Varnish : Fichier de configuration (vcl) ou on peut rajouter du C.Requête HTTP arrive sur le vcl_receive (vcl_recv). varnish stat pour monitorer ( CACHE HIT : Nombre d’objets en cache dans la mémoire Varnish doit être supérieure au CACHE MISS). Varnish Log : varnishlog -g request -q « RespStatus >= 500 »

Cache de persistence - Redis

• Mécanisme de réplication simple ( master / slave pour backup )
• Réplication avec Sentinels (Service à installer en même temps que Redis. Ces Sentinels vont dialoguer ensemble pour élire un nouveau master en cas de fail)
• Redis Cluster (réplication fournie par Redis directement)

Galera Cluster Système de réplication BDD. Règles: Plus de 50% de noeuds pour maintenir les opérations. Galera a besoin de 3 serveurs minimum pour fonctionner. Chaque noeud doit valider la requête pour qu’elle soit exécutée.

Bundles intéressant pour le cache:

Fos HTTP Cache Bundle. UserContext : Faire varier le bloc de cache selon l’user. Droits utilisateur sous forme de chaîne de caractère : tous les users ayant les mêmes droits voient les mêmes données cachées. Cache désactivable sur une page dans le YAML. Symfony Cache Component (PSR6 PSR16)

Bundles et outils pour applis Symfo

PHP CS Fixer FriendsOfPHP/PHP-CS-Fixer > correction automatique phpmd/phpmd phpstan/phpstan

Hooks locaux / Hooks distants

GrumPHP > tasks : on active les outils de qualité dont on a besoin.

fabbot.io > validation service for GitHub pull requests

Outils de qualité Symfony Insights alice-bundle == doctrine-fixtures-bundle

Documentation d’une API REST : BelmioApiDocBundle documentation au format OpenAPI. guzzle/guzzle : consommer des web services facilement. Couche d’abstraction pour les requêtes Http. Http Client: symfony/http-client : experimental feature

Sécuriser API :

• Json Web Token lexie : authentification par jeton JWT.
• OAuth hwi/HWIOAuthBundle.

DoctrineExtension : Via des annotations, faire du tri, softdelete.

FOSEslasticaBundle (ElasticSearch) algolia/search-bundle Glide : HTTP based image manipulation.

Composant Messenger à la place de AMQP ?

Monolog => Possibilité d’envoyer des alertes sur Slack. Envoi aux serveurs spécifiques. Affichage dans les consoles navigateur.

Sentry -> Real time crash reporting sentry/sentry-symfony : la payload est renseignée / navigateur du user.

Critères de sélection: packagist (nombre de downloads, contributeurs, stars, date du dernier commit).

Single Responsibility Open Closed Liskov Substitution Interface Segregation Dependency Inversion

Packages Principles Les classes sont nécessaires mais insuffisantes pour organiser un système. Utiliser les packages.

Package principes Principe de cohésion (granularité) + principe de couplage (stabilité / dépendance).

Abstract Syntax Tree : Analyseurs de code utilisent cette représentation pour détecter les erreurs.

SymfonyChecker => façon d’analyser dynamiquement le code pour supprimer les traductions inutilisées, tout est local.

symfony => binaire en Go installable en local

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Juste un petit article pour mémoriser le setup de mon terminal sur mon ordi perso sous Mac OSX.

Terminal

• Télécharger iTerm2
• Configurer zsh et oh-my-zsh avec iTerm2

Alias de commandes Git

• Alias pour Git

Tools chouettes

• Tiny Care Terminal (merci Younes pour la découverte !)

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Démarrer Mongo

mongod

Démarrer Mongo sans les journaux

mongod --nojournal

Peut être pratique si vous n’avez pas beaucoup d’espace sur votre ordi.

Se connecter en Shell à Mongo

mongo

Créer une base de données

use <nom_de_la_base_de_données>

Il faut y enregistrer au moins un document pour que la base de données soit vraiment sauvegardée.

Créer un utilisateur

{
  user: "fashion",
  pwd: "fashion",
  roles: [ "readWrite", "dbAdmin" ]
});

Voir le contenu d’une collection

db.nom_collection.find();

Une collection Mongo s’apparente à une table MySQL et un document Mongo s’apparente à l’entrée d’une table MySQL.

show all content collection: http://stackoverflow.com/questions/24985684/mongodb-show-all-contents-from-all-collections

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Après mon HackDay sur Node.js, j’ai eu quelques inquiétudes sur mes aptitudes à rapidement faire n’importe quoi au niveau de la structure de mon application.

Je me suis donc mise à la recherche d’un framework sympa qui pourrait m’aider à mieux structurer mon application Node.js : après une petite recherche, je suis tombée sur Sails et Meteor (qui fera aussi l’objet d’un HackDayz !).

Voici mon petit retour de ces quelques heures de bachotages.

Facile à appréhender

Pour les habitués de framework MVC, Sails nous permet de nous y retrouver facilement avec son architecture bien rodée. Les routes se créent simplement à partir du fichier config/routes.js

Le framework utilise Express que j’avais déjà appréhendé lors de mon premier tutoriel Node.js

On peut demander à une route dans ce fichier de retourner directement un template ou de passer par un contrôleur qui lui rendra le template.

Des commandes permettent de générer directement les fichiers contrôleurs / modèles (ça m’a rappelé de bons souvenirs de Ruby ça).

Il est aussi possible de générer un modèle séparement et définir les données qu’il contient.

On démarre ensuite l’application avec un sails lift. Et on savoure le beau ASCII art de début \o/

Un petit aperçu de ce que j’ai pu produire de ce HackDay : une petite application qui permet de partager des messages secrets. Je la pousserai prochainement sur Heroku 🙂

Deploy friendly

Le framework vient avec un système bien pratique pour gérer différents environnements (dev, staging, prod par exemple). Il suffit de définir les variables qui changent selon l’environnement dans le dossier

config/env/

Quelques liens sympas

Documentation Sails

Comment déployer une app Sails sur Heroku

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

J’ai profité de cet après-midi pluvieux pour me familiariser avec Node.js grâce à l’excellent cours de Mathieu Nebra sur Open Classrooms.

Ce que je retiens de ces quelques heures de bachotage (pas encore poussé mon application) :

• Javascript qui s’exécute côté serveur
• Force du language: la gestion d’événements côté serveur et sa rapidité
• NPM est un outil puissant pour la gestion des dépendances
• Nécessite une bonne connaissance de Javascript (Closures, callbacks, prototypes).

Quelques outils donnés sur le tutoriel bien pratiques

• http://browsenpm.org/package.json Récapitulatif des attributs que l’on peut préciser dans son fichier de dépendances

• https://github.com/nodejs/node-v0.x-archive/wiki/modules#templating Modules utilisables pour le templating. J’ai retenu juste l’exemple de EJS donné dans le cours qui est compatible avec Express, framework Node.js

• https://nodejs.org/api/http.html#http_event_close

Documentation des objets utilisables dans le core de Node.js

Bonnes pratiques de développement sous Node.js

• https://devcenter.heroku.com/articles/node-best-practices
• https://blog.heroku.com/archives/2015/11/10/node-habits-2016

MongoDB x Node.js

• http://mongodb.github.io/node-mongodb-native/2.0/overview/quickstart/
• https://docs.mongodb.org/getting-started/node/insert/

Quelques commandes de base

Installer un module (l’option –save permet de rajouter le module en dépendance dans le fichier package.json)

npm install nom_du_module --save

Gestion des versions de Node

# Module n permet de gérer plus facilement le switch vers telle ou telle version de Node
sudo npm install n -g

# Se mettre sur la dernière version la plus stable de Node
sudo n stable

Ce que j’ai réalisé en Node.js

Ma première application Node.js peut-être consultée ici: https://fierce-wildwood-39907.herokuapp.com/

Le repository associé se trouve ici: https://github.com/leiluspocus/greenie

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Préparer une entrevue technique nécessite un peu de bachotage ! Voici quelques liens que je trouve intéressants pour mieux se préparer :

• https://www.quora.com/What-are-the-most-important-questions-to-ask-a-full-stack-developer-during-an-interview-for-a-startup
• Questions réponses pour une entrevue de développeur Full-Stack
• https://www.toptal.com/web/interview-questions

Pour des entrevues dans des entreprises prestigieuses (Facebook, Google, Apple), le livre Cracking the Coding interview m’a chaudement été recommandé … 👀

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

Je ne m’inscris généralement pas aux infolettres mais celle-ci est particulièrement intéressante! GoodUi propose une infolettre envoyée deux fois par mois.  Son auteur, Jakub Linowski, parle d’optimisation d’interface utilisateur, la meilleure façon de concevoir des formulaires de type opt-out … Je ne regrette pas de m’y être inscrite !

Petit bémol qui peut en fruster certains: l’infolettre est en anglais !

Inscrivez-vous ici

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Comment installer des packages dans Sublime Text 2 ?

Il faut utiliser le package control. Plus de détails ici: https://www.granneman.com/webdev/editors/sublime-text/packages/how-to-install-and-use-package-control/

Voici les packages que j’utilise dans ma configuration Sublime Text 2, très utiles pour des projets front.

 "installed_packages":
  [
    "Alignment",
    "BracketHighlighter",
    "Emmet",
    "HTML5",
    "LESS",
    "Sass",
    "SideBarEnhancements",
    "SublimeLinter",
    "SublimeLinter-contrib-scss-lint",
    "SublimeLinter-csslint",
    "SublimeLinter-gjslint",
    "SublimeLinter-phplint",
    "SublimeLinter-xmllint"
  ]
}

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Il n’y a pas que le code qui se teste, une interface utilisateur aussi !

Dans le cadre de ma maîtrise en commerce électronique, j’ai été amenée à réaliser des tests d’utilisabilité sur un site Internet. L’expérience est vraiment fascinante car on réalise à quel point notre vision de développeur / stratège web est biaisée par rapport aux individus « normaux ».

Cet article a pour but de vous présenter les tests d’utilisabilité et de faire un petit retour d’expérience avec les erreurs que j’ai pu commettre.

Un test d’utilisabilité consiste à comprendre comment un utilisateur perçoit un site Internet et de lister ainsi les erreurs de son interface. Une personne (le modérateur) observe le comportement de l’utilisateur sur le site, et peut être accompagné éventuellement d’une équipe plus large qui observera en retrait (idéalement, dans une salle de focus groupe)

Le participant réalisera donc différentes tâches et à la fin de chacune de ces tâches, une verbalisation se fera avec le modérateur. Il est préférable pour le participant de verbaliser à voix haute pendant sa réalisation de la tâche mais certains n’y arrivent pas donc il est inutile de trop forcer le participant. Le plus important est en effet qu’il se sente à l’aise et de recréer une expérience « comme à la maison ».

Nous utilisions Tobii Studio, un système d’oculométrie mais ce matériel coûte extrêmement cher. L’essentiel est d’enregistrer l’expérience de navigation de l’utilisateur sur le site. On peut utiliser des outils d’enregistrement d’écran ou encore cet outil que j’ai découvert aujourd’hui Inspectlet (http://www.inspectlet.com/) qui enregistre les sessions sur un site et crée des heatmaps.

Le test se prépare en plusieurs étapes

Planification du test

Cette étape consistera à planifier les scénarios qui seront à réaliser par les participants. On va notamment écrire des guides d’entrevue qui vont permettre au modérateur de ne manquer aucun détail sur le scénario à réaliser ou la présentation du test:

Un premier script qui va consister à présenter le test au participant (la confidentialité de sa participation, le fait qu’il doit suivre ses habitudes de navigation…)

Personnellement, je ne lisais pas ces scripts car je n’étais pas à l’aise de ne pas regarder le participant dans les yeux pendant que je parlais. Je m’assurais juste de n’avoir manqué aucun point important du script après avoir parlé.

Aller chercher des participants

Les participants ne devront pas être choisis au hasard et devront correspondre à la cible du site testé. Nous avions réussi à obtenir une dizaine de participants pour notre test, on peut en récupérer même moins selon le degré d’implication du participant. On a constaté que beaucoup de choses se répétaient parmi nos répondants, il y a un stade où on ne peut récolter plus d’informations que celle dont on dispose déjà.

Un incitatif peut faciliter leur déplacement (argent, nourriture gratuite, échantillons … Soyez inventifs! 😛 ) mais n’invitez le participant que s’il est un minimum intéressé: un participant peu motivé fournira des résultats inexploitables.

Réaliser les tests

Nos tests se faisaient au laboratoire de focus groupe de la faculté d’administration de la faculté de Sherbrooke. Nous disposions d’un oculomètre qui suivait les mouvements des pupilles des participants. Le fait d’être observé peut biaiser les résultats: l’idéal est de recréer les conditions de navigation habituelles de l’internaute (lors de la présentation du test, nous insistions sur l’aspect « comme à la maison »).

Il est difficile de recréer les conditions « comme à la maison »: c’est pourquoi nous insistions là-dessus pendant la présentation du test. Si on voyait pendant le test que le participant ne jouait pas assez le jeu (réalisation de la tâche de manière anormalement rapide), nous posions la question durant la verbalisation « Auriez-vous fait ça chez vous? ». Cela permet de récolter de l’information manquante.

Pour éviter d’avoir des résultats trop biaisés, il est recommandé de garder toujours le même modérateur.

N’effectuez pas de tests trop long sous peine de fatiguer votre participant et d’ainsi diminuer la qualité des commentaires qu’il vous donne.

Je conseille personnellement d’avoir une liste de tâches pour la configuration du matériel, surtout s’il y a beaucoup de choses à faire pour la mise en place du test. Nous avions un oculomètre à configurer et les caméras à démarrer, il nous est déjà arrivé d’oublier de démarrer les enregistrements car nous étions concentré sur autre chose.

Aussi, pensez à vider l’historique entre chaque test, surtout si vous testez des remplissages de formulaire… Cela évitera que le navigateur garde en cache les informations saisies par le participant précédent.

Exploiter les résultats

Une étape longue mais essentielle ! N’oubliez pas de faire des sauvegardes de vos enregistrements, re-visualisez les vidéos pour être sûr de ne manquer aucun commentaire.

En espérant que cet article soit utile, je vous souhaite de bons tests utilisateur! 🙂

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

L’influence de l’interface sur les émotions ressenties par les utilisateurs durant leur navigation fait l’objet de nombreuses recherches scientifiques. Par exemple, Éthier et al. (2008) ont démontré qu’un utilisateur pouvait ressentir différentes émotions (telles que la peur, la joie, ou encore la frustation) durant un épisode d’achat sur un site de commerce en ligne.

L’interface a donc un rôle non négligeable dans l’état émotionnel de l’utilisateur, cet article a pour but de vous présenter certaines techniques qui permettent d’aller chercher des émotions chez l’utilisateur, créant ainsi une expérience utilisateur qui fidélisera vos visiteurs.

Se doter d’une personnalité

Mailchimp est un excellent exemple pour ce point: outre l’interface extrêmement « user-friendly » et son design épuré, Mailchimp dispose d’une forte image de marque axée sur l’humour. Une mascotte rigolote, des phrases humoristiques (high five après avoir envoyé une campagne): autant d’atouts qui vont jouer sur la fidélisation de l’utilisateur !

Un site qui se veut plus « sophistiqué » (exemple d’une marque de luxe par exemple) adoptera une approche plus minimaliste au niveau de son design: images larges, peu de contenu textuel et un nombre minimal de couleurs dans la charte graphique.

Les beauty-shots

En mettant en avant une image, choisie judicieusement et à la qualité irréprochable, on va créer un sentiment d’émerveillement chez l’utilisateur.  Cette technique sera particulièrement appréciée pour les sites mettant en avant une personne (artiste, professionnel…). Un bon exemple pour ce cas est le site de Julie Zhuo, directrice du design chez Facebook, qui met en fond de page une photo d’elle-même haute résolution.

De (petites) animations

L’idée est de réveiller l’utilisateur dans sa navigation et de ne pas le rendre « inactif » en animant un peu les éléments du site. On ne parle évidemment pas de blinkie  (so 2000!) mais plutôt d’une animation légère qui s’adapterait à l’utilisateur. Cela peut se faire par des carrousels interactifs (avec des boutons « Call-to-Action », voir mon article précédent) ou par des animations légères sur certains éléments du site. Stromae, l’artiste belge, le fait très bien sur son site. Des effets parallax auront également une influence positive, en allant chercher l’attention de l’utilisateur.

Sources

Éthier, Jean, et al. « Interface design and emotions experienced on B2C Web sites: Empirical testing of a research model. » _Computers in Human Behavior _24.6 (2008): 2771-2791.

http://uxmovement.com/content/5-design-techniques-to-incite-user-emotion/

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Voici une petite bibliographie qui pourrait plaire aux novices qui s’intéressent au domaine de l’user experience. Je l’ai dénichée à partir d’un article de blog qui a recensé toutes les références faites à ces livres, créant le classement suivant:

• Don’t Make me think by Steve Krug
• About Face by Alan Cooper
• Rocket Surgery Made Easy by Steve Krug
• Designing Interactions by Bill Moggridge
• The Design of Everyday Things by Don Norman

On m’a déjà parlé du livre de Steve Krug qui semble être un incontournable. Thank you Armen Ghazarian for this list !

Sources

• http://armenghazarian.com/what-to-read-if-you-decided-to-learn-ux/
• https://docs.google.com/spreadsheet/ccc?key=0Ai4lrwKRQj2BdElpcDFiNUNYSjRtZFVWMmJvZDdEWkE#gid=0

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Vous souhaitez vendre des produits en ligne et hésitez sur la manière de présenter vos produits. Trois solutions sont envisageables: grille, liste ou hybride.

Grilles

Quand les utiliser?

Quand l’image du produit est suffisante pour le distinguer d’un autre produit (ex: vêtements).  Certains sites (comme Etam) proposent une vision 360° du produit dès la page catalogue, ce qui permet à l’utilisateur d’avoir un « feeling » du produit avant même d’atteindre la fiche produit détaillée.

Avantages / Inconvénients

• Permet d’afficher plus de produits sur une page
• Confortable pour l’utilisateur qui n’a pas à lire de texte
• Nécessité d’avoir des images de bonne qualité, fidèle au produit réel

Exemple :

Site Internet de Etam

Listes

Quand les utiliser?

Quand le produit a des informations complexes associées, ou qu’il est difficile de distinguer deux produits différents par une image (exemple: meubles de tailles différentes). Il est nécessaire dans ce cas là de faire apparaître l’information à l’utilisateur sous forme textuelle.

Avantages / Inconvénients

• Information mise à disposition de l’utilisateur, ce qui le met en confiance et favorise la conversion
• Texte à lire parfois rebutant pour les utilisateurs: nécessité d’aller à l’essentiel (présentation sous forme de liste…)

Exemple :

Priceminister (qui propose à ses utilisateurs de switcher en mode grille) ou encore ThemeForest (pour afficher plus de détails sur la structure et compatibilité du template)

Affichage sous forme liste

Hybride

On adopte un affichage type grille et au survol d’un produit, on affiche plus de détails sur le produit.

Avantages/Inconvénients

• On conserve les avantages des deux catégories: pouvoir montrer plus de produits tout en affichant un détail sur le produit (s’il est complexe).
• Être vigilant sur le temps de chargement de la page (Javascript à ajouter pour la gestion du texte à afficher au survol des images)

Exemple :

Ikea

Affichage hybride

Source

Increasing eCommerce conversion rates category page

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

Les carrousels sont de bons éléments à placer dans une interface  graphique. Ils permettent de mettre en évidence des produits, des promotions et ainsi générer plus de ventes au sein du site.

Mais quel est le carrousel efficace, qui aura le plus d’impact chez l’utilisateur ?

Des études ont montré que les flèches des carrousels classiques sont en réalité peu cliquées. Des boutons avec des textes « Call to Action » auront généralement plus d’impact chez l’utilisateur, qui sera intéressé par le lien présenté, et qui aura ainsi tendance à plus interagir avec le slider.

Quelques points critiques sur un carrousel

Éviter l’auto-sliding et ce, même après qu’un utilisateur ait pris le contrôle

Sûrement le pire point car il peut vraiment irriter l’utilisateur, qui pense avoir le contrôle alors que non. Il est facile de neutraliser ce problème en détectant la position du curseur sur la page.

Accompagner l’utilisateur dans sa visualisation du slider
En affichant notamment la progression (nombre d’éléments sur le slider) en bas d’image

Rendre les boutons assez gros pour être cliqués

Les éventuelles flèches pour passer à l’image suivante, les boutons call-to-action …

Source

Why Users aren’t clicking your homepage carousel

Big usability mistakes Designers make on carousels

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Quelle est la différence entre les mots UI et UX ? C’est assez simple.

L’UI (User Interface) désigne l’interface qu’utilise le visiteur, autrement dit, c’est l’ensemble des éléments avec lesquels l’utilisateur va interagir (en cliquant dessus par exemple).

L’UX (User eXperience) se concentrera plus sur l’expérience de l’utilisateur dans sa globalité: comment interagira-t-il avec l’interface? Comment va-t-il utiliser le logiciel ? L’UX désigne plutôt le processus de navigation / d’utilisation de l’interface par l’utilisateur.

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Voici un billet de blog  assez intéressant sur les couleurs et leur influence dans le processus d’achat posté par une bloggeuse de Ludis Media, une agence web localisée à Sherbrooke.

Enjoy !

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

J’ai trouvé cet excellent article écrit par Brad Fost qui explique les concepts de l’atomic web design, en voici un petit résumé.

L’Atomic Design est une méthodologie de conception de systèmes. L’idée est que chaque système est décomposable en plusieurs niveaux pouvant être imbriqués les uns avec les autres. On commencera la conception d’un design par le plus petit niveau.

1. Niveau « Atome »

Il s’agit de l’élément le plus basique d’une page HTML. Ce peut être par exemple un bouton ou un label.

2. Niveau « Molécule »

Il s’agit d’un regroupement d’atomes: l’exemple donné dans l’article est un fieldset de recherche (input pour la zone de texte avec un label et un bouton). Il s’agit de la plus petite unité fonctionnelle d’un site Internet.

3. Niveau « Organisme »

Il s’agit d’un regroupement de molécules: autrement dit, on regroupe plusieurs fonctionnalités ensemble pour former une section de l’interface finale. Ce peut être par exemple l’en-tête d’une page.

4. Niveau « Template »

Le design du site Internet commence à prendre forme à ce niveau. Ce niveau regroupe plusieurs organismes et donnent ainsi un contexte en regroupant ces éléments, qui sont abstraits lorsqu’ils sont considérés séparement.

5. Niveau « Page »

Cela représente le rendu final donné au client. Instance spécifique d’un template, il contiendra le contenu , les images propre à un certain projet.

Quel est l’intérêt ?

L’intérêt de cette approche méthodologique est de contrôler plus efficacement la conception d’un design en développant des éléments ré-utilisables. La création de molécules favorise la ré-utilisation d’éléments dans différents designs.

Sources

http://coding.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

L’UTC a un partenariat avec de nombreuses universités américaines. J’ai pour ma part la chance d’effectuer un semestre d’échange avec l’Université du Rhode Island au semestre d’automne 2012. Le rythme de vie en campus américain est tout à fait comme dans les films, tout s’y retrouve: les fraternités, les « dorms » (résidences étudiantes), la vie de campus, les vêtements officiels de l’université, célébrer Thanksgiving et Halloween… Je pense qu’il s’agit vraiment d’une expérience à vivre si on en a l’occasion !

La préparation de mon départ ayant été un peu laborieuse, je tenais à faire un retour d’expérience de ma préparation de départ pour les futurs UTCéens (ou autres étudiants de manière plus générale) qui décideraient de partir.

Le TOEFL

Tout d’abord, un point sur un test qui m’a assez ennuyé par son coût (240$ quand même!): le TOEFL. L’URI exige un TOEFL minimum de 76 avec un minimum aux différentes sections: Reading 20, Writing 22, Listening 17, Speaking 17. J’ai eu un score de 88 au TOEFL avec un score de 17 au Writing, et mon application n’a pas été rejetée. Je n’avais pas de cours d’anglais particuliers au moment de ma préparation, j’ai préparé le test environ deux semaines à l’avance avec ce bouquin. Ce test n’est pas à prendre à la légère: il est long (un peu plus de 4h de test), assez difficile par la densité des textes à lire. Il ne faut pas relâcher son attention pendant le test.

L’assurance santé

Au moment du visa, on vous exigera une assurance santé. Je n’ai pas eu de souci de santé et heureusement car j’ai réalisé a mon retour que l’assurance LMDE avec laquelle j’étais partie en fait ne valait rien 😀

• J’ai du me faire vacciner aux US et j’ai du payer immédiatement la facture (pas exhorbitante, 9$ pour un vaccin). La LMDE est censée te rembourser après (ou pas dans mon cas).
• Mon contrat a cesse en octobre (pendant que j’étais au Rhode Island). Ils ne m’ont pas du tout averti. J’étais donc entre octobre et décembre sans couverture sante aux US… !

Je vous recommande vivement April Mobilite. Oui c’est un peu plus cher mais c’est plus sécuritaire. Par ailleurs, certains sponsors refusent l’assurance santé de la LMDE / SMEREP (ex: la FACC qui s’était occupée de mon visa pour mon stage de fin d’études).

Vos crédits ECTS

Cette section ne s’adresse qu’aux UTCéens. Faites attention au niveau des crédits que vous devez valider. Personnellement, je n’avais qu’une CS et deux TM à valider pour ce semestre ce qui m’a permis d’avoir un semestre pas trop trop chargé. Si vous avez un stageà effectuer juste après votre semestre d’échange, ça vous donnera le temps de voir les offres / postuler. Ou de profiter a fond de votre expérience à l’étranger, tout dépend de votre mindset 🙂

Se loger à New York

Cette section s’adresse aux amis qui pensent s’aventurer dans la grosse Pomme. Vivre à New York coûte extrêmement cher. Si vos moyens sont réduits, il va falloir opter pour une résidence étudiante ou une colocation. J’ai personnellement résidé à l’I-House quelques mois. Cette résidence est particulièrement fun car elle brasse beaucoup de personnes différentes (stagiaires et étudiants). Le bémol est son prix: je payais environ 950$ par mois pour… un 10 mètres carrés. Et je n’avais pas de cuisine donc je mangeais tout le temps à leur cantine ou à l’extérieur.

Liens vers des résidences similaires :

https://www.studenthousing.org/

http://www.92y.org/Residence

J’ai ensuite déménagé dans le charmant quartier de Bedford-Stuyvesant à Brooklyn. Personnellement, j’ai adoré vivre dans ce quartier de Brooklyn par sa multiculturalité. Certains de mes amis trouvaient ce quartier un peu « ghetto ». J’étais dans une colocation à 6 et payais 900$ par mois incluant Internet et électricité (cette fois-ci avec cuisine donc les frais étaient réduits). J’avais trouvé ce plan dans un groupe CouchSurfing.

Il y a aussi le groupe Facebook « Les Frenchy a NY » : https://www.facebook.com/groups/frenchyany/

Pas mal de bons plans y circulent, aussi bien pour la vente de meubles que pour d’eventuelles sorties. J’ai aussi fait quelques meetups via Couchsurfing ou j’ai rencontre des gens vraiment cools.

J’ai listé les liens de mes endroits préférés dans la grosse Pomme.

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Nous sommes souvent amenés à l’UTC à travailler sur de petits projets en groupe. Pour avoir effectué du développement en groupe sans gestion de versonning, le travail devient vite compliqué au moment où l’on réunit les sources. GitHub serait une solution puisqu’il s’agit d’un service hébergeant à distance les dépôts centralisés (sur lesquels peuvent travailler plusieurs ressources).

• Présentation de Git / GitHub
• Tutoriel vidéo
• Commandes Git

Quelques tips pour se brancher à un repo déjà existant :

1. Cliquer sur « Fork » sur la page du repo
2. Lancer la commande « git clone git@github.com:/.git »
3. Dans le dossier du repo, lancer la commande « git remote add upstream git@github.com:/.git »

A noter que ces commandes peuvent être exécutées s’il s’agit d’un repository privé ! Ensuite pour effectuer ses commits, il suffit d’exécuter les commandes « git commit -a » (pour commiter tous les fichiers modifiés), puis « git push upstream master » pour les envoyer sur le repo de référence.

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Ayant eu quelques problèmes lors de la mise en place d’une base MySQL sur mon appli RoR (le gem install mysql2 provoquait une erreur), il suffit d’utiliser l’install disponible sur le site de MySQL

Il suffit d’exécuter la commande suivante et you’re all set 🙂

sudo gem install mysql

Source: Stackoverflow

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Un petit billet de blog pour vous partager mon expérience sur les fameux « jobs d’été ». Parfois galère à trouver, j’ai pour ma part effectué plusieurs missions pour Phone Régie.

Phone Régie, c’est quoi? Des jobs d’hôtesse sur des temps partiels ou complets selon vos disponibilités. Le poste consiste à être à l’accueil et à gérer les flux de visiteurs et/ou d’appels et/ou de colis. Le salaire est divisé en trois parties: la base (smic) + prime d’assiduité + prime d’habillage (si vous portez un uniforme sur le site).

Le principal avantage de Phone Régie est que vous pouvez décrocher un contrat très rapidement avec n’importe quelles disponibilités. Pour un étudiant c’est le top, car trouver un job d’été ou plus généralement un job étudiant qui corresponde à nos emplois du temps, nos dates de fin de semestre, peut se révéler complexe.

Inconvénient, le temps de travail réel est supérieur au temps de travail payé : en effet, il faut arriver un peu à l’avance le temps de s’habiller et de faire sa prise de poste. En effet,

la prime d’assiduité est assez particulière. Il faut savoir que les prises de postes se font sur un serveur vocal qui a un algorithme très bête. Si vous effectuez cette fameuse prise de poste à 8h31 et que vous commencez à 8h30, vous êtes déclarée en retard et la prime ne se déclenche pas. Mieux vaut ainsi arriver à l’avance. Par ailleurs, si vous devez faire la fermeture du site, certains flux de visiteurs sont tellement importants que parfois il est nécessaire de faire un peu de temps supplémentaire pour que tous les visiteurs soient pris en charge.

Pour continuer sur la prime d’assiduité, elle n’est pas versée en cas d’absence ou d’un retard (y compris à cause des transports). Cela s’avérait un peu stressant: pour 10 minutes de retard, qui ne causent en soi rien à l’entreprise, une prime assez importante est supprimée. Un conseil: essayez de demander un site proche de chez vous, les responsables essayeront de respecter au mieux votre demande (du moins, si elles sont compatibles avec leurs besoins…).

Bon courage pour vos recherches !

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Voici une nouvelle application que j’ai trouvé sur l’AppStore il y a quelques mois et qui m’a rendu complètement accro, Hatchi.

Le principe est simple, vous évoluez votre hatchi, et selon la manière dont vous vous en occupez, il se dirige vers une branche d’évolution différente ! Il a des phases différentes dans sa vie: baby, child, teenager, et adult.

L’orientation vers telle ou telle direction dans l’arbre n’est pas aléatoire :

– 1ère évolution vers « Child » : le rendre plus « smart » qu’ »active » pour aller vers la branche du haut.

– 2ème évolution vers « Teenager » : faire en sorte qu’il pèse moins de 15 lbs pour aller vers la branche du haut

– 3ème évolution vers « Adult » : faire en sorte qu’il soit heureux pour qu’il aille vers la branche du haut

Ce jeu est très addicitif, j’ai tout de suite tenu à explorer l’arbre. Les graphismes sont simples mais pourtant très efficaces 🙂 Elle était gratuite au moment où je l’ai téléchargée sur l’AppStore, et coûte aux dernières nouvelles 0,79€

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Voici une liste de tutoriels pour appréhender en surface certains languages. J’ai suivi ceux sur Spring, RoR et développement iPhone, je continuerai à étoffer cette liste.

N’hésitez pas à me faire parts de bons liens dans les commentaires 🙂

• Spring MVC
• RoR
• Développement iPhone

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Cela fait quelques temps que je pense à rédiger ce post, afin de faire un retour d’expérience sur mes choix d’orientation.

J’ai été intéressée par l’univers informatique depuis mes années collège pendant lesquelles j’ai appris de manière auto-didacte le XHTML/CSS. C’est donc naturellement que j’ai souhaité aller plus loin dans le développement web. J’ai choisi de poursuivre mes études dans l’informatique de manière générale car je ne savais pas vers quel domaine précis m’orienter.

Pourquoi avoir choisi un DUT Informatique ? Tout simplement parce que je souhaitais faire une formation professionnalisante: tout au long de ma formation, j’ai été amenée à travailler sur des technologies utilisées dans le monde du travail. Le stage de fin de DUT de trois mois permet d’appliquer ces connaissances et d’acquérir un certain bagage de connaissances qui nous permet de directement travailler avec un BAC +2. Par ailleurs, l’ambiance est excellente en IUT: on a un bon rythme de travail avec un nombre conséquent de projets (contrairement à un cursus licence où on est plus enclin à bosser juste avant les partiels) et c’est une formation très bien vue dans le monde du travail. Dernier point positif: il est tout à fait possible de continuer ses études après un DUT (environ 20% d’étudiants entrent dans la vie active directement après l’IUT) et le choix est très étendu pouvant aller de licences maths-info au cursus MIAGE, en passant par des formations d’ingénieur vers lesquelles je me suis orientée.

J’ai choisi de poursuivre mes études à l’UTC car je souhaitais avoir un diplôme d’ingénieur et aller plus loin que mon niveau Bac +2, tout en gardant une formation qui me prépare au mieux à ma future vie professionnelle. L’UTC prépare en effet une bonne immersion dans la vie active avec ses deux stages de 6 mois, le TN09 (Stage Assistant Ingénieur) et le TN10 (Stage de Fin d’Etudes). Intégrer l’UTC en branche (après mon DUT) m’a permis d’éviter le Tronc Commun, riche en mathématiques et autres matières scientifiques, qui au final ne sont peu voire pas utilisées en branche…

Voilà quant à mon retour d’expérience, pour résumer :

• Préférez un DUT Info à un BTS si jamais vous ne savez pas si vous souhaitez travailler au bout de deux ans d’études
• Si vous souhaitez faire du multimédia, le DUT SRC peut être mieux adapté. Les DUT Informatique et SRC semblent similaires, à la différence près que le DUT Informatique paraît plus général. N’hésitez pas à vous renseigner sur les programmes détaillés et à choisir en conséquence.
• La formation en IUT Informatique prépare très bien à l’intégration de l’UTC en Génie Informatique.

N’hésitez pas à me contacter si vous avez des questions 🙂

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Voici des notes que j’ai prises lors d’une présentation du concept des V.I.E. à l’UTC.

Le Volontariat International en Entreprises (V.I.E), permet aux entreprises françaises de confier à un jeune (de 18 à 28 ans) une mission professionnelle à l’étranger durant une période modulable de 6 à 24 mois. Le V.I.E. facilite énormément le départ à l’étranger: les frais de visa sont pris en charge par UbiFrance, la rémunération est intéressante (1200 à 3500€ selon le risque et le coût de la vie sur place), les frais de voyage, bagages et visas sont pris en charge par l’entreprise et on a de surplus le droit à 2,5 de congés par mois travaillé ! 🙂

La majorité des V.I.E. sont décrochés via le site civiweb mais certains sont également décrochés au travers de candidatures spontanées.  A noter, l’inscription sur civiweb requiert un numéro fourni lors de la JAPD… Les entretiens se déroulent généralement en France ou peuvent se faire via vidéoconférence.

A l’UTC, il serait possible d’effectuer son stage en même temps que le V.I.E. (demander confirmation à Valérie Texier), une expérience à l’étranger est un atout. Répondre dans la langue de l’offre (cv / lettre motiv) mais rester sur un cv une page. Être réactif ! Mettre en avant son profil international ! (voyages …)

Questions: info@civiweb.com

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

De nombreux frameworks existent pour la réalisation de tests unitaires en Java, j’ai notamment eu l’occasion d’utiliser JUnit, auquel on peut brancher des librairies facilitant la réalisation de mocks (objects fictifs servant à tester l’application).

J’ai eu l’occasion d’utiliser Mockito, assez pratique jusqu’au moment où on doit mocker des classes statiques. PowerMock répond alors mieux à ce problème.