1. Έννοια κλώνος
Η εφαρμογή Notion αγαπιέται από πολλούς και σας επιτρέπει να βελτιστοποιείτε τη ροή εργασίας σας, να εργάζεστε με έγγραφα, να προγραμματίζετε εργασίες και να συγχρονίζετε δεδομένα μεταξύ των συσκευών.
Τι θα μάθετε δημιουργώντας έναν κλώνο Έννοιας:
- . Ο χρήστης μπορεί να "αρπάξει με το ποντίκι" σύρσιμο στοιχείο και τοποθετήστε το μέσα πτωτικό ζώνη.
- Πώς να συγχρονίσετε δεδομένα σε πραγματικό χρόνο μεταξύ του υπολογιστή και του smartphone σας.
- Επιτρέπουμε στους χρήστες να δημιουργούν, να διαβάζουν, να ενημερώνουν και να διαγράφουν εγγραφές, εκπαιδεύοντας έτσι τις δεξιότητες CRUD.
Το άρθρο μεταφράστηκε με την υποστήριξη της EDISON Software, η οποία Και .
2. Repl.it κλώνος
Το Repl.it είναι ένα εργαλείο για συλλογική επεξεργασία κώδικα σε πραγματικό χρόνο. Μπορείτε να επιλέξετε πολλές γλώσσες: JavaScript, Python, Go και να εκτελέσετε τον κώδικα απευθείας στο πρόγραμμα περιήγησης. Πολύ χρήσιμο για γρήγορες επιδείξεις και συνεντεύξεις κώδικα.
Τι θα μάθετε δημιουργώντας έναν κλώνο Repl.it:
- Τρόπος εκτέλεσης και εκτέλεσης κώδικα (από την πλευρά του διακομιστή) στο πρόγραμμα περιήγησης (από την πλευρά του πελάτη).
- Διαβάστε τα δεδομένα εισόδου (πηγαίος κώδικας) και εμφανίστε το αποτέλεσμα της εκτέλεσης.
- Πώς να δημιουργήσετε αρχεία και φακέλους στον Ιστό και να αποθηκεύσετε τα αποτελέσματα.
- Πώς να επισημάνετε τη σύνταξη κώδικα.
3. Google Photos Clone
Το Google Photos είναι μια υπηρεσία για την αποθήκευση και την κοινή χρήση φωτογραφιών.
Οποιαδήποτε σύγχρονη εφαρμογή φωτογραφιών μπορεί να εκτελέσει βασικές λειτουργίες: μεταφόρτωση, περικοπή κ.λπ. Οι άνθρωποι θέλουν να δημιουργούν τα δικά τους avatar και να μοιράζονται φωτογραφίες γατών, επομένως πρέπει να μπορείτε να εργάζεστε με εικόνες.
Τι θα μάθετε δημιουργώντας έναν κλώνο στο Google Photos:
- Πώς να δημιουργήσετε εικόνες με απόκριση σε τηλέφωνα, tablet, φορητούς υπολογιστές και ακόμη και γιγαντιαίες οθόνες τηλεοράσεων.
- Πώς να χειρίζεστε τις μεταφορτώσεις εικόνων, ειδικά τις μεγάλες εικόνες (>1 MB) και τις μαζικές μεταφορτώσεις.
- Επεξεργαστείτε αρχεία εικόνας, περικόψτε και αλλάξτε το μέγεθος φωτογραφιών για μικρογραφίες ή όταν ανοίγετε μια συλλογή.
- Μπόνους: πώς να αποθηκεύσετε εικόνες στο cloud ή στην τοπική βάση δεδομένων.
4. Κλώνος Gifsky
μετατρέπει το βίντεο σε GIF χρησιμοποιώντας λειτουργίες για αποτελεσματικές παλέτες cross-frame και προσωρινή αντιδιαστολή. Το αποτέλεσμα είναι ένα GIF με χιλιάδες λουλούδια ανά καρέ.
Τι θα μάθετε δημιουργώντας έναν κλώνο Gifski:
- Πώς να μετατρέψετε αρχεία βίντεο (.mp4 σε .gif).
- Πώς να χρησιμοποιήσετε το Drag and Drop HTML API.
- Πώς λειτουργεί η βελτιστοποίηση και η επεξεργασία εικόνας.
Σημείωση: και βρίσκεται στο GitHub!
5. Παρακολούθηση των ισοτιμιών κρυπτονομισμάτων
React Native tracker κρυπτονομισμάτων
Τι θα μάθετε δημιουργώντας έναν ανιχνευτή συναλλαγματικών ισοτιμιών:
- Πώς να εργαστείτε με το API και να λάβετε δεδομένα εξ αποστάσεως από το API.
- Πώς να εμφανίσετε δεδομένα ως λίστα.
- Μπόνους: Αν σε ενδιαφέρει, έγραψα πρόσφατα για κρυπτονομίσματα με το React Native.
Σημείωση: Εδώ .
Επιλογή έργων από προηγούμενες δημοσιεύσεις.
Στρώμα
Το Layer είναι μια κοινότητα όπου όλοι μπορούν να σχεδιάσουν ένα pixel σε έναν κοινόχρηστο "πίνακα". Η αρχική ιδέα γεννήθηκε στο Reddit. Η κοινότητα r/Layer είναι μια μεταφορά της κοινής δημιουργικότητας, ότι ο καθένας μπορεί να είναι δημιουργός και να συνεισφέρει σε έναν κοινό σκοπό.
Τι θα μάθετε όταν δημιουργείτε το δικό σας έργο Layer:
- Πώς λειτουργεί ο καμβάς JavaScript Το να γνωρίζετε πώς να χειρίζεστε έναν καμβά είναι μια κρίσιμη δεξιότητα σε πολλές εφαρμογές.
- Πώς να συντονίσετε τα δικαιώματα χρήστη. Κάθε χρήστης μπορεί να σχεδιάζει ένα pixel κάθε 15 λεπτά χωρίς να χρειάζεται να συνδεθεί.
- Δημιουργία συνεδριών cookie.
Squoosh
Το Squoosh είναι μια εφαρμογή συμπίεσης εικόνας με πολλές προηγμένες επιλογές.
GIF 20 MB
Δημιουργώντας τη δική σας έκδοση του Squoosh θα μάθετε:
- Πώς να εργαστείτε με μεγέθη εικόνας
- Μάθετε τα βασικά του Drag'n'Drop API
- Κατανοήστε πώς λειτουργούν το API και οι συσκευές ακρόασης συμβάντων
- Πώς να ανεβάσετε και να εξάγετε αρχεία
Σημείωση: Ο συμπιεστής εικόνας είναι τοπικός. Δεν είναι απαραίτητο να στείλετε πρόσθετα δεδομένα στον διακομιστή. Μπορείτε να έχετε τον συμπιεστή στο σπίτι ή μπορείτε να τον χρησιμοποιήσετε σε διακομιστή, της επιλογής σας.
Αριθμομηχανή
Ελα? Σοβαρά? Αριθμομηχανή? Ναι, ακριβώς, μια αριθμομηχανή. Η κατανόηση των βασικών μαθηματικών πράξεων και του τρόπου με τον οποίο συνεργάζονται είναι μια κρίσιμη δεξιότητα για την απλοποίηση των εφαρμογών σας. Αργά ή γρήγορα θα πρέπει να αντιμετωπίσετε τους αριθμούς και όσο πιο γρήγορα τόσο το καλύτερο.
Δημιουργώντας τη δική σας αριθμομηχανή θα μάθετε:
- Εργαστείτε με αριθμούς και μαθηματικές πράξεις
- Εξασκηθείτε με το API ακρόασης συμβάντων
- Πώς να τακτοποιήσετε στοιχεία, να κατανοήσετε τα στυλ
Crawler (μηχανή αναζήτησης)
Όλοι έχουν χρησιμοποιήσει μια μηχανή αναζήτησης, οπότε γιατί να μην δημιουργήσετε τη δική σας; Απαιτούνται ανιχνευτές για την αναζήτηση πληροφοριών. Όλοι τα χρησιμοποιούν καθημερινά και η ζήτηση για αυτήν την τεχνολογία και τους ειδικούς θα αυξηθεί μόνο με την πάροδο του χρόνου.
μηχανή αναζήτησης Google
Τι θα μάθετε δημιουργώντας τη δική σας μηχανή αναζήτησης:
- Πώς λειτουργούν οι ανιχνευτές
- Πώς να ευρετηριάζετε ιστότοπους και πώς να τους ταξινομείτε βάσει βαθμολογίας και φήμης
- Πώς να αποθηκεύσετε τοποθεσίες με ευρετήριο σε μια βάση δεδομένων και πώς να εργαστείτε με τη βάση δεδομένων
Πρόγραμμα αναπαραγωγής μουσικής (Spotify, Apple Music)
Όλοι ακούν μουσική - είναι απλώς αναπόσπαστο μέρος της ζωής μας. Ας δημιουργήσουμε ένα πρόγραμμα αναπαραγωγής μουσικής για να κατανοήσουμε καλύτερα πώς λειτουργούν οι βασικοί μηχανισμοί μιας σύγχρονης πλατφόρμας ροής μουσικής.
Spotify
Τι θα μάθετε δημιουργώντας τη δική σας πλατφόρμα ροής μουσικής:
- Πώς να εργαστείτε με το API. χρησιμοποιήστε το API από το Spotify ή το Apple Music
- Τρόπος αναπαραγωγής, παύσης ή επαναφοράς στο επόμενο/προηγούμενο κομμάτι
- Πώς να αλλάξετε την ένταση
- Πώς να διαχειριστείτε τη δρομολόγηση χρήστη και το ιστορικό του προγράμματος περιήγησης
Εφαρμογή αναζήτησης ταινιών με React (με γάντζους)
Το πρώτο πράγμα με το οποίο θα μπορούσατε να ξεκινήσετε είναι να δημιουργήσετε μια εφαρμογή αναζήτησης ταινιών με το React. Παρακάτω είναι μια εικόνα του πώς θα μοιάζει η τελική εφαρμογή:
Τι θα μάθεις
Με τη δημιουργία αυτής της εφαρμογής, θα βελτιώσετε τις δεξιότητές σας στο React χρησιμοποιώντας το σχετικά νέο Hooks API. Το δείγμα έργου χρησιμοποιεί στοιχεία React, πολλά άγκιστρα, ένα εξωτερικό API και φυσικά κάποιο στυλ CSS.
Τεχνική στοίβα και χαρακτηριστικά
- Αντιδράστε με γάντζους
- δημιουργία-αντίδραση-εφαρμογή
- JSX
- CSS
Χωρίς τη χρήση κλάσεων, αυτά τα έργα σας δίνουν το τέλειο σημείο εισόδου στο λειτουργικό React και σίγουρα θα σας βοηθήσουν το 2020. μπορείς να βρεις . Ακολουθήστε τις οδηγίες ή φτιάξτε το δικό σας.
Εφαρμογή συνομιλίας με το Vue
Ένα άλλο εξαιρετικό έργο για εσάς είναι να δημιουργήσετε μια εφαρμογή συνομιλίας χρησιμοποιώντας την αγαπημένη μου βιβλιοθήκη JavaScript: VueJS. Η εφαρμογή θα μοιάζει κάπως έτσι:
Τι θα μάθεις
Σε αυτό το σεμινάριο, θα μάθετε πώς να δημιουργείτε μια εφαρμογή Vue από την αρχή - να δημιουργείτε στοιχεία, να χειρίζεστε καταστάσεις, να δημιουργείτε διαδρομές, να συνδεθείτε σε υπηρεσίες τρίτων και ακόμη και να χειρίζεστε τον έλεγχο ταυτότητας.
Τεχνική στοίβα και χαρακτηριστικά
- Προβολή
- vuex
- Δρομολογητής Vue
- Προβολή CLI
- Pusher
- CSS
Αυτό είναι ένα πραγματικά υπέροχο έργο για να ξεκινήσετε με το Vue ή να βελτιώσετε τις υπάρχουσες δεξιότητές σας για να ξεκινήσετε την ανάπτυξη το 2020. μπορείς να βρεις .
Όμορφη εφαρμογή καιρού με το Angular 8
Αυτό το παράδειγμα θα σας βοηθήσει να δημιουργήσετε μια όμορφη εφαρμογή καιρού χρησιμοποιώντας το Angular 8:
Τι θα μάθεις
Αυτό το έργο θα σας διδάξει πολύτιμες δεξιότητες στη δημιουργία εφαρμογών από την αρχή - από το σχεδιασμό έως την ανάπτυξη, μέχρι μια εφαρμογή έτοιμη για ανάπτυξη.
Τεχνική στοίβα και χαρακτηριστικά
- Γωνιακό 8
- Firebase
- Απόδοση από την πλευρά του διακομιστή
- CSS με Grid και Flexbox
- Φιλικό προς το κινητό και προσαρμοστικότητα
- Σκοτεινή λειτουργία
- Όμορφη διεπαφή
Αυτό που μου αρέσει πολύ σε αυτό το ολοκληρωμένο έργο είναι ότι δεν μελετάς τα πράγματα μεμονωμένα. Αντίθετα, μαθαίνετε ολόκληρη τη διαδικασία ανάπτυξης από το σχεδιασμό έως την τελική ανάπτυξη.
Εφαρμογή υποχρεώσεων με Svelte
Το Svelte είναι σαν το νέο παιδί στην προσέγγιση των στοιχείων - τουλάχιστον παρόμοιο με το React, το Vue και το Angular. Και αυτό είναι ένα από τα πιο καυτά νέα προϊόντα για το 2020.
Οι εφαρμογές To-Do δεν είναι απαραίτητα το πιο καυτό θέμα, αλλά θα σας βοηθήσουν πραγματικά να βελτιώσετε τις Svelte δεξιότητές σας. Θα μοιάζει με αυτό:
Τι θα μάθεις
Αυτό το σεμινάριο θα σας δείξει πώς να δημιουργήσετε μια εφαρμογή χρησιμοποιώντας το Svelte 3, από την αρχή μέχρι το τέλος. Θα χρησιμοποιήσετε εξαρτήματα, στυλ και χειριστές συμβάντων
Τεχνική στοίβα και χαρακτηριστικά
- Σβέλτο 3
- Εξαρτήματα
- Styling με CSS
- Σύνταξη ES6
Δεν υπάρχουν πολλά καλά Svelte starter project, έτσι βρήκα .
Εφαρμογή ηλεκτρονικού εμπορίου με Next.js
Το Next.js είναι το πιο δημοφιλές πλαίσιο για τη δημιουργία εφαρμογών React που υποστηρίζουν την απόδοση από την πλευρά του διακομιστή.
Αυτό το έργο θα σας δείξει πώς να δημιουργήσετε μια εφαρμογή ηλεκτρονικού εμπορίου που μοιάζει με αυτό:
Τι θα μάθεις
Σε αυτό το έργο, θα μάθετε πώς να αναπτύσσετε με το Next.js—δημιουργείτε νέες σελίδες και στοιχεία, ανακτάτε δεδομένα και στυλ και αναπτύσσετε μια εφαρμογή Επόμενο.
Τεχνική στοίβα και χαρακτηριστικά
- Next.js
- Στοιχεία και σελίδες
- Δειγματοληψία δεδομένων
- Στυλ
- Ανάπτυξη Έργου
- SSR και SPA
Είναι πάντα υπέροχο να έχετε ένα πραγματικό παράδειγμα όπως μια εφαρμογή ηλεκτρονικού εμπορίου για να μάθετε κάτι νέο. Μπορείς .
Πλήρες πολύγλωσσο ιστολόγιο με Nuxt.js
Το Nuxt.js είναι για το Vue, όπως το Next.js για το React: ένα εξαιρετικό πλαίσιο για συνδυασμό απόδοσης από την πλευρά του διακομιστή και εφαρμογών μιας σελίδας
Η τελευταία εφαρμογή που μπορείτε να δημιουργήσετε θα μοιάζει με αυτό:
Τι θα μάθεις
Σε αυτό το δείγμα έργου, θα μάθετε πώς να δημιουργείτε έναν πλήρη ιστότοπο χρησιμοποιώντας το Nuxt.js, από την αρχική εγκατάσταση έως την τελική ανάπτυξη.
Εκμεταλλεύεται πολλές από τις εντυπωσιακές δυνατότητες που έχει να προσφέρει το Nuxt, όπως σελίδες και εξαρτήματα, καθώς και στυλ με SCSS.
Τεχνική στοίβα και χαρακτηριστικά
- Nuxt.js
- Στοιχεία και σελίδες
- ενότητα storyblock
- Μείγματα
- Vuex για κρατική διαχείριση
- SCSS για styling
- Nuxt middlewares
, το οποίο περιλαμβάνει πολλές από τις σπουδαίες δυνατότητες του Nuxt.js. Προσωπικά μου αρέσει να δουλεύω με το Nuxt, γι' αυτό θα πρέπει να το δοκιμάσετε, καθώς θα σας κάνει έναν εξαιρετικό προγραμματιστή του Vue.
Blog με τον Γκάτσμπι
Ο Gatsby είναι μια εξαιρετική δημιουργία στατικών τοποθεσιών που χρησιμοποιεί React και GraphQL. Αυτό είναι το αποτέλεσμα του έργου:
Τι θα μάθεις
Σε αυτό το σεμινάριο, θα μάθετε πώς να χρησιμοποιείτε τον Gatsby για να δημιουργήσετε ένα ιστολόγιο που θα χρησιμοποιείτε για να γράφετε τα δικά σας άρθρα χρησιμοποιώντας το React και το GraphQL.
Τεχνική στοίβα και χαρακτηριστικά
- Γκάτσμπι
- Αντίδραση
- GraphQL
- Πρόσθετα και θέματα
- MDX/Markdown
- Bootstrap CSS
- πρότυπα
Αν θελήσατε ποτέ να ξεκινήσετε ένα blog, πώς να το φτιάξετε χρησιμοποιώντας React και GraphQL.
Δεν λέω ότι το WordPress είναι μια κακή επιλογή, αλλά με τον Gatsby μπορείτε να δημιουργήσετε ιστότοπους υψηλής απόδοσης χρησιμοποιώντας το React - που είναι ένας εκπληκτικός συνδυασμός.
Blog με το Gridsome
Gridsome για το Vue… Εντάξει, το είχαμε ήδη με το Next/Nuxt.
Το ίδιο όμως ισχύει και για τους Gridsome και Gatsby. Και οι δύο χρησιμοποιούν το GraphQL ως επίπεδο δεδομένων, αλλά το Gridsome χρησιμοποιεί το VueJS. Είναι επίσης μια καταπληκτική δημιουργία στατικών ιστότοπων για να σας βοηθήσει να δημιουργήσετε υπέροχα ιστολόγια:
Τι θα μάθεις
Αυτό το έργο θα σας διδάξει πώς να δημιουργήσετε ένα απλό ιστολόγιο για να ξεκινήσετε με τα Gridsome, GraphQL και Markdown. Εξηγεί επίσης πώς να αναπτύξετε μια εφαρμογή μέσω του Netlify.
Τεχνική στοίβα και χαρακτηριστικά
- Πλέγμα
- Προβολή
- GraphQL
- Χαμήλωση τιμής
- δικτυώνω
Αυτό σίγουρα δεν είναι το πιο πλήρες σεμινάριο, αλλά καλύπτει τις βασικές έννοιες του Gridsome και .
Αναπαραγωγή ήχου παρόμοιο με το SoundCloud χρησιμοποιώντας Quasar
Το Quasar είναι ένα άλλο πλαίσιο Vue που μπορεί να χρησιμοποιηθεί για τη δημιουργία εφαρμογών για κινητά. Σε αυτό το έργο, θα δημιουργήσετε μια εφαρμογή αναπαραγωγής ήχου όπως:
Τι θα μάθεις
Ενώ άλλα έργα επικεντρώνονται κυρίως σε εφαρμογές ιστού, αυτό θα σας δείξει πώς να δημιουργήσετε μια εφαρμογή για κινητά χρησιμοποιώντας το Vue και το πλαίσιο Quasar.
Θα πρέπει να έχετε ήδη ρυθμίσει ένα λειτουργικό Cordova με Android Studio/Xcode. Εάν όχι, το εγχειρίδιο έχει έναν σύνδεσμο προς τον ιστότοπο Quasar όπου σας δείχνουν πώς να ρυθμίσετε τα πάντα.
Τεχνική στοίβα και χαρακτηριστικά
- Quasar
- Προβολή
- Κόρδοβα
- wavesurfer
- Στοιχεία διεπαφής χρήστη
, επιδεικνύοντας τις δυνατότητες του Quasar για τη δημιουργία εφαρμογών για κινητές συσκευές.
Έντυπο πιστωτικής κάρτας
Ένα δροσερό σχήμα πιστωτικής κάρτας με ομαλές και ευχάριστες μικρο-αλληλεπιδράσεις. Περιλαμβάνει μορφοποίηση αριθμών, επαλήθευση και αυτόματη ανίχνευση τύπου κάρτας. Είναι χτισμένο στο Vue.js και είναι επίσης πλήρως responsive. (Μπορείς να δεις .)
Τι θα μάθετε:
- Επεξεργασία και επικύρωση εντύπων
- Χειρισμός συμβάντων (για παράδειγμα, όταν αλλάζουν πεδία)
- Κατανοήστε πώς να εμφανίζετε και να τοποθετείτε στοιχεία στη σελίδα, ειδικά τα στοιχεία της πιστωτικής κάρτας που εμφανίζονται στο επάνω μέρος της φόρμας
ραβδόγραμμα
Το ιστόγραμμα είναι ένα γράφημα ή γράφημα που αναπαριστά κατηγορικά δεδομένα με ορθογώνιες ράβδους με ύψη ή μήκη ανάλογα με τις τιμές που αντιπροσωπεύουν.
Μπορούν να εφαρμοστούν κάθετα ή οριζόντια. Ένα γράφημα κάθετων ράβδων ονομάζεται μερικές φορές γραμμικό γράφημα.
Τι θα μάθετε:
- Εμφάνιση δεδομένων με δομημένο και κατανοητό τρόπο
- Επιπλέον: Μάθετε πώς να χρησιμοποιείτε το στοιχείο
canvasκαι πώς να σχεδιάσετε στοιχεία με αυτό
μπορείτε να βρείτε δεδομένα παγκόσμιου πληθυσμού. Ταξινομούνται ανά έτος.
Twitter Heart Animation
Το 2016, το Twitter παρουσίασε αυτό το εκπληκτικό κινούμενο σχέδιο για τα tweets του. Από το 2019, εξακολουθεί να φαίνεται το κομμάτι, οπότε γιατί να μην δημιουργήσετε ένα μόνοι σας;
Τι θα μάθετε:
- Εργαστείτε με το χαρακτηριστικό CSS
keyframes - Χειρισμός και κίνηση στοιχείων HTML
- Συνδυάστε JavaScript, HTML και CSS
Αποθετήρια GitHub με δυνατότητα αναζήτησης
Δεν υπάρχει τίποτα φανταχτερό εδώ - τα αποθετήρια GitHub είναι απλώς μια δοξασμένη λίστα.
Ο στόχος είναι να εμφανιστούν τα αποθετήρια και να επιτραπεί στον χρήστη να τα φιλτράρει. Χρήση για να λάβετε αποθετήρια για κάθε χρήστη.
Σελίδα προφίλ GitHub -
Τι θα μάθετε:
- Λήψη δεδομένων από το API
- Εμφάνιση δεδομένων από το API
- Φιλτράρετε και εμφανίστε σχετικά δεδομένα για κάθε αναζήτηση
- Προαιρετικά: Εάν είστε έτοιμοι για μια πρόκληση, χρησιμοποιήστε , κατασκευασμένο με χρήση GraphQL. .
Συνομιλίες σε στυλ Reddit
Οι συνομιλίες είναι ένας δημοφιλής τρόπος επικοινωνίας λόγω της απλότητας και της ευκολίας χρήσης τους. Αλλά τι πραγματικά τροφοδοτεί τα σύγχρονα δωμάτια συνομιλίας; WebSockets!
Τι θα μάθετε:
- Χρησιμοποιήστε WebSockets, επικοινωνία σε πραγματικό χρόνο και ενημερώσεις δεδομένων
- Εργαστείτε με επίπεδα πρόσβασης χρηστών (για παράδειγμα, ο κάτοχος ενός καναλιού συνομιλίας έχει τον ρόλο
adminκαι άλλοι στο δωμάτιο -user) - Επεξεργασία και επικύρωση φορμών - θυμηθείτε, το παράθυρο συνομιλίας για την αποστολή μηνύματος είναι
input - Δημιουργήστε και συμμετάσχετε σε διαφορετικές συνομιλίες
- Εργαστείτε με προσωπικά μηνύματα. Οι χρήστες μπορούν να συνομιλούν ιδιωτικά με άλλους χρήστες. Ουσιαστικά, θα δημιουργήσετε μια σύνδεση WebSocket μεταξύ δύο χρηστών.
Πλοήγηση σε στυλ λωρίδας
Αυτό που κάνει αυτή την πλοήγηση μοναδική είναι ότι το κοντέινερ popover μεταμορφώνεται για να ταιριάζει στο περιεχόμενο. Υπάρχει μια κομψότητα σε αυτή τη μετάβαση σε σύγκριση με την παραδοσιακή συμπεριφορά του ανοίγματος και του κλεισίματος ενός νέου popover.
Τι θα μάθετε:
- Συνδυάστε κινούμενα σχέδια CSS με μεταβάσεις
- Εξαφανίστε το περιεχόμενο και εφαρμόστε την ενεργή κλάση στο κινητή στοιχείο
Pacman
Δημιουργήστε τη δική σας έκδοση του Pacman. Αυτός είναι ένας πολύ καλός τρόπος για να πάρετε μια ιδέα για το πώς αναπτύσσονται τα παιχνίδια και να κατανοήσετε τα βασικά. Χρησιμοποιήστε ένα πλαίσιο JavaScript, React ή Vue.
Θα μάθεις:
- Πώς κινούνται τα στοιχεία
- Πώς να καθορίσετε ποια πλήκτρα να πατήσετε
- Πώς να προσδιορίσετε τη στιγμή της σύγκρουσης
- Μπορείτε να προχωρήσετε περισσότερο και να προσθέσετε έλεγχο κίνησης φαντασμάτων
Θα βρείτε ένα παράδειγμα αυτού του έργου GitHub
διαχείριση χρηστών
Σχέδιο GitHub
Η δημιουργία μιας εφαρμογής τύπου CRUD για διαχείριση χρηστών θα σας διδάξει τα βασικά της ανάπτυξης. Αυτό είναι ιδιαίτερα χρήσιμο για νέους προγραμματιστές.
Θα μάθεις:
- Τι είναι η δρομολόγηση
- Πώς να χειριστείτε τις φόρμες εισαγωγής δεδομένων και να ελέγξετε τι έχει εισαγάγει ο χρήστης
- Τρόπος εργασίας με τη βάση δεδομένων - δημιουργία, ανάγνωση, ενημέρωση και διαγραφή ενεργειών
Έλεγχος του καιρού στην τοποθεσία σας
Σχέδιο GitHub
Εάν θέλετε να δημιουργήσετε εφαρμογές, ξεκινήστε με μια εφαρμογή καιρού. Αυτό το έργο μπορεί να ολοκληρωθεί χρησιμοποιώντας το Swift.
Εκτός από την απόκτηση εμπειρίας στη δημιουργία μιας εφαρμογής, θα μάθετε:
- Πώς να εργαστείτε με το API
- Πώς να χρησιμοποιήσετε τη γεωγραφική θέση
- Κάντε την εφαρμογή σας πιο δυναμική προσθέτοντας εισαγωγή κειμένου. Σε αυτό, οι χρήστες θα μπορούν να εισάγουν την τοποθεσία τους για να ελέγξουν τον καιρό σε μια συγκεκριμένη τοποθεσία.
Θα χρειαστείτε ένα API. Για να λάβετε δεδομένα καιρού, χρησιμοποιήστε το OpenWeather API. Περισσότερες πληροφορίες σχετικά με το OpenWeather API.
Παράθυρο συνομιλίας
Το παράθυρο συνομιλίας μου σε δράση, ανοιχτό σε δύο καρτέλες του προγράμματος περιήγησης
Η δημιουργία ενός παραθύρου συνομιλίας είναι ο τέλειος τρόπος για να ξεκινήσετε με τις πρίζες. Η επιλογή του tech stack είναι τεράστια. Το Node.js, για παράδειγμα, είναι τέλειο.
Θα μάθετε πώς λειτουργούν οι πρίζες και πώς να τις εφαρμόζετε. Αυτό είναι το κύριο πλεονέκτημα αυτού του έργου.
Εάν είστε προγραμματιστής της Laravel που θέλει να εργαστεί με πρίζες, διαβάστε το δικό μου
GitLab CI
Εάν είστε νέοι στη συνεχή ενοποίηση (CI), παίξτε με το GitLab CI. Ρυθμίστε μερικά περιβάλλοντα και δοκιμάστε να εκτελέσετε μερικές δοκιμές. Δεν είναι ένα πολύ δύσκολο έργο, αλλά είμαι σίγουρος ότι θα μάθετε πολλά από αυτό. Πολλές ομάδες ανάπτυξης χρησιμοποιούν τώρα CI. Είναι χρήσιμο να γνωρίζετε πώς να το χρησιμοποιήσετε.
Θα μάθεις:
- Τι είναι το GitLab CI
- Πώς να ρυθμίσετε
.gitlab-ci.ymlπου λέει στον χρήστη GitLab τι να κάνει - Τρόπος ανάπτυξης σε άλλα περιβάλλοντα
Αναλυτής ιστότοπου
Φτιάξτε ένα scraper που αναλύει τη σημασιολογία των ιστοσελίδων και δημιουργεί τη βαθμολογία τους. Για παράδειγμα, μπορείτε να ελέγξετε εάν λείπουν ετικέτες alt στις εικόνες. Ή ελέγξτε αν η σελίδα έχει μετα-ετικέτες SEO. Μια ξύστρα μπορεί να δημιουργηθεί χωρίς διεπαφή χρήστη.
Θα μάθεις:
- Πώς λειτουργεί η ξύστρα;
- Πώς να δημιουργήσετε επιλογείς DOM
- Πώς να γράψετε έναν αλγόριθμο
- Εάν δεν θέλετε να σταματήσετε εκεί, δημιουργήστε μια διεπαφή χρήστη. Μπορείτε επίσης να δημιουργήσετε μια αναφορά σε κάθε ιστότοπο που ελέγχετε.
Ανίχνευση συναισθήματος στα κοινωνικά δίκτυα
Ο εντοπισμός συναισθήματος στα μέσα κοινωνικής δικτύωσης είναι ένας πολύ καλός τρόπος για να μυηθείτε στη μηχανική μάθηση.
Μπορείτε να ξεκινήσετε αναλύοντας μόνο ένα κοινωνικό δίκτυο. Όλοι συνήθως ξεκινούν με το Twitter.
Εάν έχετε ήδη εμπειρία με τη μηχανική μάθηση, δοκιμάστε να συλλέξετε δεδομένα από διαφορετικά κοινωνικά δίκτυα και να τα συνδυάσετε.
Θα μάθεις:
- Τι είναι η μηχανική μάθηση
Κλώνος Trello
Τι θα μάθετε:
- Οργάνωση διαδρομών επεξεργασίας αιτημάτων (Δρομολόγηση).
- Σύρετε και αποθέστε.
- Πώς να δημιουργήσετε νέα αντικείμενα (πίνακες, λίστες, κάρτες).
- Επεξεργασία και έλεγχος δεδομένων εισόδου.
- Από την πλευρά του πελάτη: πώς να χρησιμοποιήσετε την τοπική αποθήκευση, πώς να αποθηκεύσετε δεδομένα στην τοπική αποθήκευση, πώς να διαβάσετε δεδομένα από την τοπική αποθήκευση.
- Από την πλευρά του διακομιστή: πώς να χρησιμοποιήσετε βάσεις δεδομένων, πώς να αποθηκεύσετε δεδομένα στη βάση δεδομένων, πώς να διαβάσετε δεδομένα από τη βάση δεδομένων.
, κατασκευασμένο σε React+Redux.
Πίνακας Διαχειριστή
Μια απλή εφαρμογή CRUD, ιδανική για την εκμάθηση των βασικών. Ας μάθουμε:
- Δημιουργία χρηστών, διαχείριση χρηστών.
- Αλληλεπίδραση με τη βάση δεδομένων - δημιουργία, ανάγνωση, επεξεργασία, διαγραφή χρηστών.
- Επικύρωση εισόδου και εργασία με φόρμες.
Παρακολούθηση κρυπτονομισμάτων (εγγενής εφαρμογή για κινητά)
Οτιδήποτε: Swift, Objective-C, React Native, Java, Kotlin.
Ας διαβάσουμε:
- Πώς λειτουργούν οι εγγενείς εφαρμογές.
- Πώς να ανακτήσετε δεδομένα από το API.
- Πώς λειτουργούν οι εγγενείς διατάξεις σελίδων.
- Πώς να εργαστείτε με προσομοιωτές κινητών.
. Αν βρείτε κάτι καλύτερο, γράψτε στα σχόλια.
Αν σε ενδιαφέρει, εδώ είναι .
Ρυθμίστε το δικό σας webpack config από την αρχή
Τεχνικά, δεν πρόκειται για εφαρμογή, αλλά είναι πολύ χρήσιμο να κατανοήσετε πώς λειτουργεί το webpack από μέσα. Τώρα δεν θα είναι ένα «μαύρο κουτί», αλλά ένα κατανοητό εργαλείο.
απαιτήσεις:
- Μεταγλώττιση es7 σε es5 (βασικά).
- Μεταγλώττιση jsx σε js - ή - .vue σε .js (θα πρέπει να μάθετε loaders)
- Ρυθμίστε τον διακομιστή προγραμματιστών webpack και την επαναφόρτωση καυτής μονάδας. (Το vue-cli και το create-react-app χρησιμοποιούν και τα δύο)
- Χρησιμοποιήστε το Heroku, now.sh ή Github, μάθετε πώς να αναπτύσσετε έργα webpack.
- Ρυθμίστε τον αγαπημένο σας προεπεξεργαστή για μεταγλώττιση css - scss, less, γραφίδα.
- Μάθετε πώς να χρησιμοποιείτε εικόνες και svgs με το webpack.
Κλώνος Hackernews
Κάθε Τζεντάι καλείται να φτιάξει το δικό του Hackernews.
Τι θα μάθετε στην πορεία:
- Πώς να αλληλεπιδράσετε με το hackernews API.
- Πώς να δημιουργήσετε μια εφαρμογή μιας σελίδας.
- Πώς να εφαρμόσετε λειτουργίες όπως προβολή σχολίων, μεμονωμένα σχόλια, προφίλ.
- Οργάνωση διαδρομών επεξεργασίας αιτημάτων (Δρομολόγηση).
Tudushechka
Σοβαρά? Tudushka; Είναι χιλιάδες από αυτούς. Αλλά πιστέψτε με, υπάρχει ένας λόγος για αυτή τη δημοτικότητα.
Η εφαρμογή Tudu είναι ένας πολύ καλός τρόπος για να βεβαιωθείτε ότι κατανοείτε τα βασικά. Δοκιμάστε να γράψετε μία εφαρμογή σε vanilla Javascript και μία στο αγαπημένο σας πλαίσιο.
Μαθαίνω:
- Δημιουργήστε νέες εργασίες.
- Ελέγξτε ότι τα πεδία είναι συμπληρωμένα.
- Φιλτράρισμα εργασιών (ολοκληρωμένες, ενεργές, όλες). Χρήση
filterиreduce. - Κατανοήστε τα βασικά της Javascript.
Ταξινομήσιμη λίστα μεταφοράς και απόθεσης
Πολύ χρήσιμο για την κατανόηση .
Ας μάθουμε:
- Σύρετε και αποθέστε το API
- Δημιουργήστε πλούσια διεπαφή χρήστη
Κλώνος Messenger (εγγενής εφαρμογή)
Θα καταλάβετε πώς λειτουργούν τόσο οι εφαρμογές web όσο και οι εγγενείς εφαρμογές, κάτι που θα σας ξεχωρίσει από τη γκρίζα μάζα.
Τι θα μελετήσουμε:
- Υποδοχές Ιστού (άμεσα μηνύματα)
- Πώς λειτουργούν οι εγγενείς εφαρμογές.
- Πώς λειτουργούν τα πρότυπα σε εγγενείς εφαρμογές.
- Οργάνωση διαδρομών επεξεργασίας αιτημάτων σε εγγενείς εφαρμογές.
Επεξεργαστής κειμένου
Ο σκοπός ενός προγράμματος επεξεργασίας κειμένου είναι να μειώσει την προσπάθεια των χρηστών που προσπαθούν να μετατρέψουν τη μορφοποίησή τους σε έγκυρη σήμανση HTML. Ένας καλός επεξεργαστής κειμένου επιτρέπει στους χρήστες να μορφοποιούν κείμενο με διαφορετικούς τρόπους.
Σε κάποιο σημείο, όλοι έχουν χρησιμοποιήσει ένα πρόγραμμα επεξεργασίας κειμένου. Γιατί λοιπόν όχι ?
Κλώνος Reddit
είναι ένας ιστότοπος συγκέντρωσης ειδήσεων κοινωνικής δικτύωσης, αξιολόγησης περιεχομένου ιστού και συζήτησης.
Το Reddit καταλαμβάνει τον περισσότερο χρόνο μου, αλλά συνεχίζω να κάνω παρέα. Η δημιουργία ενός κλώνου Reddit είναι ένας αποτελεσματικός τρόπος για να μάθετε προγραμματισμό (κατά την περιήγηση στο Reddit ταυτόχρονα).
Το Reddit σας παρέχει ένα πολύ πλούσιο. Μην αφήνετε έξω κανένα χαρακτηριστικό ή μην κάνετε πράγματα τυχαία. Στον πραγματικό κόσμο με πελάτες και πελάτες, δεν μπορείτε να εργαστείτε τυχαία, διαφορετικά θα χάσετε γρήγορα τη δουλειά σας.
Οι έξυπνοι πελάτες θα συνειδητοποιήσουν αμέσως ότι η δουλειά γίνεται άσχημα και θα βρουν κάποιον άλλο.
Δημοσίευση πακέτου NPM ανοιχτού κώδικα
Εάν γράφετε κώδικα Javascript, το πιθανότερο είναι ότι χρησιμοποιείτε έναν διαχειριστή πακέτων. Ένας διαχειριστής πακέτων σάς επιτρέπει να επαναχρησιμοποιήσετε τον υπάρχοντα κώδικα που άλλα άτομα έχουν γράψει και δημοσιεύσει.
Η κατανόηση του πλήρους κύκλου ανάπτυξης ενός πακέτου θα προσφέρει μια πολύ καλή εμπειρία. Υπάρχουν πολλά πράγματα που πρέπει να γνωρίζετε κατά τη δημοσίευση κώδικα. Πρέπει να σκεφτείτε την ασφάλεια, τη σημασιολογική έκδοση, την επεκτασιμότητα, τις συμβάσεις ονομασίας και τη συντήρηση.
Το πακέτο μπορεί να είναι οτιδήποτε. Αν δεν έχετε ιδέα, δημιουργήστε το δικό σας Lodash και δημοσιεύστε το.
Lodash:
Το να έχετε κάτι που έχετε κάνει στο διαδίκτυο σας βάζει 10% πάνω από τους άλλους. σχετικά με τις ανοιχτές πηγές και τα πακέτα.
Πρόγραμμα σπουδών freeCodeCamp
Το freeCodecamp έχει συγκεντρώσει πολλά .
Το freeCodeCamp είναι ένας μη κερδοσκοπικός οργανισμός. Αποτελείται από μια διαδραστική πλατφόρμα εκμάθησης που βασίζεται στο διαδίκτυο, ένα διαδικτυακό φόρουμ κοινότητας, δωμάτια συνομιλίας, εκδόσεις μεσαίου μεγέθους και τοπικούς οργανισμούς που σκοπεύουν να κάνουν την ανάπτυξη μαθησιακών ιστοσελίδων προσβάσιμη σε όλους.
Εάν καταφέρετε να ολοκληρώσετε ολόκληρο το μάθημα, θα είστε περισσότερο από τα προσόντα για την πρώτη σας δουλειά.
Δημιουργήστε έναν διακομιστή HTTP από την αρχή
Το πρωτόκολλο HTTP είναι ένα από τα κύρια πρωτόκολλα μέσω του οποίου το περιεχόμενο ταξιδεύει στο Διαδίκτυο. Οι διακομιστές HTTP χρησιμοποιούνται για την εξυπηρέτηση στατικού περιεχομένου όπως HTML, CSS και JS.
Η δυνατότητα υλοποίησης του πρωτοκόλλου HTTP από την αρχή θα διευρύνει τις γνώσεις σας για το πώς αλληλεπιδρούν τα πράγματα.
Για παράδειγμα, εάν χρησιμοποιείτε NodeJs, τότε γνωρίζετε ότι η Express παρέχει έναν διακομιστή HTTP.
Για αναφορά, δείτε αν μπορείτε:
- Ρυθμίστε έναν διακομιστή χωρίς να χρησιμοποιήσετε βιβλιοθήκες
- Ο διακομιστής πρέπει να εξυπηρετεί περιεχόμενο HTML, CSS και JS.
- Εφαρμογή δρομολογητή από την αρχή
- Παρακολουθήστε τις αλλαγές και ενημερώστε τον διακομιστή
Εάν δεν ξέρετε γιατί, χρησιμοποιήστε και προσπαθήστε να δημιουργήσετε έναν διακομιστή HTTP από την αρχή.
Εφαρμογή επιφάνειας εργασίας για σημειώσεις
Όλοι κρατάμε σημειώσεις, έτσι δεν είναι;
Ας δημιουργήσουμε μια εφαρμογή σημειώσεων. Η εφαρμογή πρέπει να αποθηκεύει σημειώσεις και να τις συγχρονίζει με τη βάση δεδομένων. Δημιουργήστε μια εγγενή εφαρμογή χρησιμοποιώντας Electron, Swift ή οτιδήποτε άλλο σας αρέσει και αυτό που λειτουργεί για το σύστημά σας.
Μη διστάσετε να το συνδυάσετε με την πρώτη πρόκληση (επεξεργαστής κειμένου).
Ως μπόνους, δοκιμάστε να συγχρονίσετε την έκδοση για επιτραπέζιους υπολογιστές με την έκδοση ιστού.
Podcast (συννεφιασμένος κλώνος)
Ποιος δεν ακούει podcasts;
Δημιουργήστε μια διαδικτυακή εφαρμογή με τις ακόλουθες λειτουργίες:
- Δημιουργία λογαριασμού
- Αναζήτηση Podcast
- Αξιολογήστε και εγγραφείτε σε podcast
- Σταματήστε και παίξτε, αλλάξτε ταχύτητα, λειτουργίες εμπρός και πίσω για 30 δευτερόλεπτα.
Δοκιμάστε να χρησιμοποιήσετε το iTunes API ως σημείο εκκίνησης. Εάν γνωρίζετε άλλους πόρους, δημοσιεύστε στα σχόλια.
Αποτύπωση οθόνης
Γειά σου! Γυρίζω την οθόνη μου αυτή τη στιγμή!
Δημιουργήστε μια εφαρμογή υπολογιστή ή web που σας επιτρέπει να τραβήξετε την οθόνη σας και να αποθηκεύσετε το κλιπ ως .gif
Εδώ πώς να το πετύχετε αυτό.
πηγές
Πηγή: www.habr.com