Mein Beitrag zur Frontend Challenge (Dez.

Dies ist eine Einreichung für Frontend Challenge – Dezemberausgabe, Glam Up My Markup: Winter Solstice

Was ich gebaut habe

Die Website ist hier live: https://plutonium-239.github.io/dev.to-frontend-challenge/
Mein Ziel war es, das gegebene einfache HTML interaktiver zu machen?, schön? und nützlich? Dies habe ich erreicht, indem ich allen Abschnitten einen einheitlichen Stil hinzugefügt und wichtige Begriffe hervorgehoben habe, um den Inhalt schneller zu erfassen, und gleichzeitig mehr Kontrast hinzugefügt habe. Ich habe die Website auch für ein mobiles Layout optimiert und obwohl sie weniger Interaktion bietet, ist die Website gleichermaßen thematisch gut gestaltet und nützlich.

Demo

Der Quellcode ist öffentlich verfügbar unter https://github.com/plutonium-239/dev.to-frontend-challenge

Reise

Theming/CSS

Ich wollte ein Nachthimmel-Thema wählen, weil die Wintersonnenwende dazu führt, dass die nördliche Hemisphäre den kürzesten Tag des Jahres erlebt. Also erinnerte ich mich an unseren alten Freund „particles.js“. Allerdings hat es sich jetzt in tsParticles verwandelt, mit einer Reihe von Speicherleck-Korrekturen, Optimierungen und einer Neufassung in Typoskript. Dies bildet den Hintergrund der Seite. Ich habe es so konfiguriert, dass es nicht ablenkt und gleichzeitig lebendig und ästhetisch ansprechend aussieht. Dieses Setup zu bekommen war ein Schmerz, den ich nicht erwartet hatte. Die neueste Version verfügt über eine tsparticles.bundle.js, die alles enthalten soll, was Sie brauchen, und Globals exportiert, damit Sie in einer Zeile loslegen können, aber das war nicht der Fall. Ich habe versucht, das Setup manuell aufzurufen, während ich tsparticles.engine.js verwendet habe, ohne Erfolg. Dies leidet unter einem Mangel an nützlicher Dokumentation. Ich habe auch die schlanke Version ausprobiert, die ein Anwendungsbeispiel hatte, aber es hat nicht funktioniert. Ich habe versucht, die Version einfach durch eine ältere zu ersetzen (da ich hauptsächlich grundlegendes Verhalten und nicht die neueren Funktionen brauchte) und bin mit 1.43.1 fündig geworden. Man würde erwarten, dass man durch Befolgen der Anweisungen in der Readme-Datei zum Leben erweckt wird, aber das stimmte hier nicht.

Die Wahl des Farbschemas war irgendwie ein lustiger Zufall. Ich hatte einen Screenshot eines Tumblr-Posts/Memes gesehen und mir gefielen die Farben darin sehr gut. Ich habe buchstäblich über Google Lens nach einem Bild mit höherer Auflösung gesucht und dessen Farben extrahiert. Dadurch hatte ich 3 Grundfarben (Oberfläche, Primär, Aktiv). Bei den anderen Farben wollte ich, dass eine davon rot-rosa und die andere grünlich/türkis ist. Ich habe einige Farben aus diesem Bereich ausgewählt und den Farbton so angepasst, dass er mit der aktuellen Farbpalette übereinstimmt. Ich habe tolle Tools wie Colormind kennengelernt, um alternative Farbpaletten auszuprobieren.

Was die Typografie angeht, kenne ich die Schriftart Readex Pro schon seit einiger Zeit und sie gefällt mir wirklich gut. Sie eignet sich sowohl als Anzeigeschrift für Überschriften als auch als Basisschrift für normalen Text. Ich habe ein paar andere ausprobiert (Noto, Raleway), habe mich aber letztendlich für Readex Pro entschieden. Ich hatte auch darüber nachgedacht, für den gesamten Text eine Monospace-Schriftart zu verwenden, aber der Inhalt dieser Seite war einfach nicht mit diesem Stil kompatibel.

Als nächstes für die scrollgesteuerten Animationen! Ich wollte diese schon seit einiger Zeit in echten Websites verwenden und habe sie in das Inhaltsverzeichnis und die Überschrift aufgenommen. Es gab einige Probleme damit, dass Firefox (immer noch) den Animationsbereich nicht unterstützte (und scrollgesteuerte Animationen selbst standardmäßig hinter einem Flag¹ deaktiviert waren), also musste ich einen Hack implementieren -ish Fix (aber Sie müssen das Flag noch aktivieren).

Inhalt/HTML (über JS)/CSS

Was den Inhalt betrifft, habe ich dies auf zwei Arten getan:

1. Hinzufügen von Hervorhebungen zu Text über JS – im Wesentlichen erforderlich, um innerHTML zu ersetzen, was sich schlecht anfühlt, aber HTML nicht ändern zu können, ist ziemlich einschränkend. Ich habe der Einleitung auch ein Bild mithilfe von JS hinzugefügt, indem ich ein Element eingefügt habe. Ich habe das gemacht, weil ich einen kleinen Einblendeffekt hinzufügen wollte. Ursprünglich hatte ich dies durch einen CSS-Hintergrund im ::after-Bereich des Abschnitts erreicht, aber dafür gesorgt, dass die Überblendung konsistent war (d. h. der obere Rand des Bildes sollte nicht sichtbar scharf sein) über verschiedene Desktop-Größen und Mobilgeräte hinweg erwies sich als unmöglich. Also musste ich dem Abschnitt ein neues Element hinzufügen und dann das Pseudoelement ::after auf das Bild selbst beschränken – was sehr gut funktioniert.
2. Bilder zu Feierlichkeiten über CSS hinzufügen – Für jede der vier Feierlichkeiten habe ich passende Bilder aus verschiedenen Quellen gefunden (mit Quellenangabe) und diese durch Pseudoelemente hinzugefügt. Ich habe ihnen einen schönen Parallaxenstil gegeben und außerdem eine Vollbildanzeige bei Hover-Interaktion hinzugefügt. Aufgrund der Vielfalt der Bilder habe ich mein Bestes getan, um Bilder mit hoher Auflösung zu finden, und sie dann mit ImageMagick auf eine einheitliche Breite von 800 Pixel angepasst. Ich habe dies auf clevere Weise implementiert, indem ich die .celebration-Klasse verwendet habe, um das Framework zu definieren, und CSS-Variablen für jede einzelne Feier verwendet habe, um die Bild-URL (und den Credits-Text) zu definieren.

Für die Traditionsseite habe ich die Listenmarkierungen durch einen benutzerdefinierten @Counter-Stil ersetzt (und gelernt, wie man ihn verwendet) – das ist eine ziemlich raffinierte Funktion!

Interaktion: Ich habe mithilfe der IntersectionObserver-API eine Bildlaufanzeige im Inhaltsverzeichnis hinzugefügt. Das war ziemlich einfach: Auf Schnittpunkte prüfen, eine Klasse festlegen und fertig!

Es gibt auch einen Hover-Effekt auf den Elementen der Feierliste, der das gesamte jeweilige Bild zeigt. Ich habe dies über CSS getan, indem ich ein Bild als Inhalt von ::after festgelegt und es beim Schweben sichtbar gemacht habe.

?Vielleicht hätte ich am Ende der Seite auch ein cooles kleines Geheimnis hinzugefügt?

Hierfür werden die Canvas-API und ein Scroll-Listener verwendet. Es sieht ziemlich cool aus, aber ich war mir nicht 100 % sicher, ob es zum restlichen Styling passt.

Abschluss

Ich bin von Beruf kein UI-Designer/Webentwickler. Tatsächlich bin ich ein ML-Forscher. Aber ich habe Apps/Websites entworfen und bin gerne kreativ!

Als ich den Challenge-Beitrag sah, fand ich ihn interessant, aber ich dachte nicht, dass ich ihn zu ernst nehmen würde. Allerdings habe ich zufällig den oben erwähnten Screenshot und eine Website gesehen, die einen alten Partikel.js-Effekt verwendet, und diese beiden müssen irgendwann geklickt haben. Nennen Sie das ein Weihnachtswunder! ?

Ich habe nicht wirklich irgendwelche zukünftigen Schritte im Sinn, ich habe das Gefühl, dass ich getan habe, was ich geplant hatte und noch mehr.

Wenn ich mir die Einsendungen einiger anderer ansehe, denke ich, dass es nicht so klar war, dass der HTML-Code nicht direkt bearbeitet werden konnte. Ich habe diese festgelegte Regel befolgt und nur ein Skript-Tag und Link-Tags für CSS hinzugefügt – ohne den eigentlichen Markup-Inhalt zu bearbeiten.

Der Code ist unter der MIT-Lizenz verfügbar.

---

1. Für alle, die Firefox-/basierte Browser (z. B. Zen) verwenden, aktivieren Sie „layout.css.scroll-driven-animations.enabled“ in about:config ↩

Das obige ist der detaillierte Inhalt vonMein Beitrag zur Frontend Challenge (Dez.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!