magic web

魔术网

Magic Web是一个网络应用程序，可帮助您发现浏览器可以做的所有令人惊奇的事情。它具有一系列小型演示，这些演示可以展示不同的标准网络API，包括现在和未来。这个想法是，人们，尤其是开发人员，可以在一个地方尝试一堆这些Web API，以了解可能的内容，甚至可以查看此存储库中的代码，以了解如何使用它们。

技术

Web应用程序由React构建。样式用普通的CSS编写，并自动带有AutoPrefixer。 BABEL用于翻译和Webpack，用于捆绑模块。 Create React应用程序用于照顾所有这些工具。所有路由都是用React路由器处理的客户端，而SERV Worker代码则是通过SW-PRECACHE自动生成的，用于离线支持。该站点托管在GitHub页面中，并通过简单的NPM脚本与GH-PAGES的命令行实用程序部署。

展示了许多Web API，并在应用程序中使用，从建立良好到最前沿的API，例如地理位置，媒体设备，通知，Web语音，Web蓝牙，付款请求等。应用中的每个演示都列出了其标题下方涉及的所有Web API。与Web API直接相关的所有代码均在helpers文件夹内的不同模块中隔离，因此除了普通的JavaScript外，您只需要知道什么才能查看它。

动机

该项目最初是由于我向2017年Front Fest提交了一项谈话建议。最近，我从2015年Chrome Dev Summit上观看了Web蓝牙的演讲，并被它震惊了。我最近还阅读了有关付款请求API的信息，所以我认为谈话的好主意是展示Web平台的一些新的，鲜为人知的功能。我的建议被接受了，那时我认为以Web应用程序形式将演讲变成现场演示，我会更加有趣和有影响力，观众以后可以自己仔细阅读。

致谢

Web应用程序的设计试图遵循材料设计指南。整个应用程序中使用的图标实际上是材料图标集的一部分，并且Roboto用作唯一的字体。 Web应用程序的名称和主要颜色是受此GIF启发的，这是我首次了解一些最新的Web API时想到的图像。

Create React PWA存储库有很大的帮助，可以将用Create React应用程序构建的React应用变成渐进的Web应用程序。 GITHUB页面的单页应用程序也有很大的帮助，可以通过github页面与React路由器一起进行客户端路由。

许可证和问题

Web应用程序的源代码是根据MIT许可证发布的。许可证文件的全文可在许可证文件中使用。如果您发现任何错误或对该项目有建议，请打开一个问题，我会尽力提供帮助。