CodePen: Built, Test, Share και Discover HTML, CSS και JavaScript
Μία πρόκληση με ένα σύστημα διαχείρισης περιεχομένου είναι ο έλεγχος και η παραγωγή σεναρίων εργαλείων. Αν και αυτό δεν είναι απαίτηση για τους περισσότερους εκδότες, ως έκδοση τεχνολογίας, μου αρέσει να μοιράζομαι σενάρια εργασίας από καιρό σε καιρό για να βοηθήσω άλλους ανθρώπους. Έχω μοιραστεί τον τρόπο χρήσης JavaScript για να ελέγξετε την ισχύ του κωδικού πρόσβασης, πως να ελέγξτε τη σύνταξη της διεύθυνσης email με τις Κανονικές εκφράσεις (Ρετζέξκαι πρόσφατα το πρόσθεσε αριθμομηχανή για την πρόβλεψη των επιπτώσεων των διαδικτυακών κριτικών στις πωλήσεις. Ελπίζω να προσθέσω δεκάδες εργαλεία στον ιστότοπο, αλλά το WordPress δεν συμβάλλει ακριβώς στη δημοσίευση έτσι ... είναι ένα σύστημα περιεχομένου, όχι ένα σύστημα ανάπτυξης.
Έτσι, για να λειτουργήσω τα μικρά μου σενάρια, μου αρέσει να χρησιμοποιώ CodePen. Το CodePen είναι ένα τακτοποιημένο εργαλείο με έναν πίνακα HTML, έναν πίνακα CSS, έναν πίνακα JavaScript, μια κονσόλα και μια δημοσιευμένη έκδοση του κώδικα που προκύπτει. Κάθε πλαίσιο έχει πληροφορίες όταν τοποθετείτε το δείκτη του ποντικιού πάνω από στοιχεία, ώστε να καταλάβετε τι είναι δυνατό, καθώς και χρωματική κωδικοποίηση των HTML, CSS και JS που θα σας βοηθήσουν να επεξεργαστείτε και να γράψετε ευκολότερα.
Το CodePen είναι ένα περιβάλλον κοινωνικής ανάπτυξης. Στην καρδιά του, σας επιτρέπει να γράψετε κώδικα στο πρόγραμμα περιήγησης και να δείτε τα αποτελέσματα του καθώς δημιουργείτε. Ένας χρήσιμος και απελευθερωτικός διαδικτυακός επεξεργαστής κώδικα για προγραμματιστές οποιασδήποτε ικανότητας, και ιδιαίτερα εξουσιοδοτημένος για άτομα που μαθαίνουν να κωδικοποιούν. Το CodePen εστιάζει κυρίως σε γλώσσες front-end όπως HTML, CSS, JavaScript και σύνταξη προεπεξεργασίας που μετατρέπονται σε αυτά τα πράγματα.
Σχετικά με το CodePen
Με το CodePen, μπόρεσα να κάνω όλη την απαραίτητη δουλειά δημοσιεύστε την αριθμομηχανή Έχω ενσωματωθεί στον ιστότοπο. Οι περισσότερες δημιουργίες στο CodePen είναι δημόσιες και ανοιχτού κώδικα. Είναι ζωντανά πράγματα με τα οποία μπορούν να αλληλεπιδράσουν άλλοι άνθρωποι και κοινότητες, από μια απλή καρδιά, να αφήσουν ένα σχόλιο, να διαμορφώσουν και να αλλάξουν για τις δικές τους ανάγκες.
Με το CodePen, μπορείτε να αλλάξετε την προβολή σας εάν θέλετε τα παράθυρα να βρίσκονται στα αριστερά, δεξιά ή κάτω καθώς εργάζεστε… ή να προβάλετε τον HTML σε μια νέα καρτέλα. Η προβολή πλάι-πλάι λειτουργεί εξαιρετικά καλά για να ελέγξετε τις ρυθμίσεις απόκρισης, καθώς μπορείτε να προσαρμόσετε το μέγεθος του παραθύρου με δυνατότητα προβολής.
Μπορείτε να οργανώσετε κάθε σενάριο εργασίας σας σε στυλό, να τα συνδυάσετε σε έργα (πρόγραμμα επεξεργασίας πολλαπλών αρχείων) ή ακόμη και να δημιουργήσετε συλλογές. Είναι βασικά ένας ιστότοπος χαρτοφυλακίου εργασίας για κώδικα front-end, όπου μπορείτε να ακολουθήσετε άλλους συγγραφείς, να διασκεδάσετε άλλα κοινόχρηστα έργα για να τα τροποποιήσετε και ακόμη και να μάθετε πώς να κάνετε διασκεδαστικά πράγματα μέσω προκλήσεων.
Μπορείτε να αποθηκεύσετε ως GitHub Gist, να κάνετε εξαγωγή σε αρχείο zip και ακόμη και embed το στυλό σε ένα άρθρο σαν αυτό:
Δείτε το στυλό Προβλεπόμενος αντίκτυπος στις πωλήσεις των διαδικτυακών κριτικών by Douglas Karr (@douglaskarr) Για CodePen.
Ένας από τους περιορισμούς του επεξεργαστή Pen είναι ο καθαρός όγκος του κώδικα. Μπορεί να μην αντιμετωπίσετε ποτέ αυτό το ζήτημα, καθώς ο συντάκτης θα πρέπει να είναι καλός με εκατοντάδες ή και χιλιάδες γραμμές κώδικα. Αλλά όταν αρχίσουν να χτυπούν 5,000 - 10,000 ή περισσότερες γραμμές κώδικα, θα δείτε ότι ο συντάκτης αρχίζει να αποτυγχάνει. Ωστόσο, μπορείτε να προσθέσετε εξωτερικές αναφορές σε φύλλα στυλ ή JavaScript που φιλοξενούνται αλλού!
Σας ενθαρρύνω να εγγραφείτε. Θα εγγραφείτε στο εβδομαδιαίο ηλεκτρονικό ταχυδρομείο τους και μπορείτε επίσης να προσθέσετε τη ροή στη ροή RSS σας, ώστε να μπορείτε να δείτε πρόσφατα δημοσιευμένα στυλό. Και, εάν αρχίσετε να ψάχνετε ή να περιηγηθείτε στα δημόσια στυλό εκεί, θα βρείτε μερικά απίστευτα έργα… οι χρήστες είναι αρκετά ταλαντούχοι!
Ακολουθώ Douglas Karr στο Codepen
Η πληρωμένη έκδοση, CodePen Pro, προσφέρει έναν τόνο πρόσθετων δυνατοτήτων για βελτιωμένη λειτουργικότητα ή ομάδες - συμπεριλαμβανομένων της συνεργασίας, των διαδικασιών, της φιλοξενίας στοιχείων, των ιδιωτικών προβολών, ακόμη και των έργων που έχουν αναπτυχθεί με τον δικό σας τομέα ή υποτομέα. Και, φυσικά, το CodePen παρέχει ένα υπέροχο αποθετήριο με την ενσωμάτωση Github όπου μπορεί να λειτουργήσει ολόκληρη η ομάδα σας. Εάν θέλετε απλώς να δοκιμάσετε έναν απλό κώδικα όπως είμαι, το CodePen είναι ένα πολύτιμο εργαλείο.
