Dans son article, Josh W. Comeau explore les défis et solutions pour créer des effets de décalage de couleurs dynamiques en CSS, notamment pour des animations de particules. Il explique d’abord comment générer des couleurs aléatoires en HSL pour une cohérence visuelle, mais souligne une limitation majeure : les navigateurs interpolent les couleurs en RGB, ce qui produit des teintes grisées et peu naturelles lors des transitions entre deux couleurs HSL. Par exemple, une transition entre rouge et turquoise passe par du gris, car les canaux RGB convergent vers des valeurs similaires. Pour contourner ce problème, il propose d’utiliser la propriété CSS filter: hue-rotate(), qui permet de faire tourner la teinte de manière fluide et naturelle autour de la roue chromatique, sans perte de saturation. Il partage aussi des astuces pour ajouter des effets de scintillement aléatoires aux particules, améliorant ainsi le réalisme de l’animation.
Pour intercepter le trafic réseau d’une application Android, deux approches principales existent : l’inspection via Android Studio (réservée aux apps en développement) et l’utilisation d’un proxy HTTPS (comme Proxyman) pour les apps tierces. En développement, Android Studio exploite le flag android:debuggable="true" et le protocole JDWP pour rediriger les flux réseau via ADB, permettant d’analyser les requêtes HTTP(S) sans déchiffrement direct, mais en interceptant les objets mémoire des bibliothèques comme OkHttp. Pour les apps en production, non debuggables, la solution passe par un proxy HTTPS (ex : Proxyman) : il faut rediriger le trafic de l’émulateur/device vers le proxy, installer son certificat root dans le magasin système (nécessitant souvent un accès root ou un émulateur non-production), puis activer le déchiffrement HTTPS pour les domaines cibles. Cette méthode contourne les restrictions d’Android 7+ sur les certificats utilisateur, mais exige des manipulations avancées (injection de certificats via adb, configuration de SELinux, etc.). L’article détaille aussi le rôle clé de Zygote dans l’initialisation des apps et propose des scripts pour automatiser l’installation des certificats. Une alternative comme Frida est évoquée pour des cas plus complexes.
Pour optimiser les Dev Containers, l’auteur propose une approche basée sur les prebuilds : créer une image Docker générique (avec Zsh, Oh My Zsh, Docker-in-Docker, etc.) et la réutiliser comme base pour tous ses projets. Cela évite de reconstruire l’environnement à chaque fois et réduit le temps de démarrage. Il utilise aussi des volumes Docker pour persister l’historique des commandes et les dépendances Maven entre les conteneurs. Grâce à la CLI des Dev Containers, il construit et pousse ces images pré-configurées, puis les utilise directement dans ses projets (ex. : Java avec Maven, JBang, Quarkus). Résultat : des environnements prêts en quelques secondes, même si la taille des images reste conséquente. Une méthode idéale pour gagner en efficacité, surtout lors des changements de machine ou pour standardiser ses outils de dev.
Un analyste confronté à une requête lente sur une table de 150 millions de transactions (2 minutes d’exécution, parfois des timeouts) a optimisé son code en utilisant une CTE (Common Table Expression) avec WITH. Au lieu de joindre d’abord les tables puis de filtrer, la CTE filtre d’abord les transactions récentes (20M de lignes au lieu de 150M), réduisant le temps d’exécution de 127 à 11 secondes. En allant plus loin et en agrégeant directement dans la CTE, il a même descendu ce temps à moins de 6 secondes. La clé ? Filtrer tôt pour alléger la charge de jointure, clarifier la logique, et exploiter les optimisations des moteurs modernes (PostgreSQL 12+, BigQuery). Attention toutefois : les performances varient selon le SGBD (risque de matérialisation en tables temporaires sous MySQL ancien). Une leçon simple : une requête bien structurée = des gains de performance majeurs.
L'auteur présente 3 techniques pour déclencher un téléchargement de fichier :
- un attribut introduit en HTML5
- la simulation d'un clic en JavaScript, par exemple suite à une action utilisateur
- dans le cas du téléchargement de données générées dynamiquement, les transformer en Blob et utiliser la méthode précédente
L’article met en lumière un piège courant en JavaScript : l’utilisation de Array.includes dans une boucle (comme source.some(item => target.includes(item))) peut devenir extrêmement coûteuse en performance avec des tableaux volumineux, car la complexité algorithmique passe à *O(nm). Par exemple, avec des tableaux de 60 000 éléments, l’exécution peut prendre plusieurs secondes. La solution consiste à utiliser des structures de données optimisées pour des recherches en temps constant, comme un objet, une Map, ou mieux, un Set (new Set(target)), réduisant la complexité à O(n + m)** et rendant le code quasi instantané même pour de très grands jeux de données. Une astuce simple, mais cruciale pour éviter des goulots d’étranglement inattendus dans le code JavaScript.
L'article d'Alex Wlchan explique une méthode plus rapide pour copier des bases de données SQLite entre ordinateurs. En utilisant la commande .dump de SQLite, on peut convertir la base de données en un fichier texte contenant des instructions SQL, ce qui réduit considérablement la taille du fichier. Ce fichier texte, qui peut être encore compressé avec gzip, est plus rapide à transférer. Une fois copié, le fichier texte peut être utilisé pour reconstruire la base de données locale. Cette approche évite les problèmes de corruption lors de la copie de gros fichiers et améliore l'efficacité des transferts, surtout pour les bases de données volumineuses.
L'article explore comment le Playwright MCP (Model Context Protocol) en mode Agent peut naviguer de manière autonome dans une application, découvrir des fonctionnalités clés et générer des tests exécutables sans script manuel. À travers une démonstration en direct sur une application de films, l'auteur montre comment le MCP peut découvrir des cas limites, construire une couverture de test et même révéler des bugs non détectés manuellement. L'agent explore l'application, interagit avec elle comme un utilisateur réel, et génère automatiquement des tests basés sur ces interactions, offrant ainsi une approche puissante d'assistance par IA pour le développement et les tests.
L'article décrit une méthode pour démarrer Symfony Messenger à la demande afin de réduire les coûts inutiles sur AWS pour un projet nécessitant l'importation et le traitement occasionnel de grands fichiers Excel. L'auteur configure Symfony Messenger pour utiliser une file d'attente Doctrine et crée un message personnalisé, ProcessImportMessage, qui est envoyé via un bus de messages chaque fois qu'un fichier est téléversé. Un service, MessengerConsumer, est utilisé pour démarrer le consommateur de messages uniquement lorsque nécessaire, avec une limite de temps pour s'arrêter automatiquement. Le message est ensuite traité par un gestionnaire qui importe les données et gère les erreurs, offrant ainsi une solution efficace et économique pour les traitements peu fréquents.
L'article aborde un problème courant mais critique dans les projets Symfony utilisant Doctrine et le Symfony Serializer. L'auteur décrit une expérience de débogage où une erreur de mémoire épuisée a été causée par l'utilisation négligente du serializer par défaut de Symfony, qui utilise les métadonnées de Doctrine, entraînant une consommation excessive de mémoire. Le problème est survenu lors de la sérialisation de grandes quantités de données dans une entité contenant de grands champs JSON. La solution proposée consiste à créer un adaptateur de serializer léger qui évite complètement les métadonnées de Doctrine. L'article souligne l'importance d'utiliser des serializers adaptés pour les données internes de débogage ou de sauvegarde et met en garde contre l'utilisation du serializer par défaut pour les entités avec de grandes ou des données imbriquées, afin de rester en contrôle de l'utilisation de la mémoire.
L'article explore les défis et solutions liés à l'utilisation de paramètres avec les écouteurs d'événements en JavaScript. L'auteur souligne l'importance de gérer correctement ces écouteurs pour éviter les fuites de mémoire et les problèmes de performance. L'article aborde des erreurs courantes, comme l'appel immédiat de fonctions lors de l'ajout d'écouteurs, et propose des solutions utilisant des fonctions fléchées, des fermetures et l'API AbortController pour une gestion efficace des paramètres et la suppression des écouteurs.
Je repartage ça, ça peut être utile ^^
Apache, suite à une mise à jour, est plus strict sur les vérifications SSL. Ça a eu un impact sur les serveurs Plesk qui utilisent nginx en tant que proxy. Voici la commande à exécuter en tant que root
echo -e "proxy_ssl_server_name on;\nproxy_ssl_name \$host;" > /etc/nginx/conf.d/fixssl.conf && service nginx restart
Si le composant Lock de Symfony pose quelques problèmes dans les tests unitaires, on peut essayer de configurer env.test ainsi : soit LOCK_DSN=null soit LOCK_DSN=in-memory
L'auteur décrit son passage de Tailwind CSS à Sass pour un nouveau projet et explique comment il a reproduit la structure du fichier de configuration de Tailwind en utilisant Sass. Il a créé une map Sass nommée $theme dans un fichier _theme.scss pour organiser les variables comme les couleurs, les polices et les espacements. Pour éviter que Sass interprète les polices comme des listes, il utilise la fonction unquote(). Ensuite, dans un fichier _functions.scss, il définit des fonctions pour récupérer ces valeurs, comme color($key) pour les couleurs et une fonction theme($key) plus générale, inspirée de Tailwind CSS v4.0, qui permet d'accéder à n'importe quelle valeur de thème. Cette approche lui permet d'utiliser des mots-clés comme DEFAULT pour définir des valeurs par défaut, offrant ainsi une flexibilité similaire à celle de Tailwind.
L'article explique comment créer un cas de test HTML simple pour signaler un bug ou un comportement inattendu. Il recommande d'utiliser des outils en ligne comme jsfiddle ou codepen, mais préfère souvent les URLs de type data: pour partager du code rapidement. L'auteur illustre cela avec un exemple de code HTML et JavaScript qui extrait une valeur de style, montrant les différences de résultats entre les navigateurs. Il démontre comment condenser ce code en une seule ligne et l'utiliser directement dans la barre d'URL d'un navigateur. Enfin, il mentionne avoir ouvert un rapport de bug pour le problème discuté.
L'option metrics-addr de Docker permet d'exposer les métriques de performance et d'utilisation des ressources via un endpoint HTTP sur le port 9323, offrant ainsi un accès à des informations détaillées sur l'environnement Docker. Ces métriques, formatées pour Prometheus, incluent des données sur l'utilisation du CPU, de la mémoire, du disque et du réseau par conteneur, ainsi que des informations sur l'état du démon Docker et les performances des opérations. Cette fonctionnalité est particulièrement utile pour la supervision d'infrastructure, l'alerting automatisé et l'analyse de tendance, bien qu'elle nécessite des outils complémentaires pour une visualisation et une gestion avancées des données.
La fonctionnalité live-restore de Docker permet aux conteneurs de continuer à fonctionner normalement pendant le redémarrage du démon Docker, évitant ainsi les interruptions de service. Cela est particulièrement utile pour les mises à jour de sécurité et la maintenance planifiée, car cela découple les conteneurs du cycle de vie du démon, les maintenant actifs sous la supervision du noyau Linux. Cependant, cette fonctionnalité ne protège pas contre les redémarrages du système d'exploitation ou les pannes matérielles, et certaines fonctionnalités Docker sont limitées pendant le redémarrage.
L'auteur utilise une histoire pour rappeler que les migrations Doctrine sont à privilégier, même et surtout pour les insertions manuelles.
L'article explore une technique avancée des animations CSS avec des keyframes partiels. En omettant les points de départ ou de fin dans une animation, les valeurs initiales sont héritées du contexte, rendant les animations plus dynamiques et réutilisables. Cette approche permet de créer des animations qui s'adaptent à l'état actuel de l'élément, facilitant ainsi des transitions plus fluides et personnalisées. De plus, l'utilisation de variables CSS dans les keyframes permet de définir des valeurs dynamiques, augmentant encore la flexibilité et la puissance des animations CSS.