1. Notion-Klon
Die Notion-Anwendung wird von vielen geliebt; sie ermöglicht es Ihnen, Ihren Arbeitsablauf zu optimieren, mit Dokumenten zu arbeiten, Aufgaben zu planen und Daten zwischen Geräten zu synchronisieren.
Was Sie lernen werden, wenn Sie einen Notion-Klon erstellen:
- . Der Benutzer kann „mit der Maus greifen“ ziehbar Element und legen Sie es hinein abwerfbar Zone.
- So synchronisieren Sie Daten in Echtzeit zwischen Ihrem Computer und Ihrem Smartphone.
- Wir ermöglichen Benutzern das Erstellen, Lesen, Aktualisieren und Löschen von Datensätzen und trainieren so CRUD-Kenntnisse.
Der Artikel wurde mit Unterstützung von EDISON Software übersetzt , und auch .
2. Repl.it-Klon
Repl.it ist ein Tool für die kollaborative Codebearbeitung in Echtzeit. Sie können mehrere Sprachen auswählen: JavaScript, Python, Go und den Code direkt im Browser ausführen. Sehr nützlich für schnelle Demos und Code-Interviews.
Was Sie lernen werden, wenn Sie einen Repl.it-Klon erstellen:
- So führen Sie Code (serverseitig) im Browser (clientseitig) aus.
- Eingabedaten (Quellcode) lesen und Ausführungsergebnis anzeigen.
- So erstellen Sie Dateien und Ordner im Web und speichern die Ergebnisse.
- So heben Sie die Codesyntax hervor.
3. Google Fotos-Klon
Google Fotos ist ein Dienst zum Speichern und Teilen von Fotos.
Jede moderne Fotoanwendung kann grundlegende Funktionen ausführen: Hochladen, Zuschneiden usw. Menschen möchten ihre eigenen Avatare erstellen und Fotos von Katzen teilen, daher müssen Sie in der Lage sein, mit Bildern zu arbeiten.
Was Sie lernen werden, wenn Sie einen Google Fotos-Klon erstellen:
- So erstellen Sie ansprechende Bilder auf Telefonen, Tablets, Laptops und sogar riesigen Fernsehbildschirmen.
- Umgang mit Bild-Uploads, insbesondere großen Bildern (>1 MB) und Massen-Uploads.
- Verarbeiten Sie Bilddateien, schneiden Sie Fotos zu und ändern Sie ihre Größe für Miniaturansichten oder beim Öffnen einer Galerie.
- Bonus: So speichern Sie Bilder in der Cloud oder einer lokalen Datenbank.
4. Gifsky-Klon
Konvertiert Videos mithilfe von Funktionen in GIF für effiziente Cross-Frame-Paletten und zeitliches Anti-Aliasing. Das Ergebnis ist ein GIF mit Tausenden von Blumen pro Bild.
Was Sie lernen werden, wenn Sie einen Gifski-Klon erstellen:
- So konvertieren Sie Videodateien (.mp4 in .gif).
- So verwenden Sie die Drag-and-Drop-HTML-API.
- Wie Bildoptimierung und -verarbeitung funktionieren.
Hinweis: und ist auf GitHub!
5. Überwachung der Kryptowährungskurse
React Native Kryptowährungs-Tracker
Was Sie durch die Erstellung eines Währungskurs-Trackers lernen werden:
- So arbeiten Sie mit der API und empfangen Daten remote von der API.
- So zeigen Sie Daten als Liste an.
- Bonus: Wenn Sie interessiert sind, habe ich kürzlich geschrieben für Kryptowährung mit React Native.
Hinweis: Hier .
Eine Auswahl von Projekten aus früheren Veröffentlichungen.
Schicht
Layer ist eine Community, in der jeder ein Pixel auf einem gemeinsamen „Board“ zeichnen kann. Die ursprüngliche Idee wurde auf Reddit geboren. Die r/Layer-Community ist eine Metapher für gemeinsame Kreativität, dass jeder ein Schöpfer sein und zu einer gemeinsamen Sache beitragen kann.
Was Sie lernen werden, wenn Sie Ihr eigenes Layer-Projekt erstellen:
- Wie JavaScript-Canvas funktioniert In vielen Anwendungen ist es eine entscheidende Fähigkeit, zu wissen, wie man einen Canvas bedient.
- So koordinieren Sie Benutzerberechtigungen. Jeder Benutzer kann alle 15 Minuten ein Pixel zeichnen, ohne sich anmelden zu müssen.
- Erstellen Sie Cookie-Sitzungen.
Squoosh
Squoosh ist eine Bildkomprimierungsanwendung mit vielen erweiterten Optionen.
GIF 20 MB
Indem Sie Ihre eigene Version von Squoosh erstellen, lernen Sie:
- So arbeiten Sie mit Bildgrößen
- Lernen Sie die Grundlagen der Drag'n'Drop API kennen
- Verstehen Sie, wie die API und die Ereignis-Listener funktionieren
- So laden und exportieren Sie Dateien
Hinweis: Der Bildkompressor ist lokal. Es ist nicht erforderlich, zusätzliche Daten an den Server zu senden. Sie können den Kompressor zu Hause haben oder ihn auf einem Server Ihrer Wahl verwenden.
Rechner
Nun ja? Ernsthaft? Taschenrechner? Ja, genau, ein Taschenrechner. Das Verständnis der Grundlagen mathematischer Operationen und ihrer Zusammenarbeit ist eine entscheidende Fähigkeit zur Vereinfachung Ihrer Anwendungen. Früher oder später müssen Sie sich mit Zahlen auseinandersetzen, und je früher, desto besser.
Indem Sie Ihren eigenen Rechner erstellen, lernen Sie:
- Arbeiten Sie mit Zahlen und mathematischen Operationen
- Üben Sie mit der Event-Listener-API
- Wie man Elemente anordnet, Stile versteht
Crawler (Suchmaschine)
Jeder hat schon einmal eine Suchmaschine verwendet. Warum also nicht eine eigene erstellen? Für die Suche nach Informationen werden Crawler benötigt. Jeder nutzt sie jeden Tag und die Nachfrage nach dieser Technologie und diesen Spezialisten wird mit der Zeit nur wachsen.
Google-Suchmaschine
Was Sie lernen werden, wenn Sie Ihre eigene Suchmaschine erstellen:
- Wie Crawler funktionieren
- So indizieren Sie Websites und ordnen sie nach Bewertung und Reputation
- So speichern Sie indizierte Websites in einer Datenbank und wie arbeiten Sie mit der Datenbank
Musikplayer (Spotify, Apple Music)
Jeder hört Musik – sie ist einfach ein wesentlicher Bestandteil unseres Lebens. Lassen Sie uns einen Musikplayer erstellen, um besser zu verstehen, wie die grundlegenden Mechanismen einer modernen Musik-Streaming-Plattform funktionieren.
Spotify
Was Sie lernen werden, wenn Sie Ihre eigene Musik-Streaming-Plattform erstellen:
- So arbeiten Sie mit der API. Verwenden Sie die API von Spotify oder Apple Music
- So können Sie den Titel abspielen, anhalten oder zum nächsten/vorherigen Titel zurückspulen
- So ändern Sie die Lautstärke
- So verwalten Sie die Benutzerweiterleitung und den Browserverlauf
Filmsuch-App mit React (mit Hooks)
Das erste, womit Sie beginnen könnten, wäre die Entwicklung einer Filmsuch-App mit React. Unten sehen Sie ein Bild davon, wie die endgültige App aussehen wird:
Was wirst du lernen
Durch die Erstellung dieser Anwendung verbessern Sie Ihre React-Fähigkeiten mithilfe der relativ neuen Hooks-API. Das Beispielprojekt verwendet React-Komponenten, viele Hooks, eine externe API und natürlich etwas CSS-Stil.
Tech-Stack und Funktionen
- Reagieren Sie mit Haken
- Erstellen-Reagieren-App
- Jsx
- CSS
Ohne den Einsatz von Klassen bieten Ihnen diese Projekte den perfekten Einstieg in das funktionale React und werden Ihnen im Jahr 2020 auf jeden Fall weiterhelfen. Sie können finden . Befolgen Sie die Anweisungen oder machen Sie es selbst.
Chat-App mit Vue
Ein weiteres großartiges Projekt für Sie ist die Erstellung einer Chat-App mit meiner Lieblings-JavaScript-Bibliothek: VueJS. Die Bewerbung sieht etwa so aus:
Was wirst du lernen
In diesem Tutorial erfahren Sie, wie Sie eine Vue-App von Grund auf erstellen – Komponenten erstellen, Zustände verwalten, Routen erstellen, eine Verbindung zu Diensten von Drittanbietern herstellen und sogar die Authentifizierung durchführen.
Tech-Stack und Funktionen
- Vue
- vuex
- Vue-Router
- CLI-Ansicht
- Pusher
- CSS
Dies ist ein wirklich großartiges Projekt, um mit Vue zu beginnen oder Ihre vorhandenen Fähigkeiten zu verbessern, um 2020 in die Entwicklung einzusteigen. Sie können finden .
Schöne Wetter-App mit Angular 8
Dieses Beispiel hilft Ihnen beim Erstellen einer schönen Wetter-App mit Angular 8:
Was wirst du lernen
Dieses Projekt vermittelt Ihnen wertvolle Fähigkeiten beim Erstellen von Anwendungen von Grund auf – vom Entwurf über die Entwicklung bis hin zu einer einsatzbereiten Anwendung.
Tech-Stack und Funktionen
- Angular 8
- Firebase
- Serverseitiges Rendering
- CSS mit Grid und Flexbox
- Mobilfreundlich und anpassungsfähig
- Dunkler Modus
- Schöne Schnittstelle
Was mir an diesem umfassenden Projekt wirklich gefällt, ist, dass man die Dinge nicht isoliert betrachtet. Stattdessen lernen Sie den gesamten Entwicklungsprozess vom Entwurf bis zur endgültigen Bereitstellung kennen.
To-Do-App mit Svelte
Svelte ist so etwas wie der Neuling im Komponentenansatz – zumindest ähnlich wie React, Vue und Angular. Und dies ist eines der heißesten neuen Produkte für 2020.
To-Do-Apps sind nicht unbedingt das heißeste Thema, aber sie helfen Ihnen wirklich dabei, Ihre Svelte-Fähigkeiten zu verbessern. Es wird so aussehen:
Was wirst du lernen
Dieses Tutorial zeigt Ihnen von Anfang bis Ende, wie Sie eine Anwendung mit Svelte 3 erstellen. Sie verwenden Komponenten, Stile und Event-Handler
Tech-Stack und Funktionen
- Schlanke 3
- Komponenten
- Styling mit CSS
- Syntax ES6
Ich habe festgestellt, dass es nicht viele gute Svelte-Starterprojekte gibt .
E-Commerce-App mit Next.js
Next.js ist das beliebteste Framework zum Erstellen von React-Apps, die serverseitiges Rendering sofort unterstützen.
Dieses Projekt zeigt Ihnen, wie Sie eine E-Commerce-Anwendung erstellen, die wie folgt aussieht:
Was wirst du lernen
In diesem Projekt erfahren Sie, wie Sie mit Next.js entwickeln – neue Seiten und Komponenten erstellen, Daten abrufen sowie eine Next-Anwendung formatieren und bereitstellen.
Tech-Stack und Funktionen
- Next.js
- Komponenten und Seiten
- Datenerfassung
- Stilisierung
- Projektbereitstellung
- SSR und SPA
Es ist immer toll, ein reales Beispiel wie eine E-Commerce-App zu haben, um etwas Neues zu lernen. Sie können .
Vollständiger mehrsprachiger Blog mit Nuxt.js
Nuxt.js ist für Vue, wie Next.js für React: ein großartiges Framework, um serverseitiges Rendering und Single-Page-Anwendungen zu kombinieren
Die letzte Anwendung, die Sie erstellen können, sieht folgendermaßen aus:
Was wirst du lernen
In diesem Beispielprojekt erfahren Sie, wie Sie mit Nuxt.js eine vollständige Website erstellen, von der Ersteinrichtung bis zur endgültigen Bereitstellung.
Es nutzt viele der coolen Funktionen, die Nuxt zu bieten hat, wie z. B. Seiten und Komponenten sowie Styling mit SCSS.
Tech-Stack und Funktionen
- Nuxt.js
- Komponenten und Seiten
- Storyblock-Modul
- Mixins
- Vuex für die Staatsverwaltung
- SCSS für das Styling
- Nuxt-Middleware
, das viele der großartigen Funktionen von Nuxt.js enthält. Ich persönlich liebe es, mit Nuxt zu arbeiten, also sollten Sie es ausprobieren, denn es macht Sie auch zu einem großartigen Vue-Entwickler.
Bloggen Sie mit Gatsby
Gatsby ist ein großartiger statischer Site-Generator, der React und GraphQL verwendet. Das ist das Ergebnis des Projekts:
Was wirst du lernen
In diesem Tutorial erfahren Sie, wie Sie mit Gatsby einen Blog erstellen, den Sie zum Schreiben Ihrer eigenen Artikel mit React und GraphQL verwenden.
Tech-Stack und Funktionen
- Gatsby
- Reagieren
- GraphQL
- Plugins und Themes
- MDX/Markdown
- Bootstrap-CSS
- Patterns
Wenn Sie jemals einen Blog starten wollten, wie man es mit React und GraphQL macht.
Ich sage nicht, dass WordPress eine schlechte Wahl ist, aber mit Gatsby können Sie mithilfe von React leistungsstarke Websites erstellen – eine erstaunliche Kombination.
Bloggen Sie mit Gridsome
Gridsome für Vue… Okay, das hatten wir schon mit Next/Nuxt.
Aber das Gleiche gilt auch für Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, Gridsome verwendet jedoch VueJS. Es ist auch ein großartiger Generator für statische Websites, der Ihnen beim Erstellen großartiger Blogs hilft:
Was wirst du lernen
In diesem Projekt erfahren Sie, wie Sie einen einfachen Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Außerdem wird erläutert, wie eine Anwendung über Netlify bereitgestellt wird.
Tech-Stack und Funktionen
- Grimmig
- Vue
- GraphQL
- Markdown
- Netlify
Dies ist sicherlich nicht das umfassendste Tutorial, aber es behandelt die Grundkonzepte von Gridsome und .
SoundCloud ähnlicher Audioplayer mit Quasar
Quasar ist ein weiteres Vue-Framework, mit dem mobile Apps erstellt werden können. In diesem Projekt erstellen Sie eine Audioplayer-Anwendung, zum Beispiel:
Was wirst du lernen
Während sich andere Projekte hauptsächlich auf Web-Apps konzentrieren, zeigt Ihnen dieses, wie Sie mit Vue und dem Quasar-Framework eine mobile App erstellen.
Sie sollten bereits ein funktionierendes Cordova mit Android Studio/Xcode eingerichtet haben. Wenn nicht, enthält das Handbuch einen Link zur Quasar-Website, auf der Sie erfahren, wie Sie alles einrichten.
Tech-Stack und Funktionen
- Quasar
- Vue
- Cordova
- Wellensurfer
- UI-Komponenten
, was die Fähigkeiten von Quasar zum Erstellen mobiler Anwendungen demonstriert.
Kreditkartenformular
Eine coole Kreditkartenform mit reibungslosen und angenehmen Mikrointeraktionen. Beinhaltet Zahlenformatierung, Verifizierung und automatische Erkennung des Kartentyps. Es basiert auf Vue.js und ist außerdem vollständig responsiv. (Du kannst sehen .)
Was Sie lernen werden:
- Verarbeiten und validieren Sie Formulare
- Behandeln Sie Ereignisse (z. B. wenn sich Felder ändern)
- Verstehen Sie, wie Elemente auf der Seite angezeigt und platziert werden, insbesondere die Kreditkarteninformationen, die oben auf dem Formular angezeigt werden
Balkendiagramm
Ein Histogramm ist ein Diagramm oder eine Grafik, die kategoriale Daten mit rechteckigen Balken darstellt, deren Höhe oder Länge proportional zu den Werten ist, die sie darstellen.
Sie können vertikal oder horizontal angewendet werden. Ein vertikales Balkendiagramm wird manchmal auch als Liniendiagramm bezeichnet.
Was Sie lernen werden:
- Stellen Sie Daten strukturiert und verständlich dar
- Zusätzlich: Erfahren Sie, wie Sie das Element verwenden
canvasund wie man damit Elemente zeichnet
Sie können Daten zur Weltbevölkerung finden. Sie sind nach Jahr sortiert.
Twitter-Herzanimation
Bereits 2016 führte Twitter diese erstaunliche Animation für seine Tweets ein. Im Jahr 2019 sieht es immer noch gut aus. Warum also nicht selbst eines erstellen?
Was Sie lernen werden:
- Arbeiten Sie mit CSS-Attributen
keyframes - Bearbeiten und animieren Sie HTML-Elemente
- Kombinieren Sie JavaScript, HTML und CSS
Durchsuchbare GitHub-Repositorys
Hier gibt es nichts Besonderes – GitHub-Repositories sind nur eine verschönerte Liste.
Ziel ist es, die Repositories anzuzeigen und dem Benutzer zu ermöglichen, sie zu filtern. Verwenden um Repositorys für jeden Benutzer zu erhalten.
GitHub-Profilseite -
Was Sie lernen werden:
- Daten von der API empfangen
- Daten von der API anzeigen
- Filtern und zeigen Sie relevante Daten für jede Suche an
- Optional: Wenn Sie Lust auf eine Herausforderung haben, verwenden Sie , erstellt mit GraphQL. .
Chats im Reddit-Stil
Chats sind aufgrund ihrer Einfachheit und Benutzerfreundlichkeit ein beliebtes Kommunikationsmittel. Aber was treibt moderne Chatrooms wirklich an? WebSockets!
Was Sie lernen werden:
- Nutzen Sie WebSockets, Echtzeitkommunikation und Datenaktualisierungen
- Arbeiten Sie mit Benutzerzugriffsebenen (z. B. hat der Besitzer eines Chat-Kanals die Rolle).
admin, und andere im Raum -user) - Verarbeiten und validieren Sie Formulare – denken Sie daran, dass das Chat-Fenster zum Senden einer Nachricht geöffnet ist
input - Erstellen Sie verschiedene Chats und treten Sie ihnen bei
- Arbeiten Sie mit persönlichen Nachrichten. Benutzer können privat mit anderen Benutzern chatten. Im Wesentlichen stellen Sie eine WebSocket-Verbindung zwischen zwei Benutzern her.
Navigation im Streifenstil
Das Besondere an dieser Navigation ist, dass sich der Popover-Container an den Inhalt anpasst. Im Vergleich zum herkömmlichen Verhalten beim Öffnen und Schließen eines neuen Popovers ist dieser Übergang elegant.
Was Sie lernen werden:
- Kombinieren Sie CSS-Animationen mit Übergängen
- Inhalte abblenden und aktive Klasse auf schwebendes Element anwenden
Pacman
Erstellen Sie Ihre eigene Version von Pacman. Dies ist eine großartige Möglichkeit, einen Eindruck davon zu bekommen, wie Spiele entwickelt werden, und die Grundlagen zu verstehen. Verwenden Sie ein JavaScript-Framework, React oder Vue.
Sie werden lernen:
- Wie sich Elemente bewegen
- So bestimmen Sie, welche Tasten gedrückt werden müssen
- So bestimmen Sie den Zeitpunkt der Kollision
- Sie können noch weiter gehen und Geisterbewegungssteuerungen hinzufügen
Hier finden Sie ein Beispiel für dieses Projekt GitHub
Benutzerverwaltung
Projekt GitHub
Durch das Erstellen einer Anwendung vom Typ CRUD zur Benutzerverwaltung erlernen Sie die Grundlagen der Entwicklung. Dies ist besonders nützlich für neue Entwickler.
Sie werden lernen:
- Was ist Routing?
- Wie man mit Dateneingabeformularen umgeht und überprüft, was der Benutzer eingegeben hat
- So arbeiten Sie mit der Datenbank – Aktionen erstellen, lesen, aktualisieren und löschen
Überprüfen Sie das Wetter an Ihrem Standort
Projekt GitHub
Wenn Sie Apps erstellen möchten, beginnen Sie mit einer Wetter-App. Dieses Projekt kann mit Swift abgeschlossen werden.
Sie sammeln nicht nur Erfahrungen beim Erstellen einer Anwendung, sondern lernen auch Folgendes:
- So arbeiten Sie mit der API
- So nutzen Sie die Geolokalisierung
- Machen Sie Ihre Anwendung dynamischer, indem Sie Texteingaben hinzufügen. Darin können Benutzer ihren Standort eingeben, um das Wetter an einem bestimmten Ort zu überprüfen.
Sie benötigen eine API. Um Wetterdaten abzurufen, verwenden Sie die OpenWeather-API. Weitere Informationen zur OpenWeather-API.
Chatfenster
Mein Chat-Fenster in Aktion, geöffnet in zwei Browser-Registerkarten
Das Erstellen eines Chatfensters ist der perfekte Einstieg in Sockets. Die Auswahl an Tech-Stacks ist riesig. Node.js ist zum Beispiel perfekt.
Sie erfahren, wie Sockets funktionieren und wie Sie diese implementieren. Dies ist der Hauptvorteil dieses Projekts.
Wenn Sie ein Laravel-Entwickler sind, der mit Sockets arbeiten möchte, lesen Sie meine
GitLab-CI
Wenn Sie mit der kontinuierlichen Integration (CI) noch nicht vertraut sind, probieren Sie GitLab CI aus. Richten Sie einige Umgebungen ein und führen Sie einige Tests durch. Es ist kein sehr schwieriges Projekt, aber ich bin sicher, dass Sie viel daraus lernen werden. Viele Entwicklungsteams verwenden mittlerweile CI. Zu wissen, wie man es benutzt, ist nützlich.
Sie werden lernen:
- Was ist GitLab CI?
- So konfigurieren Sie
.gitlab-ci.ymlwas dem GitLab-Benutzer sagt, was er tun soll - So stellen Sie es in anderen Umgebungen bereit
Website-Analysator
Erstellen Sie einen Scraper, der die Semantik von Websites analysiert und deren Bewertung erstellt. Sie können beispielsweise nach fehlenden Alt-Tags in Bildern suchen. Oder prüfen Sie, ob die Seite SEO-Meta-Tags enthält. Ein Scraper kann ohne Benutzeroberfläche erstellt werden.
Sie werden lernen:
- Wie funktioniert der Schaber?
- So erstellen Sie DOM-Selektoren
- Wie schreibe ich einen Algorithmus?
- Wenn Sie hier nicht aufhören möchten, erstellen Sie eine Benutzeroberfläche. Sie können auch einen Bericht für jede Website erstellen, die Sie überprüfen.
Stimmungserkennung in sozialen Netzwerken
Die Stimmungserkennung in sozialen Medien ist eine großartige Möglichkeit, sich mit maschinellem Lernen vertraut zu machen.
Sie können damit beginnen, nur ein soziales Netzwerk zu analysieren. Normalerweise beginnt jeder mit Twitter.
Wenn Sie bereits Erfahrung mit maschinellem Lernen haben, versuchen Sie, Daten aus verschiedenen sozialen Netzwerken zu sammeln und diese zu kombinieren.
Sie werden lernen:
- Was ist maschinelles Lernen?
Trello-Klon
Was du lernen wirst:
- Organisation von Anfrageverarbeitungswegen (Routing).
- Ziehen und ablegen.
- So erstellen Sie neue Objekte (Boards, Listen, Karten).
- Verarbeitung und Prüfung der Eingabedaten.
- Von der Client-Seite: wie man den lokalen Speicher verwendet, wie man Daten im lokalen Speicher speichert, wie man Daten aus dem lokalen Speicher liest.
- Von der Serverseite: wie man Datenbanken nutzt, wie man Daten in der Datenbank speichert, wie man Daten aus der Datenbank liest.
, erstellt in React+Redux.
Administrationsmenü
Eine einfache CRUD-Anwendung, ideal zum Erlernen der Grundlagen. Lass uns lernen:
- Benutzer erstellen, Benutzer verwalten.
- Interagieren Sie mit der Datenbank – erstellen, lesen, bearbeiten, löschen Sie Benutzer.
- Validieren von Eingaben und Arbeiten mit Formularen.
Kryptowährungs-Tracker (native mobile App)
Alles: Swift, Objective-C, React Native, Java, Kotlin.
Lass uns lernen:
- Wie native Anwendungen funktionieren.
- So rufen Sie Daten von der API ab.
- So funktionieren native Seitenlayouts.
- So arbeiten Sie mit mobilen Simulatoren.
. Wenn Sie etwas Besseres finden, schreiben Sie es in die Kommentare.
Wenn Sie interessiert sind, finden Sie es hier .
Richten Sie Ihre eigene Webpack-Konfiguration von Grund auf ein
Technisch gesehen ist dies keine Anwendung, aber es ist eine sehr nützliche Aufgabe, um zu verstehen, wie Webpack von innen heraus funktioniert. Jetzt wird es keine „Black Box“ sein, sondern ein verständliches Werkzeug.
Anforderungen:
- Kompilieren Sie es7 zu es5 (Grundlagen).
- Kompilieren Sie jsx zu js – oder – .vue zu .js (Sie müssen Loader lernen)
- Richten Sie den Webpack-Entwicklungsserver und das Neuladen von Hot-Modulen ein. (vue-cli und create-react-app verwenden beide)
- Verwenden Sie Heroku, now.sh oder Github und erfahren Sie, wie Sie Webpack-Projekte bereitstellen.
- Richten Sie Ihren bevorzugten Präprozessor zum Kompilieren von CSS ein – scss, less, stylus.
- Erfahren Sie, wie Sie Bilder und SVGs mit Webpack verwenden.
Hackernews-Klon
Jeder Jedi ist verpflichtet, seine eigenen Hackernews zu erstellen.
Was Sie dabei lernen werden:
- So interagieren Sie mit der Hackernews-API.
- So erstellen Sie eine Single-Page-Anwendung.
- So implementieren Sie Funktionen wie das Anzeigen von Kommentaren, einzelnen Kommentaren und Profilen.
- Organisation von Anfrageverarbeitungswegen (Routing).
Tudushechka
Ernsthaft? Tuduschka? Es gibt Tausende davon. Aber glauben Sie mir, es gibt einen Grund für diese Popularität.
Die Tudu-App ist eine großartige Möglichkeit, sicherzustellen, dass Sie die Grundlagen verstehen. Versuchen Sie, eine Anwendung in Vanilla-Javascript und eine in Ihrem bevorzugten Framework zu schreiben.
Lernen:
- Erstellen Sie neue Aufgaben.
- Überprüfen Sie, ob die Felder ausgefüllt sind.
- Aufgaben filtern (abgeschlossen, aktiv, alle). Verwenden
filterиreduce. - Verstehen Sie die Grundlagen von Javascript.
Sortierbare Drag-and-Drop-Liste
Sehr hilfreich zum Verständnis .
Lass uns lernen:
- Drag-and-Drop-API
- Erstellen Sie umfangreiche Benutzeroberflächen
Messenger-Klon (native App)
Sie verstehen die Funktionsweise sowohl von Webanwendungen als auch nativen Anwendungen und heben sich so von der grauen Masse ab.
Was wir studieren werden:
- Web-Sockets (Sofortnachrichten)
- Wie native Anwendungen funktionieren.
- Wie Vorlagen in nativen Anwendungen funktionieren.
- Organisieren von Anforderungsverarbeitungsrouten in nativen Anwendungen.
Textverarbeitungssystem
Der Zweck eines Texteditors besteht darin, den Aufwand für Benutzer zu verringern, die versuchen, ihre Formatierung in gültiges HTML-Markup umzuwandeln. Mit einem guten Texteditor können Benutzer Text auf unterschiedliche Weise formatieren.
Irgendwann hat jeder einen Texteditor benutzt. Also warum nicht ?
Reddit-Klon
ist eine Website zur Aggregation sozialer Nachrichten, zur Bewertung von Webinhalten und zur Diskussion.
Reddit nimmt die meiste Zeit in Anspruch, aber ich verbringe weiterhin Zeit damit. Das Erstellen eines Reddit-Klons ist eine effektive Möglichkeit, das Programmieren zu erlernen (während man gleichzeitig Reddit durchstöbert).
Reddit bietet Ihnen ein sehr reichhaltiges Angebot. Lassen Sie keine Funktionen aus und gehen Sie nicht willkürlich vor. In der realen Welt mit Klienten und Kunden darf man nicht willkürlich arbeiten, sonst verliert man schnell seinen Job.
Kluge Kunden werden sofort merken, dass die Arbeit schlecht gemacht wird und sich jemand anderen suchen.
Veröffentlichen eines Open-Source-NPM-Pakets
Wenn Sie Javascript-Code schreiben, verwenden Sie wahrscheinlich einen Paketmanager. Mit einem Paketmanager können Sie vorhandenen Code, den andere geschrieben und veröffentlicht haben, wiederverwenden.
Das Verständnis des gesamten Entwicklungszyklus eines Pakets wird eine sehr gute Erfahrung sein. Beim Veröffentlichen von Code müssen Sie viele Dinge wissen. Sie müssen über Sicherheit, semantische Versionierung, Skalierbarkeit, Namenskonventionen und Wartung nachdenken.
Das Paket kann alles sein. Wenn Sie keine Idee haben, erstellen Sie Ihr eigenes Lodash und veröffentlichen Sie es.
Lodash:
Wenn Sie etwas online erledigt haben, sind Sie 10 % besser als andere. über offene Quellen und Pakete.
freeCodeCamp-Lehrplan
freeCodecamp hat viel gesammelt .
freeCodeCamp ist eine gemeinnützige Organisation. Es besteht aus einer interaktiven webbasierten Lernplattform, einem Online-Community-Forum, Chatrooms, Medium-Veröffentlichungen und lokalen Organisationen, die die Webentwicklung zum Lernen für jedermann zugänglich machen wollen.
Wenn Sie das gesamte Studium absolvieren, sind Sie für Ihren ersten Job mehr als qualifiziert.
Erstellen Sie einen HTTP-Server von Grund auf
Das HTTP-Protokoll ist eines der Hauptprotokolle, über die Inhalte im Internet übertragen werden. HTTP-Server werden verwendet, um statische Inhalte wie HTML, CSS und JS bereitzustellen.
Wenn Sie in der Lage sind, das HTTP-Protokoll von Grund auf zu implementieren, erweitern Sie Ihr Wissen darüber, wie Dinge interagieren.
Wenn Sie beispielsweise NodeJs verwenden, wissen Sie, dass Express einen HTTP-Server bereitstellt.
Sehen Sie als Referenz nach, ob Sie Folgendes können:
- Richten Sie einen Server ein, ohne Bibliotheken zu verwenden
- Der Server muss HTML-, CSS- und JS-Inhalte bereitstellen.
- Implementierung eines Routers von Grund auf
- Überwachen Sie Änderungen und aktualisieren Sie den Server
Wenn Sie nicht wissen, warum, verwenden Sie und versuchen Sie, einen HTTP-Server zu erstellen von Grund auf neu.
Desktop-App für Notizen
Wir alle machen uns Notizen, nicht wahr?
Lassen Sie uns eine Notizen-App erstellen. Die Anwendung muss Notizen speichern und mit der Datenbank synchronisieren. Erstellen Sie eine native App mit Electron, Swift oder was auch immer Ihnen gefällt und was für Ihr System funktioniert.
Kombinieren Sie dies gerne mit der ersten Herausforderung (Texteditor).
Versuchen Sie als Bonus, Ihre Desktop-Version mit der Web-Version zu synchronisieren.
Podcasts (Overcast-Klon)
Wer hört keine Podcasts?
Erstellen Sie eine Webanwendung mit der folgenden Funktionalität:
- Авести аккаунт
- Suchen Sie nach Podcasts
- Bewerten und abonnieren Sie Podcasts
- Stoppen und abspielen, Geschwindigkeit ändern, Vorwärts- und Rückwärtsfunktionen für 30 Sekunden.
Versuchen Sie, die iTunes-API als Ausgangspunkt zu verwenden. Wenn Sie weitere Ressourcen kennen, posten Sie diese bitte in den Kommentaren.
Bildschirmaufnahme
Hallo! Ich filme gerade meinen Bildschirm!
Erstellen Sie eine Desktop- oder Web-App, mit der Sie Ihren Bildschirm erfassen und den Clip unter speichern können .gif
Hier wie man das erreicht.
Quellen
Source: habr.com