Pake pour créer des applications de bureau
Pour un de nos clients, nous avons créé une application de bureau multiplateformes (Windows, macOS, Linux) en utilisant des technologies web afin que les collaborateurs puissent travailler depuis leur ordinateur. Pour ce faire, nous avons utilisé Electron, ce qui permet par ailleurs de faire en sorte que le comportement se calque sur celui d’une application native (avec une icône de bureau, des raccourcis, etc.).
Malheureusement, les applications Electron ont tendance à être assez lourdes (car elles embarquent un navigateur et un environnement Node.js). Elles peuvent donc être moins performantes par rapport aux applications natives en raison de l’utilisation d’un moteur de navigateur pour l’interface.
Pake vise justement à simplifier le processus de création d’applications de bureau multiplateformes en utilisant le principe de PWA (Progressive Web Apps). Pake enveloppe ainsi le code de l’application web dans un fichier exécutable pour plusieurs systèmes d’exploitation. Utilisant principalement le langage Go, il est plus léger et plus rapide. Il ne charge pas non plus de navigateur pour le rendu.
Attention cependant, Pake n’est pas adapté aux applications nécessitant des fonctionnalités natives avancées.
En savoir plus : https://github.com/tw93/Pake
1.fr : pour optimiser son contenu pour le SEO
Le site 1.fr est utile pour la rédaction d’un contenu que l’on souhaite faire performer en SEO.
- En amont de la rédaction : pour trouver des mots-clés connexes avec l’intention de recherche qu’il peut être intéressant d’utiliser dans son contenu.
Cela permet aux moteurs de recherche de mieux cibler de mieux comprendre de quoi on parle et donc de mieux nous positionner. L’idée est de ne pas en abuser mais de renseigner entre 15 et 25 mots-clés de façon naturelle selon la taille de son contenu tout en les mettant en gras pour indiquer que c’est important. Exemple avec un contenu sur « Audit SEO » : - Après avoir rédigé : pour vérifier que le contenu est bien compris et optimisé pour un moteur de recherche.
L’outil donne un score d’optimisation par rapport à l’intention de recherche ciblée. L’idéal est d’être au dessus de 80% avant de publier son contenu.
Voici un exemple avec un contenu sur « Ruby on rails » :
Les couleurs OKLCH en CSS
Voici un article complet sur la nouvelle fonction CSS oklch() qui offre une meilleure gestion des couleurs que les notations rgb() et hsl() et permet non seulement une manipulation plus intuitive des couleurs mais améliore également l’accessibilité.
Le modèle OKLCH a été conçu pour corriger certaines limitations des modèles de couleur plus anciens (comme RGB ou HSL).
- la composante L (Lightness) représente la luminosité de la couleur, c’est-à-dire la perception de la clarté ou de l’obscurité.
- la composante C (Chroma) correspond à la saturation ou la pureté de la couleur. Une valeur de chroma élevée signifie que la couleur est plus vive, tandis qu’une valeur faible indique une couleur plus terne (vers un gris).
- la composante H (Hue) correspond à la teinte ou couleur spécifique, qui est un angle sur le cercle chromatique. Elle représente la couleur réelle, par exemple, rouge, bleu, vert, etc. Il est généralement exprimé en degrés (0 à 360°).
Le modèle OKLCH offre plusieurs avantages :
- Perception uniforme : contrairement aux autres modèles de couleur comme RGB ou HSL, qui peuvent avoir des comportements non linéaires en fonction de la lumière ou des couleurs, OKLCH est basé sur un modèle perceptuellement uniforme. Cela signifie qu’un changement de valeur dans n’importe quel axe (L, C, H) produit une modification perceptuelle constante, ce qui rend les ajustements de couleur plus intuitifs.
- Compatibilité avec les autres espaces de couleurs : OKLCH est dérivé du modèle CIELAB, qui est très populaire en gestion des couleurs, et est conçu pour être plus en phase avec la perception humaine de la couleur. Il permet donc une conversion facile entre les différents espaces de couleur tout en offrant plus de flexibilité pour un design plus précis.
- Saturation intuitive : Dans OKLCH, la relation entre Chroma et Lightness est plus intuitive qu’avec d’autres modèles, rendant plus facile le travail des designers et des développeurs lorsqu’ils manipulent la saturation et la lumière d’une couleur.
Le modèle OKLCH permet un contrôle plus précis même s’il n’est pas encore utilisé dans tous les navigateurs. À suivre : https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
Les images responsive : un article technique complet et précis
On en parle souvent. On en utilise souvent. Mais quand on essaye de paramétrer finement des images responsives, notamment avec les attributs srcset et sizes, il faut bien l’avouer, c’est galère…
L’attribut srcset permet de spécifier différentes versions d’une image pour différentes résolutions d’écran et tailles d’écran. Il s’agit d’une liste d’images et de leurs résolutions respectives. L’attribut sizes permet de spécifier la largeur prévue pour l’image dans différents contextes (par exemple, pour différents types de dispositifs ou largeurs de fenêtres). Cela aide le navigateur à choisir la bonne image dans le srcset en fonction de la taille réelle à laquelle l’image sera affichée.
Comprendre exactement quand et comment utiliser les deux attributs en combinaison peut être déroutant, car il faut tenir compte :
- de la taille d’affichage réelle,
- de la résolution de l’écran,
- du ratio de pixels
- et de l’optimisation de la performance.
Qui plus est, les écrans à haute densité (comme ceux des smartphones avec Retina ou des écrans 4K) ont besoin de plus de pixels pour une même image afin que celle-ci apparaisse nette. L’attribut srcset permet de spécifier différentes résolutions d’image (par exemple, 1x, 2x, 3x) en fonction de la densité des pixels de l’écran, mais la correspondance entre la taille réelle de l’image et celle qui sera réellement utilisée par le navigateur peut être difficile à anticiper. Les règles concernant la densité de pixels et la correspondance avec les tailles réelles des images peuvent devenir complexes, en particulier si la taille d’affichage de l’image dépend de l’orientation, de la taille de la fenêtre ou du contexte de l’appareil.
Dans cet article, vous comprendrez comment utiliser correctement les attributs srcset et sizes pour offrir une expérience utilisateur optimale tout en optimisant les performances des images responsives. S’y trouvent des exemples concrets avec du multi-colonnes. C’est concis, ça va droit au but et on a tous les cas d’usage du plus simple au plus compliqué. Bref un bel article à garder sous la main :
Un guide pratique complet de l'utilisation d'ARIA pour l'accessibilité
L’utilisation de ARIA (Accessible Rich Internet Applications) est essentielle pour améliorer l’accessibilité des applications web, notamment celles qui utilisent des technologies interactives comme JavaScript, Ajax, ou des composants complexes.
ARIA permet d’ajouter des informations supplémentaires aux éléments HTML pour que les technologies d’assistance, comme les lecteurs d’écran, puissent mieux comprendre la structure et le comportement de la page.
Voici un guide complet, conçu par W3C, pour utiliser la sémantique ARIA, avec des design patterns, des balises et rôles, des bonnes pratiques et un index complet : https://www.w3.org/WAI/ARIA/apg/