magic web
1.0.0
Magic Web ist eine Web -App, mit der Sie all die erstaunlichen Dinge finden, die Ihr Browser tun kann. Es verfügt über eine Reihe kleiner Demos, die verschiedene Standard -Web -APIs präsentieren, sowohl gegenwärtige als auch Zukunft. Die Idee ist, dass Menschen, insbesondere Entwickler, eine Reihe dieser Web -APIs an einem einzigen Ort ausprobieren können, um ein Gefühl dafür zu bekommen, was möglich ist, und sogar einen Blick auf den Code in diesem Repository werfen, um zu sehen, wie sie sie verwenden können.
Die Web -App wird mit React erstellt. Stile sind in einfacher CSS geschrieben und automatisch mit autoprefixer vorangestellt. Babel wird zum Umtransport und zum Webpack zum Modulbündelung verwendet. Die React -App erstellen wurde verwendet, um all diese Tools zu pflegen. Das gesamte Routing wird mit dem React-Router behandelt, und Service Worker-Code für den Offline-Support wird automatisch mit SW-Precache generiert. Die Site wird auf Github-Seiten gehostet und über ein einfaches NPM-Skript mit dem Befehlszeilendienstprogramm der GH-Seiten bereitgestellt.
Eine Reihe von Web-APIs werden gezeigt und daher innerhalb der App verwendet, von gut etablierten bis hin zu modernsten Edge wie Geolokalisierung, Mediengeräten, Benachrichtigungen, Webreden, Web-Bluetooth, Zahlungsanforderung und anderen. Jede Demo in der App listet alle Web -APIs auf, die unter ihrem Titel beteiligt sind. Der gesamte Code, der direkt mit Web -APIs zusammenhängt, ist in verschiedenen Modulen im helpers isoliert, sodass Sie nichts als einfaches JavaScript wissen müssen, um es sich anzusehen.
Das Projekt begann als Folge, dass ich einen Gesprächsvorschlag für das Front Fest 2017 einreichte. Ich hatte kürzlich diesen Vortrag im Web -Bluetooth vom Chrome Dev Summit 2015 gesehen und war davon überwältigt worden. Ich hatte kürzlich auch über die API der Zahlungsanfrage gelesen, daher dachte ich, eine gute Idee für ein Vortrag wäre es, einige dieser neuen, weniger bekannten Funktionen der Webplattform zu präsentieren. Mein Vorschlag wurde akzeptiert und als ich dachte, ich würde viel interessanter und wirkungsvoller sein, um meinen Vortrag in eine Live -Demo in Form einer Web -App zu verwandeln, die das Publikum später alleine durchsuchen konnte.
Das Design der Web -App versucht, die Richtlinien für Materialdesign zu befolgen. Die im gesamten App verwendeten Symbole sind in der Tat Teil des Materials -Symbolsatzes und Roboto wird als einzige Schrift verwendet. Der Name und die Primärfarbe der Web -App sind von diesem GIF inspiriert, das das Bild ist, das mir in den Sinn kam, als ich zum ersten Mal einige der neuesten Web -APIs erfuhr.
Das React PWA -Repository für Create -React war von großer Hilfe, um die mit Creat React App erstellte React -App in eine progressive Web -App zu verwandeln. Auch von großer Hilfe waren einzelne Seiten-Apps für GitHub-Seiten, um das clientseitige Routing mit React-Router mit Github-Seiten zu bearbeiten.
Der Quellcode der Web -App wird unter der MIT -Lizenz veröffentlicht. Der vollständige Text der Lizenz ist in der Lizenzdatei verfügbar. Wenn Sie Fehler finden oder Vorschläge für dieses Projekt haben, öffnen Sie bitte ein Problem und ich werde mein Bestes tun, um zu helfen.
