La vigie du numérique #017

Vigie Numérique 17 - Inspirations et ressources design et développement

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

14islands

Un site web épuré avec une fluidité des interactions au hover et une belle rondeur des formes.


Outil couleurs

Randoma11y

Un outil pratique lorsqu’on souhaite disposer de codes couleurs randoms, on apprécie particulièrement le fait de pouvoir voir le constraste.


Élément graphique

Timeline

Ce site raconte l’histoire du joueur de hockey sur glace Alex Ovechkin, connu pour avoir marqué plus de 800 buts dans sa carrière. Nous aimons particulièrement la timeline qui est intuitive et met en avant les temps forts de sa carrière.


Motion Design

Motion Motion Awards 2023

Le Motion Motion, festival du graphisme en mouvement a ouvert ses portes en ce début de moi de mai à Nantes.

Benoit Texier et Ulysse Luque pour le teaser du Motion club
Fabian Aerts avec « Reef »

Ressource

Roadmap.sh

Roadmap.sh est un site sur lequel nous pouvons retrouver et créer des roadmaps, des guides et d’autres contenus éducatifs pour aider les développeurs dans leurs apprentissages. Les interfaces sont particulièrement attirantes et permettent de mieux comprendre ces métiers qui peuvent parfois paraître complexes.


Identité visuelle

Compadres

Compadres est une marque portugaise qui s’est lancé dans la vente de champignons pour des usages gastronomiques mais aussi médicinaux. Nous apprécions particulièrement l’identité visuelle qui donne une image sympathique et moderne à l’entreprise.


Ressource

Emojikitchen par Xavier Salazar

Emojikitchen est un outil nous permet d’inventer des emojis grâce à des mélanges plutôt improbables !


Dev Tips du mois

Reflect API

Le Reflect API en JavaScript fournit un ensemble de méthodes statiques qui peuvent être utilisées pour effectuer des opérations de méta-programmation sur des objets. Ces méthodes fournissent une alternative à l’utilisation des accesseurs de propriété d’objet et ont l’avantage d’être plus concises et plus faciles à utiliser dans certaines situations.

Voici quelques exemples de l’utilisation de certaines des méthodes fournies par le Reflect API en JavaScript:

Notez que ces exemples ne sont pas exhaustifs et que le Reflect API fournit plusieurs autres méthodes utiles pour la méta-programmation en JavaScript.

const obj = {
  name: "John",
  age: 30
};

// Utilisation de Reflect.get() pour récupérer la valeur d'une propriété
const nameValue = Reflect.get(obj, "name");
console.log(nameValue); // Output: "John"

// Utilisation de Reflect.set() pour définir la valeur d'une propriété
Reflect.set(obj, "age", 35);
console.log(obj.age); // Output: 35

// Utilisation de Reflect.has() pour vérifier si une propriété existe
const isPropertyExists = Reflect.has(obj, "name");
console.log(isPropertyExists); // Output: true

// Utilisation de Reflect.deleteProperty() pour supprimer une propriété
Reflect.deleteProperty(obj, "age");
console.log(obj.age); // Output: undefined

// Utilisation de Reflect.getOwnPropertyDescriptor() pour récupérer un descripteur de propriété
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);
// Output: { value: 'John', writable: true, enumerable: true, configurable: true }

const proto = { greeting: 'Hello' };

// Utilisation de Reflect.setPrototypeOf() pour définir le prototype d'un objet
Reflect.setPrototypeOf(obj, proto);
console.log(obj.greeting); // Output: 'Hello'

// Utilisation de Reflect.getPrototypeOf() pour récupérer le prototype d'un objet
console.log(Reflect.getPrototypeOf(obj)); // Output: { greeting: 'Hello' }

// Utilisation de Reflect.preventExtensions() pour empêcher l'ajout de nouvelles propriétés
Reflect.preventExtensions(obj);
obj.age = 40;
console.log(obj.age); // Output: undefined

// Utilisation de Reflect.isExtensible() pour vérifier si un objet est extensible
console.log(Reflect.isExtensible(obj)); // Output: false

// Utilisation de Reflect.apply() pour appeler une fonction avec une valeur `this` spécifiée et des arguments
function greet(name) {
  console.log(`Hello, ${name}!`);
}

Reflect.apply(greet, null, ['John']); // Output: "Hello, John!"

// Utilisation de Reflect.ownKeys() pour récupérer toutes les clés propres à un objet
console.log(Reflect.ownKeys(obj)); // Output: [ 'name' ]Langage du code : JavaScript (javascript)