Ανάπτυξη FrontEnd: Κείμενο CodePen ή Sublime;

CodePen ή υπέροχο κείμενο;

Κείμενο CodePen ή Sublime; Αν μιλάμε για προγραμματισμό ιστού, το όνομα HTML, CSS και JavaScript έρχεται αμέσως σε εμάς. Υπάρχουν πολλοί τρόποι για να φτάσετε εκεί. Ακόμη και, αν ανοίξουμε ένα σημειωματάριο, μπορούμε να δουλέψουμε γράφοντας "html". Είναι αλήθεια ότι για να δείτε το αποτέλεσμα αυτού που προγραμματίζετε από ένα μαξιλάρι, θα χρειαστείτε μια επίπονη διαδικασία για να παρατηρήσετε την πρόοδο.

Αυτοί οι ιστότοποι είναι οι κύριες παιδικές χαρές για προγραμματιστές εφαρμογών για χρήστες της ημέρας. Για να μάθετε περισσότερα σχετικά με τα πλεονεκτήματα και τα μειονεκτήματα αυτών των προγραμμάτων, θα τα αναλύσουμε βαθιά σε αυτό το άρθρο (τουλάχιστον, όλα όσα γνωρίζουμε). Όπως πάντα λέω, σίγουρα κάποιοι από εσάς γνωρίζουν περισσότερο το θέμα. Εάν ναι, σχολιάστε ό, τι μας ξεφεύγει εδώ. Θα χαρούμε να συζητήσουμε!

Σήμερα πρόκειται να αναλύσουμε CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet και LiveWeave. Ποια είναι τα πιο γνωστά και τα εργαλεία που χρησιμοποιούνται περισσότερο σε αυτό το περιβάλλον. Φυσικά υπάρχουν περισσότερα.

Αλλά για όλους εσάς που δεν γνωρίζετε τι αφορά το FrontEnd ή το BackEnd, ας εξηγήσουμε λίγο. Η διεπαφή ή η διεπαφή είναι το οπτικό μέρος που θα μπορεί να βλέπει ο χρήστης πλοήγησης στον ιστό. Το BackEnd θα είναι το μέρος που ελέγχει ο διαχειριστής του ιστότοπου. Στον προγραμματισμό, εάν εισαγάγετε κώδικα μέσω ενός εργαλείου που εμφανίζει το αποτέλεσμα ταυτόχρονα, αυτό θα ονομάζεται front-end.

CodePen

Για πολλά τα πιο ολοκληρωμένα εργαλεία από όλα όσα μιλάμε. Χρησιμοποιείται ως εργαλείο ιστού που είναι το πιο κοντινό πράγμα σε μια κοινότητα για να δείξει την εργασία σας. Ενα είδος Youtube από τον προγραμματιστή. Σε αυτό, μπορείτε να δείτε τη δουλειά των προγραμματιστών που σχετίζονται με τον Ιστό και να επικοινωνήσετε μαζί τους σε περίπτωση που ενδιαφέρεστε, να δείτε το προφίλ τους, να τα ακολουθήσετε σε δίκτυα και ακόμη και να εγγραφείτε στο κανάλι τους για να δείτε όλα τα μελλοντικά τους έργα.

Παρουσίαση περιεχομένου, υποστήριξης και συντομεύσεων πληκτρολογίου

Η παρουσίαση CodePen είναι η πιο ενδιαφέρουσαΕπειδή με λίγα μόνο κλικ, μπορείτε να επεξεργαστείτε τη διαδικασία αμέσως. Με πολύ καλά διαχωρισμένες γραμμές html, css και javascript. Εκτός από το οπτικό μέρος, το οποίο μπορείτε να διασταυρώσετε πάνω και κάτω για να δείτε ξεκάθαρα την πρόοδό σας. Βοηθώντας έτσι στη διαφοροποίηση κάθε γλώσσας καλά. Κάτι που είναι βολικό για νεότερους προγραμματιστές.

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

Εάν είστε ένας από αυτούς που είναι συνηθισμένοι στη χρήση casi εντελώς πληκτρολόγιο όταν εργάζεστε, το CodePen θα είναι υπέροχο για εσάς. Χρειάζονται άλλα εργαλεία Plugins για να μπορείτε να χρησιμοποιήσετε συντομεύσεις πληκτρολογίου για να συμπληρώσετε το περιβάλλον. Αυτό καθιστά την εργασία λίγο πιο άβολη (αν και εξίσου αποτελεσματική μόλις εγκατασταθεί). CP. ενσωματώνεται ως πρότυπο ένα σύστημα που θα σας κάνει να συμπληρώσετε τις ίδιες γραμμές κώδικα που επαναλαμβάνονται, όπως θα μπορούσε να υπάρχει σε μια λίστα. Γράφετε πώς θέλετε να εμφανίζεται η λίστα και κάντε κλικ στο Tab

Η έκδοση Pro επιτρέπει επίσης πολλές ακόμη επιλογές με τιμή 9,00 € για το βασικό πακέτο έως 29,25 € για το πακέτο "Super". Να μπορούμε να ενημερώνουμε ταυτόχρονα σε πολλές συσκευές τι κάνουμε σε μία. Επίσης ένας τρόπος συνεργασίας, ένας "τρόπος δασκάλου" κ.λπ. Επωφεληθείτε αν θέλετε εδώ.

JSBin

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

Το JSBin είναι απλό, με τη βασική δομή που δημιουργήθηκε σε html, ώστε να μην χάνετε χρόνο, θα διασταυρώνονται μεταξύ των διαφόρων γλωσσών για να ολοκληρώσετε την εργασία. Πρώτα υπάρχει HTML, μετά CSS, Javascript και τέλος η δουλειά σας οπτικά. Και παρόλο που φαίνεται πιο δύσκολο, θα έχετε τους ίδιους τύπους συντομεύσεων χωρίς να εγκαταστήσετε τίποτα. Απευθείας από το πρόγραμμα περιήγησης.

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

Έχει μόνο δύο δόσεις, δωρεάν ή επί πληρωμή. Αυτό είναι λίγο πιο ακριβό από το CodePen, αν και αν το πληρώνετε ετησίως, είναι πιο κερδοφόρο, αν μπορείτε να πληρώσετε 120 €.

CSSDeck

CSSDeck

Το εργασιακό περιβάλλον της CSSDeck είναι διαφορετικό από αυτό που φαίνεται παραπάνω. Χωρισμένο σε δύο στήλες μόνο, οπτικός κώδικας, το CSSDeck λειτουργεί με 3 σειρές κάτω με τις οποίες διαιρεί τους διαφορετικούς τύπους γλώσσας. Με παρουσίαση με τη μορφή κοινωνικού δικτύου και καθαρότερου εργασιακού περιβάλλοντος σε ανοιχτόχρωμο χρώμα. Φαίνεται σαν ένα απλό εργαλείο. Αν και μερικές φορές, αυτό δεν σημαίνει ότι είναι αρνητικό.

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

plunkr

plunkr είναι το λιγότερο ελκυστικό εργαλείο που έχω συναντήσει μέχρι στιγμής. Η παρουσίαση συγκεντρώνεται σε μηνύματα και έλλειψη εικόνων. Η φόρτωση περιεχομένου είναι αργή και δεν είναι πολύ χρήσιμη με την πρώτη ματιά. Επιπλέον, η παραγγελία κατά ημερομηνία κάνει οποιοδήποτε χρονοδιάγραμμα, ανεξάρτητα από το πόσο απλό, μπορεί να είναι στην πρώτη θέση. Για να δείτε κάτι πιο ενδιαφέρον θα πρέπει να μεταβείτε στην καρτέλα που λέει: «Περισσότερες εμφανίσεις«. Δηλαδή, εάν δεν το έχετε μεταφράσει στο Google στο παρελθόν.

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

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

Ντάμπλετ

Ντάμπλετ είναι ένα απλό εργαλείο, μπαίνετε και δημιουργείτε. Παρόλο που μπορείτε να εγγραφείτε και να έχετε το όνομα χρήστη σας μέσω του GitHub, δεν είναι κάτι που ξεχωρίζει πολύ στον Ιστό. Με φόντο σε κίτρινη έως κόκκινη κλίση, στο οπτικό μέρος και λευκό φόντο στο τμήμα κώδικα (όπως είναι φυσιολογικό), παρουσιάζεται το έργο Dabblet, αν και μπορείτε να το αλλάξετε από την καρτέλα CSS. Για μένα, είναι καλύτερο να το αφήσετε κενό, αφού αυτή η κλίση που δίνει είναι λίγο ζωή a

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

Ένα από τα πράγματα που μου άρεσαν λιγότερο, αλλά μπορεί να τους αρέσουν οι σπουδαίοι προγραμματιστές, είναι αυτό δεν έχετε την επιλογή να καταγράψετε μια ετικέτα και να την γράψετε. Δηλαδή, βάλτε HTML και κάντε κλικ στην καρτέλα και γράψτε αυτόματα "html" και "/ html". Κάτι που στις άλλες εφαρμογές αν γίνει.

LiveWeave

ζωντανό κύμα

LiveWeave Είναι πολύ παρόμοιο με τους άλλους, δεν έχει τίποτα που οι άλλοι δεν μπορούν να προσφέρουν από άποψη χρησιμότητας. Αυτό που επισημαίνουμε σχετικά με αυτό το έργο είναι ο σχεδιασμός του, ένα σκούρο χρώμα παρόμοιο με το CodePen αλλά με τετράγωνη διανομή. Να μπορείτε να αλλάξετε το μέγεθος να δοκιμάσω. Υπάρχει επίσης η καθαρή λειτουργία και το «εκτός γραμμής« όπου ο κώδικας που επεξεργάζεστε δεν θα αντικατοπτρίζεται στο οπτικό, έως ότου τον ενεργοποιήσετε. Δεν είναι ένα χαρακτηριστικό που θεωρώ πολύ χρήσιμο, ως σχεδιαστής, είναι σημαντικό να βλέπετε πάντα αυτό που επεξεργάζεστε σε πραγματικό χρόνο, αλλά κάποιος θα το βρει σίγουρα κάποια χρήση. Και παρόλο που, όπως πάντα, μπορείτε να εγγραφείτε, ο χρήστης δεν έχει ηγετικό ρόλο. Επειδή, ακόμη και αν δεν εγγραφείτε, μπορείτε να αποθηκεύσετε το έργο σας.

Sublime Κείμενο

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

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

Συμπέρασμα

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


Αφήστε το σχόλιό σας

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

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.