magic web
1.0.0
A Magic Web é um aplicativo da web que ajuda você a descobrir todas as coisas incríveis que seu navegador pode fazer. Possui uma série de pequenas demos que mostram diferentes APIs da Web padrão, presentes e futuras. A idéia é que as pessoas, principalmente os desenvolvedores, possam tentar várias dessas APIs da Web em um único lugar para ter uma noção do que é possível e até dar uma olhada no código neste repositório para ver como elas podem usá -las.
O aplicativo da web está construído com o React. Os estilos são escritos em CSS simples e prefixados automaticamente com o Autoprefixer. Babel é usado para transpiliar e webpack para agrupamento de módulos. O aplicativo Create React foi usado para cuidar de toda essa ferramenta. Todo o roteamento é tratado do lado do cliente com o roteador React e o código do trabalhador de serviço para suporte offline é gerado automaticamente com o SW-Precache. O site está hospedado nas páginas do GitHub e implantado no utilitário de linha de comando da GH-PAGES por meio de um script NPM simples.
Várias APIs da Web são exibidas e, portanto, usadas no aplicativo, das bem estabelecidas a de ponta, como geolocalização, dispositivos de mídia, notificações, discurso na web, bluetooth da web, solicitação de pagamento e outros. Cada demonstração no aplicativo lista todas as APIs da Web envolvidas abaixo do seu título. Todo o código diretamente relacionado às APIs da Web é isolado em diferentes módulos dentro da pasta helpers , para que você não precise saber nada além de JavaScript simples para dar uma olhada nele.
O projeto começou como conseqüência de eu enviar uma proposta de conversa ao Front Fest 2017. Eu assisti recentemente a essa palestra no Web Bluetooth do Chrome Dev Summit 2015 e fui impressionado com ele. Recentemente, eu também tinha lido sobre a API de solicitação de pagamento, então pensei que uma boa ideia para uma palestra seria mostrar alguns desses novos recursos e menos conhecidos da plataforma da web. Minha proposta foi aceita e foi quando pensei que seria muito mais interessante e impactante para transformar minha conversa em uma demonstração ao vivo na forma de um aplicativo da web que o público mais tarde poderia ler por conta própria.
O design do aplicativo da web tenta seguir as diretrizes de design de materiais. Os ícones usados em todo o aplicativo fazem parte do conjunto de ícones de material e o Roboto é usado como o único tipo de letra. O nome e a cor primária do aplicativo da Web são inspirados neste GIF, que é a imagem que me veio à mente quando aprendi sobre algumas das mais novas APIs da Web.
O React PWA React PWA React foi de grande ajuda para transformar o aplicativo React criado com o aplicativo Create React em um aplicativo da Web progressivo. Também de grande ajuda foram aplicativos de página única para páginas do GitHub, para fazer o roteamento do lado do cliente com o Router React trabalhar com as páginas do GitHub.
O código -fonte do aplicativo da Web é lançado sob a licença do MIT. O texto completo da licença está disponível no arquivo de licença. Se você encontrar algum erro ou ter sugestões para este projeto, abra um problema e farei o possível para ajudar.
