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

Mes bras sont un peu tombés violemment quand j'ai vu ce problème. En gros, sur un projet sur lequel je suis, j'ai créé un composant angular qui affiche un texte et qui le remplace sur une condition par une progress-bar. Et c'est un élément qui se met dans l'entête d'un autre composant. Et on revient vers moi pour me signaler un effet de "shacking" sous IE. Et effectivement, c'est avec stupeur que je voyais les éléments de la page se déplacer en bas puis en haut violemment et rapidement quand on passait d'un état à l'autre du texte au progress-bar. J'ai pu alors m'apercevoir que pendant un court instant, le texte ET la barre de progression apparaissait en même temps ! Et j'étais très surpris car j'utilisais sur les deux éléments un "ng-if". Autrement dit, il ne pouvait avoir qu'un seul élément à la fois dans la page HTML ! Pour illustrer ça, j'ai fait un petit Jsfiddle:  https://jsfiddle.net/roc...

Voici un petit besoin que j'avais sur un projet: J'utilisais la librairie angular " ng-scrollbars " pour avoir des scrollbars un peu fancy. Nous devons alors spécifier dans notre HTML l'attribut "ng-scrollbars". Parfois, pour certains éléments, l'aspect devait être différent. Du coup, conjointement, nous spécifions alors l'attribut "ng-scrollbars-config". Et comme le projet est un composant, il faut que certains style personnels n'impacte pas l'application "host". Du coup, nous rajoutions alors notre classe CSS au même niveau que les deux attributs précédents. D'un point de vue usage, cela le code compliqué, car nous devons bien penser à chaque fois que nous voulons utiliser un scrollbar, mettre la classe CSS. Et si nous avons un besoin de config, de spécifier un autre attribut. Cela pose également le soucis d'évolution: si nous changeons pour une raison X ou Y le nom de la classe CSS (ou s...

Afin de voir les différentes façons qu'ils existent de charger une image (ou une ressource binaire) dans sa page Web via JavaScript, je me suis amusé à faire une petite application affichant un chat: J'ai pu déterminer ainsi 4 façons de résoudre ce besoin: 'use strict' ; const IMAGE_PATH = 'resources/cat.jpg' ; const IMAGE_CONTENT_TYPE = 'image/jpeg' ; export default class LoadingService { /** * @returns {Promise.<Blob>} */ static loadWithAjaxBlob () { return new Promise(( resolve , reject) => { let request = new XMLHttpRequest(); request . open ( 'GET' , IMAGE_PATH , true ); request . responseType = 'blob' ; request . onload = function () { resolve ( request . response ); }; request . onerror = reject; request . send ( null ); }); } /** * @returns {Promise.<Blob...

Il y a quelque temps, j'avais expliqué comment mettre en oeuvre un registre privé pour NPM pour ses projets: http://julienroche.blogspot.fr/2015/11/installer-un-registre-npm-personnel.html Et là je viens de me rendre compte que j'avais omis d'expliquer comment publier son module dans son registre privé ! En effet, le lien ci-dessus ne va expliquer que comment installer Nexus de Sonatype et l'utiliser en somme en tant que mirroring. Maintenant, voyons comment l'utiliser pour publier son module. Tout d'abord, une petite modification dans son package.json. En effet, nous allons devoir indiquer dedans une propriété "publishConfig" afin de dire vers où nous souhaitons publier notre module. Si vous avez été attentif dans la lecture du lien précédent, vous aurez pu constater que nous avons créé un repository dédié à cela, le "npm-internal" Du coup, mettons à jour notre package.json comme suit: { "name" : ...

Il y a quelques mois j'avais fait un article autour de shrinkwrap pour montrer sa grande utilitée:  http://julienroche.blogspot.fr/2016/01/npm-shrinkwrap.html Néanmoins, j'ai pu constater un changement de comportement depuis NPM4 (qui a été détectée ) En effet, avant, si nous faisons la commande suivante: > npm shrinkwrap Sur NPM2, seul les dépendances déclarer dans "dependencies" du package.json étaient pris en compte. Et si nous voulions avoir aussi celle de "devDependencies", il faudrait ajouter l'option "--dev" Sur NPM4, nous avons ... toutes les dépendances ! Aussi bien celle de "dependencies" que de "devDependencies" ! Du coup, il existe cette fois-ci une option NPM pour pallier à ça via " only ". En ligne de commande: > npm shrinkwrap --only=prod Dans le fichier .npmrc: save-exact=true sign-git-tag=false strict-ssl=false only=prod

Il y a désormais quelques mois, j'avais publier un article sur les "awesomes lists":  http://julienroche.blogspot.fr/2015/10/awesome-lists.html Du coup, je fais un nouvel article pour en publier des nouveaux ! Côté NodeJs (encore une fois, merci Sindre Sorhus): NodeJs:  https://github.com/sindresorhus/awesome-nodejs NPM:  Classique:  https://github.com/sindresorhus/awesome-npm "Avancé":  https://github.com/feross/awesome-mad-science Côté JavaScript: JavaScript:  https://github.com/sorrycc/awesome-javascript ES6 tools:  https://github.com/addyosmani/es6-tools Programmation Fonctionnel:  https://github.com/stoeffel/awesome-fp-js Promises:  https://github.com/wbinnssmith/awesome-promises Côté outils / frameworks JavaScripts: Electron:  https://github.com/sindresorhus/awesome-electron React: Le framework:  https://github.com/enaqx/awesome-react Native:  https://github.com/jondot/awesome...

La solution souvent que nous trouvons ou qui nous vient naturellement est d'écrire un service angular afin de fournir l'instance Lodash (ou Underscore): angular .module( ' underscore ' , []) .factory( ' _ ' , function () { return window._; }); Et il existe même un projet pour cela: angular-underscore-module . Le hic de cette approche est que Lodash ne peut être injecté dans des provider. Ce qui est dommage. Du coup, privilégiez la syntaxe suivante: angular .module( ' underscore ' , []) .constant( ' _ ' , window._); Et là, tout va bien dans le meilleur des mondes :)