HOME > RSS > BLOGS France > Gastero Prod

R S S : Gastero Prod


PageRank : 1 %

VoteRank :
(0 - 0 vote)





tagsTags: , , , , , , , , , ,


Français - French

RSS FEED READER



Cloudinary fait la promotion de mon plugin Jekyll

31 August[ —]

Je vous en avais parlé lors de ma migration vers Jekyll 3, je me suis lancé dans le développement d’un plugin Jekyll pour utiliser le service Cloudinary pour mes images responsives.

Cloudinary a semble-t-il bien aimé cette initiative, puisque Eric Portis (@etportis), qui les a rejoint il y a quelque temps, m’a invité à écrire un billet pour leur blog à propos de ce développement : « How I used Cloudinary to solve responsive image needs in my Jekyll website, and shared the magic in a plugin ».

Le billet a aussi été traduit en français par Frank Taillandier pour le site Jekyll FR : « Gérer les images responsive dans Jekyll avec le plugin Cloudinary ».

N’hésitez-pas à partager l’info, retweeter, etc. !

Et si ça vous tente, n’hésitez pas à créer un compte sur Cloudinary1, c’est gratuit pour les besoins raisonnables comme ceux de ce blog, qui a tout de même déjà plus de 750 images.

Vous pouvez aussi « upvoter » sur Hacker News, pour donner un peu de visibilité au plugin.

  1. Si vous utilisez ce lien pour vous inscrire, cela me donnera un petit bonus de quota pour mon compte, un bon moyen de me remercier et encourager ! ;-) ⬆︎


Faciliteur ou facilitateur ?

23 August[ —]

Comme je l’indique dans la page à propos de ce site, « je me qualifie moi-même aujourd’hui de faciliteur de Web, ayant à cœur de faire profiter les autres de mes connaissances ». Mais ne devrais-je pas plutôt dire « facilitateur » ?

Le Larousse ne connaît pas « faciliteur », et sa définition de « facilitateur » indique ceci :

Qui est chargé de faciliter le déroulement d’une action, d’un processus

Wiktionary a d’ailleurs le même type de définition :

Personne chargée de faire en sorte que les choses se passent mieux.

« Faciliteur » y est bien cité comme synonyme, mais sa page indique qu’il est rarement utilisé.

C’est donc bien « facilitateur » qu’il faut plutôt utiliser.

Pas loin, la page Wikipedia « facilitateur » est plus riche, mais se focalise sur une définition précise d’un métier, plutôt que simplement l’adjectif substantivé :

Métier encore méconnu, le facilitateur aide un groupe à comprendre ses objectifs communs et l’accompagne pour s’organiser et atteindre ces objectifs. Il emploie le plus souvent des outils et méthodes d’intelligence collective pour faciliter les réunions. Le facilitateur peut être utile dans diverses situations telles que de face à face, au sein d’un réseau professionnel par exemple de type socio-sanitaire, en groupe ou dans une pratique en ligne.

Mais surtout, la fin de l’article indique ceci :

Le mot « facilitateur » est calqué de l’anglais facilitator. « Faciliteur » est son pendant en français de bon aloi.

C’est donc plutôt « faciliteur » qu’il faut utiliser ?

Sauf que la page Wikipedia « faciliteur » est vide, supprimée en 2006 par Grondin parce que « néologisme confidentiel et non recyclable sur wiktionnaire »… :-/

Je note que Wikipedia n’est pas fan du « français de bon aloi »…

Donc on revient à « facilitateur » ?

Heureusement, la page Wiktionary contient aussi un lien vers un épisode de l’émission « Merci professeur ! » de TV5Monde1, dans lequel Bernard Cerquiglini indique bien que « facilitateur » est un anglicisme, et qu’il est préférable de « respecter les règles traditionnelles de la morphologie », et donc substantiver « faciliter » en « faciliteur » !

La vie des langues est décidément captivante, mais l’essentiel, c’est que je peux garder ma présentation intacte, tant pis pour le Larousse et Wikipedia !

  1. Émission captivante, au passage, et très courte, donc je vous invite à parcourir les nombreux épisodes. ⬆︎


A bridge not so far

12 August[ —]

Voilà le Manhattan Bridge, impressionnante vue depuis la rue Washington du quartier DUMBO de Brooklyn.

A bridge not so far

En me décalant un peu, j’aurais même pu apercevoir l’Empire State Building entre les pieds, mais je préfère ce cadrage décalé, pas trop symétrique.

J’ai adoré mon voyage à New York l’an dernier, et j’en ai ramené quelques photos bien sympathiques, que je vais continuer à diffuser petit à petit.


Soignez votre lisibilité avec des textes de largeur maîtrisée

11 August[ —]

Afin d’assurer une présentation optimale du texte pour la lisibilité, il est nécessaire de définir un nombre optimal de caractères par ligne quelle que soit la taille du texte.

Allez, j’ose m’auto-citer… ;-)

[…] assurer une présentation optimale du texte, notamment en conservant un nombre optimal de caractères par ligne — de 55 à 65, à affiner selon les langues concernées — quelle que soit la taille du texte. Pour cela, une largeur de 30em est une valeur courante, à ajuster évidemment selon la nature de la police de caractères

En fait, les sources varient de 50 à 75 caractères par ligne :

Pour finir, un petit outil de simulation pour voir l’impact de la langue et de la police de caractères sur le nombre de caractères par ligne selon la largeur du bloc en em : http://nerd.vasilis.nl/code/measure-help/


Ripe

9 August[ —]

Je n’ai pas trop l’habitude de faire des photos de natures mortes, mais quand j’ai vu ces vieux livres dans une des installations du Festival International des Jardins de Chaumont-sur-Loire1, j’ai su qu’il y avait matière à faire une belle photo.

“Ripe”

Voici pour l’accompagner une belle citation de Carlos Ruiz Zafón extraite de “The Shadow of the Wind” :

Every book, every volume you see here, has a soul. The soul of the person who wrote it and of those who read it and lived and dreamed with it. Every time a book changes hands, every time someone runs his eyes down its pages, its spirit grows and strengthens.

PS: “Ripe” en anglais signifie « mûr » en français.

  1. Je vous recommande vivement d’y aller au moins une fois, d’ailleurs, ça vaut le détour. ⬆︎


Tout change, rien ne change

13 July[ —]

Ce site est généré avec Jekyll depuis plus d’un an maintenant, mais je n’avais pas encore réussi à migrer vers Jekyll 3, sorti en octobre, à cause de multiples blocages liés à des plugins non compatibles. La migration est maintenant faite !

Tout change

Jekyll 3

J’ai donc enfin pu migrer vers Jekyll 3, avec d’une part l’assurance de pouvoir suivre les évolutions du logiciel et de ses plugins, et d’autre part de pouvoir bénéficier de nouvelles fonctionnalités.

Mon bloquage principal pour cette migration était mon fork du plugin Jekyll Picture Tag, qui me permettait :

  • de mettre les images au même endroit que les billets en Markdown, fonction essentielle à mon avis pour faciliter la publication
  • de générer le code HTML des images responsives à base de balises

Pour couvrir ces deux besoins, j’ai pris le parti de développer deux plugins séparés, maintenant disponibles pour la communauté :

Un nouveau plugin pour associer les images aux posts Markdown

Le plugin jekyll_post_files1 permet donc de mettre les images qui illustrent les billets (et même mes autres fichiers liés, PDF par exemple) avec ceux-ci dans _posts/ ou un sous dossier, tout en laissant la possibilité de les mettre dans un dossier global /assets/images/ si elle sont vouées à être partagées.

Cela permet d’avoir cette organisation de fichiers, par exemple :

_posts/
  2016-06-09-cloudflare/
    2016-06-09-so-long-cloudflare-and-thanks-for-all-the-fissh.md
    cloudflare-architecture.jpg
    performance-report-sample.pdf
assets/
  images/
    cloudflare-logo.png

Et d’utiliser directement l’image et le PDF dans le Markdown, sans aucun chemin :

![Cloudflare logo](/assets/cloudflare-logo.png)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

![Cloudflare architecture](cloudflare-architecture.jpg)

Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

Here is [an example of performance report](performance-report-sample.pdf).

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Ceci implique qu’une prévisualisation live dans un éditeur comme MacDown est complètement opérationnelle, sans aucune configuration spécifique.

Le support de la syntaxe courante basée sur un dossier global permet aussi d’installer le plugin sans rien casser, et de migrer progressivement les contenus qui le nécessitent.

Un nouveau plugin pour gérer les images responsives avec Cloudinary

Le plugin Jekyll Picture Tag, même dans sa version d’origine, avait été mon choix à l’époque faute de mieux, n’étant en général pas la bonne solution.

Il existe maintenant un plugin Jekyll Responsive Image qui permet d’utiliser la syntaxe srcset-w/sizes en général plus appropriée, avec même son propre template.

Mais je voulais cesser de générer, optimiser et héberger moi-même les variantes d’images nécessaires, et plutôt m’appuyer sur Cloudinary, un des leaders des nombreux services SaaS de gestion d’images optimisés pour le responsive.

J’ai donc créé le nouveau plugin Jekyll Cloudinary qui ajoute un tag Liquid {% cloudinary %} pour publier les images et générer automatiquement le code HTML avec srcset-w/sizes et des URL Cloudinary, voire même un ensemble

/
si une légende est précisée.

Je peux ainsi écrire ceci :

{% cloudinary cloudflare.png alt="Un schéma montrant l'apport de Cloudflare" caption="Un schéma montrant l'apport de Cloudflare" %}

Ce qui va générer, avec ma configuration :

src="https://res.cloudinary.com/nho/image/fetch/c_limit,w_720,q_auto,f_auto/https://nicolas-hoizey.com/2016/06/cloudflare.png" srcset=" https://res.cloudinary.com/nho/image/fetch/c_limit,w_320,q_auto,f_auto/https://nicolas-hoizey.com/2016/06/cloudflare.png 320w, https://res.cloudinary.com/nho/image/fetch/c_limit,w_670,q_auto,f_auto/https://nicolas-hoizey.com/2016/06/cloudflare.png 670w, https://res.cloudinary.com/nho/image/fetch/c_limit,w_720,q_auto,f_auto/https://nicolas-hoizey.com/2016/06/cloudflare.png 720w" sizes="(min-width: 50rem) 50rem, 90vw" alt="Un schéma montrant l'apport de Cloudflare" width="720" height="327" />
Un schéma montrant l'apport de Cloudflare

Magique !

Mon temps de build du site a été largement réduit, même si les images générées étaient en cache, et le poids total du site chez mon hébergeur est passé de 325 Mo à 139 Mo.

Bien sûr, il faut ajouter le service Cloudinary à l’équation, mais l’offre gratuite suffit amplement pour un blog comme le mien :

Les tarifs de Cloudinary

Les tarifs de Cloudinary, dont l’offre gratuite déjà généreuse

Mais cela ne me suffit pas, je travaille sur un plugin qui permettrait de profiter de ce même Cloudinary mais en n’utilisant que la syntaxe Markdown standard pour les images, pour retrouver cette facilité de publication — et prévisualisation en cours d’édition — que je vantais juste avant. Mais ce n’est pas simple, je découvre en même temps Ruby, les subtilités des plugins Jekyll, etc.

Le plugin Jekyll Algolia pour indexer les contenus

J’utilisais jusqu’à présent un Rakefile bidouillé à partir d’un autre trouvé sur Github pour indexer mes contenus en appelant l’API Algolia.

J’utilise maintenant le plugin officiel, ce qui est bien plus pratique, et devrait permettre de meilleurs résultats.

Rien ne change

Malgré ces nombreuses évolutions en coulisses, rien ne change pour les visiteurs, le site généré étant quasiment identique, et même strictement identique côté visuel !

Mais si, un peu quand même, temporairement

Parmi les petits changements temporaires tout de même :

Les vidéos ne sont plus lazy loadées

Les vidéos Youtube sont pour l’instant intégrées avec le player standard, donc ne sont plus lazy loadées au clic du lecteur. C’est une régression, mais elle n’est que temporaire, il faut que j’adapte le plugin Jekyll Youtube Lazyloading à mon nouveau plugin d’embed automatique à partir d’une simple URL.

Cela m’a fait perdre 4 points sur Dareboost, tout de même ! ;-)

4 points perdus sur Dareboost

La mise en évidence du terme recherché ne fonctionne plus

L’indexation Algolia via le plugin ne fonctionne pas comme celle que j’utilisais auparavant, ce qui signifie que les résultats n’ont plus la même structure.

Il faut encore que je corrige l’affichage des résultats dans la page de recherche, en m’inspirant peut-être de ce qu’à fait Algolia dans son fork du thème Hyde.

Tous les commentaires sont les bienvenus !

Je suis vraiment preneur de vos commentaires pour savoir comment encore améliorer ce site, ou ma mise en œuvre de Jekyll, merci d’avance.

  1. Il va peut-être falloir un jour changer son nom en jekyll-postfiles pour suivre les pratiques des plugins Jekyll, même si elles sont différentes de celles plus générales des Gems. ⬆︎











mirPod.com is the best way to tune in to the Web.

Search, discover, enjoy, news, english podcast, radios, webtv, videos. You can find content from the World & USA & UK. Make your own content and share it with your friends.


HOME add podcastADD PODCAST FORUM By Jordi Mir & mirPod since April 2005....
ABOUT US SUPPORT MIRPOD TERMS OF USE BLOG OnlyFamousPeople MIRTWITTER