Werde 2020 mit diesen 10 Projektideen zum Front-End-Meister

Dies ist ein leicht aktualisierter Cross-Post von einem kurzen Artikel, den ich auf DEV geschrieben habe. Ich veröffentliche ihn hier, weil ich ganz IndieWeb bin.

Ich liebe diesen Beitrag von Simon Holdorf. Er hat einige Ideen, wie Sie Ihre Fähigkeiten als Front-End-Entwickler im nächsten Jahr verbessern können. Hier sind sie:

• Erstellen Sie eine Film-Such-App mit React
• Erstellen Sie eine Chat-App mit Vue
• Erstellen Sie eine Wetter-App mit Angular
• Erstellen Sie eine To-Do-App mit Svelte

... und 5 weitere wie diese.

Alles gute Ideen. Alle extrem auf JavaScript-Frameworks fokussiert.
Ich denke gerne daran, ein Front-End-Entwickler zu sein, als jemand, der ein Browser-Experte ist. Sie arbeiten mit Menschen zusammen, die irgendeinen Client nutzen, um das Web auf irgendeinem Gerät zu nutzen. Das ist der Job.

Ich liebe JavaScript-Frameworks, aber sie zu kennen, macht Sie nicht zu einem guten Front-End-Entwickler. Leistungs- und Barrierefreiheitsorientiert und damit nutzerorientiert zu sein ist es, was Sie zu einem Front-End-Meister macht, über die Ausführung der erforderlichen Fähigkeiten hinaus, um die Website zu erstellen.

In diesem Sinne hier noch ein paar Ideen.

• Suchen Sie sich einen Dribbble-Shot aus, der Ihnen gefällt. Bauen Sie ihn in HTML und CSS auf die sauberste und zugänglichste Weise nach, die Sie können.
• Finden Sie eine Komponente, die Sie in Ihrer Codebasis abstrahieren können, und abstrahieren Sie sie, damit Sie sie effizient wiederverwenden können. Berücksichtigen Sie dabei die Barrierefreiheit. Könnten Sie sie zugänglicher machen, was der gesamten Website zugute käme? Wie sieht es mit Ihrer SVG-Icon-Komponente aus – wie steht es damit heutzutage?
• Probieren Sie einen Static Site Generator aus (vielleicht einen, der nicht besonders auf JavaScript fokussiert ist, nur um ihn kennenzulernen). Was könnte die Datenquelle sein? Was könnten Sie erstellen, wenn Sie den Build-Prozess nach einem Zeitplan ausführen würden?
• Installieren Sie das Axe Accessibility Plugin für DevTools und führen Sie es auf einer wichtigen Website aus, die Sie kontrollieren. Nehmen Sie Änderungen vor, um die Barrierefreiheit gemäß den Vorschlägen zu verbessern.
• Starten Sie eine Kopie von Fractal. Sehen Sie, wie es Ihnen helfen kann, Front-Ends auf HTML- und CSS-Ebene als Komponenten zu betrachten.
• Erstellen Sie ein schönes Formular in HTML/CSS, das etwas Nützliches für Sie tut, z. B. Leads für freiberufliche Arbeit entgegennimmt. Lernen Sie alles über Formularvalidierung und sehen Sie, wie viel Sie nur mit HTML, dann mit HTML plus etwas CSS, und dann mit etwas Vanilla JavaScript tun können. Lassen Sie das Formular mit einem kleinen dedizierten Dienst funktionieren.
• Lesen Sie etwas über Serverless und wie es Ihre Fähigkeiten als Front-End-Entwickler erweitern kann.
• Finden Sie heraus, wie Sie ein SVG-Icon-System implementieren. Viele Websites benötigen heutzutage ein Icon-Set. Das Einbetten von SVG ist eine großartige einfache Lösung, aber wie können Sie dies abstrahieren, um es einfach in Ihren Workflow zu integrieren? Wie kann es mit dem von Ihnen verwendeten Framework funktionieren?
• Versuchen Sie, einen Service Worker zu implementieren. Lesen Sie ein Buch darüber. Tun Sie etwas sehr Kleines. Sehen Sie sich ein Framework an, das sich um sie dreht.
• Nehmen wir an, Sie müssten eine Website erstellen, auf der der gesamte Inhalt der Name und die Adresse des Unternehmens sowie eine Liste der Öffnungszeiten sind. Wie viel Arbeit und technische Schuld könnten Sie bei der Erstellung maximal vermeiden?