6 Front-End-Herausforderungen für Entwickler

Blog

6 Front-End-Herausforderungen für Entwickler

Frontend-Entwicklung ist anstrengend und hart – aber mit Übung kann man das Handwerk beherrschen. Wenn Sie bereit sind, die Arbeit und Mühe zu investieren, können Sie ein kompetenter Problemlöser in der Frontend-Entwicklungslandschaft werden. Ein effektiver Weg, um ein großartiger Front-End-Entwickler zu werden, besteht darin, einfach so viele Herausforderungen wie möglich zu erstellen und zu lösen.



Hier sind sechs Herausforderungen, die Sie heute lösen können, um ein Meister der Frontend-Entwicklung zu werden. Hier sind ohne weiteres die sechs Herausforderungen, die Sie wahrscheinlich programmieren sollten.

1. Kreditkartenformular

Ein fantastisches Kreditkartenformular mit reibungslosen und süßen Mikrointeraktionen. Umfasst Zahlenformatierung, Validierung und automatische Erkennung des Kartentyps. Es wurde mit Vue.js erstellt und ist auch vollständig reaktionsschnell.



Kreditkartenformular — https://github.com/muhammederdem/credit-card-form



Was Sie durch das Lösen der Herausforderung lernen werden

  • Formularbearbeitung und -validierung
  • Umgang mit Ereignis-Listenern (z. B. wenn sich die Felder ändern, werden die Werte auf der Kreditkarte gedruckt)
  • Verstehen, wie Elemente auf der Seite angezeigt und positioniert werden, insbesondere die Kreditkarte, die das Formular überlappt

2. Balkendiagramm von Grund auf neu

Ein Balkendiagramm oder Balkendiagramm ist ein Diagramm oder ein Diagramm, das kategoriale Daten mit rechteckigen Balken mit Höhen oder Längen proportional zu den Werten darstellt, die sie darstellen.

Die Balken können vertikal oder horizontal geplottet werden. Ein vertikales Balkendiagramm wird manchmal als Liniendiagramm bezeichnet.

Treiber-Navigator-Paarprogrammierung

Was Sie durch das Lösen der Herausforderung lernen werden

  • Daten strukturiert und leicht verständlich darstellen
  • Optional: Erfahren Sie, wie Sie das Element `` verwenden und Elemente damit zeichnen

Hier finden Sie die Daten für die Weltbevölkerung nach Jahr Hier .

3. GitHub-Repositorys mit Suchfunktion

Nichts Außergewöhnliches hier – GitHub-Repositorys sind im Grunde nur eine verherrlichte Liste.

Die Aufgabe besteht darin, die Repositorys anzuzeigen und dem Benutzer zu ermöglichen, durch die Repositorys zu filtern. Verwenden Sie die offizielle GitHub-API Repositorys pro Benutzer abzurufen.

GitHub-Profilseite — https://github.com/indreklasn

Was Sie durch das Lösen der Herausforderung lernen werden

  • So rufen Sie Daten von einer API ab
  • So zeigen Sie die Daten aus der API an
  • So filtern und zeigen Sie die relevanten Daten für jede Suche an
  • Optional: Wenn Sie bereit sind für die Herausforderung, verwenden Sie die v4-API , die mit GraphQL erstellt wurde. Wenn Sie GraphQL lernen möchten, lesen Sie einen meiner vorherigen Artikel .

4. Twitter-Herz-Animation

Bereits 2016 hat Twitter diese tolle Animation für ihre Tweet-Likes eingeführt. Ab 2019 sieht es immer noch toll aus, also warum nicht selbst eines erstellen?

Twitter-Tweet-ähnliche Animation

Was Sie durch das Lösen der Herausforderung lernen werden

  • Wie die |_+_| CSS-Attribut funktioniert
  • Wie man HTML-Elemente manipuliert und animiert
  • So kombinieren Sie JavaScript, HTML und CSS

5. Chaträume im Reddit-Stil

Chatrooms sind eine beliebte Art der Kommunikation, da sie einfach zu bedienen sind und Spaß machen. Aber was treibt moderne Chatrooms eigentlich an? WebSockets!

Was Sie durch das Lösen der Herausforderung lernen werden

  • So verwenden Sie WebSockets und Echtzeitkommunikation und Datenaktualisierungen
  • Funktionsweise von Benutzerberechtigungsstufen (z. B. der Besitzer eines Chat-Kanals hat die Rolle |_+_|, während andere im Raum die Rolle |_+_| haben)
  • Formularvalidierung und -handhabung – denken Sie daran, das Chat-Feld zum Senden einer Nachricht ist ein |_+_| Element
  • So erstellen Sie verschiedene Chatrooms und treten ihnen bei
  • Direktnachrichten und wie sie funktionieren. Benutzer können privat mit anderen Benutzern kommunizieren. Im Wesentlichen stellen Sie eine WebSocket-Verbindung zwischen zwei Benutzern her.

6. Navigation im Streifenstil

Das Besondere an dieser Navigation sind die Popover-Container-Morphs, die an den Inhalt angepasst werden. Dieser Übergang hat eine Eleganz gegenüber dem traditionellen Verhalten, ein neues Popover vollständig zu öffnen und zu schließen.

Streifennavigation

Was Sie durch das Lösen der Herausforderung lernen werden

  • So kombinieren Sie CSS-Animationen mit Übergängen
  • Überblenden von Inhalten und Anwenden der |_+_| Klasse für das schwebende Element

Versuchen Sie es zuerst selbst, aber wenn Sie Hilfe brauchen, In diesem Beitrag finden Sie eine Schritt-für-Schritt-Anleitung.

Python-Excel-Add-In

Abschluss

Denken Sie daran, dass es keine Abkürzungen gibt, wenn es darum geht, gut im Codieren zu werden. Beginnen Sie mit der Arbeit und verbessern Sie Ihre Programmierfähigkeiten, indem Sie so viel wie möglich aufbauen. Wenn Sie nichts Interessantes gefunden haben, lesen Sie den folgenden Beitrag für noch mehr Ideen.

Vielen Dank fürs Lesen. Ich hoffe, Sie haben etwas Interessantes zum Programmieren gefunden.

#Frontend-Entwicklung #JavaScript #Reagieren #Programmierung