davidl • design & développement

2019

2019-12-30T23:00:00+00:00

2019 fut une année plus chaotique que les autres. Mais vu que j'aime le chaos et que j'ai une capacité à embrasser les changements assez rapidement, je peux dire que j'ai passé une excellente année.

Des graphiques dignes d'un powerpoint

Comme je l'ai partagé sur mon compte twitter, j'ai mis en place un système pour traquer chaque seconde passée sur mon ordinateur.

L'application Timing sur mac vient en complément de celle de mon iPhone –Screen Time– où j'ai enlevé toutes les apps de distraction, fait le ménage dans les notifications et mis en place une limite de 30 minutes par jour pour les réseaux sociaux.

En 365 jours, j'ai passé 1934 heures sur mon mac. Je recommande toujours le MacBook Pro 13" car je voyage beaucoup et travaille depuis des endroits improbables. En 1 an celà à donné :

500+ heures sur Firefox
400+ heures sur Chrome
200+ heures sur VSCode
200+ heures sur Slack
100+ heures sur le terminal

Si l'on compare à mon article 365 jours de code j'ai changé presque l'intégralité de mes outils, à part l'utilisation de GitHub. Pour tracker toute mon activité dans VSCode et Sublime text j'ai ajouté codestats.

Langages majeurs

JavaScript, Typescript et Markdown.

En 2019, j'ai du suivre la migration d'une application React Native en Typescript. Même si je comprends l'intérêt je ne suis toujours pas super à l'aise quand je tombe sur certains concepts.

Heureusement que j'ai la react-typescript-cheatsheet en favoris pour m'aider.

Langages mineurs

Slim, JSON et SCSS.

La seule stack ruby où je travaille encore reste ce blog. Je suis toujours convaincu que Rails est un très bon framework pour développer rapidement une application mais je n'ai pas eu l'occasion de travailler avec cette année.

Le reste des chiffres

J'ai écrit seulement 3 articles sur mon blog.

Donné 4 talks lors de meetups principalement sur React, l'automatisation et la productivité.

2 workshop majeurs en tant que développeur React Native et une dizaine de cours en tant que coach à React GraphQL Academy.

Visité 7 pays.

Je suis passé développeur React Native freelance à temps plein. J'ai aidé 4 clients à developper leur application mobile.

J'ai décroché mon premier contrat d'artiste de conférence lors de React Finland.

Assisté à un Live Stream d'Édouard Snowden depuis la Russie au Websubmmit à Lisbonne.

Lectures

Make Time, John Zeratsky et Jake Knapp

Art direction for the web, Andy Clarke

How To Bullsh$t Your Way To Number 1, Oobah Butler

Never split the difference, Chris Voss et Tahl Raz

Ce qui s'est passé dans ma vie

Je suis revenu en France pour m'installer sur Lille avec ma copine.

Pour fêter mon départ de Londres je suis allé jeter des haches.

J'ai participé à une course en auto-stop pour faire Lille Chenier pour arriver à un festival sans electricité sous la pluie : c'était cool!

Fait du parapente en snowboard: c'est une galère pour decoller mais c'est fun!

J'ai contstruit un bureau –car je travaille à distance– pour moins de 100€.

Je suis parti 1 mois au Nepal pour faire le trekking du basecamp Everest qui se trouve à 5364m d'altitude.

La suite

Migrer ce site vers archive.davidl.fr car pour l'instant mon site web ne reflète pas du tout mes compétences et mon offre de développeur React Native freelance. Spoil : je vais utiliser nextjs pour la nouvelle version de mon site.

Créer plus de contenu, que ce soit écrit ou sous un autre format.

Publier un cours payant sur l'automatisation et la productivité.

Lancer un produit pour créer du revenu passif.

Ce que j'ai appris à React Live édition 2019

2019-09-23T22:00:00+00:00

Le week end dernier donné un meetup à Londres puis j'ai voyagé jusque Amsterdam avec une partie de la coach team React GraphQL Academy pour assister avec plus de 800 développeurs React à une journée de conférence.

React Live

C'était ma première fois que je suis allé au Amsterdam Theater et je dois dire que le lieux est gigantesque!

Le concept de cet évènement est de faire une conférence avec beaucoup de live coding. Ceux qui ont déjà eu cette expérience savent que c'est un exercice difficile car il faut coder ET expliquer clairement ce que l'on fait. Pas toujours facile à faire surtout si vous êtes devant 800 personnes.

What goes into building a Design System

J'avais déjà croisé Sid à React Amsterdam pour un talk sur les Hooks et la gestion du state. Cette fois ci il a commencé la conférence…

…avec la bonne idée d'utiliser codesandbox pour les slides…

Sans internet…

Et la bonne nouvelle c'est qu'il y a des brouilleurs dans la salle qui bloquent le réseau. Dommage pour une conférence axé sur le web. En attendant qu'un bon vieux cable arrive il nous a fait la demo de fast.com comme outil de speed-test que je recommande chaudement.

Les liens du talk sont disponible sid.st/reactlive

Animating an SVG Cat with React.js

Elizabet Oliveira nous a présenté Framer motion pour animer un chat en svg.

⚠️ Protip: À tous mes amis designer il est important de nommer correctement ses calques sur sketch! Sinon c'est le chaos pour animer les éléments.

Building an iOS and Android app in 15 25 minutes using React Native

Si comme moi vous êtes developpeur React Native, je pense que vou devez connaitre infinite.red. C'est une boite aux US spécialisé dans le developement d'applications mobiles.

Jamon Holmgren nous a présenté comment utiliser MobX pour la gestion state au global, qui peut être une alternative à Redux.

Microfrontends

J'avoue les Microfrontends j'ai jamais compris le concept. Dans le cas où vous gérez un énorme site e-commerce avec des centaines de services différents cette architecture est une solution interessante.

Adanced Patterns, React 16+ & React Hooks.

Kitze c'était un peu la tête d'affiche de la conférence. J'aime bien son côté Indie Hackers.

Dans ce talk il a mélangé expérience personnelle avec les problématiques liées au freelancing. Trop souvent la technologie est utilisée pour résoudre des problèmes inexistants.

En tant que dévelopeurs nous sommes concentrés sur les mauvaises métriques.

React Native CodeGen

Si comme moi vous êtes developpeur React Native, vous avez déjà plus ou moins entendu parler de l'architecture avec le Bridge et le Thread JavaScript qui permet de communiquer avec le code Natif.

Next Level Coding with Next.js

Le Server Side Rendering c'est compliqué. Sauf si vous utilisez le framework Next.js qui embarque tous les outils pour faire :

Du SSR
Client-side rendering
AMP

Bonus : envie migrer votre codebase en Typescript ? Il y a juste à renommer son fichier .js en .ts sans configuration.

Mon choix de Google font pour mon prochain side project

2019-05-27T22:00:00+00:00

J'utilise Figma depuis plus de 2 ans et je dois dire que ce logicial de design c'est 🔥🔥🔥

Titres

Roboto

HEADLINE ROBOTO BLACK 48PX
SUBTITLE ROBOTO REGULAR 24PX
BUTTON ROBOTO BOLD 20PX

Texte

Source Sans

ARTICLE BODY SOURCE SANS REGULAR 18PX
TITLE SOURCE SANS LIGHT 48PX
META SOURCE SANS REGULAR 16PX

Open Sans

ARTICLE BODY SOURCE SANS REGULAR 18PX
TITLE SOURCE SANS LIGHT 48PX
META SOURCE SANS REGULAR 16PX

Et pour les couleurs

Ce que j'ai appris à React Amsterdam édition 2019

2019-04-12T22:00:00+00:00

Ce week end j'ai voyagé jusque Amsterdam avec la team de coach ReactJS Academy pour donner un workshop sur React Native à 50 personnes, ouvrir un stand de distrution de T-Shirts / stickers et assister avec plus de 1300 développeurs React à la journée de conférence.

Je dois avouer que cette édition fut excellente. On sent que la team est très organisée, il n'y a pas de place au hasard. Timing respecté à la seconde et la qualité des talks etait au rendez-vous.

React Native workshop

Le premier jour j'ai ~~partagé mes connaissances en React Native~~ fixé les erreurs de buils de la récente mise à jour de macOS 10.14.4 et Xcode 10.2 auprès de nos étudiants.

Alex Lobera présente Animated.View

L'objectif de notre workshop était clair créer un clone de Twitter. En une journée, nous avons eu le temps de :

Présenter React Native avec Expo
Design d'un composant LoginScreen
Ajouter différents écrans avec react-navigation
Afficher les données venant d'une API
Animer notre application

Les sources des exercices sont disponible sur GitHub.

Comment améliorer votre niveau en React?

Deuxième journée : conférence organisée autour de 2 thèmes React et React Native.

Conseil de Kent C. Dodds pour améliorer vos compétences en React : vous devez comprendre les abstractions que vous utilisez et ne pas avoir peur de regarder les implémentations dans node_modules.

Partager du code entre vos applications React et React Native

J'attendais ce talk avec impatience. Si vous travaillez dans une grande entreprise comme made.com, comment faites vous pour mutualiser vos ressources et éviter la dupplication de code?

✅ API
✅ Configurations
✅ Logique Business
❌ UI

Direction Artistique avec React

En parlant à l'after-party à Mark Dalgleish j'ai appris toute l'histoire qui se cache derrière le projet playroom. Envoyez moi un DM si vous souhaiter savoir le secret, en attendant j'aurais rêvé avoir cet outil il y a 4 ans quand je travaillais en agence web pour différents clients.

playroom permet de travailler sur différentes version d'un même composant React avec un système de prévisualisation qui ressemble à la GraphQLi.

Les regrets technologiques chez Spectrum

Le créateur de styled-component Max Stoiber nous a présenté les mauvais choix technologiques qu'il a réalisé pour son application Spectrum.

Depuis le temps que je le dit que les WYSIWYG c'est de la 💩. Max tu as craqué il fallait me passer un coup de téléphone, je t'aurai conseillé avec plaisir !

Fullstack React Native développeur dans le monde du serverless

Pour mes chers recruteurs j'ai un nouveau buzzword pour décrire mon poste. Je suis : FullStack Serverless React Native Developer.

Je n'utilise pas encore AWS Amplify pour gérer mon API GraphQL mais je compte bien creuser le sujet.

Pour ceux que ça intéresse je vous invite à suive @dabit3 qui travaille chez Amazon et regarder le projet react-amsterdam-conference-app

Démistifier le création d'animations complexe avec React Native

Les animations dans une application mobile c'est bien. Savoir quand et où les positionner pour avoir une bonne expérience utilisateur c'est mieux.

Toute technologie suffisamment avancée est indiscernable de la magie.

Arthur C. Clarke

Trop souvent les animations sont utilisées sans aucun sens ou logique. En tant que développeurs / magiciens, c'est notre responsabilité de ne pas compliquer nos interfaces pour ne pas perdre l'utilisateur.

Étrangler le legacy de vos applications mobiles

Pour finir cette journée de folie un excellent sujet : Comment remplacer d'anciennes applications sans détruire son business ? En appliquant une stratégie d'A/B testing qui permet de migrer progressivement ses utilisateurs en utilisant le strangling pattern.

After party

Toute bonne conférence à le droit à son after party digne de ce nom. L'année dernière à React Finland j'étais dans un aquarium à boire de la bière sans musique.

Cette année c'était un peu plus "conventionnel" avec la performance d'un musicien / codeur qui à râvi l'audience.

Executer un script unix en Node.js

2018-07-10T22:00:00+00:00

J'ai récemment publié un article sur medium : Comment déployer votre application React Native avec Expo. Afin d'automatiser mon script de release j‘ai perdu pas mal de temps sur stackoverflow en faisant des copier / coller de scripts bash.

Et puis j'ai réfléchi 2 minutes :

Je ne suis pas un nerd qui fait du bash avec vim, je fais du front-end sur sublime text.
Je devrais utiliser Node.js"

Si vous souhaitez utiliser JavaScript pour exécuter des commandes UNIX depuis un terminal voici un petit snippet qui vous sera utile.

  #!/usr/bin/env node

  const exec = require('child_process').exec;
  function puts(error, stdout, stderr) { console.log(stdout) }

  exec('ls -l', puts);

TakeOff Conference 4ème impact

2018-06-08T22:00:00+00:00

TakeOff est une organisation à but non lucratif qui organise des conférences dans le but de promouvoir les dernières technologiers de pointe. Cela m'a donné l'occasion de faire un tour sur Lille, revoir les amis et boire une bière avec la communauté.

Je remercie la team des organisateurs, l'ambiance était excellente, les conférences de qualité et une organisation au top ! Seul changement pour moi cette année: j'avais mon badge de speaker !

Best #ux slide ever#takeoffconf2018 pic.twitter.com/RujcFmBOaz
— David Leuliette 🚀 (@flexbox_) June 7, 2018

Innovate with users

Comment Leroy Merlin à mis en place des hackathons dans leur entreprise pour résoudre les problèmes de ses utilisateurs magasins.

Bulding a search engine in pure CSS

Lors de la dernière édition, Tim nous avait bluffé avec son talk sur la création de drapeaux avec seulement une div et du CSS. Cette année Algolia à fait plus fort : pour le 01 Avril ils ont lancé sur Product Hunt un moteur de recherche en CSS. Nous sommes en 2018 JavaScript est mort.

A Token Walks Into a SPA

Comment sécuriser vos application au XXIème siécle quand vous devez communiquer entre votre API et vos application mobiles ou front-end? Une solution est d'utiliser JSON Web Tokens

Choose your hosting provider the right way

Is the JAMSTACK the future of web?

J'ai déjà écrit un artice présentation de la JAMSTACK, car c'est ce que j'utilise quand je donne des cours sur l'utilisation de React avec Gatsby. Râvi de voir qu'il existe d'autres fans comme moi qui commencent à utiliser cette solution dans un cadre professionnel.

Productivity and automation for hackers

Cette année j'étais dans le kr3w des speakers! J'ai eu l'occasion de partager tous mes protips d'automatisation qui me font gagner du temps.

TLDR; macOS + AlfredApp + DashApp = 😍

Now @flexbox_ is showing us all the hacks he uses to save time with clipboards and shortcuts. He’s an @alfredapp wizard! 🧙‍♂️ #TakeOffConf2018 pic.twitter.com/BKOLPW1ZxF
— Marcos Placona 🏡❤️ (@marcos_placona) June 8, 2018

Merci encore à tous les organisateurs pour cet évènement!

Toutes les vidéos des conférences sont disponible sur la chaine youtube.