Matt Biscay: développeur WordPress et WooCommerce pour SkyMinds

Web/Tech

Tous les tutoriels et articles de barbus orientés technique.

Diffuser des vidéos sur une télévision avec la chromecast

Caster des contenus vidéos sur une télévision

by · Lecture: 3 minutes

Avec la multitude de services de diffusion de contenus comme Netflix, Amazon Prime ou Canal+, il n’est pas rare d’avoir un accès au service depuis une tablette ou un ordinateur mais il n’est pas toujours aisé d’envoyer le contenu vidéo directement sur la télévision.

Voici quelques astuces pour caster vos contenus vidéos sur votre télévision, en quelques secondes et sans prise de tête.

Utiliser Chrome pour caster les vidéos

Hé oui, si vous avez une ChromeCast par exemple, il est vraiment bien plus simple d’utiliser le navigateur Chrome qui possède une option qui s’appelle tout simplement Caster.

Je suis fervent utilisateur de FireFox et il faut bien avouer que là, on ne peut pas rivaliser avec Chrome en ce qui concerne le casting.

Lire une vidéo depuis les services de streaming

Si vous utilisez un service de streaming, lancez le site, choisissez votre film ou série et lancez-la.

Ensuite, cliquer sur l’icône kebab (l’icône avec les trois points verticaux) à côté de votre avatar Google et de la barre de recherche puis sélectionnez l’option Caster:

Caster des contenus vidéos sur une télévision photo
Diffuser sur la TV avec Chrome

Une fenêtre de notification apparaît et vous offre la possibilité de choisir l’appareil vers lequel envoyer la diffusion de la vidéo.

Et c’est tout ! On ne peut pas faire plus simple!

Lire la suite

Calculer la durée totale des vidéos d'un dossier, bash, linux

Calculer la durée totale des vidéos d’un dossier

by · Lecture: 2 minutes

Dans le cadre d’une formation en ligne, j’ai cherché à connaître la durée totale des fichiers vidéos qui étaient contenus dans un dossier.

Il est toujours intéressant de donner le nombre d’heures de vidéos sur une fiche produit par exemple, pour que le client puisse avoir une idée avant d’acheter.

Pour ce faire, nous avons plusieurs options: ffmpeg d’une part ou alors mediainfo.

J’ai lancé un petit apt install factice sur le serveur : installer ffmpeg revient à installer 110 nouveaux paquets, soit 600 Mo. En comparaison, mediainfo ne requiert que 3 paquets, soit 2.3 Mo.

Nous utiliserons donc mediainfo pour nos tests.

Calculer la durée de chaque fichier

Voici comment calculer la durée de chaque fichier, en format lisible par tous:

 mediainfo --Output="General;%Duration/String%" *.mp4
38 min 6 s

Voici comment calculer la durée de chaque fichier, mais cette fois au format timecode (xx:xx:xx.xx) :

 mediainfo --Output="General;%Duration/String3%" *.mp4
00:38:06.12

Ces deux commandes nous donnent la durée de chaque fichier MP4 présent dans le répertoire.

Nous allons maintenant voir comment les additionner pour obtenir la durée totale des enregistrements du dossier.

Calculer la durée totale des fichiers d’un dossier

Nous allons utiliser la dernière commande, celle qui nous donne les durées au format timecode, et allons ajouter toutes ces durées pour obtenir la durée totale des enregistrements présents dans notre dossier.

Voici la commande:

mediainfo '--Output=Video;%Duration%\n' *.mp4 | awk '{ sum += $1 } END { secs=sum/1000; h=int(secs/3600);m=int((secs-h*3600)/60);s=int(secs-h*3600-m*60); printf("%02d:%02d:%02d\n",h,m,s) }'

Résultat:

21:03:48

Nous avons donc un peu plus de 21 heures d’enregistrements pour notre cours en ligne :)

Créer un enregistrement BIMI pour afficher votre logo dans les entêtes email de vos destinataires photo 1

Créer un enregistrement BIMI pour afficher votre logo dans vos emails clients et prospects

by · Lecture: 8 minutes

Les Brand Indicators for Message Identification (BIMI) – indicateurs de marque pour l’identification des messages en français – sont un moyen standardisé pour les entreprises d’utiliser leur logo comme indicateur visible pour aider les destinataires d’e-mails à reconnaître et à éviter les messages frauduleux.

BIMI s’appuie sur le protocole d’authentification de messagerie DMARC pour développer la confiance avec les clients actuels et potentiels.

Avantages de l’enregistrement BIMI

En publiant votre fiche BIMI et le logo associé dans le DNS, votre marque sera facilement reconnue et approuvée par les clients actuels et futurs.

Non seulement les clients actuels et potentiels sont convaincus que vos e-mails sont légitimes, mais ils gagnent également un niveau de confiance en voyant votre logo approuvé dans leur boîte de réception.

Chaque fois qu’un client reçoit un message de votre domaine en utilisant la norme BIMI, au moins trois impressions de marque uniques potentielles sont effectuées: liste de messages, adresse e-mail dans le message et dans le message lui-même.

Plus vite votre entreprise décide d’adopter le BIMI (lorsqu’il est disponible via votre fournisseur de messagerie sortante), plus votre marque sera reconnue.

Étape 1 : mettre en place SPF, Sender-ID, DKIM et DMARC (et HTTPS)

Habituellement, les logos sont automatiquement extraits de diverses sources et organisés par les fournisseurs de clients de messagerie. En conséquence, différents logos s’affichent en fonction du client de messagerie et de l’appareil. Avec BIMI, les marques contrôlent leurs logos officiels affichés, quelle que soit la taille de la marque.

Les symboles sont un moyen succinct et efficace de communiquer des informations sur votre entreprise. Un logo est un élément important de la marque de votre entreprise et a un impact significatif sur la perception du public d’une entreprise.

En fait, un logo est l’un des investissements de marque les plus importants qu’une entreprise puisse faire. Il attire l’attention, fait une première impression forte, est le fondement de votre identité de marque, de la sécurité, est mémorable, vous sépare de la concurrence, favorise la fidélité à la marque et est attendu par votre public.

La spécification BIMI s’appuie sur les normes d’authentification de messagerie existantes telles que Sender Policy Framework (SPF), DomainKeys Identified Mail (DKIM) et Domain-based Message Authentication, Reporting & Conformance (DMARC).

Les marques qui déploient correctement l’authentification des e-mails à l’aide de DMARC pourront tirer parti de BIMI. DMARC est une norme qui permet aux propriétaires de domaines (marques) de protéger leurs domaines en définissant des politiques d’authentification des e-mails.

DMARC fournit également des rapports qui aident à configurer l’authentification des e-mails à l’aide de SPF et DKIM sur toutes les sources.

Je vous conseille le tutoriel sur la mise en place de DMARC pour votre domaine, ainsi que celui sur l’authentification SPF, Sender-ID et DKIM pour tout paramétrer dans les règles de l’art.

Le domaine doit impérativement être servi en HTTPS.

Une fois toutes les sources valides identifiées et authentifiées, une politique DMARC restrictive (c’est-à-dire p=quarantine ou p=reject) peut être définie:

_dmarc IN TXT v=DMARC1; p=reject; rua=mailto:dmarc@example.com;

En utilisant cette stratégie, les propriétaires de domaine peuvent contrôler ce qu’il advient des messages non authentifiés (non approuvés), qu’ils finissent dans le spam ou qu’ils soient complètement rejetés par le fournisseur de messagerie destinataire.

DMARC aide les marques à se protéger contre divers types d’abus de domaine et d’attaques de phishing, mais courants.

En termes simples, vous souhaitez éventuellement avoir vos enregistrements DMARC avec une politique de quarantaine ou de rejet pour le domaine de votre marque, que vous implémentiez ou non BIMI.

Lire la suite

Serveur dédié: gérez comptes et alias email avec PostfixAdmin photo

Serveur dédié: gérez comptes et alias email avec PostfixAdmin

by · Lecture: 5 minutes

Si vous possédez et gérez votre propre serveur email, il peut être très intéressant de proposer des comptes emails et des alias pour vos utilisateurs.

J’ai écrit il y a quelques années un tutoriel qui faisait cela à la main avec une base SQL et des domaines virtuels mais il y a aujourd’hui beaucoup plus simple avec PostfixAdmin.

PostfixAdmin

PostfixAdmin est une interface web open-source qui permet de gérer des comptes mails, des domaines et des alias sur un serveur mail Postfix.

il s’intègre avec

  • Postfix
  • un server IMAP/POP3 comme Dovecot ou Courier
  • une base de données (sqlite, mysql, postgresql)
  • Fetchmail (optionnel)

Il est très utile pour créer des alias à la volée ou des comptes mail rapidement.

Création du sous-domaine

Je trouve cela plus simple de créer un sous-domaine pour ce type d’application. Dans votre gestionnaire DNS, il suffit d’ajouter un enregistrement de type A:

XXXXX.EXAMPLE.COM IN A xxx.xxxx.xxx.xxx

XXXXX est votre sous-domaine sur EXAMPLE.COM et xxx.xxx.xxx.xxx l’adresse IPv4 de votre serveur.

Création de la base de données

Nous utilisons MySQL/MariaDB pour postfix donc on s’identifie sur la console mysql :

mysql -u root -p 

[MOT DE PASSE ROOT]

Et on lance:

CREATE DATABASE postfix; 
CREATE USER 'mymailadmin'@'localhost' IDENTIFIED WITH mysql_native_password BY '1nyXI7Y)$spmslgz4HhdE4Lc_vm&)Gh!MsZFf64645fek'; 
GRANT ALL PRIVILEGES ON postfix.* TO 'mymailadmin'@'localhost'; 
FLUSH PRIVILEGES; EXIT;

Nous avons donc un nouvel utilisateur et une nouvelle base de données, spécifiques pour PostfixAdmin.

Configuration NginX pour PostfixAdmin

On crée un nouveau server block spécifique à PostfixAdmin:

nano /etc/nginx/sites-available/postfixadmin.conf

Lire la suite

Installation de Nextcloud: votre propre service de cloud chez vous photo 1

Nextcloud: mise en place du cron et des alertes emails

by · Lecture: 2 minutes

Mise en place du cron

Sur votre instance Nextcloud, il est important de mettre en place un cron qui va permettre de lancer les tâches de maintenance à intervalles réguliers.

Dans Paramètres > Administration > Paramètres de base, sélectionnez l’option Cron pour les tâches de fond:

nextcloud cron 1280x746

Ensuite, créez un fichier pour l’utilisateur www-data depuis le terminal: 

crontab -u www-data -e

et à la fin du fichier on ajoute une tâche qui va se lancer toutes les 5 minutes:

*/5  *  *  *  * php -f /home/www/nextcloud/cron.php

Pensez à changer le chemin pour celui de votre installation Nextcloud.

Et redémarrez le service cron pour appliquer les changements:

service cron restart

Notification automatique des nouvelles versions

Maintenant que le cron est en place, nous allons pouvoir planifier une tâche qui vérifiera chaque semaine s’il existe une nouvelle version de Nextcloud.

Cela peut sembler fou mais Nextcloud ne vous prévient pas lorsque de nouvelles mises à jour sont disponibles et il faut donc le mettre en place soi-même.

Nous ouvrons donc le fichier crontab pour notre utilsateur www-data :

crontab -u www-data -e

et nous ajoutons cette ligne, qui permet la vérification et notification des nouvelles versions par email, tous les vendredis à 19h:

0 19 * * 5 php /home/www/nextcloud/occ update:check # nextcloud update check, at 19:00 every Friday

Pensez à changer le chemin pour celui de votre installation Nextcloud.

Et redémarrez le service cron pour appliquer les changements:

service cron restart

Mise en place des alertes par email

Nextcloud est capable de vous alerter pour les mises à jour de sécurité ainsi que la gestion des mots de passe perdu pour les comptes utilisateurs mais encore faut-il qu’il soit configuré pour utiliser votre serveur mail correctement. Par défaut, rien n’est configuré.

Lire la suite

Cloudflare, logo, banner

Résoudre l’erreur “HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR”

by · Lecture: 3 minutes

Le serveur héberge plusieurs sites et l’un d’entre eux, Utopique, retournait l’erreur curl: (92) HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1) lorsqu’on le visitait avec Chrome mais fonctionnait sans souci avec Firefox.

Le plus drôle dans l’histoire (enfin drôle, j’ai passé deux jours à éplucher mes server blocks, les logs et la configuration SSL), c’est que ce site utilise le même modèle de server blocks que les autres. Je soupçonnais principalement la configuration NginX alors qu’en fait, elle n’y était pour rien!

Le problème se situe en fait au niveau de Cloudflare, et apparaît notamment avec le réglage suivant: Caching > Configuration > Browser Cache TTL > Respect Existing Headers.

Pour résoudre le problème, il faut choisir un autre réglage que “Respect Existing Headers”.

On creuse un peu à l’aide de curl pour comprendre ce qu’il se passe:

curl -vvv -I https://utopique.net --http2

Voici le résultat de la commande:

 Trying 2606:4700:3036::ac43:dc02:443…
 TCP_NODELAY set
 Connected to utopique.net (2606:4700:3036::ac43:dc02) port 443 (#0)
 ALPN, offering h2
 ALPN, offering http/1.1
 successfully set certificate verify locations:
 CAfile: /etc/ssl/certs/ca-certificates.crt
 CApath: /etc/ssl/certs
 TLSv1.3 (OUT), TLS handshake, Client hello (1):
 TLSv1.3 (IN), TLS handshake, Server hello (2):
 TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
 TLSv1.3 (IN), TLS handshake, Certificate (11):
 TLSv1.3 (IN), TLS handshake, CERT verify (15):
 TLSv1.3 (IN), TLS handshake, Finished (20):
 TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
 TLSv1.3 (OUT), TLS handshake, Finished (20):
 SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384
 ALPN, server accepted to use h2
 Server certificate:
 subject: C=US; ST=CA; L=San Francisco; O=Cloudflare, Inc.; CN=sni.cloudflaressl.com
 start date: Jul 10 00:00:00 2020 GMT
 expire date: Jul 10 12:00:00 2021 GMT
 subjectAltName: host "utopique.net" matched cert's "utopique.net"
 issuer: C=US; O=Cloudflare, Inc.; CN=Cloudflare Inc ECC CA-3
 SSL certificate verify ok.
 Using HTTP2, server supports multi-use
 Connection state changed (HTTP/2 confirmed)
 Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
 Using Stream ID: 1 (easy handle 0x564540aecc80) 
   HEAD / HTTP/2
   Host: utopique.net
   user-agent: curl/7.68.0
   accept: /
      TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
   TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
   old SSL session ID is stale, removing
   Connection state changed (MAX_CONCURRENT_STREAMS == 256)!
   http2 error: Invalid HTTP header field was received: frame type: 1, stream: 1, name: [access-control-allow-headers "origin, x-requested-with, content-type, accept"], value: []
   HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)
   stopped the pause stream!
   Connection #0 to host utopique.net left intact
   curl: (92) HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)

Lire la suite

Installation de Nextcloud: votre propre service de cloud chez vous photo 1

Nextcloud: solutions pour les erreurs occ pour PHP, le mode maintenance et la base de données

by · Lecture: 13 minutes

Dans Nextcloud, la page Paramètres > Administration > Vue d’ensemble vous permet d’avoir un bon aperçu des tâches de maintenance à effectuer sur votre installation Nextcloud.

This version of Nextcloud is not compatible with > PHP 7.4

C’est une erreur – et non un avertissement – qui bloque toutes les commandes suivantes dans le terminal. Elle apparaît lorsqu’une version de PHP plus récente est installée sur votre serveur.

Chez moi, par exemple, j’ai PHP 7.4 pour les sites en production et pour Nextcloud mais aussi PHP 8 pour les plateformes de développement.

Voici le message d’erreur:

This version of Nextcloud is not compatible with > PHP 7.4.

You are currently running 8.0.0

Ce message apparaît parce que Nextcloud lance un rapide php -v pour déterminer la version de PHP installée. Cela ne reconnait par contre que la version la plus récente installée.

Voici ce que donne la commande:

PHP 8.0.0 (cli) (built: Nov 27 2020 12:26:22) ( NTS )
 Copyright (c) The PHP Group
 Zend Engine v4.0.0-dev, Copyright (c) Zend Technologies
     with Zend OPcache v8.0.0, Copyright (c), by Zend Technologies

La solution consiste à modifier manuellement la version retournée par php -v, à l’aide de la commande update-alternatives :

update-alternatives --set php /usr/bin/php7.4

Si on relance php -v, voici le résultat:

PHP 7.4.13 (cli) (built: Nov 28 2020 06:24:59) ( NTS )
 Copyright (c) The PHP Group
 Zend Engine v3.4.0, Copyright (c) Zend Technologies
     with Zend OPcache v7.4.13, Copyright (c), by Zend Technologies

Avec cela, vous êtes parés pour les commandes occ de Nextcloud.

Nextcloud reste bloqué en mode maintenance

Cela peut arriver lors d’une mise à jour, pour diverses raisons.

Solution 1: avec la commande occ 

cd /home/www/nextcloud 
sudo -u www-data php ./occ maintenance:mode --off

Solution 2: éditer le fichier config.php

1. Editez le fichier config.php:

nano /home/www/nextcloud/config/config.php

2. trouvez:

 'maintenance' => true,

3. remplacez par:

 'maintenance' => false,

Enregistrez le fichier, l’assistant de mise à jour est alors capable de reprendre là où il s’était arrêté, automatiquement.

Lire la suite

Installation de Nextcloud: votre propre service de cloud chez vous photo 1

Installation de Nextcloud: votre propre service de cloud chez vous

by · Lecture: 7 minutes

Cela fait quelques temps que j’utilise une instance Nextcloud sur le serveur. Cela vous permet de créer votre propre service de cloud: vous gérez vous-mêmes vos données (images, documents, fichiers…) sans passer par un service tiers.

Vous gardez donc entièrement la main sur vos données : plus besoin de Google Drive ou Dropbox (ou autre), c’est vous qui gérez. Nextcloud possède même ses applications mobiles pour pouvoir accéder à vos données à tout moment, sur tous supports.

Ce tutoriel est réalisé sous Ubuntu Server mais il est facilement transposable à votre système d’exploitation sous Linux.

Installation de Nextcloud

Voici les paquets PHP nécessaires pour installer Nextcloud:

  • PHP (7.2, 7.3 or 7.4)
  • PHP module ctype
  • PHP module curl
  • PHP module dom
  • PHP module GD
  • PHP module hash (only on FreeBSD)
  • PHP module iconv
  • PHP module JSON
  • PHP module libxml (Linux package libxml2 must be >=2.7.0)
  • PHP module mbstring
  • PHP module openssl
  • PHP module posix
  • PHP module session
  • PHP module SimpleXML
  • PHP module XMLReader
  • PHP module XMLWriter
  • PHP module zip
  • PHP module zlib

Nextcloud est maintenant capable de tourner sous PHP 7.4 donc vous pouvez installer les paquets PHP qui lui sont nécessaires:

apt install php7.4 php7.4-cli php7.4-gd php7.4-imap php7.4-mysql php7.4-soap php7.4-apcu php7.4-common php7.4-gmp  php7.4-intl php7.4-opcache php7.4-xml php7.4-apcu-bc php7.4-curl php7.4-igbinary php7.4-json php7.4-readline  php7.4-zip php7.4-bcmath php7.4-fpm php7.4-imagick php7.4-mbstring php7.4-redis

On télécharge Nextcloud, depuis la page Téléchargement ou via la ligne de commande:

wget https://download.nextcloud.com/server/releases/nextcloud-22.0.0.zip

On décompresse l’archive:

unzip nextcloud-22.0.0.zip

Et on déplace ensuite le répertoire dans un dossier public lisible par le serveur de fichiers:

mv nextcloud /var/www/html/

et on lui donne ensuite les bonnes permissions:

chown -R www-data:www-data /var/www/html/nextcloud

Lire la suite

Jethro Tull - Aqualung photo

Local : résoudre l’erreur “missing zlib extensions”

by · Lecture: 2 minutes

A la suite d’une mise à jour de Local, j’ai eu la surprise d’obtenir le message d’erreur suivant au moment d’installer un plugin manuellement, par upload du fichier zip:

Unpacking the package…
Abort class-pclzip.php : 
Missing zlib extensions

Toutes les machines docker fonctionnent sous PHP 7.4.1 et cela ne s’était jamais produit auparavant. Local est installé sur ma machine MacOS.

Si cela vous arrive, voici comment régler le problème en quelques minutes.

Marche à suivre pour Local (MacOS)

Ce sont les Lightning Services qu’il faut mettre à jour: comme ils ne peuvent être mis à jour via l’auto-updater, nous allons devoir les supprimer et les réinstaller pour notre version de PHP.

1. Quittez Local si le programme est en cours d’utilisation.

2. Dans le terminal, lancez la commande suivante:

rm ~/Library/Application\ Support/Local/lightning-services/php-7.4* -rf

Notez que l’on cible ici les versions 7.4.x de PHP.

3. Relancez Local.

4. Ajoutez un nouveau site lambda (j’ai appelé le mien testing mais il pourra être supprimé dès la fin de cette procédure) sous Local qui utilise PHP 7.4. Cela lancera le téléchargement et l’installation des Lightning Services, avec la mise à jour zlib.

5. Lancez maintenant votre site Local, qui tourne sous PHP 7.4 : vous n’avez maintenant plus de problèmes pour installer plugins et thèmes manuellement, avec des fichiers zip.

Et voilà, vous pouvez de nouveau installer des thèmes et plugins manuellement. Cela devrait être corrigé dans une nouvelle version de Local – surtout que PHP 8 vient de sortir il y a quelques semaines.

Vanilla JS : créer des éléments aux couleurs aléatoires photo

Vanilla JS : créer des éléments aux couleurs aléatoires

by · Lecture: 3 minutes

On a souvent besoin de distinguer des éléments rapidement et c’est très simple de le faire visuellement, avec des couleurs, pour bien différencier les blocs.

Voici une solution simple et élégante pour créer des éléments aux couleurs aléatoires, en utilisant du javascript natif, que l’on appelle Vanilla JS.

Cela devrait vous permettre d’obtenir ceci – des blocs dont la couleur est générée aléatoirement et qui change à chaque rafraichissement de la page.

J’inclus ici un bouton qui permet de rafraîchir aléatoirement les couleurs de notre bloc:

  • Color 1
  • Color 2
  • Color 3
  • Color 4
  • Color 5
  • Color 6

Lire la suite

Réalisation de votre projet web photo

Réalisons votre projet WordPress ou WooCommerce

by · Lecture: 10 minutes

Nos compétences au service de vos besoins

Stratégie

Nous étudions le parcours de votre site et vos besoins pour vous fournir une solution à long-terme, qui correspond à votre vision.

Développement

Vous souhaitez ajouter de nouvelles fonctionnalités à votre site ou boutique? Nous pouvons coder la solution!

Performance

Votre site doit être rapide et optimisé sur tous supports afin de convertir vos visiteurs. Nous auditons votre site et proposons la solution adaptée.

Hébergement

Vos projets ont besoin d’un hébergement de qualité, c’est la fondation de votre site web et elle doit être solide car c’est sur elle que tout repose.

Maintenance

Votre site a besoin d’une maintenance régulière afin de toujours utiliser la dernière mouture du code et rester sécurisé face aux menaces.

Assistance

Vous avez besoin d’aide ponctuelle? Pas de problème, nous sommes à votre écoute pour vous dépanner rapidement et sereinement.

Soumettez votre projet

Lire la suite

CSS: superposer du texte lisible sur une image de fond photo

CSS: superposer du texte lisible sur une image de fond

by · Lecture: 2 minutes

Il est souvent utile de pouvoir placer du texte sur une image de fond, de manière à ce que l’on puisse lire le texte facilement et distinguer l’image. C’est ce que j’utilise sur le blog pour les images d’illustration des articles.

Nous allons donc superposer du texte lisible sur une image de fond en utilisant uniquement du code HTML et CSS, ce qui nous donne ceci:

Voici une planche à voile

Une image de planche à voile se trouve derrière ce texte.

Vous souhaitez accomplir la même chose? Voici comment faire.

Lire la suite