Ich bookmarke Adams GUI Challenges Posts/Videos immer wieder und bevor ich sie überhaupt überprüfen und verlinken kann, ist bereits ein weiteres veröffentlicht! Glücklicherweise ist die Homepage dazu auf web.dev eine schöne Zusammenfassung.
Zum Beispiel ist ein aktuelles Thema die Split-Button-Komponente (Artikel / Video / Demo). Es ist eine Sache, eine Designspezifikation zu haben, sie so zu codieren, dass sie funktioniert und richtig aussieht, und den Tag damit abzuschließen. Aber, wage ich zu sagen, dass *echte* Frontend-Entwicklung tiefer geht als das. Allein bei dieser einen Komponente betrachtet Adam
- Wie die Farben eingerichtet und angewendet werden. Die Farben haben eine Subtilität, die sie gut zusammenpassen lässt. Zum Beispiel sind die dunkelsten Farben sehr dunkle Versionen der Basisfarben, aber nicht schwarz. Es werden Custom Properties verwendet, um eine Art Menü von Farbkombinationen zu erstellen – aber vor allem ist es für erfolgreiches Theming eingerichtet.
- Das Menü verwendet Schatten, um ein angemessenes Maß an Tiefe zu verleihen. Da mehrere Themes unterstützt werden, tun die Schatten nichts Peinliches wie sich umkehren, d. h. helle Schatten auf dunklen Hintergründen, die albern aussehen, oder Schatten auf dunklem Hintergrund.
- Die Verwendung von SVG-Strichen (effizient! flexibel!), die CSS-Designoptionen ermöglichen, wie z. B. das Runden der Endkappen.
Klicks (aktive und Hover-Zustände) sollten den Kontrast erhöhen.
- Alles ist für die Tastaturbedienung getestet. Die Menüs öffnen sich beim Tabben, und Pfeiltasten bewegen den Fokus innerhalb des Menüs, was durch visuelle Änderungen hervorgehoben wird. Ein Screenreader (in diesem Fall VoiceOver) wurde ebenfalls zum Testen verwendet, zum Beispiel die ESC-Taste zum Schließen des Menüs und zum Entfernen des Fokus ist funktional.
- Präferenzen für reduzierte Bewegungen werden berücksichtigt, indem beim Öffnen und Schließen des Menüs weniger Bewegungen durchgeführt werden.
- Visuell öffnet und schließt das Menü allein durch
:focus-withinin CSS. Wie einfach! Aberaria-Attribute werden immer noch in JavaScript aktualisiert, um dies ordnungsgemäß auszudrücken.
Das ist nicht alles, aber das ist *eine Menge*, oder? (Der Artikel enthält noch viel mehr Details, einschließlich Tools zur Inspektion des Entwicklungsprozesses und kleiner Helferbibliotheken, die verwendet wurden.) Das ist, was echte Frontend-Entwicklung ist. Nur ein "Button mit einem Menü" hat eine riesige Oberfläche, die es richtig zu machen gilt, und gefährliche Auswirkungen, wenn man es falsch macht.
Wenn Ihnen die Idee von Herausforderungen gefällt, fordert Sie CodePen jede Woche auf, etwas nach einem Thema zu bauen, mit Ideen und Ressourcen. Es macht Spaß, weil viele Leute es mit Ihnen zusammen machen, was es Ihnen ermöglicht, zu sehen, wie andere die gleiche Idee anders angegangen sind.