Quotidien Shaarli

Tous les liens d'un jour sur une page.

Hier - June 3, 2026

Fonctions CSS Shape() : guide des tracés responsifs

La fonction CSS shape() du module Shapes Level 2 permet de créer des tracés complexes et fluides directement dans les feuilles de style, offrant une alternative aux méthodes rigides comme polygon() ou path(). Contrairement à ces dernières, elle combine la syntaxe vectorielle SVG avec des unités CSS flexibles (pourcentages, em, etc.), garantissant des formes responsives sans dépendre d’images externes ou de calculs lourds.

L’article explique son fonctionnement via des commandes de dessin intuitives (from, move to, line to, curve, etc.), similaires à celles des tracés SVG, mais adaptées aux besoins du CSS moderne. Elle s’applique notamment aux propriétés clip-path (pour découper des éléments) et offset-path (pour animer des objets le long d’un tracé).

Enfin, le guide illustre son utilité avec des cas concrets comme une bulle de dialogue responsive ou une bannière à bordure incurvée, tout en soulignant ses avantages en termes de performances et de référencement naturel. Bien que supportée par la plupart des navigateurs récents, cette fonction reste à explorer pour des designs plus dynamiques et maintenables.

Learn JavaScript - 33 JavaScript Concepts

Ce site propose un guide structuré pour maîtriser JavaScript à travers 33 concepts fondamentaux, allant des bases (types primitifs, portée, fermetures) aux sujets avancés (moteurs JS, expressions régulières, algorithmes). Chaque notion est expliquée de manière claire avec des exemples pratiques, des schémas et des ressources complémentaires, adaptées aussi bien aux débutants qu’aux développeurs expérimentés.

L’approche met l’accent sur la compréhension profonde plutôt que sur le copier-coller, en couvrant des mécanismes clés comme l’asynchrone (boucle d’événements, Promesses), la programmation orientée objet (prototypes, classes) et les bonnes pratiques (code propre, motifs de conception). Les sections dédiées à l’entretien technique et à l’optimisation des performances en font aussi un outil utile pour les candidats.

Le contenu est organisé en parcours progressifs, avec une recherche intégrée et un index complet pour naviguer facilement. Le projet s’appuie sur des ressources externes vérifiées et propose des quiz pour valider les acquis, tout en restant accessible aux autodidactes ou aux développeurs souhaitant combler des lacunes.

PHP Satan — PHPStan Help & Tutorials

PHP Satan est un site humoristique et pédagogique dédié à PHPStan, un outil d'analyse statique pour PHP souvent surnommé ainsi par ses utilisateurs. Le site guide les développeurs à travers les défis de l'analyse de code, en commençant par les bases de l'installation et de la configuration, jusqu'à des concepts plus avancés comme la gestion des erreurs de type et l'optimisation des performances.

L'idée principale est d'aider les développeurs à comprendre et à corriger les erreurs détectées par PHPStan, notamment celles liées aux types de données. Le site explique le système de niveaux de PHPStan (de 0 à 10), chaque niveau étant plus strict que le précédent, et propose des solutions pour résoudre les erreurs courantes, comme l'utilisation de type hints ou le narrowing de types. Des conseils pratiques, comme l'augmentation de la mémoire allouée ou l'utilisation de flags en ligne de commande, sont également fournis pour optimiser l'analyse.

How to Evaluate an npm Package - 2026 Edition

L’évaluation d’un package npm en 2026 nécessite une approche rigoureuse, car l’installation de dépendances tierces expose à des risques de sécurité majeurs, comme des attaques par la chaîne d’approvisionnement ou des paquets malveillants exploitant des hallucinations d’IA. L’auteur souligne que se fier aux téléchargements hebdomadaires ou aux étoiles GitHub est insuffisant, ces métriques ne reflétant ni la fiabilité ni les intentions réelles des mainteneurs. Les attaques récentes, comme Event-stream ou xz utils, illustrent comment des paquets légitimes peuvent être compromis, parfois via des dépendances indirectes ou des techniques comme le slopsquatting, où des noms de paquets générés par des IA sont enregistrés par des attaquants.

Pour limiter ces risques, le guide propose une méthode d’évaluation en cinq à dix minutes, centrée sur la nécessité réelle du paquet. Il recommande de questionner son utilité avant même d’analyser sa sécurité : un paquet superflu ou facilement remplaçable par quelques lignes de code interne réduit l’exposition aux vulnérabilités. L’auteur insiste aussi sur l’importance de vérifier l’absence de dépendances transitives suspectes et l’adéquation du paquet avec le contexte d’utilisation, afin d’éviter une propagation involontaire de risques dans l’écosystème du projet.

Centrer verticalement en CSS : épisode final - Alsacreations

L’article d’Alsacréations explique comment la propriété CSS align-content simplifie désormais le centrage vertical, une tâche autrefois complexe en CSS. Historiquement, les développeurs devaient recourir à des techniques comme vertical-align ou des combinaisons de position: absolute et transform, souvent fragiles. Grâce aux mises à jour des spécifications CSS (notamment le CSS Box Alignment Module Level 3), align-content fonctionne désormais dans tous les modes d’affichage, y compris les blocs natifs, sans nécessiter Flexbox ou Grid.

L’auteur illustre cette évolution avec deux exemples concrets : centrer verticalement un contenu dans un conteneur de hauteur fixe en utilisant simplement align-content: center, ou aligner un élément en bas avec align-content: end. Contrairement à Flexbox, cette méthode préserve le comportement natif des enfants (marges, flux normal), évitant ainsi des modifications structurelles inutiles. Toutes les valeurs classiques de la propriété (start, center, end, etc.) sont désormais applicables, offrant une solution universelle et moderne.

Cette avancée, déjà supportée par tous les navigateurs modernes, marque la fin des solutions de contournement pour le centrage vertical. Elle permet d’écrire moins de code tout en gardant un rendu fiable et maintenable, simplifiant ainsi l’intégration web.

AllThingsSmitty/typescript-tips-everyone-should-know: A curated collection of practical TypeScript patterns that improve safety, readability, maintainability, and developer experience.

Ce dépôt GitHub propose une collection de bonnes pratiques TypeScript pour améliorer la sécurité, la lisibilité et la maintenabilité du code. Il met en avant des patterns concrets comme l'utilisation de unknown plutôt que any pour renforcer la validation des types, ou l'inférence automatique des types pour éviter les annotations superflues. L'idée centrale est d'exploiter les fonctionnalités modernes de TypeScript pour écrire un code plus robuste et évolutif.

Parmi les conseils clés, on retrouve l'emploi de satisfies pour valider des structures sans perdre l'inférence, ou encore la dérivation de types à partir de valeurs immuables avec as const. Le dépôt aborde aussi des concepts avancés comme les unions discriminées pour modéliser des états impossibles, ou les vérifications exhaustives avec never pour détecter des erreurs dès la compilation.

Enfin, il souligne l'importance de connecter les vérifications d'exécution aux types via des prédicats, et de construire des types à partir d'autres existants. Ces pratiques visent à réduire les erreurs tout en simplifiant la maintenance du code.

Profilez vos tests PHPUnit avec OpenTelemetry

L’article propose d’utiliser OpenTelemetry pour surveiller et optimiser les tests PHPUnit, face à des problèmes de mémoire ou de temps d’exécution croissants dans des projets en expansion. L’idée est d’appliquer les mêmes principes d’observabilité que pour les applications en production, afin d’identifier les tests les plus gourmands en ressources grâce à des traces et métriques collectées.

Pour cela, l’auteur recommande l’extension phpunit-telemetry-bridge, compatible avec OpenTelemetry, qui s’intègre facilement via Composer et se configure dans le fichier PHPUnit. Une fois activée, elle génère des données détaillées sur chaque test (durée, mémoire, statut), exportables vers un backend OTLP pour analyse.

L’outil est particulièrement utile pour les grandes suites de tests, où son surcoût devient justifié. L’article inclut un exemple de configuration et un lien vers un dépôt démonstratif, tout en soulignant la nécessité d’évaluer son utilité selon l’envergure du projet.