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…

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

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…

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…

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. …

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

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…

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 :