HOME > RSS > BLOGS France > Gastero Prod

R S S : Gastero Prod

PageRank : 1 %

VoteRank :
(0 - 0 vote)

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

Français - French


So long Disqus, hello Webmention

27 July[ —]

Enough. I’m fed up with Disqus. It’s been useful, easy to plug on this blog, but it’s a mess for web performance, and I don’t own my data, so… bye bye. Webmention is now a great alternative, with more people implementing it, so let’s try to keep only that.

So long Disqus

When I launched this Jekyll based site a while ago, I didn’t put any comment system, because I didn’t like any of the options available at the moment.

Later, I was missing the interaction I had on my previous dynamic blog powered by SPIP, so I jumped in the Disqus train, because it was the most used around me, and on the sites I visited.

Disqus is so easy to use with Jekyll

Installing Disqus on a blog only requires a few lines in the post template, with two JavaScript variable to set with Liquid values. Really easy.

Then generate the site, deploy, and it works!

But Disqus is a pain for actual and perceived web performance

I hate how Disqus feels so slow when I browse pages using it.

In fact, Disqus loads asynchronously, so it doesn’t really affect the Speed Index of the page on initial load and rendering, but I hate almost every use of lazy loading1, and Disqus’ one is really bad. I scroll the page to the post end, and then Disqus loads the comments and suggested content, pushing everything else, with an annoying repaint. I hate that. It makes me feel like the site is slow.

Also, Disqus loads around 450 kB of data — mostly JavaScript — on the pages, which is not so light for “just” comments. And it loads that from 5 or 6 different domains2, without a great caching optimization.

Disqus weight in the page

This page’s weight before and after removing Disqus, as shown in my Dareboost monitoring. Disqus accounted for three quarters of the page weight!

Disqus also requires a few rules in your Content Security Policy, but that’s manageable.

Also, not everyone likes to comment on Disqus

Disqus being a third party service, we don’t know what our comments become and how Disqus tracks us accross blogs, how we are becoming the product.

Geek&Poke cartoon about the “free” model

The famous Geek&Poke cartoon with pigs talking about the “free” model.

I can of course export all comments to keep my own local copy, but it’s not as convenient as a true local storage.

Some people also don’t like being forced to create an account on Disqus to be able to comment.

If you use Disqus on your blog, please active the “Allow guests to comment” option in the settings!

Guest commenting in Disqus

If you use Disqus, please allow guests to comment without an account

Comments history is not lost!

Of course, removing Disqus could have meant losing the comments made so far. But I don’t like to lose valuable content. Some of the comments you make on my posts are even more valuable than the posts themselves!

So, I used Pat Hawks’s jekyll-disqus-comments plugin to get a copy of all comments into YAML data files.

I had to clean them a lot, mostly manually, because they were an HTML mess. Maybe not only because of Disqus, but also because they had already been migrated from SPIP before.

The comments are shown below posts has before3, but they are now static, using a Jekyll template, without Disqus being involved anymore.

Hello Webmention

I added Webmention to this blog a while ago, with some success on popular posts like How much data should my Service Worker put upfront in the offline cache?.

I also see that Webmention use is growing elsewhere. For example, Rachel Andrew chose to adopt Webmention because she add to much SPAM:

I discovered Webmention a while ago thanks to Jeremy Keith’s experiments with Webmention on his own blog.

So, what is Webmention?

Webmention is a W3C recommendation since January 12nd 2017, based on the great work of IndieWeb people.

Drew McLellan, developer of the Perch CMS with Rachel Andrew, explains very well the Webmention flow:

  1. Frankie posts a blog entry.
  2. Alex has thoughts in response, so also posts a blog entry linking to Frankie’s.
  3. Alex’s publishing software finds the link and fetches Frankie’s post, finding the URL of Frankie’s Webmention endpoint in the document.
  4. Alex’s software sends a notification to the endpoint.
  5. Frankie’s software then fetches Alex’s post to verify that it really does link back, and then chooses how to display the reaction alongside Frankie’s post.

Reminds you of manual trackbacks and Wordpress’ automated pingbacks? Indeed. Let say it’s a standard way to do almost the same.

Trackbacks and pingbacks failed mostly because of SPAM, and IndieWeb is taking this seriously for Webmention’s future, with intense work on Vouch, an anti-spam extension to Webmention. Let’s hope it gets implemented soon everywhere.

James Richman explains in this post: Is W3C Replicating the WordPress Pingback System?

How does it work on this site?

Webmentions for this site are collected by two services:

  • webmention.io “is a hosted service created to easily handle webmentions (and legacy pingbacks) on any web page”. I use it as my Webmention endpoint. This is an open source project built by Aaron Parecki, co-founder of IndieWebCamp and editor of the W3C Webmention and Micropub specifications4.
  • Bridgy “pulls comments, likes, and reshares on social networks” (Facebook, Twitter, Google+, Instagram, Flickr, etc.) and push them to my Webmention endpoint. This is an open source project built by IndieWeb people, and is free to use.

Once Webmentions are in webmention.io, they are pulled into my jekyll sources thanks to Aaron Gustafson’s jekyll-webmention_io plugin for Jekyll, and added to my posts pages.

There are still a few issues to fix

All of this is great, but there are a few issues I’ld like to fix as soon as possible.

First, there are some Webmentions that should not be shown, either because they are useless, or because they are duplicates. webmention.io now provides a way to remove mentions, and will evolve to add a block function.

Also, I should group mentions by type. Likes, for example, can be take much less space in the page. Aaron Gustafson grouped mentions by type on his blog, but I’ld like to show them as facepiles, like Drew McLellan:

An example of facepile

Nice facepiles for likes and reposts on Drew McLellan’s site.

I also have issues with some avatars that come directly from Twitter, and are really heavy. The new version of Aaron’s Jekyll plugin will allow me to define my own template, and use Cloudinary to resize and optimize these images. I have yet to try it, because I’m still using the old single file version, while the new one is now a gem.

August 11th, 2017 update

Simple —yet really valuable— Webmentions as likes and reposts are now simple facepiles. They are the most abundant Webmentions, so it helps reduce the length of the page, and make the actual mentions more visible, most being replies on Twitter.

Also, I’m now using my own templates for all these Webmentions, and I use Cloudinary to optimize all avatars (size, format and weight), and reduce the number of domains from where ressources for the page come. Also, default links to avatars that came from webmention.io where in fact soft redirects (302) to the actual URL on Twitter’s servers, so there was an additional latency to get them. Looks like I’ve killed two birds with one stone!

  1. Don’t get me started on Medium’s stupid images lazy loading which makes me see only blured useless things when I scroll… ⬆︎

  2. So as many DNS requests are needed. ⬆︎

  3. Here is an example of comments preserved for a popular post⬆︎

  4. Aaron is also a shareaholic, traking on his website where he moves, what he eats, etc. ⬆︎

Automatiser l'installation des applications sur un nouveau Mac

2 May[ —]

Voici un script qui automatise complètement l’installation de vos applications préférées sur un Mac avec un macOS vierge, et récupère la plupart de vos paramétrages issus d’une installation précédente ou d’un autre Mac.

La migration d’un ancien à un nouveau Mac est extrêmement simple, presque magique, mais elle signifie que tout ce qui n’allait pas sur l’ancien se retrouve sur le nouveau. Je préfère donc depuis quelques années toujours repartir d’une base saine lorsque je commence à utiliser un nouveau Mac.

Au delà de cette installation initiale d’un nouveau Mac, il est aussi parfois utile de remettre à zéro un Mac déjà un peu ancien, afin d’optimiser ses ressources, et se débarasser de toutes sortes de choses que l’on a installé en test, puis mal désinstallé. Le faire lors de chaque mise à jour majeure de macOS, par exemple, est une bonne idée.

Mais cela peut prendre pas mal de temps et donner des migraines, si l’on a peur d’oublier certaines applications ou paramétrages, d’où l’automatisation nécessaire.

Comment ce script fonctionne-t-il ?

Ce script était initialement très largement inspiré de celui de Nicolas Furno1, mais est ensuite passé à l’utilisation de Homebrew Bundle grâce à la suggestion de Thomas Parisot. Il permet d’installer presque tous les logiciels que j’utilise, et de configurer quelques paramètres automatiquement après l’installation de macOS.

Ce script exploite exclusivement des lignes de commande Shell et il n’a ainsi aucune dépendance. Quelques pré-requis toutefois :

  • Il faut être administrateur du Mac pour l’utiliser (il exploite la commande sudo) ;
  • Il faut s’être connecté au préalable dans le Mac App Store ;
  • Les apps à installer depuis la boutique d’Apple doivent déjà être associées à votre compte iTunes Store, donc avoir déjà été achetées, ou téléchargées au moins une fois si elles sont gratuites.

Le script utilise 4 applications pour automatiser cela :

  • Homebrew permet d’installer automatiquement des applications système ;
  • Homebrew Cask permet d’installer des applications macOS qui sont disponibles hors du Mac App Store ;
  • mas permet d’installer des applications du Mac App Store, à condition qu’elles aient déjà été achetées ou téléchargées au moins une fois si elles sont gratuites ;
  • Mackup enfin permet de restaurer les préférences d’applications depuis une installation précédente ou un autre Mac.

Comment l’utiliser ?

Voici comment utiliser les deux scripts :

Installation initiale de l’OS vierge

  1. Installez macOS
  2. Lancez le Mac App Store et connectez-vous à votre compte

Attention, si vous migrez depuis une autre machine ou faites une réinstallation complète, utilisez tant que possible le même username, sinon Mackup ne fera pas les bonnes actions pour récupérer les paramètres des applications.

Première étape

  1. Téléchargez la dernière version du projet (lien direct) ;
  2. Ouvrez les fichiers post-install.sh et Brewfile, et modifiez ce qui est installé par défaut ;
  3. Pensez à changer les lignes brew cask install dropbox et open -a Dropbox de post-install.sh en fonction du service Cloud utilisé, ou alors à la supprimer si vous ne voulez pas en utilisez ;
  4. À partir de la ligne ## *** CONFIGURATION ***, le script configure quelques réglages par défaut, à modifier selon vos besoins ;
  5. Ouvrez ensuite le Terminal de macOS, glissez le fichier post-install.sh depuis le Finder vers le Terminal, et appuyez sur la touche Entrée et accrochez votre ceinture ;

Le script fonctionnera largement sans votre intervention, sauf :

  • pour valider l’installation de Homebrew ;
  • pour saisir le mot de passe administrateur pour Homebrew ;
  • pour le mot de passe administrateur nécessaire pour Cask ;
  • pour certains logiciels qui nécessitent un accès admin ;

Si tout va bien, il se terminera normalement sans erreur, mais en cas d’erreur, vous pourrez relancer le script et seul ce qui n’a pas déjà été installé, sera installé ;

Seconde étape

Quand le premier script est terminé, et quand vos données sont synchronisées depuis le cloud :

  1. Ouvrez le fichier post-cloud.sh et modifiez la ligne 8 en fonction du service de Cloud choisi, ou laissez-la en commentaire si vous utilisez Dropbox (choix par défaut) ;
  2. Glissez le fichier post-cloud.sh du Finder vers le Terminal, et appuyez sur la touche Entrée pour finir l’installation.

Voilà, c’est opérationnel.

Mises à jour ultérieures

  1. Lancez le script update.sh pour mettre à jour toutes les applications qui le nécessitent.

L’automatisation ultime

Je me suis encore plus facilité la tâche avec une automatisation supplémentaire qui lance directement l’installation de ma propre sélection d’applications, sans avoir à passer par toutes les autres étapes ci-dessus :

$ curl -sfL https://nhoizey.github.io/macOS-init/run.sh | sh

Bien entendu, ne lancez pas cette commande directement si vous ne souhaitez pas installer les mêmes applications que moi, ce qui est probable.

Pour conclure et achever de vous convaincre de l’intérêt de ce script, sachez que je me suis « amusé » à installer complètement trois fois un même Mac en une après-midi, alors qu’il me fallait avant bien deux jours pour arriver au même résultat manuellement.

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