Dans cette veille, on prend de la hauteur et on vous partage tous les mois les inspirations de notre équipe, les pistes de réflexions, les idées nouvelles, mais aussi nos trucs et astuces sur l’UX, l’UI et le développement web.
Site Internet
Un menu original, des visuels soignés, un scroll infini, le curseur qui change de couleur… de très bons ingrédients pour une expérience utilisateur réussie.
Dataviz
NASA Scientific Visualization Studio
Cette série de dataviz nous permet de visualiser les émissions de CO2 à l’échelle de la planète. Une bonne manière de voir qu’elles proviennent, sans surprises, des mêmes points d’origine. 👀
Expérience web
Retour sur un basique de l’interaction : le scroll, qui nous permet ici de descendre loin dans les profondeurs des abysses ! Par rapport aux évènements récents … On vous laisse vous rendre compte de la profondeur du Titanic.
Outil
C’est un outil plutôt pratique pour les designers, afin de comprendre comment les contrastes de couleurs peuvent affecter la vision de certaines personnes.
Dataviz
Eleanor Lutz, The Season of Earth
Retour sur cette carte animée de 2019, que l’on trouve toujours aussi impressionnante. Elle a été réalisée avec des Open data de la NASA,l’USGS, et Natural Earth. La designer explique toute sa méthodologie dans son article, très intéressant.
Ressources typo
Ressource
Des séries d’illustrations qui changent de l’ordinaire
Dev Tips du mois
Utiliser async dans une boucle en Nodejs
Utiliser async en Nodejs permet de fluidifier l’écriture du code : fini les cascades de Callback !
La complexité peut réapparaitre lorsqu’on tente de faire de l’asynchrone dans une boucle, on peut se lancer dans des tableaux d’async, dans des Promise ou autre.
Une astuce toute simple consiste à écrire la boucle avec “of” et tout s’enchaîne proprement !
Imaginons une collection MongoDB contenant des articles nommés “Article” dans lesquels un auteur est mentionné. Nous souhaitons ajouter cet auteur à une autre collection nommée “Author” seulement s’il n’y est pas déjà présent. Ça pourrait donner ça :
populateAuthors: async function() {
//On récupère l'ensemble des articles
let articles = await Article.find();
for (const article of articles){
//On vérifie si un auteur avec ce nom existe déjà en base
foundAuthor = await Author.findOne({name:article.author});
if(!foundAuthor){
//S'il n'existe pas on l'ajoute
const author = new Author({
name: article.author
});
await Author.create(author)
}
}
}Langage du code : JavaScript (javascript)Dans cet exemple, chaque itération de la boucle attend bien l’écriture en base de l’auteur avant de lancer l’itération suivante. Ça n’aurait pas été le cas avec une boucle classique de type :
for (let i = 0; i < 10; i++) {
console.log(i);
}Langage du code : JavaScript (javascript)
