Guten Tag, Freunde!
Ich mag es wirklich nicht, mich selbst zu fördern, aber in einer Situation, in der das Team aus einer Person besteht, ob es Ihnen gefällt oder nicht, müssen Sie das Produkt selbst entwickeln und bewerben.
Wer sucht, wo er mit der Entwicklung einer Webanwendung beginnen soll, kennt das HTML5 Boilerplate ( offizielle Website , Repository)). Laut den Entwicklern ist es "die beliebteste Front-End-Vorlage des Webs". Sie können nicht mit den beliebtesten streiten, aber Sie können es mit Modernität tun (Einhaltung der modernen Realitäten der Webentwicklung). Und das ist nicht verwunderlich: Das Projekt wurde vor etwa 6 Jahren ins Leben gerufen. In den letzten 6 Jahren hat sich viel geändert. Gleichzeitig wurden, soweit ich das beurteilen kann, keine grundlegenden Änderungen am Projekt vorgenommen (var wird zum Deklarieren von Variablen verwendet, es besteht die Möglichkeit, jQuery-Plugins hinzuzufügen usw.), außer vielleicht site.webmanifest, das ohne einen Servicemitarbeiter (und nutzlos ist) Es ist besser, .json zu verwenden.
Ich schlage eine Art Alternative vor - eine moderne HTML-Starter-Vorlage ( offizielle Seite , Repository ).
Das Projekt umfasst Folgendes:
- index.html mit allen notwendigen Meta- und Link-Tags (allgemein, Microsoft, Facebook, Twitter, Apple (iOS), Android, strukturierte Daten: schema.org und json-ld)
- Beispiele für die Verwendung von HTML5-Tags und CSS3-Eigenschaften
- Beispiele für die Verwendung von CSS- und JavaScript-Modulen
- Offline-First-Service-Mitarbeiter
- full manifest.json
- express.js Server mit allen möglichen Sicherheitsheadern (nützlich, wenn eine Anwendung auf heroku oder einem ähnlichen Dienst bereitgestellt wird, der node.js unterstützt)
- netlify.toml-Datei mit ähnlichen Headern und vorläufiger Verbindung der von der Seite verwendeten Ressourcen (nützlich beim Bereitstellen einer Anwendung für netlify)
- einfache robots.txt
- einfache sitemap.xml
- minimale browserconfig.xml
- max .gitignore
- Creative 404-Fehlerseite
- Beispiel für die Erstellung eines Projekts mit Webpack
- als Experiment - ein Beispiel für ein AMP-Projekt (eine neue Technologie von Google für Mobile-First-Sites)
Index.html und server.js (netlify.toml) sind natürlich der Hauptwert. Diese Dateien enthalten Links zur offiziellen Dokumentation (Quelle der Wahrheit). Der Servicemitarbeiter und das Manifest machen die Anwendung progressiv. Dies bedeutet, dass die Anwendung auf einem Telefon und einem Computer installiert werden kann und sich wie die nativen verhält. Durch das Zwischenspeichern der von der Anwendung verwendeten Ressourcen wird offline gearbeitet (ohne Netzwerkverbindung).
Um die Entwicklungserfahrung zu verbessern, wurden zusätzlich die folgenden Tools entwickelt:
Hier sind die Testergebnisse (der Mangel ist auf die Verwendung von Ressourcen von Drittanbietern wie Google Analytics und Yandex-Metriken zurückzuführen):
Lighthouse
WebPageTest
SecurityHeaders
AMP Beachten
Sie auch meine Hauptanwendung, die ich nach besten Kräften entwickle - viel JavaScript (möglicherweise nicht der Name) recht erfolgreich, spiegelt aber das Wesentliche der Anwendung voll wider). Die angegebene Vorlage wurde übrigens bei der Entwicklung verwendet.
Jedes Feedback-Formular hier und auf GitHub ist willkommen.
Vielen Dank für Ihre Aufmerksamkeit und einen guten Start in die Arbeitswoche.