Ο συνιδρυτής Alex Vazquez μοιράζεται τον τρόπο με τον οποίο η παιδική χαρά του CodePen βοηθά τις ομάδες Frontend Dev να δημιουργήσουν, να μοιραστούν και να εντοπίσουν κώδικα

TL; Δρ: Όταν ξεκίνησε το CodePen, οι τρεις φίλοι του πίστευαν ότι το πλευρικό τους έργο δεν θα διαρκούσε περισσότερο από μερικές εβδομάδες. Τώρα, ο διαδικτυακός επεξεργαστής κώδικα εμφανίζει ζωντανές προεπισκοπήσεις HTML, CSS και JavaScript για να δώσει στους προγραμματιστές έναν αποκριτικό, χωρίς άγχος χώρο για να παίζουν με νέες τεχνολογίες, να μοιράζονται τις τελευταίες δημιουργίες τους και να συνεργάζονται με άλλους κωδικοποιητές. Μιλήσαμε με τον συνιδρυτή Alex Vazquez για το πώς το πάθος της ομάδας για το σχεδιασμό, την ανάπτυξη και τις κουλτούρες εκκίνησης έχει εξελιχθεί σε μια πλατφόρμα πλήρους εξυπηρέτησης που συνεχίζει να προσθέτει χαρακτηριστικά ως απάντηση στα σχόλια μιας αφοσιωμένης κοινότητας χρηστών..


Κανείς δεν προοριζόταν για CodePen να είναι επιχείρηση. Ο Alex Vazquez, ο Tim Sabat και ο Chris Coyier συναντήθηκαν μια μέρα για να αρχίσουν να δημιουργούν έναν ιστότοπο – ή όπως το λέει ο Alex, για να “κάνουν ό, τι κάνουν οι σπασίκλες όταν συναντιούνται”. Σκέφτηκε ότι το έργο θα διαρκέσει ίσως μια εβδομάδα, ίσως ένα μήνα.

Οι τρεις φίλοι ήταν οι πρώτοι προγραμματιστές και σχεδιαστές που προσλήφθηκαν στο Wufoo, ένας δημιουργός φόρμας HTML που πωλήθηκε στο SurveyMonkey το 2011.

«Το SurveyMonkey ήταν μια υπέροχη εταιρεία, αλλά ξέραμε επίσης πόσο μας άρεσε να δουλεύουμε σε μια μικρή εταιρεία, πόσο μας άρεσε να έχουμε τον έλεγχο της ανάπτυξης πραγμάτων που πραγματικά μας ενδιαφερόταν και να είμαστε σε θέση να επιλέξουμε τον τρόπο που θα φτιάξετε μια εταιρεία. “

Ο Chris Coyier, ο άνθρωπος πίσω από το CSS-Tricks, ήθελε να δημιουργήσει έναν φιλικό προς τον χρήστη τρόπο για τους προγραμματιστές frontend να επιδείξουν τον κώδικα τους. Το ζωντανό περιβάλλον κωδικοποίησης του CodePen διαθέτει έναν επεξεργαστή κώδικα στο πρόγραμμα περιήγησης στο οποίο οι χρήστες δημιουργούν έργα, που ονομάζονται Pens. Από εκεί, οι προγραμματιστές μπορούν να συνεργαστούν, να αξιολογήσουν και να βρουν έμπνευση από άλλα μέλη.

Οι συνιδρυτές πρόσφεραν αρχικά εργαλεία CodePen δωρεάν, αλλά αργά εξελίχθηκαν στο τρέχον μοντέλο freemium. Οι λειτουργίες Pro περιλαμβάνουν δοκιμές μεταξύ προγραμμάτων περιήγησης, φιλοξενία στοιχείων και αυξημένες δυνατότητες συνεργασίας. Σύμφωνα με τον Alex, η ομάδα CodePen διατηρεί μια ισχυρή ισορροπία μεταξύ των επί πληρωμή και δωρεάν λειτουργιών.

«Το CodePen είναι αρκετά μοναδικό, καθώς δεν είναι μόνο οι επαγγελματίες χρήστες που μας κρατούν επιπλέουν», είπε. «Είναι η κοινότητα στο σύνολό της. Οι χρήστες μας δημιουργούν το 99,9% του περιεχομένου στον ιστότοπό μας και γι ‘αυτό οι χρήστες έρχονται στο CodePen. Απλώς προσπαθούμε να είμαστε υπεύθυνοι διαχειριστές της κοινότητας και του περιεχομένου τους. “

Το CodePen παρέχει όλα τα εργαλεία που χρειάζεστε για να δημιουργήσετε, να μοιραστείτε και να μάθετε

Ο Alex καλεί με ευχαρίστηση την αναζήτηση του CodePen για να καλύψει τις ανάγκες κάθε χρήστη «περίεργη ευλογία και κατάρα». Περιστασιακά αισθάνεται ζηλότυπος για έναν φίλο του οποίου τα προς το ζην επικεντρώνονται στον τρόπο με τον οποίο ένα διαδικτυακό άρθρο μετακινείται πάνω-κάτω στο Medium. Ωστόσο, η ευελιξία είναι το επίτευγμα της CodePen.

«Πάντα εξετάζαμε πώς χρησιμοποιούν οι άνθρωποι το CodePen και πώς μπορούμε να το υποστηρίξουμε ή να το κάνουμε μια καλύτερη εμπειρία για αυτούς», δήλωσε ο Alex. Από τη συνεργασία έως τη φιλοξενία στοιχείων, κάθε επί πληρωμή δυνατότητα έχει μια ελαφριά, δωρεάν έκδοση για την υπόλοιπη κοινότητα.

«Διατηρήσαμε αυτήν την ισορροπία εργασίας σε πράγματα που θα λατρέψει η κοινότητα, αλλά, ταυτόχρονα, δημιουργώντας αρκετά χαρακτηριστικά Pro για να συνεχίσει να αναπτύσσει την εταιρεία», είπε.

1. Καθαρή διεπαφή επεξεργασίας γεμάτη με επιλογές για HTML, CSS και JavaScript

Το πρόγραμμα επεξεργασίας που βασίζεται στο πρόγραμμα περιήγησης CodePen παρέχει ρυθμιζόμενες περιοχές για τον κώδικα και την προεπισκόπηση σας. Η κωδικοποίηση είναι πολύ άνετη, δεδομένης της σύνταξης της σύνταξης και του Emmet. Εκτιμούμε επίσης σοβαρά το κουμπί Tidy – έναν τρόπο με ένα κλικ για να καθαρίσετε τις εσοχές και τη μορφοποίησή σας.

Γραφικό των δυνατοτήτων του επεξεργαστή CodePen

Το CodePen δίνει στους προγραμματιστές frontend έναν χώρο χωρίς άγχος για τη σύνταξη και προεπισκόπηση κώδικα.

Όταν είστε έτοιμοι να μοιραστείτε το στυλό σας, το πρόγραμμα επεξεργασίας παρέχει έναν κώδικα ενσωμάτωσης αντιγραφής και επικόλλησης, συνδέσμους για κοινή χρήση σε μέσα κοινωνικής δικτύωσης ή μέσω μηνύματος κειμένου, καθώς και εξαγωγή σε αρχείο zip.

Άλλοι χρήστες του CodePen μπορούν να ανακαλύψουν την εργασία σας και να επιλέξουν να διακλάδουν τον κώδικα ή να τον δείξουν την εκτίμησή τους. Τα μέλη μπορούν να ακολουθήσουν το ένα το άλλο και να επιμεληθούν τις πένες σε συλλογές για να βρουν πιο εύκολα χρήσιμες πένες.

2. Απλή πλατφόρμα Blogging σας επιτρέπει να γράφετε για τον κώδικα και να μοιράζεστε τις πένες σας

Τα πρώτα εργαλεία που οι συνιδρυτές πρόσθεσαν στη διεπαφή CodePen απλοποίησαν τον τρόπο με τον οποίο οι προγραμματιστές θα μπορούσαν να μοιράζονται το στυλό τους.

«Είδαμε ότι οι άνθρωποι γράφουν αναρτήσεις ιστολογίου και ενσωματώνουν συνεχώς το στυλό, οπότε ένα από τα πρώτα πράγματα που κάναμε ήταν να δημιουργήσουμε έναν πραγματικά απλό τρόπο για να ενσωματώσετε ένα στυλό μέσα σε οποιονδήποτε ιστότοπο που εκτελείτε», δήλωσε ο Alex. «Ταυτόχρονα, δεν θέλουν όλοι να δημιουργήσουν το WordPress. Μερικοί άνθρωποι θέλουν απλώς να γράψουν ένα γρήγορο άρθρο και να επιδείξουν ένα στυλό. “

Φυσικά, οι συνιδρυτές προσέθεσαν μια απογυμνωμένη διεπαφή blogging, η οποία περιλαμβάνεται σε κάθε λογαριασμό CodePen. Το πρόγραμμα επεξεργασίας ιστολογίου υποστηρίζει Markdown, σύνταξη επισήμανσης και προσαρμοσμένο CSS για μεμονωμένες αναρτήσεις.

3. Η λειτουργία παρουσίασης μεγιστοποιεί το χώρο της οθόνης για να εμφανίζει στυλό με έναν προβολέα

Το CodePen παρέχει αρκετούς διαφορετικούς τρόπους προβολής για τους διάφορους τρόπους κοινής χρήσης του στυλό σας: Η λειτουργία Collab επιτρέπει σε πολλά άτομα να πληκτρολογούν και να επεξεργάζονται κώδικα ταυτόχρονα, ενώ η λειτουργία Professor επιτρέπει στους μαθητές να παρακολουθούν την εργασία του εκπαιδευτή τους καθώς πληκτρολογούν.

Η αγαπημένη του Άλεξ, η Λειτουργία παρουσίασης προσανατολίζεται σε επιδείξεις συνεδρίων και δείχνει Στυλό σε έναν προβολέα.

Κολάζ της λειτουργίας παρουσίασης CodePen

Οι επιδείξεις κωδικοποίησης είναι πιο εύκολο για τους συμμετέχοντες να αλληλεπιδράσουν μέσω της λειτουργίας παρουσίασης του CodePen.

«Πολλές φορές, θα πας σε συνέδριο και για να τρέξεις το παράδειγμα κάποιου, πρέπει να κατεβάσεις τα αποθετήρια και να εγκαταστήσεις τις εξαρτήσεις για να μπορέσεις να παίξεις με αυτό», είπε ο Alex. “Ναι, αυτό είναι ένα βήμα 10 λεπτών που μπορείτε να κάνετε επειδή είστε εκπληκτικός προγραμματιστής, αλλά δεν θα ήταν φοβερό αν μπορούσατε να το κάνετε σε λίγα δευτερόλεπτα;”

Οι χρήστες μπορούν να μοιράζονται το στυλό με έναν συντομευμένο σύνδεσμο και να αλλάζουν το μέγεθος του προγράμματος επεξεργασίας και προεπισκόπησης. Έξυπνα, το CodePen κατάργησε όλα εκτός από τα βασικά χαρακτηριστικά, ώστε η πλατφόρμα να φορτώνεται γρήγορα – ακόμη και χρησιμοποιώντας το τυπικό φοβερό wifi σε συνέδρια.

Τα χαρακτηριστικά που έρχονται το 2017 κυμαίνονται από πρακτικό έως μυστηριώδες

Το CodePen συνεχίζει να προσθέτει και να βελτιώνει τις δυνατότητες, κυρίως λόγω των σχολίων των χρηστών. Παρόλο που τα μέλη του CodePen οδηγούν πολλές βελτιώσεις στην πλατφόρμα, ο Alex είπε ότι η ομάδα προτιμά να διατηρεί μεγάλες αλλαγές κοντά στο γιλέκο έως ότου είναι έτοιμοι να ζήσουν ζωντανά.

«Δεν θέλουμε να πούμε στους ανθρώπους ότι έχουμε κάτι έως ότου ξέρουμε ότι μπορούμε να το απελευθερώσουμε και να τους εντυπωσιάσουμε πραγματικά», είπε. “Δεν είμαστε σε κατάσταση μυστικότητας. Δεν πρόκειται να απογοητεύσουμε την κοινότητά μας. “

Το πιο απαιτούμενο εργαλείο είναι τελικά στο δρόμο μετά από χρόνια ανάπτυξης

Μία τέτοια ενημέρωση έρχεται αργότερα φέτος είναι ο λόγος που ο Alex εντάχθηκε στο CodePen – εκτός από το ότι πίστευε ότι η ομάδα θα μπορούσε να το προσφέρει το πρώτο έτος της πλατφόρμας.

Τέσσερα χρόνια αργότερα, ο CodePen περιορίζει την ικανότητα «δημιουργίας MiniPens μέσα στο Pens, για να το πει με έναν πολύ ασαφή τρόπο», είπε ο Alex. Η νέα δυνατότητα θα επιτρέψει στους προγραμματιστές να εμβαθύνουν βαθύτερα στο Pens χωρίς την πολυπλοκότητα του ελέγχου έκδοσης ή των τοπικών περιβαλλόντων.

“Θα σας επιτρέψουμε να δημιουργήσετε πιο περίπλοκες λύσεις, αλλά προσπαθούμε να διατηρήσουμε πιστή την καρδιά του CodePen”, είπε, αναφερόμενος στην απλή διεπαφή και τα άμεσα σχόλια. “Νομίζω ότι αν χρησιμοποιείτε το CodePen, θα είναι αρκετά προφανές τι θα θέλατε να κάνετε.”

Η Διαδικασία Πληρωμής Εκ νέου Διατηρεί την Εταιρεία σε λειτουργία

Στο άλλο άκρο του φάσματος των ενημερώσεων, ο Άλεξ ήταν χαρούμενος που μας έδωσε τη «λιγότερο συναρπαστική σέσουλα που έχετε ακούσει ποτέ». Πρόσφατα μετατόπισε τις αναπτυξιακές του προσπάθειες για την ανοικοδόμηση της διαδικασίας πληρωμής και των ενοποιήσεων του CodePen με τους Stripe και Braintree.

«Είναι πολύ βαρετό, αλλά είναι πολύ απαραίτητο να συνεχίσουμε να λειτουργούμε ως εταιρεία», είπε. “Το αρχικό μας χτύπημα σε αυτό ήταν κάτι που μας έκανε να ξεκινήσουμε και να το κάνουμε με τα χρόνια.”

Η απομακρυσμένη ομάδα του CodePen αντιμετωπίζει τη διαχείριση έργου με πάθος

Ο Alex, ο Tim και ο Chris ανέπτυξαν αργά την ομάδα του CodePen σε οκτώ υπαλλήλους τα τελευταία πέντε χρόνια, με όλους να εργάζονται εξ αποστάσεως.

«Δεν έχουμε καν δύο άτομα στην ίδια πολιτεία, πολύ λιγότερο στην ίδια πόλη», είπε ο Άλεξ. Τους τελευταίους μήνες, η ομάδα έχει επισημοποιήσει τις επικοινωνίες σε σπριντ διαχείρισης έργων. Οι άτυπες συζητήσεις εξακολουθούν να συμβαίνουν στο Slack, αλλά παρακολουθούν ζητήματα και χρόνο στο GitLab.

Ομαδική εικόνα της ομάδας CodePen

Ως απομακρυσμένη ομάδα, οι υπάλληλοι του CodePen ήταν σίγουροι ότι τραβούσαν μια φωτογραφία τη μόνη φορά που συναντήθηκαν αυτοπροσώπως.

«Ήμασταν απίστευτα αναποτελεσματικοί, απλώς αναλάβαμε έργα και ξεχνάμε ότι κάποιος άλλος το είχε ήδη εργαστεί», είπε ο Alex. «Συνειδητοποιήσαμε όλο αυτό το πράγμα διαχείρισης έργου που είχαμε αποφύγει σε κάθε μεγάλη εταιρεία για την οποία εργαζόμασταν ποτέ είχε σκοπό. Δεν είμαστε εξαιρετικά επίσημοι, αλλά θέλουμε να προσθέσουμε το μικρότερο ποσό διαχείρισης έργων που μας κάνει αποτελεσματικούς. “

Η ομάδα CodePen καταγράφει ένα podcast που δίνει μια συναρπαστική και διαφανή εμφάνιση στη λειτουργία μιας μικρής επιχείρησης λογισμικού ιστού.

“Είναι προφανές γιατί έχουμε δημιουργήσει έναν ιστότοπο για προγραμματιστές για να επιδείξουν τη δουλειά τους, αλλά όλοι στο CodePen αγαπούν πραγματικά την τεχνολογία και τη θετική κοινότητα”, δήλωσε ο Alex. «Η ανάπτυξη είναι δική μας δουλειά, αλλά είναι επίσης κάτι που απολαύσαμε εδώ και πολύ καιρό».

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me