Ένα από τα πολλά απογοητευτικά πράγματα για την ανάπτυξη ιστού δεν έχει έναν εύκολο τρόπο να μοιραστείτε τα σχέδιά σας με άλλους. Σε πολλές περιπτώσεις, θα πρέπει να φιλοξενήσετε το έργο σας σε ένα διακομιστή ιστού ή να στείλετε όλα τα αντίστοιχα αρχεία σε κάποιον που θέλει να δει τι έχετε δημιουργήσει. Αλλά χάρη σε ένα καθαρό ηλεκτρονικό εργαλείο που ονομάζεται CodePen, δεν χρειάζεται να ανησυχείτε για κάτι τέτοιο πια.
CodePen.io
CodePen είναι ένα δωρεάν εργαλείο που θα σας επιτρέψει να φιλοξενήσετε τα έργα σας στο διαδίκτυο χωρίς ποτέ να χρειαστεί να πληρώσετε μια δεκάρα. Για να ξεκινήσετε, κατευθυνθείτε στο CodePen.io και δημιουργήστε έναν δωρεάν λογαριασμό.
Μόλις το κάνετε, μπορείτε να δημιουργήσετε ένα "στυλό" κάνοντας κλικ στο κουμπί "Νέα πένα" στην επάνω δεξιά γωνία της οθόνης.
Μετά από αυτό, θα μπορείτε να προσθέσετε οποιοδήποτε HTML, CSS και JavaScript στα αντίστοιχα πλαίσια. Αφού αρχίσετε να προσθέτετε κάποιο κώδικα, θα δείτε μια ζωντανή προεπισκόπηση αυτού που δημιουργείτε. Μπορείτε να επικεφαλίσετε το πρώτο σας στυλό στην επάνω αριστερή γωνία. Αφού κάνετε κλικ στην πρώτη σας "Αποθήκευση", θα μπορείτε απλώς να μοιραστείτε τη διεύθυνση URL της σελίδας με φίλους, οικογένεια και συνεργάτες, ώστε να μπορούν να δουν σε τι εργάζεστε.
Αυτός είναι ο τρόπος με τον οποίο το Pen σας θα φαίνεται με κάποιο κώδικα μέσα σε αυτό (ευγενική προσφορά ενός έργου Free Camp Camp που ονομάζεται Αφιερώματος):
Όταν δημιουργείτε το δικό σας στυλό, θα θέλετε να περάσετε από τις ρυθμίσεις πριν ξεκινήσετε. Όταν κάνετε κλικ στο κουμπί "Νέα πένα", θα πρέπει να δείτε ένα πρότυπο πένας έτοιμο για να ξεκινήσετε να εισάγετε κάποιο κωδικό. Στην επάνω δεξιά γωνία θα εμφανιστεί ένα κουμπί "Ρυθμίσεις". Κάντε κλικ σε αυτό (θα δείτε την παρακάτω οθόνη).
Εδώ μπορείτε να μεταβείτε στις καρτέλες HTML, CSS και JavaScript για να προσθέσετε ορισμένες πληροφορίες. Στην καρτέλα HTML, θα έχετε τη δυνατότητα να προσθέσετε πληροφορίες για τα μεταδεδομένα, πράγματα που πρέπει να ακολουθήσετε
καρτέλα και ούτω καθεξής. Κάτω από το CSS, θα μπορείτε να προσθέσετε CSS Preprocessors όπως το LESS και το Sass. Όχι μόνο αυτό, αλλά μπορείτε να προσθέσετε σε εξωτερικά CSS όπως Bootstrap και Foundation. Κάτω από την καρτέλα JavaScript, μπορείτε να προσθέσετε έναν Προεπεξεργαστή JavaScript όπως Babel ή CoffeeScript. Επιπλέον, μπορείτε να προσθέσετε εξωτερικά πλαίσια JavaScript όπως το Angular, React, Lodash, D3 και ούτω καθεξής.
Τέλος, το CodePen θα σας επιτρέψει να αλλάξετε την προβολή που βλέπετε. Η προεπιλεγμένη προβολή είναι η Προβολή επεξεργαστή, επιτρέποντάς σας να εισάγετε τον κωδικό σας και να πάρετε μια μικρή προεπισκόπηση στην παρακάτω κονσόλα. Υπάρχουν όμως και άλλες επιλογές, με μια ιδιαίτερα εύχρηστη προβολή "Πλήρης σελίδα", όπου θα δείτε ένα έργο σαν να ήταν ζωντανό σε έναν ιστότοπο. Υπάρχει μια χούφτα άλλων προβολών διαθέσιμες για να μεταβείτε σε, αξίζει να παίζετε με!
Το CodePen είναι πραγματικά ένα τακτοποιημένο εργαλείο και έχουμε αγγίξει μόνο την επιφάνεια της χρησιμότητάς του. Αξίζει να κατευθυνθείτε στο CodePen.io και να το χρησιμοποιήσετε για να εργαστείτε σε μερικά έργα και στη συνέχεια, αν το νιώσετε σαν αυτό, μοιραστείτε με τους φίλους ή τους συναδέλφους σας.
Τι πιστεύετε για το CodePen; Χρησιμοποιήσατε ένα παρόμοιο εργαλείο; Ενημερώστε μας στα παρακάτω σχόλια!
