Une solution developer-friendly pour un résultat flexible et compatible

La gestion des mails est rarement une partie de plaisir dans le développement d’une application, mais il est encore plus rare de pouvoir s’en passer. Entre la solution minimaliste du format texte uniquement, et les outils graphiques tout intégrés tels que Mailchimp, il n’est pas toujours facile de trouver un compromis.

Ces dernières années on a vu apparaître une nouvelle approche dans la construction de mail, à savoir des langages qui abstraient HTML et génèrent un code compatible avec un maximum de clients mails. C’est l’occasion parfaite pour intégrer cet outil à un framework comme Vue. On parlera ici de…


Deux cas d’usage de render functions avec Vue

Nativement, il existe trois solutions pour décrire la vue d’un composant : les templates, la méthode majoritaire et historique parmi les frameworks frontend ; la syntaxe JSX, qui vient du monde de React ; et enfin la dernière dont on va parler ici, la fameuse fonction render des composants. Pour rappel il s’agit de ce genre de code (docs) :

render(h) {
return h('h1', this.blogTitle)
}

Très complète mais forcément très verbeuse, on ne l’utilise que dans des cas très particuliers où la seule manière d’aboutir au résultat attendu est de “tordre” la façon dont est rendu le code du…


Cohabitation de deux apps front-end

TL;DR. Grâce à une simple iframe, deux versions de notre app peuvent coexister, en ajustant les styles et en synchronisant les URL entre parent et enfant.

📺️ Démo

💾 Code


Icon from Iconmonstr

Aujourd’hui le but du jeu est d’avoir un composant Vue à la fois flexible et complet pour charger des icônes en SVG :

  • Simplifie l’ajout de nouvelles icônes
  • Ne crée pas de requête HTTP supplémentaires
  • Optimise le code SVG
  • Conserve la flexibilité des composants Vue
  • S’adapte visuellement au contexte

👉 Voici un dépôt d’exemple créé avec Vue CLI : https://github.com/nicooprat/icon.vue

La première étape consiste à ajouter un loader Webpack qui permet d’importer des SVG et de les traiter comme des composants Vue avec le plugin vue-svg-loader(documentation), permettant aussi d’optimiser le code au passage.

Attention toutefois aux options de SVGO par…


Releases et sourcemaps en production (exemple avec Nuxt)

Difficile d’être serein quand on déploie une app sans être sûr que l’on sera alerté des erreurs rencontrés par les utilisateurs ! De nombreux services comme Sentry ou Rollbar le permettent, pour ma part j’utilise Bugsnag (question de préférences ou de prix). C’est devenu indispensable pour moi, mais c’est toujours aussi complexe à intégrer au tooling et au processus de déploiement continu, donc voici un retour d’expérience d’une mise en place avec Webpack. Attention je ne parle pas ici de comment intercepter les erreurs dans l’app elle-même !

TL;DR : la configuration complète

1️⃣ Installer les plugins

Ajouter les dépendances :

yarn add…

Quelques retours et idées autour de certaines conférences auxquelles j’ai assisté cette année

Peerocracry

Aral Balkan propose l’expression de “surveillance capitalism”, régime dans lequel nos données et donc nos identités appartiennent et sont surveillées par les plus grosses corporations. Il en profite pour déconstruire les différentes échelles de propriété des données : corporatisme (les sociétés privées), socialisme (les états), municipalisme (les cités, comme Barcelone pionnière dans cette expérimentation) ; lui propose une vision plus libertaire avec une propriété individuelle et donc décentralisée au maximum : la peerocracy. …


Combiner la flexibilité de Gutenberg, la simplicité d’ACF et la robustesse de Sage

Ressources :

💬 Thread d’origine sur le forum de Sage : infos, bugs et discussions
📦 Sage-acf-wp-blocks : package Composer pour Sage
📦 Timber-acf-wp-blocks : package Composer pour Timber


Le meilleur des deux mondes avec Nuxt, Netlify et Apify 🔥

Cette couverture manque cruellement d’originalité, promis le reste vaut le coup ! (Alejandro Escamilla on Unsplash)

C’était un vendredi soir et il était temps de repenser mon site perso après 3 ans de vie, soit une éternité sur l’Internet. L’idée était d’avoir quelque chose qui se met à jour en fonction de mon activité sur les différents réseaux pour éviter l’effet “site mort”, tout en gardant un fonctionnement simple, tant en développement qu’en maintenance.

Pas question donc d’utiliser Wordpress avec des plugins pour chaque réseau, et à l’inverse impossible de se contenter d’un bon vieux HTML si c’est pour passer 1h de mise à jour pour chaque nouvel article sur Medium.

C’était donc l’occasion idéale de…


Exemple de déploiement d’un site sous WordPress avec le thème Sage

Le but de la manœuvre est d’automatiser la mise en ligne de votre site à chaque modification. Ainsi, à chaque nouveau commit, Buddy répétera les tâches (uniquement si nécessaire) et déploiera les nouveautés directement sur le serveur.

Trigger

Sans surprise, Buddy se base sur Git pour surveiller votre code. Sur ce critère, difficile de faire plus exhaustif en terme de prise en charge :


Se simplifier la vie et celle de son client avec un simple plugin WordPress

J’ai récemment travaillé sur un projet WordPress nécessitant beaucoup de custom post types, et surtout beaucoup de relations entre eux : 1 à 1, 1 à n, etc. Le but était aussi de faciliter la saisie du client pour qu’il n’ait pas à multiplier les relations manuellement ; en effet, par défaut, un champ de type “relation” dans Advanced Custom Fields est unidirectionnel : un livre a un auteur, mais en l’indiquant, ce livre n’est pas forcément attribué à cet auteur.

La première solution serait de créer un autre champ relationnel côté auteur pour lier des livres, mais ce serait…

Nico Prat

Développeur & designer front-end. Freelance & fondateur de @globetrotterio

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store