Welche technischen Details sollte ein Programmierer einer Webanwendung berücksichtigen, bevor er die Site veröffentlicht?

Was sollte ein Programmierer beachten, der die technischen Details einer Webanwendung implementiert, bevor er die Site veröffentlicht? Wenn Jeff Atwood kann über vergessen Httponly - Cookies , Sitemaps , und Cross-Site Request Fälschungen alle in der gleichen Stelle , was wichtige Sache könnte ich genauso gut sein zu vergessen?

Ich denke darüber aus der Perspektive eines Webentwicklers nach, sodass jemand anderes das eigentliche Design und den eigentlichen Inhalt für die Site erstellt. Während Benutzerfreundlichkeit und Inhalt wichtiger sind als die Plattform, haben Sie als Programmierer wenig Mitspracherecht. Worüber Sie sich Sorgen machen müssen, ist, dass Ihre Implementierung der Plattform stabil ist, eine gute Leistung erbringt, sicher ist und alle anderen Geschäftsziele erfüllt (z. B. nicht zu viel kosten, zu lange für den Aufbau in Anspruch nehmen und bei Google ebenso gut ranken wie bei Google) Inhalt unterstützt).

Stellen Sie sich dies aus der Perspektive eines Entwicklers vor, der in einer vertrauenswürdigen Umgebung einige Arbeiten für Intranetanwendungen ausgeführt hat und kurz davor steht, seine erste Aufnahme zu machen und eine potenziell beliebte Website für das gesamte große, schlechte World Wide Web zu veröffentlichen.

Außerdem suche ich etwas Spezifischeres als nur eine vage Antwort auf "Webstandards". Ich meine, HTML, JavaScript und CSS über HTTP sind eine Selbstverständlichkeit, besonders wenn ich bereits angegeben habe, dass Sie ein professioneller Webentwickler sind. Also darüber hinaus, welche Standards? Unter welchen Umständen und warum? Stellen Sie einen Link zur Spezifikation des Standards bereit.

Die Idee dabei ist , dass die meisten von uns sollte schon wissen , die meisten von dem, was in dieser Liste. Aber es könnte ein oder zwei Dinge geben, die Sie vorher noch nicht wirklich untersucht haben, die Sie nicht vollständig verstehen oder von denen Sie vielleicht noch nie gehört haben.

Benutzeroberfläche und Benutzererfahrung

• Beachten Sie, dass Browser Standards inkonsistent implementieren, und stellen Sie sicher, dass Ihre Site in allen wichtigen Browsern einigermaßen gut funktioniert. Zumindest ein Test mit einer aktuellen Gecko- Engine ( Firefox ), einer WebKit-Engine ( Safari und einige mobile Browser), Chrome , Ihren unterstützten IE-Browsern (nutzen Sie die Anwendungskompatibilität von VPC-Images ) und Opera . Überlegen Sie auch, wie Browser Ihre Website in verschiedenen Betriebssystemen rendern .
• Überlegen Sie, wie andere Benutzer die Website möglicherweise nicht in den gängigen Browsern verwenden: z. B. Mobiltelefone, Bildschirmleseprogramme und Suchmaschinen. - Einige Informationen zur Barrierefreiheit: WAI und Section508 , Mobile-Entwicklung: MobiForge .
• Staging: So stellen Sie Updates bereit, ohne die Benutzer zu beeinträchtigen. Stellen Sie eine oder mehrere Test- oder Staging-Umgebungen zur Verfügung, um Änderungen an Architektur, Code oder umfassenden Inhalten zu implementieren, und stellen Sie sicher, dass sie auf kontrollierte Weise bereitgestellt werden können, ohne dass etwas beschädigt wird. Automatische Bereitstellung genehmigter Änderungen an der Live-Site. Dies wird am effektivsten in Verbindung mit der Verwendung eines Versionskontrollsystems (git, Subversion usw.) und eines automatisierten Erstellungsmechanismus (Ant, NAnt usw.) implementiert.
• Zeigen Sie dem Benutzer keine unfreundlichen Fehler direkt an.
• Geben Sie die E-Mail-Adressen der Benutzer nicht in Klartext an, da sie sonst zu Tode gespammt werden.
• Fügen Sie das Attribut rel="nofollow"zu benutzergenerierten Links hinzu , um Spam zu vermeiden .
• Bauen Sie wohlüberlegte Grenzen in Ihre Site ein - Dies gehört auch unter Sicherheit.
• Erfahren Sie, wie Sie progressive Verbesserungen vornehmen .
• Leiten Sie nach einem POST um, wenn dieser POST erfolgreich war, um zu verhindern, dass eine Aktualisierung erneut gesendet wird.
• Vergessen Sie nicht, die Zugänglichkeit zu berücksichtigen. Es ist immer eine gute Idee und unter bestimmten Umständen gesetzlich vorgeschrieben . WAI-ARIA und WCAG 2 sind gute Ressourcen in diesem Bereich.
• Lies Lass mich nicht nachdenken .

Sicherheit

• Es ist eine Menge zu verdauen, aber der OWASP-Entwicklungsleitfaden behandelt die Sicherheit von Websites von oben bis unten.
• Wissen Sie über Injection, insbesondere SQL Injection, und wie Sie dies verhindern können.
• Vertrauen Sie niemals Benutzereingaben oder anderen Elementen, die in der Anfrage enthalten sind (einschließlich Cookies und ausgeblendeten Formularfeldwerten!).
• Hash-Passwörter verwenden Salt und verwenden unterschiedliche Salt- Werte für Ihre Zeilen, um Regenbogenangriffe zu verhindern. Verwenden Sie zum Speichern von Passwörtern einen langsamen Hashing-Algorithmus wie bcrypt (zeitgetestet) oder scrypt (noch stärker, aber neuer) ( 1 , 2 ). ( So speichern Sie ein Passwort sicher ). Das NIST genehmigt auch PBKDF2 für Hash-Passwörter ", und es ist FIPS - zertifiziert in .NET (weitere Informationen hier ). Vermeiden Sie die direkte Verwendung von MD5 oder SHA.
• Versuchen Sie nicht, Ihr eigenes ausgefallenes Authentifizierungssystem zu entwickeln . Es ist so eine einfache Sache zu bekommen falsch in subtilen und untestable Wegen und Sie würden es nicht einmal wissen , bis nach Sie gehackt sind.
• Kennen Sie die Regeln für die Verarbeitung von Kreditkarten . ( Siehe auch diese Frage )
• Verwenden Sie SSL / TLS / HTTPS für Websites, auf denen vertrauliche Daten eingegeben werden (z. B. Anmeldeinformationen, personenbezogene Daten, Kreditkarteninformationen). Let's Encrypt ist eine kostenlose Zertifizierungsstelle, die Ihnen helfen kann.
• Verhindern Sie Sitzungsentführungen .
• Vermeiden Sie Cross Site Scripting (XSS).
• Vermeiden Sie Cross Site Request Forgeries (CSRF).
• Vermeiden Sie Clickjacking .
• Halten Sie Ihre Systeme mit den neuesten Patches auf dem neuesten Stand.
• Stellen Sie sicher, dass Ihre Datenbankverbindungsinformationen gesichert sind.
• Informieren Sie sich über die neuesten Angriffstechniken und Sicherheitslücken, die Ihre Plattform betreffen.
• Lesen Sie das Google Browser-Sicherheitshandbuch .
• Lesen Sie das Web Application Hacker-Handbuch .
• Betrachten Sie das Prinzip des geringsten Privilegs . Versuchen Sie, Ihren App-Server als Nicht-Root- Benutzer auszuführen . ( Kater Beispiel )
• Setzen Sie rel="noopener noreferrer"alle vom Benutzer bereitgestellten Links mit ein target="_blank", um zu verhindern, dass JavaScript auf der Zielseite Ihre Seite an eine andere Stelle umleitet, z. B. auf eine gefälschte Anmeldeseite. Mehr Info
• Ziehen Sie eine strenge Richtlinie zur Inhaltssicherheit in Betracht .

Performance

• Implementieren Sie gegebenenfalls das Caching, verstehen und verwenden Sie das HTTP-Caching sowie das HTML5-Manifest ordnungsgemäß .
• Bilder optimieren - Verwenden Sie kein 20-KB-Bild für einen sich wiederholenden Hintergrund.
• Inhalt komprimieren, um die Geschwindigkeit zu erhöhen, siehe brotli , gzip / deflate ( deflate ist besser ).
• Kombinieren / verketten Sie mehrere Stylesheets oder mehrere Skriptdateien, um die Anzahl der Browserverbindungen zu verringern und die gzip-Funktion zum Komprimieren von Duplikaten zwischen Dateien zu verbessern.
• Werfen Sie einen Blick auf die Yahoo Exceptional Performance- Website, auf der Sie viele nützliche Richtlinien finden, darunter die Verbesserung der Front-End-Leistung und des YSlow- Tools (erfordert Firefox, Safari, Chrome oder Opera). Die Google-Seitengeschwindigkeit (mit Browsererweiterung ) ist ein weiteres Tool für die Leistungsprofilerstellung und optimiert auch Ihre Bilder.
• Verwenden Sie CSS-Image-Sprites für kleine verwandte Bilder wie Symbolleisten (siehe den Punkt "HTTP-Anforderungen minimieren").
• Verwenden Sie SVG-Bild-Sprites für kleine verwandte Bilder wie Symbolleisten. SVG-Färbung ist etwas schwierig. Sie können darüber lesen Sie hier .
• Bei stark frequentierten Websites sollte eine Aufteilung der Komponenten auf mehrere Domänen in Betracht gezogen werden . Speziell...
• Statischer Inhalt (dh Bilder, CSS, JavaScript und allgemein Inhalte, die keinen Zugriff auf Cookies benötigen) sollte in eine separate Domain gestellt werden , die keine Cookies verwendet , da alle Cookies für eine Domain und ihre Unterdomänen bei jeder Anfrage an gesendet werden Domain und deren Subdomains. Eine gute Möglichkeit besteht darin, ein Content Delivery Network (CDN) zu verwenden. Berücksichtigen Sie jedoch den Fall, dass dieses CDN fehlschlägt, indem Sie alternative CDNs oder lokale Kopien einbeziehen, die stattdessen bereitgestellt werden können.
• Minimieren Sie die Gesamtzahl der HTTP-Anforderungen, die ein Browser zum Rendern der Seite benötigt.
• Wählen Sie eine Template-Engine und rendern / kompilieren Sie sie mit Task-Läufern wie gulp oder grunt
• Stellen Sie sicher, dass sich favicon.icoim Stammverzeichnis der Site eine Datei befindet, z /favicon.ico. Browser fordern dies automatisch an , auch wenn das Symbol im HTML-Code überhaupt nicht erwähnt wird. Wenn Sie keine haben /favicon.ico, führt dies zu einer Menge von 404s, was die Bandbreite Ihres Servers belastet.

SEO (Suchmaschinenoptimierung)

• Verwenden Sie "suchmaschinenfreundliche" URLs, dh verwenden Sie example.com/pages/45-article-titlestattexample.com/index.php?page=45
• Wenn Sie #für dynamischen Inhalt verwenden, ändern Sie das #zu #!und dann auf dem Server, $_REQUEST["_escaped_fragment_"]was Googlebot anstelle von verwendet #!. Mit anderen Worten ./#!page=1wird ./?_escaped_fragments_=page=1. Auch für Benutzer, die FF.b4 oder Chromium verwenden, history.pushState({"foo":"bar"}, "About", "./?page=1");ist dies ein großartiger Befehl. Obwohl sich die Adressleiste geändert hat, wird die Seite nicht neu geladen. Auf diese Weise können Sie verwenden ?anstelle von #!dynamischen Inhalten zu halten und auch den Server sagen , wenn Sie den Link per E - Mail , die wir nach dieser Seite sind, und die AJAX benötigen keine weitere zusätzliche Anforderung zu machen.
• Verwenden Sie keine Links, die "hier klicken" sagen . Sie verschwenden eine SEO-Chance und es erschwert die Arbeit für Leute mit Bildschirmleseprogrammen.
• Verfügen Sie über eine XML-Sitemap , vorzugsweise am Standardspeicherort /sitemap.xml.
• Verwenden <link rel="canonical" ... />Sie diese Option, wenn Sie mehrere URLs haben, die auf denselben Inhalt verweisen. Dieses Problem kann auch über die Google Webmaster-Tools behoben werden .
• Verwenden Sie die Google Webmaster-Tools und Bing Webmaster-Tools .
• Installieren Sie Google Analytics gleich zu Beginn (oder ein Open-Source-Analysetool wie Piwik ).
• Wissen, wie robots.txt und Suchmaschinen funktionieren.
• Leiten Sie Anfragen (mit 301 Moved Permanently) um, indem Sie nach www.example.comdem example.com(oder umgekehrt ) fragen , um zu verhindern, dass das Google-Ranking zwischen beiden Websites aufgeteilt wird.
• Wisse, dass es da draußen schlecht erzogene Spinnen geben kann.
• Wenn Sie keinen Textinhalt haben, schauen Sie in die Sitemap-Erweiterungen von Google nach Videos usw. In der Antwort von Tim Farley finden Sie einige gute Informationen dazu .

Technologie

• Verstehen Sie HTTP und Dinge wie GET, POST, Sitzungen, Cookies und was es bedeutet, "zustandslos" zu sein.
• Schreiben Sie Ihr XHTML / HTML und CSS gemäß den W3C-Spezifikationen und stellen Sie sicher, dass sie validiert sind . Ziel ist es, Browser-Macken zu vermeiden und als Bonus die Arbeit mit nicht-traditionellen Browsern wie Bildschirmleseprogrammen und Mobilgeräten zu vereinfachen.
• Verstehen Sie, wie JavaScript im Browser verarbeitet wird.
• Verstehen Sie, wie JavaScript, Stylesheets und andere von Ihrer Seite verwendete Ressourcen geladen werden, und berücksichtigen Sie deren Auswirkungen auf die wahrgenommene Leistung. Es wird mittlerweile allgemein als angemessen erachtet , Skripte an den unteren Rand Ihrer Seiten zu verschieben, mit Ausnahme von typischen Ausnahmen wie Analytics-Apps oder HTML5-Shims.
• Verstehen Sie, wie die JavaScript-Sandbox funktioniert, insbesondere, wenn Sie Iframes verwenden möchten.
• Beachten Sie, dass JavaScript deaktiviert werden kann und wird, und dass AJAX daher eine Erweiterung und keine Basis ist. Beachten Sie, dass NoScript immer beliebter wird, mobile Geräte möglicherweise nicht wie erwartet funktionieren und Google beim Indizieren der Website nicht den größten Teil Ihres JavaScript ausführt.
• Erfahren Sie den Unterschied zwischen 301 und 302 Weiterleitungen (dies ist auch ein SEO-Problem).
• Erfahren Sie so viel wie möglich über Ihre Bereitstellungsplattform.
• Verwenden Sie ein Reset Style Sheet oder normalize.css .
• Berücksichtigen Sie JavaScript-Frameworks (z. B. jQuery , MooTools , Prototype , Dojo oder YUI 3 ), durch die sich bei der Verwendung von JavaScript für die DOM-Manipulation viele Browserunterschiede verbergen.
• Wenn Sie die wahrgenommene Leistung und die JS-Frameworks zusammenfassen, können Sie mithilfe eines Dienstes wie der Google Libraries-API Frameworks laden, damit ein Browser eine Kopie des bereits zwischengespeicherten Frameworks verwenden kann, anstatt eine Kopie von Ihrer Website herunterzuladen.
• Das Rad nicht neu erfinden. Bevor Sie etwas tun, suchen Sie nach einer Komponente oder einem Beispiel dafür. Es besteht eine 99% ige Wahrscheinlichkeit, dass jemand dies getan und eine OSS-Version des Codes veröffentlicht hat.
• Beginnen Sie jedoch nicht mit 20 Bibliotheken, bevor Sie sich überhaupt für Ihre Bedürfnisse entschieden haben. Besonders im clientseitigen Web, wo es letztendlich fast immer wichtiger ist, die Dinge leicht, schnell und flexibel zu halten.

Bugfixing

• Verstehen Sie, dass Sie 20% Ihrer Zeit mit dem Programmieren und 80% mit der Wartung verbringen werden, also programmieren Sie entsprechend.
• Richten Sie eine gute Fehlerberichtslösung ein.
• Haben Sie ein System für Leute, um Sie mit Vorschlägen und Kritik zu kontaktieren.
• Dokumentieren Sie, wie die Anwendung für zukünftige Supportmitarbeiter und Wartungsmitarbeiter funktioniert.
• Machen Sie häufige Backups! (Und stellen Sie sicher, dass diese Sicherungen funktionsfähig sind.) Verfolgen Sie eine Wiederherstellungsstrategie, nicht nur eine Sicherungsstrategie.
• Verwenden Sie ein Versionskontrollsystem, um Ihre Dateien wie Subversion , Mercurial oder Git zu speichern .
• Vergessen Sie nicht, Ihren Abnahmetest durchzuführen. Frameworks wie Selen können helfen. Insbesondere, wenn Sie Ihre Tests vollständig automatisieren, z. B. mit einem Continuous Integration-Tool wie Jenkins .
• Stellen Sie sicher, dass Sie ausreichend angemeldet sind, indem Sie Frameworks wie log4j , log4net oder log4r verwenden . Wenn auf Ihrer Live-Site etwas schief geht, müssen Sie herausfinden, was passiert.
• Stellen Sie bei der Protokollierung sicher, dass Sie sowohl behandelte als auch nicht behandelte Ausnahmen erfassen. Berichten / analysieren Sie die Protokollausgabe, da Sie sehen, wo sich die wichtigsten Probleme auf Ihrer Site befinden.

Andere

• Implementieren Sie sowohl serverseitige als auch clientseitige Überwachung und Analyse (man sollte proaktiv und nicht reaktiv sein).
• Verwenden Sie Dienste wie UserVoice und Intercom (oder ähnliche Tools), um ständig mit Ihren Benutzern in Kontakt zu bleiben.
• Folgen Sie Vincent Driessen ‚s Git Verzweigung Modell

Viele Dinge wurden nicht unbedingt weggelassen, weil sie keine nützlichen Antworten sind, sondern weil sie entweder zu detailliert sind, nicht in den Geltungsbereich passen oder zu weit gehen, als dass jemand einen Überblick über die Dinge bekommen könnte, die er wissen sollte. Bitte zögern Sie nicht, dies zu bearbeiten. Ich habe wahrscheinlich ein paar Dinge verpasst oder einige Fehler gemacht.