magic web
1.0.0
Magic Web es una aplicación web que te ayuda a descubrir todas las cosas sorprendentes que tu navegador puede hacer. Cuenta con una serie de pequeñas demostraciones que muestran diferentes API web estándar, tanto presentes como futuras. La idea es que las personas, particularmente los desarrolladores, pueden probar un montón de estas API web en un solo lugar para tener una idea de lo que es posible, e incluso echar un vistazo al código en este repositorio para ver cómo pueden usarlas.
La aplicación web se compila con React. Los estilos están escritos en CSS simple y se prefieren automáticamente con AutoPrefixer. Babel se utiliza para transpirar y una mesa web para la agrupación de módulos. La aplicación Crear React se utilizó para cuidar todas estas herramientas. Todo el enrutamiento se maneja del lado del cliente con React Router y el código de trabajador de servicio para soporte fuera de línea se genera automáticamente con SW-Precache. El sitio está alojado en las páginas de GitHub y se implementa con la utilidad de línea de comandos de GH-PAGES a través de un simple script NPM.
Se muestran varias API web y, por lo tanto, se usan dentro de la aplicación, desde bien establecidas hasta las de vanguardia, como geolocalización, dispositivos de medios, notificaciones, discurso web, Bluetooth web, solicitud de pago y otros. Cada demostración en las aplicaciones enumera todas las API web que están involucradas debajo de su título. Todo el código directamente relacionado con las API web está aislado en diferentes módulos dentro de la carpeta de helpers , por lo que debe saber nada más que JavaScript simple para echarle un vistazo.
El proyecto comenzó como consecuencia de que presentara una propuesta de charla para Front Fest 2017. Recientemente había visto esta charla en Bluetooth de la web de la Cumbre Chrome Dev 2015 y me había impresionado. También había leído recientemente sobre la API de solicitud de pago, así que pensé que una buena idea para una charla sería mostrar algunas de estas capacidades nuevas y menos conocidas de la plataforma web. Mi propuesta fue aceptada y fue entonces cuando pensé que sería mucho más interesante e impactante convertir mi conversación en una demostración en vivo en forma de una aplicación web que el público podría examinar por su cuenta.
El diseño de la aplicación web intenta seguir las pautas de diseño de material. Los iconos utilizados en toda la aplicación son, de hecho, parte del conjunto de iconos de material y Roboto se usa como el único tipo de letra. El nombre y el color principal de la aplicación web están inspirados en este GIF, que es la imagen que me viene a la mente cuando aprendí por primera vez sobre algunas de las API web más nuevas.
El repositorio Crear React PWA fue de gran ayuda para convertir la aplicación React creada con la aplicación Create React en una aplicación web progresiva. También de gran ayuda fueron aplicaciones de una sola página para páginas GitHub, para hacer que el enrutamiento del lado del cliente con React Router funcione con las páginas GitHub.
El código fuente de la aplicación web se publica bajo la licencia MIT. El texto completo de la licencia está disponible en el archivo de licencia. Si encuentra algún error o tiene sugerencias para este proyecto, abra un problema y haré todo lo posible para ayudar.
