CodePen: Δοκίμασε και πειραματίσου στις γνώσεις σου on line

CodePen

Το CodePen είναι μια διαδικτυακή κοινότητα για τη δοκιμή και την προβολή αποσπασμάτων κώδικα HTML , CSS και JavaScript .

Λειτουργεί ως ηλεκτρονικός επεξεργαστής κώδικα και μαθησιακό περιβάλλον ανοιχτού κώδικα, όπου οι προγραμματιστές μπορούν να δημιουργήσουν αποσπάσματα κώδικα, δημιουργικά ονομαζόμενα “στυλό”, και να τα δοκιμάσουν. Δημιουργήθηκε το 2012 από τους προγραμματιστές πλήρους στοίβας Alex Vazquez, τον Tim Sabat και τον σχεδιαστή front-end Chris Coyier.

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

Τι μπορείτε να κάνετε με το CodePen

Μπορείτε να σχεδιάσετε και να πειραματιστείτε με ένα μικρό κομμάτι, και όταν είστε χαρούμενοι, θα το φέρετε σε μεγαλύτερη εφαρμογή.

Αυτό που ίσως δεν είναι άμεσα προφανές είναι ότι για να κάνετε την απομονωμένη ανάπτυξη πολύ πιο εύκολη και ταχύτερη για όλους, το CodePen σας δίνει άμεση πρόσβαση σε πολλούς μεγάλους προεπεξεργαστές. Υπάρχουν τέσσερις διαφορετικοί προεπεξεργαστές HTML που μπορείτε να χρησιμοποιήσετε κατά τη δημιουργία και την επεξεργασία των στυλό: Markdown, HAML, Slim και Jade. Αυτά μπορεί να είναι χρήσιμα στη γραφή περισσότερου κωπηλατικού κώδικα. ή ίσως εργάζεστε σε έργα σε αυτές τις γλώσσες και θέλετε να διατηρήσετε τα παραδείγματα σας συνεπή.

Οι χρήστες έχουν επίσης πρόσβαση σε προεπεξεργαστές JavaScript (CoffeeScript, LiveScript, TypeScript και Babel), καθώς και σε προεπεξεργαστές CSS (Less, Sass και SCSS, Stylus και το νεότερο PostCSS). Αυτά μπορεί να είναι ανεκτίμητα για να σας βοηθήσουν να προχωρήσετε γρήγορα, αλλά αποτελούν επίσης μια μεγάλη πηγή αν θέλετε να μάθετε μια νέα γλώσσα. Η επιλογή “Προβολή συντάξεων” σάς επιτρέπει να γράφετε με έναν προεπεξεργαστή και στη συνέχεια να δείτε πώς μεταφράζεται μετά την προεπεξεργασία.

Σχετικές πληροφορίες:

Δες εδώ

 

 

 

Leave a Comment

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

twenty + 10 =

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