Home-theater-designers
Η έναρξη με την ανάπτυξη ιστοσελίδων JavaScript μπορεί να είναι μια απογοητευτική διαδικασία, αλλά υπάρχουν εργαλεία που το διευκολύνουν.
CodePen.io είναι ένα περιβάλλον κωδικοποίησης εντός προγράμματος περιήγησης σχεδιασμένο τόσο για εκμάθηση κώδικα όσο και για γρήγορη πρωτότυπη ιδέα με ελάχιστη ταλαιπωρία.
Σε αυτό το άρθρο, εξετάζουμε μερικές από τις δυνατότητες του ιστότοπου και πώς μπορούν να σας βοηθήσουν να γίνετε καλύτερος προγραμματιστής.
Τι είναι το CodePen;
Το CodePen παρέχει κάτι που ονομάζεται α στυλό , το οποίο περιλαμβάνει τρία διαφορετικά παράθυρα για HTML, CSS και JavaScript, καθώς και ένα παράθυρο προεπισκόπησης που ενημερώνεται σε πραγματικό χρόνο καθώς πληκτρολογείτε.
Παρόλο που χρησιμοποιείται συχνά για προγραμματιστές ιστού για την προβολή ιδεών για ιστότοπους, είναι επίσης ένα εξαιρετικό μέρος για να μάθετε τα βασικά της ανάπτυξης ιστοσελίδων. Ακολουθούν οι πιο αξιοσημείωτες δυνατότητες που πρέπει να γνωρίζετε όταν χρησιμοποιείτε το CodePen.
1. Προεπεξεργαστές
Οι προεπεξεργαστές είναι ερμηνευμένες ή μεταγλωττισμένες γλώσσες που έχουν σχεδιαστεί για να απλοποιούν την κωδικοποίηση. Μπορούν να προσθέσουν λειτουργίες σε μια γλώσσα για ευκολία και να κάνουν ευκολότερο τον κώδικα να διαβάσει. Στην ανάπτυξη ιστού, ένας συνδυασμός προεπεξεργαστών για HTML, CSS και JavaScript χρησιμοποιείται για τη γρήγορη δημιουργία καθαρού κώδικα.
Εάν μαθαίνετε ανάπτυξη ιστού και θέλετε να δοκιμάσετε διαφορετικούς προεπεξεργαστές, το CodePen σάς επιτρέπει να αλλάζετε προεπεξεργαστές εν κινήσει και να βλέπετε τον κώδικα στον οποίο συγκεντρώνεται σε πραγματικό χρόνο. Κάθε ένα από τα τρία παράθυρα της εφαρμογής CodePen έχει ένα αναπτυσσόμενο μενού στην επάνω δεξιά γωνία. Επιλέγω Προβολή Μεταγλωττισμένων HTML/CSS/JS για να δείτε πώς θα ερμηνευτεί ο κώδικας.
Σε αυτό το στυλό, δημιουργήσαμε έναν απλό ιστότοπο χρησιμοποιώντας Haml και Sass για να διαμορφώσετε κάποιο κείμενο κεφαλίδας. Επιλογή Προβολή Μεταγλωττισμένο δείχνει τα τυπικά HTML και CSS. Σε αυτό το παράδειγμα η διαφορά είναι ελάχιστη. Ωστόσο, κατά την εκμάθηση μιας νέας γλώσσας, μπορεί να είναι χρήσιμο να δούμε πώς φαίνεται ο προεπεξεργασμένος κώδικας μόλις καταρτιστεί.
2. Εξωτερικοί πόροι
Παράλληλα με την εγγενή υποστήριξη για προεπεξεργαστές, το CodePen υποστηρίζει εξωτερικά σενάρια. Αυτό το καθιστά το ιδανικό μέρος για να αποκτήσετε πρακτική εμπειρία με βιβλιοθήκες για τα προσωπικά σας έργα ή να ανακαλύψετε δημοφιλείς βιβλιοθήκες εφαρμογών ιστού όπως το React.
Για να προσθέσετε μια εξωτερική βιβλιοθήκη, ανοίξτε το Ρυθμίσεις παράθυρο στο στυλό σας και μεταβείτε στην καρτέλα JavaScript. Υπάρχουν δύο τρόποι για να προσθέσετε πόρους, είτε με τη μη αυτόματη προσθήκη της διεύθυνσης URL του πόρου, είτε με αναζήτηση.
Χρησιμοποιήσαμε αυτήν τη δυνατότητα στο κάλυμμα του άρθρου μας web animation με mo.js , μαζί με την προεπεξεργασία της Βαβέλ.
Δείτε το Στυλό Παράδειγμα Mojs MUO από τον Ian ( @Bardoctorus ) στο CodePen.
Ναι, τα στυλό CodePen μπορούν να ενσωματωθούν! Προχωρήστε και κάντε κλικ στο παράθυρο προεπισκόπησης παραπάνω για να δείτε τα αποτελέσματα του σεμιναρίου Mo.js!
Άλλα στυλό μπορούν να εισαχθούν όπως οι εξωτερικές βιβλιοθήκες. Αυτό σημαίνει ότι μπορείτε να πάρετε στοιχεία από προηγουμένως γραμμένα στυλό για να χρησιμοποιήσετε παρόμοια δομοστοιχεία στα νέα σας στυλό. Χρήστης του CodePen Adam's Απλή δημοσκόπηση το στυλό είναι ένα καλό παράδειγμα αυτού.
3. Πρότυπα
Όταν μαθαίνετε νέες έννοιες ή δοκιμάζετε νέες ιδέες, χρησιμοποιείτε συχνά παρόμοια στοιχεία και ξαναδιαβάζετε τα ίδια βήματα ξεκινώντας. Το CodePen επιτρέπει τη δημιουργία προτύπων στυλό που μπορούν να διακόψουν την επανάληψη και να σας επιτρέψουν να φτάσετε κατευθείαν στο σημείο.
Για να δημιουργήσετε ένα πρότυπο, ανοίξτε ένα νέο στυλό, κάντε τις αλλαγές σας και επιλέξτε το Πρότυπο ρυθμιστικό στο μενού ρυθμίσεων.
https://vimeo.com/221428690
Μέχρι πρόσφατα, οι δωρεάν χρήστες μπορούσαν να φτιάξουν μόνο τρία πρότυπα, αλλά τώρα όλοι οι χρήστες μπορούν να έχουν όσα πρότυπα στον λογαριασμό τους θέλουν. Ιδανικό για να ξεκινήσετε μια νέα ιδέα με την ελάχιστη καθυστέρηση!
4. Μόδα Συνεργασία
Η ικανότητα συνεργασίας και διδασκαλίας με το CodePen μπορεί να είναι το μεγαλύτερο πλεονέκτημά του. Υπάρχουν ήδη πολλά εργαλεία συνεργασίας για προγραμματιστές, αλλά η προσέγγιση του CodePen είναι απλή και διαισθητική.
Οι επαγγελματίες χρήστες του CodePen μπορούν να δημιουργήσουν ένα νέο στυλό και να το ανοίξουν για συνεργασία στο πλαίσιο του Αλλαξε θέα μενού. Αυτό αλλάζει τον σύνδεσμο του στυλό σε μια κοινή πρόσκληση που φιλοξενεί έναν αριθμό κλιμάκωσης ατόμων ανάλογα με το σχέδιο CodePen Pro.
πώς να προωθήσετε ένα κείμενο στο iphone
Σε αυτήν την περίπτωση, έγραψα HTML ενώ ένας φίλος ενημέρωσε το CSS σε πραγματικό χρόνο, με έναν δρομέα με ετικέτα που προσδιορίστηκε όπου εργάζονταν.
Οποιοσδήποτε έχει τον σύνδεσμο μπορεί να συμμετάσχει και να χρησιμοποιήσει τη λειτουργία συνομιλίας στο πρόγραμμα περιήγησης, ανεξάρτητα από το αν είναι επαγγελματίας χρήστης ή ακόμη και λογαριασμός CodePen. Η παροχή αυτόματης αποθήκευσης είναι απενεργοποιημένη, μόνο ο κάτοχος της πένας μπορεί να αποθηκεύσει τυχόν αλλαγές, καθιστώντας τον ασφαλή τρόπο για να ανοίξετε τον κωδικό σας σε άλλους χωρίς κίνδυνο.
Η ανοιχτή φύση αυτής της λειτουργίας είναι επωφελής για αρχάριους, καθώς μπορείτε να προσκαλέσετε σχεδόν οποιονδήποτε στο στυλό σας για να σας καθοδηγήσει σε μια δύσκολη ιδέα. Είναι επίσης ένας εύχρηστος τρόπος για να γνωρίζετε τον τρόπο που περνάτε καθώς είναι ιδανικός για συνέντευξη σε πιθανούς υπαλλήλους και το έχει ήδη κάνει χρησιμοποιείται επαγγελματικά με αυτόν τον τρόπο !
5. Καθηγητής Mode
Η λειτουργία καθηγητή επιτρέπει σε έναν χρήστη Pro να φιλοξενήσει ένα δωμάτιο στο οποίο μόνο αυτοί μπορούν να επεξεργαστούν τον κώδικα. Μεταξύ 10-100 χρηστών μπορούν να παρακολουθήσουν και να συνομιλήσουν ανάλογα με το πρόγραμμα Pro του οικοδεσπότη.
Ο τρόπος καθηγητή επιτρέπει την ευελιξία μεταξύ της εκμάθησης στην τάξη και της εξ αποστάσεως εκπαίδευσης ή συνδυασμού των δύο. Η χρήση της λειτουργίας καθηγητή θα επιτρέψει στα άτομα στο πίσω μέρος της τάξης να έχουν την ίδια εμπειρία με εκείνα που βρίσκονταν στο μπροστινό μέρος και στον καθηγητή να εμφανίζει διορθώσεις σφαλμάτων που θα ενημερώνονται σε πραγματικό χρόνο.
6. Λειτουργία παρουσίασης
Η λειτουργία παρουσίασης έχει σχεδιαστεί, χωρίς έκπληξη, με την παρουσίαση του κώδικα στο μυαλό. Η εφαρμογή εμφανίζεται σε απλοποιημένη προβολή, σχεδιασμένη για να λειτουργεί με προβολείς. Το CodePen έχει βελτιστοποιήσει τη λειτουργία παρουσίασης για χρήση σε συνδέσεις διαδικτύου χαμηλότερης ταχύτητας και ασθενέστερο υλικό.
Οι έξυπνοι αναγνώστες μπορεί να έχουν ήδη συνειδητοποιήσει ότι η δωρεάν έκδοση του CodePen θα παρέχει αυτή ακριβώς τη λειτουργία, αν και η λειτουργία Pro έχει μερικές χρήσιμες δυνατότητες. Η διάταξη, το μέγεθος γραμματοσειράς και τα θέματα μπορούν να αλλάξουν γρήγορα εν κινήσει για να ταιριάζουν σχεδόν σε κάθε ρύθμιση και η εμφάνιση του συνδέσμου με το στυλό φέρνει μια jumbo μεγέθους συντομευμένη διεύθυνση URL που διευκολύνει την κοινή χρήση του έργου.
Αυτές οι μικρές αλλαγές, μαζί με τη δυνατότητα κλιμάκωσης του παραθύρου προεπισκόπησης ώστε να ταιριάζει σε ό, τι επιδεικνύετε, καθιστούν τη λειτουργία παρουσίασης τέλεια τόσο για εκπαιδευτικούς όσο και για προγραμματιστές που παρουσιάζουν ιδέες στους συναδέλφους. Η λειτουργία παρουσίασης είναι επίσης ένας καθαρός και απλός τρόπος για να παρουσιάσετε κώδικα εάν βρίσκεστε σε συνέντευξη για μια θέση προγραμματισμού.
7. Μοτίβα
Η αναζήτηση έμπνευσης γίνεται πολύ πιο εύκολη με τις συλλογές του CodePen Σχεδιαστικά πρότυπα Το
Κάθε κατηγορία είναι μια συλλογή παραδειγμάτων κώδικα που παρέχονται από χρήστες του CodePen για συγκεκριμένες εργασίες. Άχνετε τρόπο να δημιουργήσετε δυναμικά κουμπιά για τον ιστότοπό σας; Μενού ακορντεόν; Υπάρχουν πολλές κατηγορίες που ταιριάζουν σχεδόν σε κάθε παράδειγμα.
Αυτά τα μοτίβα είναι επίσης ένας πολύ καλός τρόπος για να μάθετε πώς λειτουργούν τα διαδραστικά κουμπιά και οι διαφορετικοί τρόποι με τους οποίους μπορούν να λειτουργούν δυναμικές διεπαφές χρήστη.
8. Έμμετ
Έμετ , γνωστή ως Zen Coding, θεωρείται ευρέως ως η μεγαλύτερη εξοικονόμηση χρόνου για ανάπτυξη HTML και CSS. Το πρόσθετο παίρνει μέρος του κώδικα που βρίσκετε να γράφετε πολύ και τα μετατρέπει σε απλές συντομεύσεις.
Το να το βλέπετε σε δράση είναι καλύτερο από το να το εξηγείτε, οπότε ακολουθήστε τη συνήθη ρύθμιση για ένα έγγραφο HTML:
Η προσθήκη αυτού σε κάθε έγγραφο HTML έχει μειωθεί σε δύο ενέργειες. Χρησιμοποιώντας το Emmet, πληκτρολογήστε ! και χτύπησε το Αυτί κλειδί. Μαγεία!
Το Emmet είναι τυπικό στο CodePen και είναι ιδιαίτερα χρήσιμο εάν προσπαθείτε να μάθετε μια νέα ιδέα στο JavaScript και πρέπει να δημιουργήσετε γρήγορα το υποστηρικτικό HTML και CSS.
Αναπτύξτε με το CodePen για καλύτερη εμπειρία
Το CodePen είναι ένα εξαιρετικό εργαλείο για προγραμματιστές ιστού και ο τομέας αναπτύσσεται συνεχώς. Η JavaScript είναι μια εξαιρετική γλώσσα για να μάθετε για ένα μέλλον στην ανάπτυξη ιστού.
η εφαρμογή μηνυμάτων δεν λειτουργεί σε mac
Υπάρχουν μερικά υπέροχα σεμινάρια και μαθήματα διαθέσιμα για άτομα που θέλουν να ξεκινήσουν με το JavaScript και το CodePen είναι ένα εξαιρετικό περιβάλλον για να δοκιμάσετε τις νέες σας δεξιότητες.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Οι 8 καλύτεροι ιστότοποι για δωρεάν λήψη ηχητικών βιβλίωνΤα ηχητικά βιβλία είναι μια μεγάλη πηγή ψυχαγωγίας και πολύ πιο εύπεπτα. Ακολουθούν οι οκτώ καλύτερες ιστοσελίδες από όπου μπορείτε να τις κατεβάσετε δωρεάν.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- HTML
- Ανάπτυξη διαδικτύου
- JavaScript
- CSS
Ο Ian Buckley είναι ανεξάρτητος δημοσιογράφος, μουσικός, ερμηνευτής και παραγωγός βίντεο που ζει στο Βερολίνο της Γερμανίας. Όταν δεν γράφει ούτε είναι στη σκηνή, ασχολείται με ηλεκτρονικά ή κώδικα DIY με την ελπίδα να γίνει τρελός επιστήμονας.
Περισσότερα από τον Ian BuckleyΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή