Περιεχόμενο
- 01. Εξερευνήστε κάτι νέο χρησιμοποιώντας Θέματα
- 02. Πρωτότυπο γρηγορότερα με πρότυπα
- 03. Ξεκινήστε μια συλλογή
- 04. Βελτιώστε την απόδοση με προεπεξεργαστές
- 05. Εξερευνήστε το πιο όμορφο νέο χαρακτηριστικό του CodePen: Projects
- 06. Ενεργοποιήστε την τηλεόραση
- 07. Αγκαλιάστε το κοινοτικό πνεύμα
- 08. Παρακολούθηση συναντήσεων IRL
- 09. Αναβάθμιση σε Pro
- 10. Βουτήξτε στο πηγάδι της έμπνευσης
Το CodePen είναι μια δολοφονική εργαλειοθήκη για γρήγορο πρωτότυπο, με μια εμπνευσμένη και υποστηρικτική κοινότητα συνεργατών. Έχει γίνει ένα από τα αγαπημένα εργαλεία σχεδιασμού ιστοσελίδων της βιομηχανίας προσφέροντας απρόσκοπτη επανάληψη δημιουργικού κώδικα, εξαλείφοντας τους πονοκέφαλους δημιουργώντας νέα περιβάλλοντα ανάπτυξης και επιτρέποντας στους χρήστες να αντιμετωπίσουν εύκολα μυριάδες έννοιες frontend που κυμαίνονται από το ιδιότροπο και γελοίο έως το πρακτικό και την ανάπτυξη -έτοιμος.
Σε αυτό το άρθρο, έχουμε συγκεντρώσει 10 κορυφαίες συμβουλές για να αντλήσετε περισσότερα από την αγαπημένη παιδική χαρά κωδικοποίησης της βιομηχανίας ιστού - αυτές θα αλλάξουν τον τρόπο χρήσης του CodePen για πάντα. Εάν αυτό σας εμπνέει για να γίνετε δημιουργικοί, ίσως θελήσετε επίσης να ελέγξετε τη συλλογή παραδειγμάτων κινουμένων σχεδίων CSS ή τα πιο συναρπαστικά έργα ανοιχτού κώδικα στον ιστό.
Θέλετε να κάνετε τα πράγματα ακόμη πιο χωρίς προβλήματα; Δημιουργήστε τον ιστότοπό σας με έναν εύκολο ιστότοπο δημιουργίας ιστότοπων και αποκτήστε μια εξαιρετικά χρήσιμη υπηρεσία φιλοξενίας ιστοσελίδων.
01. Εξερευνήστε κάτι νέο χρησιμοποιώντας Θέματα
Τα θέματα CodePen είναι μια σχετικά νέα λειτουργία που βασίζεται στην κοινότητα και προσφέρεται σε χρήστες όλων των επιπέδων και είναι ένας πολύ καλός τρόπος για να εξερευνήσετε νέα πλαίσια, μοτίβα UI ή βιβλιοθήκες JS. Με το άνοιγμα της σελίδας Θέματα, θα συναντήσετε πολλές επιλογές, φιλτραρισμένες ανά κατηγορία και ακόμη πιο κάτω από υποκατηγορίες. Μόλις δείτε μια τοπική κατηγορία, για παράδειγμα το Vue.js, συναντάμε μια οθόνη επισκόπησης με πολλές επιλογές.
Χρειάζεστε ένα πρότυπο εκκίνησης για να βοηθήσετε στη δημιουργία αυτού του στοιχείου Vue; Ακολουθεί μια λίστα με δημοφιλή στοιχεία και ένα ωραίο κουμπί "Νέο στυλό από πρότυπο" για να μας βοηθήσετε να ξεκινήσουμε. Θέλετε να δείτε μερικά εξειδικευμένα παραδείγματα του πλαισίου σε δράση; Φιλτράρετε στο "Featured Vue Pens" και συναντηθείτε με εμπνευσμένα έργα από τους κύριους και τους αρχάριους του πλαισίου.Κατά την περιήγηση σε αυτές τις επισκοπήσεις θέματος, προσφέρουμε συνεχείς συνδέσμους προς επίσημους ιστότοπους, τεκμηρίωση πλαισίου ή βιβλιοθήκης και οδηγούς, καθώς και την κύρια παρουσία του έργου στο GitHub.
02. Πρωτότυπο γρηγορότερα με πρότυπα
Κάθε προγραμματιστής σε κάποιο σημείο κατά πάσα πιθανότητα ένιωσε πραγματικό πόνο κατά τη δημιουργία ενός περιβάλλοντος τοπικής ανάπτυξης, ανεξάρτητα από τη στοίβα. Ακόμη και η εγκατάσταση μιας λέβητας μπορεί να απαιτεί πολύ περισσότερο χρόνο από ό, τι κάποιος προσπαθεί να επενδύσει για να δημιουργήσει και να δοκιμάσει κάτι σαν μερικά πρωτότυπα κουμπιών υποβολής. Με το CodePen, είστε ήδη εκεί - ένα IDE είναι έτοιμο για να απορρίψετε εύκολα τα περιεχόμενα του δημιουργικού σας μυαλού.
Αλλά με τη χρήση της δυνατότητας προτύπου CodePen, είναι τώρα ακόμη πιο εύκολο να περιστρέψετε το ακριβές περιβάλλον που χρειάζεστε για να ολοκληρώσετε τη δουλειά. Ένα πρότυπο μπορεί να περιέχει οποιονδήποτε αριθμό προκαθορισμένων εξωτερικών σεναρίων (μπορείτε να συμπεριλάβετε μια άλλη πένα ως εξωτερικό στοιχείο), θα σας επιτρέψει να προκαθορίσετε τον προτιμώμενο προεπεξεργαστή HTML / CSS / JS (ο οποίος θα τακτοποιεί αυτόματα τη μετακίνηση), και θα διατηρήσει ακόμη και οποιονδήποτε υπάρχοντα κώδικα που σας ενδιαφέρει να διατηρήσετε.
Είναι πολύ απλό να ορίσετε ένα στυλό ως πρότυπο - με το στυλό σας ανοιχτό, πολτοποιήστε το κουμπί Ρυθμίσεις, κάντε κλικ στο Λεπτομέρειες στυλό και από εκεί θα δείτε μια τακτοποιημένη μικρή εναλλαγή που προσφέρει την επιλογή αποθήκευσης ως κανονική πένα ή Πρότυπο.
Λοιπόν, πώς διαφέρει από το να διασχίσει μια υπάρχουσα πένα; Ορισμός ενός στυλό ως προτύπου θα σας επιτρέψει να επιλέξετε αυτήν την εγκατάσταση αμέσως μόλις επιλέξετε να δημιουργήσετε μια νέα πένα, χωρίς να χρειάζεται να κάνετε αναζήτηση μέσω των προηγούμενων στυλό σας για να πιείτε και να τα τροποποιήσετε, δεν χρειάζεται να εισαγάγετε ξανά όλα τα σενάρια επιλογής σας από το προς τα κάτω και δεν χρειάζεται να επανεπιλέξετε όλες τις επιλογές σύνταξης και τις ρυθμίσεις που ίσως προτιμάτε για τη συγκεκριμένη ιδέα. Επιπλέον, η εκκίνηση ενός νέου στυλό από ένα πρότυπο αντιμετωπίζει το στυλό σας ως μια εντελώς νέα δημιουργία, ενώ το πιρούνι θα δημιουργήσει ένα στυλό που συνδέεται πίσω με το πρωτότυπο, με ξεχωριστό ιστορικό και όχι με κενή πλάκα. Η αναβάθμιση σε λογαριασμό CodePen Pro σάς προσφέρει ένα απίστευτα πολύτιμο σύνολο εκτεταμένων δυνατοτήτων, αλλά ακόμη και οι δωρεάν λογαριασμοί χρηστών θα επιτρέπουν απεριόριστη δημιουργία προτύπων.
03. Ξεκινήστε μια συλλογή
Εάν σας αρέσει να έχετε τη δυνατότητα να αναζητήσετε πόρους χρησιμοποιώντας το CodePen Topics αλλά επιθυμείτε να επιμεληθείτε τα δικά σας, οι Συλλογές είναι η απάντηση που αναζητάτε. Η προσθήκη ενός στυλό σε μια συλλογή είναι τόσο απλή όσο η επιλογή του αναπτυσσόμενου μενού "Συλλογές" από οποιαδήποτε προβολή επεξεργασίας στυλό, όπου μπορείτε να καθορίσετε μια Συλλογή ή να δημιουργήσετε μια νέα. Και πάλι, μπορεί να είναι οποιοδήποτε στυλό (και αν είστε επαγγελματίας χρήστης, μπορείτε να ορίσετε τη Συλλογή σας ως ιδιωτική). Η ομορφιά των Συλλογών είναι η δυνατότητα προβολής όλων των Συλλογών σας σε ένα μέρος με ισχυρές επιλογές φίλτρου, ταξινόμησης και αναζήτησης - ένας πολύ καλός τρόπος για να ορίσετε πόρους ανά στοίβα ή πλαίσιο, να διατηρήσετε μια λίστα με έμπνευση ή σύμπλεγμα Pens by UI. Ενδιαφέρεστε για τη δημόσια συλλογή άλλου χρήστη; Μπορείτε ακόμη να εγγραφείτε στη Συλλογή μέσω RSS για να παρακολουθείτε τις ενημερώσεις.
04. Βελτιώστε την απόδοση με προεπεξεργαστές
Ας το παραδεχτούμε, οι περισσότεροι από εμάς ξοδεύουμε περισσότερο από αρκετό χρόνο πίσω από τις οθόνες απ 'όσο θα έπρεπε. Πολλοί από εμάς είναι τόσο συγκλονισμένοι με πρακτικές προσπάθειες που σχετίζονται με την καριέρα, είναι δύσκολο να βρούμε το χρόνο να χτίσουμε μια βιβλιοθήκη άχρηστων εναλλακτών εναλλαγής ή μεταβάσεων σελίδων WebGL και ενώ το CodePen αφαιρεί τον τυπικό χρόνο εγκατάστασης και μας επιτρέπει να ξεκινήσουμε αμέσως στην εργασία, η αποδοτικότητα μπορεί να βελτιώνεται πάντα. Αυτό είναι όπου οι εγγενείς προεπεξεργαστές του CodePen είναι χρήσιμοι.
Για παράδειγμα: θέλετε να δημιουργήσετε ένα πλέγμα μερικών εκατοντάδων κελιών HTML, τα χαρακτηριστικά του στυλ του καθενός ενημερώνονται τυχαία μέσω JavaScript; Θα μπορούσατε να κάνετε αντιγραφή και επικόλληση div μετά div, σίγουρα. Και μέχρι το τέλος όλων αυτών το παράθυρο επεξεργασίας είναι σχεδόν αδύνατο να πλοηγηθείτε.
Εδώ εμφανίζονται τα HAML, Pug ή Jade: από το παράθυρο ρυθμίσεων της πένας, επιλέξτε έναν προεπεξεργαστή HTML με ευκολία, γράψτε έναν απλό βρόχο και δημιουργήστε αυτά τα στοιχεία σε περίπου δύο γραμμές. Δεν είστε σίγουροι από πού να ξεκινήσετε; Υπάρχει στυλό για αυτό: μια αναζήτηση του «HAML Loop» στο CodePen αποδίδει έναν μεγάλο αριθμό στυλό boilerplate που θα σας δώσουν μια σύντομη κατανόηση του πώς να δημιουργήσετε αποτελεσματικά τα στοιχεία της σελίδας σας.
Με τους προεπεξεργαστές CSS όπως το LESS και το Sass, μπορούμε να δημιουργήσουμε mixins και προκαθορισμένες λειτουργίες που δέχονται πολλά επιχειρήματα, καθιστώντας τα τέλεια προσθήκη στα πρότυπα CodePen και επιτρέποντάς σας να γράφετε διαφορετικά σύνθετα στυλ με σχετική ευκολία. Ίσως δημιουργείτε στοιχεία διεπαφής χρήστη για ένα μεγαλύτερο έργο - μπορείτε πλέον να ορίσετε όλες τις μεταβλητές χρώματος, γραμματοσειράς και διαστήματος με σαφείς και συνοπτικές συμβάσεις ονομασίας. και πάλι να τα συμπεριλάβετε σε ένα πρότυπο CodePen σας επιτρέπει να επαναλαμβάνετε με σχεδόν μηδενική ρύθμιση.
Απολαμβάνετε την απόδοση των CoffeeScript, TypeScript ή Babel; Το CodePen μπορεί επίσης να μεταγλωττίσει τον προεπεξεργαστή JS της επιλογής σας. Αν ανά πάσα στιγμή θέλετε να ρίξετε μια ματιά κάτω από το καπό και να δείτε πώς μοιάζει ο μεταγλωττισμένος κώδικάς σας, μπορείτε απλώς να επιλέξετε «Προβολή μεταγλωττισμένου» από το παράθυρο επεξεργασίας κώδικα για να πάρετε μια αίσθηση για το πώς θα είναι η τελική σας έξοδος - και πρέπει Η εργασία με βρόχους και προηγμένες λειτουργίες μπορεί να κάνει την εγκατάσταση και την επανάληψη απίστευτα γρήγορη, αλλά μπορεί επίσης να καταλήξει να φτιάξει μια καλή ποσότητα αχρησιμοποίητης σύνταξης. Εάν οποιαδήποτε στιγμή σκοπεύετε να χρησιμοποιήσετε αυτές τις δημιουργίες στην παραγωγή, φροντίστε να δείτε ολόκληρο τον κώδικα που έχει καταρτιστεί πλήρως και να κάνετε τυχόν μειώσεις ή προσαρμογές που απαιτούνται για την απόδοση.
05. Εξερευνήστε το πιο όμορφο νέο χαρακτηριστικό του CodePen: Projects
Ακόμα ένα κάπως φρέσκο χαρακτηριστικό, τα CodePen Projects είναι ένα είδος χωρίς ήρωες - η αρχική ρύθμιση HTML / CSS / JS τριών παραθύρων του CodePen επιτρέπει ήδη προσαρμοσμένες εξωτερικές ρυθμίσεις και σύνταξη προεπεξεργαστών σε πραγματικό χρόνο. Τι κάνει λοιπόν τα Έργα να ξεχωρίζουν; Εκτός από τις τυπικές σελίδες επεξεργασίας, μπορείτε να προσθέσετε τα δικά σας τοπικά αρχεία - που σημαίνει ότι μπορείτε να ολοκληρώσετε τις δικές σας δομές αρχείων όπως θα κάνατε σε ένα τοπικό περιβάλλον, δημιουργώντας ιστότοπους ή εφαρμογές πολλαπλών σελίδων σε ένα μοναδικό, αυτόνομο περιβάλλον χωρίς να χρειάζεται να ρυθμίσετε περίπλοκες διαμορφώσεις Gulp ή Webpack, για παράδειγμα.
Τα έργα CodePen διευκολύνουν τη μεταφορά και απόθεση των υπαρχόντων αρχείων σας (βεβαιωθείτε ότι τα έχετε αποθηκεύσει με ασφάλεια στο cloud storage) και θα διατηρήσει τακτοποιημένα τη δομή σας ή θα σας επιτρέψει να κάνετε αλλαγές από το πρόγραμμα επεξεργασίας. Και αν είστε χρήστης επιπέδου Pro, γίνεται λίγο πιο γλυκό: όταν είστε έτοιμοι να αναπτύξετε την εργασία σας, μπορείτε να αναπτύξετε το περιβάλλον της επιλογής σας με ένα μόνο κλικ.
06. Ενεργοποιήστε την τηλεόραση
Κρυμμένο ανάμεσα σε όλα τα ισχυρά, πρακτικά εργαλεία που προσφέρει το CodePen είναι μια ιδιότροπη απόσπαση προσοχής γνωστή ως CodePen TV. Το CodePen TV είναι απλώς μια τυχαιοποιημένη δειγματοληψία Picked Pens που περιστρέφεται σταδιακά με τρόπο που μοιάζει με προφύλαξη οθόνης. Ίσως δεν σας ενδιαφέρει να κοιτάξετε μια τυχαία επιλογή στυλό και θέλετε να επιδιορθώσετε το δικό σας «κανάλι» στυλό με γάτες - μπορείτε επίσης να ξεκινήσετε ένα τηλεοπτικό κανάλι CodePen με βάση οποιαδήποτε συλλογή CodePen (συμπεριλαμβανομένων των συλλογών που έχουν δημιουργηθεί από άλλους χρήστες). Και αν είστε χρήστης Mac, μπορείτε ακόμη και να χρησιμοποιήσετε το CodePen TV ως αυτόνομη εγγενή προφύλαξη οθόνης OSX!
07. Αγκαλιάστε το κοινοτικό πνεύμα
Οι κοινότητες κωδικοποίησης είναι γνωστές για την αποκλειστικότητα, δημιουργώντας πραγματικούς χώρους αναπαραγωγής για το σύνδρομο απατεώνων που μπορεί να αισθανθούν αδιαπέραστες και ανεπιθύμητες ακόμη και στους πιο έμπειρους σχεδιαστές και προγραμματιστές.
Εδώ ξεχωρίζει το CodePen - και γιατί το να γίνεις ενεργό μέλος της κοινότητας προσφέρει τέτοια οφέλη. Βλέπετε ένα στυλό που προκαλεί χαρά; Κόψτε αυτό το κουμπί καρδιάς και δείξτε σε έναν άλλο χρήστη λίγη αγάπη. Μπορείτε να προχωρήσετε και να κάνετε κλικ σε έως και τρεις φορές, αν σας αρέσει πραγματικά η δουλειά που έχουν κάνει.
Αισθάνεστε εμπνευσμένοι ή μήπως σκέφτεστε μια εναλλακτική λήψη της πένας ενός άλλου χρήστη; Με ένα μόνο κλικ, μπορείτε να πιείτε ένα στυλό και, στη συνέχεια, να μεταδώσετε το δικό σας δημιουργικό ακμάζει ή ακόμα και να το αναδιαμορφώσετε όπως θέλετε.
Εναλλακτικά, εάν δείτε μια καλύτερη προσέγγιση ή αν βρείτε κάποιο ελάττωμα στον κώδικα ενός χρήστη, σκεφτείτε να σχολιάσετε το στυλό με οποιεσδήποτε εποικοδομητικές προτάσεις που έχετε. Ενώ οι περισσότερες από τις ενότητες σχολίων σε ιστότοπους όπως αυτές είναι συνήθως μια ανεξέλεγκτη απόρριψη αρνητικότητας, η κοινότητα συνήθως κάνει εξαιρετική δουλειά αυτο-αστυνόμευσης, ενθαρρύνοντας τη θετικότητα και ενισχύοντας άλλους.
Ίσως ο καλύτερος τρόπος για να βυθιστείτε στην κοινότητα είναι να συμμετάσχετε στη συνομιλία του CodePen's Spectrum - ένα ανοιχτό φόρουμ για κοινή χρήση εργασιών, ζητώντας συμβουλές και δημιουργική συνεργασία. Ένα παράδειγμα είναι το Pass the Pen, μια ιδέα από τον χρήστη CodePen, Kristopher van Sant, όπου δημιουργείται ένα Pen και στη συνέχεια επαναλαμβάνεται από χρήστες που θα ήθελαν να συνεισφέρουν.
Το CodePen προσφέρει επίσης εβδομαδιαίες προτροπές πρόκλησης για να σας κρατήσει δημιουργικά αφοσιωμένους. Μπορεί να μην αισθάνεστε ότι η εργασία σας αξίζει να μοιραστείτε, αλλά μάλλον κάνετε λάθος. Πηγαίνετε στη συνομιλία του CodePen Spectrum και δείξτε τι εργάζεστε ανεξάρτητα από το πόσο μεγάλο ή μικρό. Θα εκπλαγείτε ευχάριστα πόσο υποστηρικτικός και χρήσιμος είναι ο μέσος χρήστης CodePen και πιθανώς να μάθετε μερικά διαφορετικά πράγματα στην πορεία.
08. Παρακολούθηση συναντήσεων IRL
Στον πυρήνα αυτού που κάνει το CodePen ένα ουσιαστικό εργαλείο για τους προγραμματιστές frontend είναι η κοινότητα. Αλλά μερικές φορές είναι χρήσιμο να απομακρύνετε τις δεξιότητές σας - και δεν υπάρχει καλύτερος τρόπος από το να φιλοξενήσετε ή να παρακολουθήσετε μια συνάντηση CodePen. Το CodePen θα σας προσφέρει ευγενικά ανταλλαγή για τους συμμετέχοντες, και με τη βοήθεια των χορηγών τους, μπορούν ακόμη και να σας βοηθήσουν να εξασφαλίσετε την επιστροφή χρημάτων για φαγητό και ποτό - η τοποθεσία και η ημερομηνία εξαρτώνται από εσάς. Οι συναντήσεις παρέχουν μια εξαιρετική ευκαιρία για σύζευξη προγράμματος, δημόσια δημοσίευση στρατηγικών ή ιδεών, ολοκλήρωση μιας ομαδικής πρόκλησης ή καλύτερα να γνωρίσετε τι παρακινεί τους συναδέλφους σας κωδικοποιητές. Ή ίσως είστε ακριβώς εκεί για τη δωρεάν πίτσα. Σας συγχωρούμε.
09. Αναβάθμιση σε Pro
Το βάθος της λειτουργικότητας που προσφέρει το CodePen είναι πραγματικά αξιοσημείωτο, ιδιαίτερα λαμβάνοντας υπόψη το βάρος χιλιάδων χρηστών που συγχωνεύουν ταυτόχρονα μερικές απίστευτα δημιουργικές εφαρμογές. Εκτός από το κουτί, είναι μια πολύ καλά στρογγυλεμένη εμπειρία - δηλαδή μέχρι να πάρετε ένα δάγκωμα από το CodePen Pro. Γιατί λοιπόν να κάνετε το άλμα; Παρόλο που διαθέτει πολλές χρήσιμες διευρυμένες δυνατότητες, ένα μόνο χαρακτηριστικό το αξίζει: τη δυνατότητα ιδιωτικής αποθήκευσης των στυλό.
Για χρήστες που δεν είναι επαγγελματίες, κάθε στυλό που δημιουργείται έχει ευρετήριο δημοσίου, κάτι που συχνά είναι καλό. Τι γίνεται όμως αν θέλω να ολοκληρώσω κάποια διεπαφή χρήστη για ένα πρόγραμμα πελάτη που δεν έχει ακόμη ξεκινήσει; Αυτό είναι όπου η δυνατότητα ιδιωτικής αποθήκευσης έρχεται σε εξαιρετικά βολικό - «ιδιωτικό» δεν σημαίνει κρυφό, μπορείτε ακόμα να μοιραστείτε απευθείας συνδέσμους με το στυλό σας με την εσωτερική σας ομάδα, για παράδειγμα. Αλλά το στυλό σας είναι αλλιώς αδιαίρετο. Ίσως χρειάζεστε απλώς ένα περιβάλλον για να δοκιμάσετε νέες ιδέες, ή έχετε περιορισμένο χρόνο για να εργαστείτε σε μια δημιουργία και σκοπεύετε να επιστρέψετε αργότερα - εδώ είναι που οι επιλογές απορρήτου κάνουν τη διαφορά.
Τι άλλο περιλαμβάνει λοιπόν ένας λογαριασμός Pro; Φιλοξενία περιουσιακών στοιχείων! Μέσα σε όριο 2Mb ανά αρχείο, το CodePen θα φιλοξενήσει τα περιουσιακά στοιχεία της πένας σας, πράγμα που σημαίνει ότι δεν χρειάζεται να ανεβάσετε εικόνες ή σενάρια σε έναν εξωτερικό κεντρικό υπολογιστή και επιτρέποντας μεγαλύτερη ευελιξία όταν εργάζεστε με πλαίσια με αυστηρές προδιαγραφές cross-origin.
Οι λογαριασμοί Pro προσφέρουν πρόσβαση στη Ζωντανή προβολή - επιτρέποντας στους χρήστες να δουν τις αλλαγές τους που φορτώθηκαν εν κινήσει σε πολλά παράθυρα - Λειτουργία Collab - η οποία επιτρέπει τον προγραμματισμό ζεύγους ζωνών και περιλαμβάνει μια εύχρηστη επιλογή συνομιλίας - και τη λειτουργία καθηγητή, η οποία θα μεταδίδει τις ενημερώσεις κώδικα παράλληλα με τη ζωντανή προεπισκόπηση του Pen σε πραγματικό χρόνο, ιδανικό τόσο για εκπαιδευτές κώδικα όσο και για μαζοχιστές συνεδρίων. Το CodePen Pro προσφέρει επίσης τη δυνατότητα επεξεργασίας της δικής σας σελίδας προφίλ, συμπεριλαμβανομένων των προσαρμοσμένων CSS και JS, και μιας προαιρετικής ενσωμάτωσης στυλό ως κεφαλίδας σελίδας - επειδή γνωρίζοντας το κοινό τους σημαίνει ότι γνωρίζουμε ότι οι προγραμματιστές frontend ζητούν να προσαρμόσουν, να προσαρμόσουν, να προσαρμόσουν.
10. Βουτήξτε στο πηγάδι της έμπνευσης
Ένα νέο στυλό είναι σαν ένα κενό καμβά, αλλά μερικές φορές το δημιουργικό μπλοκ θα χτυπήσει, και αυτός ο καμβάς θα σας πάρει ένα μακρύ βλέμμα Νίτσε. Αισθάνεστε χωρίς έμπνευση; Εξετάστε την τελευταία Πρόκληση CodePen ή εγγραφείτε σε μια ομάδα πρόκλησης κωδικοποίησης όπως το Codevember ή το DailyUI. Ίσως κατευθυνθείτε προς το Dribbble και αναδημιουργήστε (ή ίσως ζωντανεύετε) μια εικόνα στο CSS - απλώς φροντίστε να δώσετε πίστωση όπου πρέπει (προσθέτοντας backlinks στις δημόσιες λεπτομέρειες της πένας σας είναι η προτιμώμενη μέθοδος.)
Αυτά μπορεί να μοιάζουν με ασκήσεις ματαιότητας και όλοι έχουμε μυστικό για επιχειρήματα κατά της κωδικοποίησης στον ελεύθερο χρόνο κάποιου, αλλά υπάρχει μια άλλη ελάχιστα αναγνωρισμένη (δημόσια) δημιουργική κωδικοποίηση στο CodePen: οι πιθανοί εργοδότες και οι στρατολογητές αφιερώνουν χρόνο στην περιήγηση στον ιστότοπο για άτομα που εμφανίζουν δημιουργική φιλοδοξία. Χτίσατε κάποια πράγματα για τα οποία είστε ιδιαίτερα περήφανοι; Φροντίστε να τα συμπεριλάβετε στο χαρτοφυλάκιό σας.
Το CodePen διευκολύνει την ενσωμάτωση, με πολλές επιλογές εμφάνισης και χρησιμοποιώντας τη νέα δυνατότητα ενσωμάτωσης προσθήκης, μπορείτε να προσθέσετε ένα παράθυρο προγράμματος επεξεργασίας CodePen με κώδικα απόδοσης απευθείας από τη βάση κώδικα του ιστότοπου χαρτοφυλακίου σας.
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο δημιουργικό περιοδικό web design Σχεδιαστής ιστοσελίδων.Αγορά τεύχος 290.
