
Magic Web est une application Web qui vous aide à découvrir toutes les choses incroyables que votre navigateur peut faire. Il présente une série de petites démos qui présentent différentes API Web standard, à la fois présente et future. L'idée est que les gens, en particulier les développeurs, peuvent essayer un tas de ces API Web en un seul endroit pour avoir une idée de ce qui est possible, et même jeter un œil au code de ce référentiel pour voir comment ils peuvent les utiliser.
L'application Web est créée avec React. Les styles sont écrits en CSS simples et préfixés automatiquement avec AutopRefixer. Babel est utilisé pour le transplage et WebPack pour le regroupement des modules. Créer l'application React a été utilisée pour prendre soin de tous ces outils. Tout le routage est géré côté client avec le routeur React et le code de travailleur de service pour la prise en charge hors ligne est automatiquement généré avec SW-PRECACH. Le site est hébergé dans les pages GitHub et déployé avec l'utilitaire de ligne de commande de GH-Pages via un simple script NPM.
Un certain nombre d'API Web sont présentés et donc utilisés dans l'application, de celles bien établies à celles, telles que la géolocalisation, les appareils multimédias, les notifications, le discours Web, le Bluetooth Web, la demande de paiement et autres. Chaque démo de l'application répertorie toutes les API Web impliquées sous son titre. Tout le code directement lié aux API Web est isolé dans différents modules à l'intérieur du dossier helpers , afin que vous n'ayez besoin de savoir que JavaScript simple pour y jeter un œil.
Le projet a commencé comme la conséquence de la soumission d'une proposition de discussion à Front Fest 2017. J'avais récemment regardé ce discours sur le Bluetooth Web du Chrome Dev Summit 2015 et j'avais été époustouflé par cela. J'avais également récemment lu sur l'API de la demande de paiement, donc j'ai pensé qu'une bonne idée pour une conférence serait de présenter certaines de ces nouvelles capacités moins connues de la plate-forme Web. Ma proposition a été acceptée et c'est alors quand je pensais que je serais beaucoup plus intéressant et plus percutant de transformer mon discours en une démo en direct sous la forme d'une application Web que le public pourrait par la suite parcourir par eux-mêmes.
La conception de l'application Web essaie de suivre les directives de conception des matériaux. Les icônes utilisées dans l'application font en fait partie de l'ensemble d'icônes de matériau et Roboto est utilisé comme seule police. Le nom et la couleur principale de l'application Web sont inspirés de ce GIF, qui est l'image qui m'est venue à l'esprit lorsque j'ai appris pour la première fois sur certaines des nouvelles API Web.
Le référentiel Create React PWA a aidé une grande aide pour transformer l'application React construite avec Create React App en une application Web progressive. Des applications à une seule page pour les pages GitHub, pour faire du routage côté client avec le routeur React, fonctionnent avec les pages GitHub.
Le code source de l'application Web est publié sous la licence MIT. Le texte intégral de la licence est disponible dans le fichier de licence. Si vous trouvez des erreurs ou avez des suggestions pour ce projet, veuillez ouvrir un problème et je ferai de mon mieux pour vous aider.