10 Συμβουλές Codepen για αρχάριους

Codepen είναι ένα εξαιρετικά εύκολο και δημοφιλές site να στυλό κάτω από ένα σύνθετο συνδυασμό συνδυασμών κωδικών αμέσως. Εάν δεν ξέρετε τι είναι το Codepen ή δεν έχετε ακούσει για αυτό πριν, είναι βασικά ένα ηλεκτρονική παιδική χαρά του πηγαίου κώδικα (ας το καλέσουμε OSCP για τον ήχο του nerdier) για τους τρεις μουσκέτες της κωδικοποίησης μπροστινού τέλους. HTML, CSS και JavaScript.

Υπάρχουν και άλλα παρόμοια OSCPs όπως JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen είναι σίγουρα ένα από τα πιο γνωστά μεταξύ των προγραμματιστών front-end. Χωρίς άλλο λάθος, ας πηδήσουμε δεξιά σε μερικούς βασικές και χρήσιμες συμβουλές για τη χρήση του Codepen.

1. Εκτέλεση κουμπιού

Αν δεν είστε οπαδός του τρόπου με τον οποίο η έξοδος του κώδικα σας στο Codepen διατηρείται αναζωογονητική ενώ πληκτρολογείτε, μπορείτε αποχωρήστε από το “Προεπισκόπηση αυτόματης ενημέρωσης” επιλογή, και αντί να πάρετε ένα κουμπί Run. Όταν κάνετε κλικ σε αυτό, θα μπορείτε να δείτε και να ενημερώσετε την έξοδο του κώδικα σας όποτε θέλετε.

Αυτή είναι επίσης μια εξαιρετική επιλογή αν εργάζεστε με έναν κώδικα του οποίου το αποτέλεσμα είναι περνάει πολλές αλλαγές στο layout, και επαναλαμβάνει κάθε φορά που ενημερώνεται, με αποτέλεσμα βραδύτητα.

2. Αύξηση / μείωση αριθμού

Αυξήστε ή μειώστε τους αριθμούς στον κωδικό σας στο Codepen χωρίς να πληκτρολογείτε τους νέους αριθμούς. Το μόνο που έχετε να κάνετε είναι να χρησιμοποιήσετε τον συνδυασμό πλήκτρων Ctrl / Cmd και Πάνω και κάτω βέλη.

3. Πολλαπλοί Δρομείς

Μπορείτε να βάλετε δρομείς στο πολλαπλά σημεία στον πηγαίο κώδικα, στη συνέχεια πληκτρολογήστε ή επεξεργαστείτε όλα αυτά τα σημεία Την ίδια στιγμή. Αυτό λειτουργεί μόνο αν εισάγετε τις ίδιες πληροφορίες και μειώνετε την ανάγκη για επικολλήσεις αντιγράφων. Απλά κρατήστε πατημένο το πλήκτρο Ctrl / Cmd ενώ κάνετε κλικ σε αυτά τα πολλαπλά σημεία.

4. Διαφορετικά μηνύματα χρωματιστής κονσόλας

ο Κονσόλα Το αντικείμενο JavaScript έχει μερικές ακόμη μεθόδους εκτός κούτσουρο() για να σας επιτρέψει να εκτυπώστε τα πράγματα στην κονσόλα ιστού.

Μπορείτε να χρησιμοποιήσετε το info (), προειδοποιώ() και λάθος() μέθοδοι για πληροφορίες, προειδοποίηση και λάθος. Συνήθως, οι κονσόλες ιστού χρωματίζουν αυτά τα μηνύματα κατά τύπο τύπου ή θα εμφανίσουν ένα κατάλληλο εικονίδιο δίπλα τους (όπως μια προειδοποιητική πινακίδα για το προειδοποιητικό μήνυμα) για ευκολότερη αναγνώριση.

Το Codepen έχει τη δική του κονσόλα που μπορείτε να ανοίξετε κάνοντας κλικ στο κουμπί Κονσόλα στην κάτω αριστερή γωνία. Είναι ιδανικό για γρήγορο έλεγχο των μηνυμάτων της κονσόλας χωρίς να χρειάζεται να ανοίξετε την κονσόλα του προγράμματος περιήγησης. Αυτή η κονσόλα διακρίνει τους διαφορετικούς τύπους μηνυμάτων κονσόλας με διαφορετικά χρώματα φόντου.

5. Εξαγωγή

Αφού αποθηκευτεί, α στυλό (μια μοναδική μονάδα Codepen) μπορεί να εξαχθεί ως αρχείο ZIP με όλα του σε κώδικα HTML, CSS και JS σε αρχεία. Υπάρχει επίσης μια επιλογή για να αποθηκεύσετε το στυλό ως ουσία Github (ένα αποθετήριο Git). Μπορείτε να βρείτε το κουμπί Εξαγωγή στην κάτω δεξιά γωνία κάθε μαρκαδόρου.

6. Εύρεση & Αντικατάσταση

Εύρεση & Αντικατάσταση - μια ουσιαστική λειτουργία για τους ανθρώπους που τείνουν να μετονομάζουν τα ονόματα των μεταβλητών τους κάθε τόσο. Ctrl / Cmd + Shift + F είναι το σύνθετο πλήκτρο για το άνοιξε το “Εύρεση & Αντικατάσταση” διαλόγου.

7. Emmet Tab Trigger

Γνωρίζετε για την ενεργοποίηση της καρτέλας για την κωδικοποίηση Emmet; Το Emmet είναι ένα εργαλείο παραγωγικότητας για τους προγραμματιστές του front-end που σας επιτρέπει να κάνετε τύπου κώδικα σκελετού που αργότερα επεκτείνεται. Για να το κάνετε αυτό στο Codepen, απλά πληκτρολογήστε την κατάλληλη συντομογραφία στον επεξεργαστή, πατήστε το πλήκτρο Tab και εμφανίζεται αμέσως ο πλήρης κωδικός. Διαθέσιμο μόνο για HTML στο Codepen.

8. Πάρτε αρχεία μεμονωμένων κωδικών

Αν χρησιμοποιείτε την επιλογή Εξαγωγή, όπως προαναφέρθηκε, θα λάβετε και τα τρία αρχεία (HTML, CSS και JS) της γραφίδας σας. Αλλά αν σας ενδιαφέρει μόνο ένα ή δύο από αυτά τα αρχεία, και θέλετε να τα κατεβάσετε μεμονωμένα, υπάρχει και μια επιλογή για αυτό στο Codepen.

Αφού συνδεθείτε στο Codepen, μεταβείτε στη μάνδρα σας και κάντε κλικ στο κουμπί Αλλαγή προβολής στην επάνω δεξιά γωνία. Στο κάτω μέρος της αναπτυσσόμενης λίστας, θα δείτε το απευθείας συνδέσεις λήψης για τα μεμονωμένα αρχεία.

9. Ελέγξτε τις μεταβλητές JavaScript

Καθώς η κονσόλα JavaScript του Codepen συνδέεται με το JavaScript που έχει αποθηκευτεί στη μάνδρα σας, μπορείτε επίσης να το χρησιμοποιήσετε για να δοκιμάσετε γρήγορα το JavaScript. Αυτό το χαρακτηριστικό έρχεται ιδιαίτερα χρήσιμο Έλεγχος μεταβλητών JS, όπως εσείς δεν χρειάζεται να εισάγετε επιπλέον μηνύματα κονσόλας ή συναγερμού στον αρχικό κώδικα αποκλειστικά για σκοπούς δοκιμής.

10. Περιστρέψτε το στυλό στο πρότυπο

Εάν έχετε την τάση να ξεκινήσετε τα περισσότερα από τα στυλό σας με το ίδιο σύνολο κωδικών, μπορείτε να χρησιμοποιήσετε ένα πρότυπο για να εκτός από αυτούς τους επαναλαμβανόμενους κώδικες. Για να μετατρέψετε ένα στυλό σε πρότυπο, επιλέξτε την επιλογή Πρότυπο στο μενού "Ρυθμίσεις". Όταν δημιουργείτε αργότερα ένα νέο στυλό, μπορείτε ξεκινήστε με το αποθηκευμένο πρότυπο κάνοντας κλικ στο κάτω βέλος στη δεξιά πλευρά του κουμπιού "Νέα Πένα". Θα ανοίξει μια αναπτυσσόμενη λίστα με όλα τα αποθηκευμένα πρότυπα για να διαλέξετε.