Elle est loin l’époque où on s’extasiait devant un gif animé de la Terre qui tournait. Mais non, rien de rien, je ne regrette rien car un développeur du nom de SoumyaEXE nous a pondu un système solaire complet avec 50 lunes et des ceintures d’astéroïdes, le tout qui tourne dans votre navigateur. Sans plugin. Sans téléchargement. Juste du JavaScript et sa magie.

En plus ce projet débarque pile au moment où de plus en plus de développeurs cherchent l’équilibre parfait entre la simplicité et la performance pour leurs applications web, et ce système solaire en est le parfait exemple. Les textures viennent directement de la NASA, les distances sont mises à l’échelle pour que votre cerveau puisse y comprendre quelque chose, et même votre vieux smartphone peut faire tourner le tout sans broncher ou presque.

J’ai passé plusieurs minutes à zoomer / dezoomer sur les lunes de Jupiter et les astéroides, et c’est assez hypnotisant. Pan, zoom, rotation… tout est fluide comme dans du Planta Fin ^^ et le dev a même pensé à ajouter des toggles pour afficher ou masquer les orbites, les labels, les ceintures d’astéroïdes. Bref, vous pouvez littéralement personnaliser votre exploration spatiale pour vous la jouer Thomas Pesquet en culottes courtes.

C’est fou surtout de voir comment Three.js a évolué. Sur les forums spécialisés, le développeurs explique que créer ce genre de simulation était sa motivation principale pour apprendre cette technologie, et je trouve ça bien comment façon de faire. Et quand on voit le résultat, je me dit que les limites du web sont vraiment repoussées chaque jour un peu plus.

Techniquement, le projet utilise également Vite pour le build, ce qui explique pourquoi tout est si rapide à charger. Les modèles 3D sont optimisés, les animations d’orbites sont calculées en temps réel, et pourtant, aucun ralentissement. C’est accessible, performant, et surtout open source.

D’ailleurs, parlant d’open source, tout le code est disponible sur GitHub. Donc vous pouvez le cloner, le modifier, ajouter d’autres objets si ça vous chante (Ou faire basculer Pluton du côté des planètes…^^), ou pourquoi pas le franciser. Et pour apprendre Three.js, c’est également un excellent point de départ.

Et si vous voulez une ambiance plus immersive, vous pouvez même ajouter de la musique d’Interstellar. Bon, ok, c’est un peu gadget, mais ça fait son petit effet.

Pour les développeurs qui lisent ça, sachez que le projet utilise les GLTFLoader et OrbitControls de Three.js, avec un système de caméra perspective bien pensé. L’éclairage combine ambient et directional lights pour donner ce rendu réaliste aux planètes. C’est du travail propre, bien commenté, et facilement extensible.

Donc si vous cherchez une excuse pour procrastiner intelligemment aujourd’hui, foncez tester cette merveille. Et qui sait, peut-être que ça vous donnera envie de vous lancer dans le développement web 3D.

Source

Vous êtes en train de lire tranquillement un long tuto, et voilà que votre écran s’éteint.

Relou, non ?

Alors si vous en avez marre de devoir toucher votre souris toutes les 30 secondes pour garder votre écran allumé, j’ai déniché un petit outil sympa qui va vous changer la vie : LumoSprite.

Le truc génial avec LumoSprite, c’est que c’est une application web toute simple qui empêche votre écran de s’endormir. Pas besoin d’installer quoi que ce soit, pas de logiciel lourd qui tourne en arrière-plan, juste une page web à garder ouverte.

C’est totalement gratuit et ça utilise la fameuse Wake Lock API pour faire sa magie. Pour ceux qui se demandent comment ça marche techniquement, la Screen Wake Lock API c’est une technologie web qui permet aux sites de demander au système de ne pas éteindre l’écran. Cette API est maintenant supportée par tous les navigateurs majeurs (Chrome, Safari, Firefox), ce qui rend l’outil super compatible.

Il suffit donc que votre navigateur supporte JavaScript et la Wake Lock API, et c’est parti. Vous arrivez sur le site, vous activez la fonction, et voilà, votre écran restera allumé tant que l’onglet est ouvert et au premier plan. L’outil propose même plusieurs langues (anglais, chinois, japonais, coréen… Pas de français encore) et différents thèmes pour personnaliser l’expérience.

C’est vraiment pensé pour être accessible à tous et les cas d’usage sont nombreux. Par exemple, vous lisez un livre numérique ou vous suivez une recette de cuisine sans avoir à toucher votre écran avec vos mains pleines de beurre ? Vous présentez quelque chose à distance ? Ou vous surveillez simplement un process au boulot ? Ça répond à tous ces besoins.

Des alternatives comme nosleep.page ou Keep Screen On proposent des fonctionnalités similaires mais LumoSprite se démarque par sa simplicité et son look sympa. Pas de fioritures inutiles non plus et niveau vie privée, c’est nickel puisque tout fonctionne localement dans votre navigateur, et qu’aucune donnée n’est collectée ou envoyée quelque part.

L’outil consomme d’ailleurs moins de 1% des ressources de votre machine, donc pas de souci pour la batterie ou les performances car c’est du JavaScript léger, qui fait juste ce qu’il faut. Après si vous cherchez une solution plus permanente, il existe aussi des extensions navigateur comme Keep Awake pour Chrome ou des solutions système comme PowerToys Awake pour Windows.

Mais franchement, pour un usage ponctuel, LumoSprite fait largement le job sans encombrer votre navigateur d’extensions supplémentaires.

Le succès de ce type d’outils montre bien qu’il y avait un vrai besoin. D’ailleurs, Betty Crocker (le site de cuisine américain) a vu une augmentation de 300% de l’intention d’achat après avoir implémenté la Wake Lock API sur leur site directement. Comme ça, les gens peuvent enfin suivre leurs recettes sans que l’écran s’éteigne toutes les deux minutes ! Pour un site de tuto, c’est peut-être un move pertinent.

Bref, si vous cherchez un moyen simple et efficace de garder votre écran allumé, foncez tester LumoSprite.

Ça va, pas trop chaud ? Alors tant mieux, parce que je vais vous faire avoir une petite suée tellement ce truc est cool ! Ça s’appelle Memflix et c’est une bibliothèque JavaScript qui transforme vos documents texte en… fichiers vidéo MP4 ! Oui, vous avez bien lu. Et le plus fou, c’est que vous pouvez ensuite faire des recherches sémantiques ultra-rapides dans ces vidéos.

L’idée est tellement simple qu’elle en devient géniale car au lieu de stocker vos données dans une base de données traditionnelle, Memflix encode tout dans des QR codes qui sont ensuite intégrés frame par frame dans une vidéo. Résultat ? Un stockage 10 fois plus efficace qu’une base de données classique et des recherches qui prennent moins d’une seconde, même sur des millions de chunks de texte.

Est-ce que j’ajoute des logs pour faciliter le debug, ou est-ce que je laisse mes utilisateurs se débrouiller dans le noir ?

C’est le dilemme classique du développeur de libs qui peut soit vous imposer une dépendance de logging que personne n’a demandée, soit vous priver de toutes les informations cruciales.

Eh bien, LogTape vient de résoudre ce casse-tête vieux comme le monde (enfin, vieux comme npm) avec une approche qui a la classe, vous allez voir !