La poésie du code

Pour écrire du code, vous devez être capable de lire du code existant, de l’enrichir par votre instinct. Le code peut concerner n’importe quel sujet, un site éditorial, un site ecommerce, une interface web, etc. Le tout répond à un besoin. Cela peut paraître intimidant au départ, déstabilisant mais à force que votre expérience augmente, votre confiance s’installera. Toutefois, il vous faudra toujours vous inspirer des multiples projets au sein de votre équipe mais également présents sur github, ou des sites spécialisés. A votre tour, il sera envisageable de partager votre code, votre savoir-faire.

Un modèle de versionnement efficace avec Git

Dans le contexte actuel, nous travaillons à plusieurs sur les mêmes projets qui peuvent durer plusieurs mois, et mêmes années. Pour chaque projet, nous avons une version de production, de développement et parfois une version pour des nouvelles fonctionnalités complexes qui doivent être isolées du reste du développement. Il faut donc utiliser un bon workflow. Mes recherches m'ont mené à cet article.

Git a permis d'avoir une nouvelle façon de penser pour les développeurs en ce qui concerne les branches et les fusions. Avec Git, ces actions sont simples, elles sont abordées dès le chapitre 3 du Git Book. En raison de leur nature simple et répétitive, ce n'est pas quelque chose qui doit vous effrayer. Je vais à présent vous présenter une méthode qui tire parti des points forts de Git.

Si toute l’équipe respecte ces règles, on se retrouve avec un dépôt propre, un historique lisible et cohérent et un processus simplifié pour le déploiement en production.

Animations du site d’un client

L'animation des éléments sur le site web d'un client est généralement proposé  par l'agence et non le client lui même.

Tout le monde n'ayant pas l'âme d'un animateur, mis à part peut être ceux qui ont une formation de graphiste dans leur bagage, un site fortement intéressant Animista vous propose toute une liste d'effets dont vous pouvez vous inspirer afin de rendre le site d'un client encore plus attractif.

Les effets sont divisés en plusieurs catégories :

  • Basic
  • Entrances
  • Exits
  • Text
  • Attention
  • Background

Basic pour des éléments s'animant au survol.

Entrances pour des éléments s'animant au chargement de la page, ou au scroll.

Exits pour des éléments s'animant au départ d'un bloc de page ou d'un scroll.

Text pour des animations sur du texte.

Attention pour des animations alertant le visiteur

Background pour des animations sur des visuels en fond, des dégradés ou différentes nuances de couleurs.

Lancer un nouveau projet Webpack rapidement

La petite astuce du jour :

Si comme moi, vous avez entendu parler de Webpack, souhaitez le tester mais sans trop vous prendre la tête sur la configuration, il existe un générateur écrit en nodejs vous permettant d'initialiser un projet rapidement.

L'outil Unstuck - Webpack vous permet de créer un nouveau projet en choisissant l'environnement sur lequel vous souhaitez travailler via un système de templates :

  • Nodejs + Babel
  • Angular 1 + Less
  • Angular 2 + scss / sass
  • React + scss / sass
  • Ember + scss / sass
  • Vuejs + stylus

Pour ceux qui ne sont pas connaisseurs, Webpack est un générateur de tâches à l'instar de Gulp / Grunt, qui permet de :

  • Gérer les CSS / images / fontes / librairies sous forme de modules
  • Gérer différentes builds pour les projets clients

Il est également davantage optimisé lors de son initialisation que d'autres générateurs tel que Gulp.

editorconfig

 

Vous savez, ce petit fichier caché à la racine de votre projet ? Si comme moi vous n'y aviez jamais prêté attention, voici à quoi il sert.

Face à la multitude des projets, languages, codings standards, bonnes pratiques, mais aussi la variété apportée par les intervenants au cours du cycle de vie d'un projet, il n'est pas toujours évident de mettre tout le monde d'accord et de s'informer quant aux règles en vigueur. Les environnements, IDES et habitudes de chacun ont donc souvent pour résultat du code hétérogène. Indentations, retours à la ligne et autres whitespaces sont les premiers à en faire les frais.

EditorConfig répond à cette problématique en permettant de s'assurer d'un minimum d'homogénéité dans le code (pourvu que votre IDE en soit capable !).