Post Category → Astuce

Ajouter la commande git tree à votre terminal

Pour ceux qui utilisent l’outils de versioning Git uniquement en ligne de commande, il est parfois pratique d’avoir l’historique des commits sous forme d’arbre un peu comme c’est présenté dans les outils graphiques comme Git Extensions, SourceTree etc… Il existe la commande “git log” bien sur mais beaucoup trop verbeuse et les commits ne sont pas assez succinct, on ne voit pas les différentes branches etc… bref, c’est pas top.

Un petit “git tree” ça serait pas mal non ?

Pas de soucis, cette commande va ajouter un alias au fichier .gitignore pour qu’il utilise la commande “git tree” à bon escient.

Ouvrez votre terminal et tapez :

[javascript]
git config –global alias.tree "log –oneline –decorate –all –graph"
[/javascript]

Et maintenant tapez :

[javascript]git tree[/javascript]

C’est prêt.

DevDocs pour regrouper et unifier toutes les dev docs de vos APIs et langages favoris

DEVDOC

Pour les utilisateurs OS X, il existe Dash. Pour ceux qui sont sous Windows/Linux il existe l’équivalent Zeal et pour ceux qui ne veulent pas installer de logiciel lourd pour la doc, il existe DevDocs que je présente dans cet article.

En quelques mots, DevDocs est un moteur de recherche pour documentation technique. Il référence plus de 70 APIs donc pas d’inquiétude, que vous soyez développeur web, mobile, backend etc… vous trouverez votre bonheur 🙂

  • AngularJS
  • Bower
  • React
  • Ruby
  • Javascript
  • Python
  • D3
  • PHP
  • C / C++
  • etc…

Les avantages

  • Interface unifiée
  • Outil de recherche intelligent
  • Rapide
  • Plus de 70 APIs/frameworks/libs disponibles
  • Mode Light/Dark

L’inconvénient

Je ne vois qu’un seul et il concerne le ‘mode offline’ puisque les documentations sauvées sont persistées dans le cache du navigateur.

Quand on développe on aime bien vider le cache pour tester un rendu sur une base propre… et ça peut donc poser problème. Si on veut utiliser ces docs hors-ligne il faut penser à les re-télécharger au cas où le cache aurait été cleané avant.

Pour info, c’est un outil fait par Thibaut Courouble, son blog : http://thibaut.me/

Pour résumer, DevDocs c’est simple, c’est propre et c’est super utile pour mes trajets en train où le WiFi n’est malheureusement pas présent.

(Merci Justin pour les liens)

Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

Les méthodes isOverlapping() et isInside() ont déjà le premier avantage d’être en pur javascript. Leurs fonctionnalités sont donc de déterminer si deux éléments se chevauchent ou se superposent. C’est très pratique lorsque qu’on veut gérer la superposition des labels pour masquer ceux qui sont partiellement visibles par exemple.

getBoundingClientRect

La méthode getBoundingClientRect() est appliquée sur chacun des éléments du DOM afin de déterminer leurs propriétés (en pixels) :

  • left
  • top
  • right
  • bottom

Ces valeurs sont propres au viewport (zone de visualisation) du client sur lequel cette fonction est exécutée.

isOverlapping

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}[/javascript]

La fonction isOverlapping() renvoie donc true si elem1 et elem2 se chevauchent.

isInside

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}[/javascript]

La fonction isInside() renvoie donc true si elem1 est entièrement à l’intérieur de elem2 (ou inversement…).

Optimisation #2 Javascript : Réduction du nombre de variables globales

En créant un nouvel objet (et un seul!), on évite de créer pleins de variables globales.

On gagne donc en :

– Propreté de code
– Performance (très peu avec les navigateurs actuels)

Et surtout, on évite les conflits de noms avec d’autres applications, widgets et librairies!

BAD

[javascript]
var firstName = ‘Joey’;
var lastName = ‘Bronner’;
function sayHello() {
…
}
console.log(firstName);
[/javascript]

GOOD

[javascript]
var User = {
firstName : ‘Joey’,
lastName : ‘Bronner’,
sayHello : function() {
…
}
}
console.log(User.name);
[/javascript]

Optimisation #1 Javascript : Mise en cache de la longueur d’un array

Pour optimiser un peu plus son code Javascript (pour ceux qui n’appliquent pas encore cette astuce bien sûr), je vais partager une petite best practice lors de l’itération d’une boucle for.

La boucle for « normale » ressemble à ça…
BAD

[javascript]
var tab = [‘element1’, ‘element2’, ‘element3’];
for (var i= 0 ; i<tab.length ; i++) {
// le reste du code
}
[/javascript]

Dans le code ci-dessus on constate qu’à chaque itération, la taille du tableau (tab) est recalculée via la commande tab.length. Mauvais!
Le but est de calculer cette longueur qu’une seule fois :
GOOD

[javascript]
var tab = [‘element1’, ‘element2’, ‘element3’];
for (var i= 0, iLen = tab.length ; i<iLen ; i++) {
// le reste du code
}
[/javascript]

Dans le code ci-dessus, on constante donc que la longueur est calculée la première fois et qu’elle est ensuite stockée dans la variable iLen.

Remarque: 
Pour des tableaux avec seulement quelques éléments l’optimisation ne se fait pas ressentir mais quand on travaille sur des milliers de lignes c’est plutôt pas mal!