Ich wette, viele von uns haben die Produktionswebsite und die Entwicklungswebsite oft gleichzeitig geöffnet. Es ist schon fast ein Entwicklerklischee, eine lokale Änderung vorzunehmen, zu aktualisieren, zu aktualisieren, zu aktualisieren, zu aktualisieren und die Änderung einfach nicht zu sehen, nur um dann festzustellen, dass man die Produktionswebsite und nicht die lokale Entwicklungswebsite betrachtet hat.
Das ist am Anfang nur lustig, aber wenn es oft passiert, ist es frustrierend. Es ist auch komplett vermeidbar, indem man einen offensichtlichen visuellen¹ Unterschied zwischen den beiden Seiten hat. Ein einfacher Weg, das zu tun? Unterschiedliche Favicons.
Es gibt keinen wirklichen Trick dabei. Ich habe buchstäblich eine andere favicon.ico Datei in der Entwicklung als in der Produktion. Auf dieser (WordPress)-Seite versioniere und deploye ich nur den wp-content Ordner, der nicht die Wurzel der Seite ist, auf der sich das Favicon befindet. Alle Dateien im Stammverzeichnis muss ich manuell per SFTP hochladen, um sie zu ändern. Ich habe einfach meine lokale Version geändert, und dort liegt sie nun, ganz anders.
Andere Tricks
- Habe einfach kein lokales Favicon, damit die Standard-Logo-Sache des Browsers angezeigt wird. Ganz anders.
- Eine dynamische SVG-Datei, die den Branch-Namen anzeigt (Was?!)
- Chrome hat eine experimentelle Funktion "Tab-Gruppen". Verwenden Sie unterschiedliche Tab-Gruppen für Dev und Prod.
- Verwenden Sie eine Browsererweiterung, um Titelpräfixe hinzuzufügen.
- Verwenden Sie eine Browsererweiterung, um Favicons automatisch anhand von URL-Übereinstimmungen zu kolorieren.
Wo wir gerade von Favicons sprechen...
Das bringt mich zum Nachdenken, was die Best Practices für Favicons im Jahr 2020 sind, zumindest für gewöhnliche Inhaltswebsites wie diese.
Ich sage es ungern, aber es ist mir egal, was das Symbol ist, wenn jemand diese Seite zu Hause auf einem iPad hinzufügt, wissen Sie? Abgesehen von einem Kerl, der eine Kopie der gesamten Datenbank wollte, um die Website offline zu nutzen, um Gefangene zu unterrichten, hat mich noch nie jemand nach dem "Installieren" von CSS-Tricks gefragt.
Noch weniger kümmert es mich die Kachelfarbe auf einem Windows 8 Tablet oder die Anpassung der Browser-Chrome-Farbe unter Android. Solche Dinge sind Teil des Prozesses, wenn Favicons "generiert" werden.
Mir ist wichtig, dass das Favicon auf hochauflösenden Displays gut aussieht (eine 32×32-Grafik ist keine große Ausgabe). Ich mag die Idee von SVG-Favicons. Ich mag die Idee, sicherzustellen, dass der Dark Mode behandelt wird. Ich mag die Idee, dies mit so wenig Code und Dateien wie möglich zu tun. Hat sich das in letzter Zeit jemand angesehen und kann mich erleuchten?
- "Visueller" Unterschied. Hm. Ich frage mich, was für Entwickler mit Sehbehinderungen getan werden könnte? Ideen?
Ein Browser-Plugin, das Tab-Labels ändert, könnte funktionieren, und das Hinzufügen eines Dev-Indikators zu Seitentiteln als Teil des Dev-Build-Prozesses würde definitiv funktionieren, für uns VI-Entwickler.
Ich bin wirklich froh, dass ich entdeckt habe, dass ich nicht der Einzige bin, der das tut. ☺️
RealFaviconGenerator am Apparat! :)
Seit einigen Wochen zeigt RealFavicon an, wie Ihr Favicon in Desktop-Browsern aussehen wird, auch für den Dark Mode. Außerdem können Sie Ihrem Icon schnell einen Hintergrund hinzufügen, damit Ihr dunkles Logo sowohl im hellen als auch im dunklen Modus gut aussieht. Gut.
Die kommenden Funktionen
– Machen Sie das SVG-Favicon Teil des Favicon-Pakets.
– Ermöglichen Sie zwei verschiedene Designs für helle und dunkle Modi.
Wäre das eine gute Lösung für die Favicons von 2020?
Als Benutzer von RealFaviconGenerator klingt das gut für mich.
Ha! Das ist mir auch schon passiert. Habe größere Änderungen vorgenommen und erst Stunden später gemerkt, dass es auf der Produktionsseite war. Es war eine Katastrophe.
Ich verwende einfach einen anderen Titel… Ich füge das ENVIRONMENT-Präfix hinzu, sodass ich etwas wie „Dev – MySite.com“ sehe. Selbst wenn die Tabs klein sind, kann ich immer noch das Dev-Präfix sehen.
Vorausgesetzt, Entwickler schauen immer wieder in den Konsolen-Tab des Browser-Entwicklerbereichs und vorausgesetzt, Menschen mit Sehbehinderungen können den Entwicklerbereich ebenfalls bedienen, können Sie mit etwas Javascript eine automatische Konsolenmeldung hinzufügen. Zum Beispiel, wenn Sie dem Favicon eine ID geben, etwas wie
if (location.href.indexOf("http") == -1 ) {document.getElementById("favicon").setAttribute("href", "technix/favicon-development.png");console.log("ACHTUNG: Dies ist die Entwicklungsseite!");}
} Dann zeigt eine lokal gespeicherte Seite die Meldung an. – Falls die Entwicklungsseite auch auf einem anderen Server liegt, benötigen Sie statt "http" in indexOf(...) eine andere Identifizierung (z. B. den Ordnernamen, die Subdomain usw.) der Produktionsseite.
„Dann zeigt eine lokal gespeicherte Seite die Meldung an“… und natürlich das andere Entwicklungs-Favicon. :-)
Wenn Sie zwei Instanzen geöffnet haben, wie im OP erwähnt, können Sie nicht leicht erkennen, welche welche ist…
Es braucht nur zwei Zeilen Skript, um den Titel zu ändern, warum sich mit einer Erweiterung herumschlagen? Ich überprüfe nur, ob die URL nicht mit file beginnt.
Bei WordPress-Sites schreibe ich nach Bedarf ein kleines CSS, das die aktuelle URL anvisiert und je nach URL eine andere Hintergrundfarbe für die WP-Adminleiste zuweist. So hat staging.domain.com Blau, http://www.domain.com Rot, SB.domain.com Grau usw. Dieses CSS ist Teil des Projekts, also funktioniert es gut mit Git etc.