Julien Roche - Développeur avancé JavaScript, Web et Java

Hop, un petit article autour des variables CSS4. Dans la joie et la bonne humeur :) Je veux les utiliser ! Tout d'abord, il faut savoir que le taux d'adoption de cette feature est au delà des 87% des navigateurs:  https://caniuse.com/#feat=css-variables En somme, si vous visez IE11 ou moins, vous ne pourrez pas les utiliser, à condition alors d'utiliser un "ponyfill" tel que  https://github.com/jhildenbiddle/css-vars-ponyfill  qui ne s'activera que si vous le lui dites: < script src= "https://unpkg.com/css-vars-ponyfill" > </ script > < script > // Call using defaults cssVars(); // Or call with options cssVars({ variables: { color: ' red ' , unknown: ' 5px ' } }); </ script > Les variables CSS, c'est quoi ? C'est tout simplement la possibilité de déclarer une variable dans le sens propre du terme et de stocker une valeur qui pourra être réutilisée. Ce...

Un petit article autour des Micro Services, sur lequel un point important et qui montre à quel point ce type d’architecture differt de ce que nous faisons habituellement: la "Chorégraphie". Habituellement (ce n'est pas obligé, mais c'est très souvent le cas), nos programmes font ce que nous appelons du " Service Orchestration ". C'est une entité business (en l’occurrence, l'orchestrateur ) qui va se charger de coordonner toutes les interactions entre nos différences services. L'orchestrateur va devoir alors invoquer tous les services nécessaires, les combinés si besoin, et procéder à l'ensemble des opérations. L'avantage: c'est centralisé et la gestion de la transaction est plus aisé. L'inconvénient majeur: l'évolutivité est plus restreinte et du coup le scaling est difficile à adapter (nous pourrions imaginer que nous faisons deux actions: l'une coûteuse en mémoire, l'autre non). De plus, cela ne ...

Une petite astuce bien sympathique autour de NPM. Imaginons que nous avons le package.json suivant: { " name " : " npm-named-argument " , " version " : " 1.0.0 " , " description " : " " , " main " : " index.js " , " scripts " : { " say " : " echo Hello && exit 0 " , " test " : " echo \" Error: no test specified \" && exit 1 " }, " keywords " : [], " author " : " " , " license " : " ISC " } Si nous l'exécutons, nous obtenons alors: Ce qui est logique Maintenant, imaginons que nous aimerions utiliser un paramètre de CLI dans notre NPM run-script (ici, un nom par exemple). Rien de plus simple, mettez %npm_config_username" dans votre run-script: { " name " : " npm-named-argument " , " versi...

Je voudrais vous parler d'un site qui est superbe, qui est ...  https://whatwebcando.today/ (oui, j'ai traduit littéralement l'url, j'ai honte). Le principe est très simple: par grande catégorie, nous listons le fonctionnel que nous pouvons espérer avoir et nous disons si nous l'avons ou pas. Ensuite, pour chaque fonctionnalité, implémentée ou non, nous avons un descriptif nous donnant son état, sa future implémentation, ou son usage courant. Par exemple, l'envoi de SMS n'est pas encore disponible, mais je peux voir ce que cela donnera le jour où elle sera implémentée: En revanche, pour une fonctionnalité comme le type et la vitesse du réseau, nous avons tout le détail: Enjoy !

Connaissez-vous les CSS features ? Mine de rien, c'est un principe qui existe depuis l'été 2016, et qui a pour but de gérer plus facilement la gestion des versions des navigateurs dans notre code. En gros, vous allons vérifier dans notre code CSS ... la présente ou non d'une feature CSS !! Par exemple, nous pouvons regarder si notre navigateur gère le "display grid" en faisant le code suivant: @ supports (display: grid) { main { display : grid; grid-template-columns : repeat (auto-fit, minmax(280px, 1fr)); } } Facile non ? Nous pouvons aussi vérifier en mettant une condition, comme le cas suivant où nous regardons si nous pouvons afficher la première lettre d'un paragraphe sur plusieurs lignes: @ supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p ::first-letter { -webkit-initial-letter : 4 ; initial-letter : 4 ; color : #FE742F ; font-weight : bold; margin-right : 0.5em ; ...