Και για τους αρχάριους που θέλουν να μάθουν και για έμπειρους επαγγελματίες, υπάρχουν μερικοί ιστότοποι που σας επιτρέπουν να δοκιμάσετε γραμμές κώδικα και να δείτε το αποτέλεσμα σε σχεδόν πραγματικό χρόνο. Αυτές είναι πραγματικές εφαρμογές με την οθόνη χωρισμένη σε δύο, όπου από τη μία πλευρά γράφετε τον κώδικα που μπορεί να είναι HTML, CSS, PHP, Javascript ή άλλος, ενώ από την άλλη πλευρά, μετά το πάτημα ενός πλήκτρου για εκτέλεση, βλέπετε πραγματικά πώς μοιάζει αν αυτός ο κώδικας ήταν μέσα σε έναν ιστότοπο.
Αυτοί δεν είναι απλοί συντάκτες κώδικα, αλλά μέρη όπου μπορείτε να δοκιμάσετε τον προγραμματισμό σας χωρίς να ανησυχείτε για λάθη και γρήγορα να μάθετε πού είναι τα λάθη. Το Codepen και το JSFiddle είναι τα δύο πιο δημοφιλή sites αυτής της κατηγορίας, αλλά υπάρχουν και πολλές εναλλακτικές λύσεις.
ΔΙΑΒΑΣΤΕ ΕΠΙΣΗΣ: Κύριες γλώσσες προγραμματισμού που χρησιμοποιούνται για εφαρμογές και ιστότοπους
1) CodePen
Το CodePen είναι ο πιο δημοφιλής ιστότοπος και χρησιμοποιείται από τους προγραμματιστές επειδή είναι δωρεάν, διαισθητικό και εύκολο στη χρήση. Έχοντας γίνει ένα πρότυπο στον κόσμο των προγραμματιστών, απλά κάντε αναζήτηση στο Google για να βρείτε σελίδες που έχουν ήδη δημιουργηθεί από το Codepen και δείτε αμέσως αν αυτό είναι αυτό που ψάχνατε. Τα ευέλικτα παράθυρα προβολής και η άμεση εκτέλεση του γραπτού κώδικα το καθιστούν αρκετά τέλειο για να δοκιμάσουν κινούμενα σχέδια javascript και CSS, επιπλέον μπορεί εύκολα να συνδεθεί με εξωτερικά σενάρια (React, Vue και οτιδήποτε άλλο διατίθεται μέσω CDN).
Το CodePen αξίζει την πρώτη θέση σε αυτήν την κατηγορία, πλην όμως πληρώνονται ορισμένες λειτουργίες, όπως συνεργατική κωδικοποίηση και ζωντανές προβολές πλήρους σελίδας (οι μερικές ζωντανές εμφανίσεις είναι δωρεάν).
2) JSFiddle
Στη δεύτερη θέση (αν και χρονολογικά είναι ένα από τα παλαιότερα) στον κόσμο των χώρων για γράψιμο και δοκιμάζοντας κώδικα προγραμματισμού είναι το JSFiddle, προσανατολισμένο κυρίως στη δημιουργία και τη δοκιμή του JavaScript. Μπορεί επίσης να χρησιμοποιηθεί για HTML και CSS και επειδή υποστηρίζει συμβουλές ολοκλήρωσης κώδικα και μπορεί επίσης να είναι προτιμότερο από το CodePen για τους λιγότερο έμπειρους.
Ένα μεγάλο σημείο υπέρ του JSFiddle είναι ότι προσφέρει δωρεάν τρόπο συνεργασίας (συμπεριλαμβανομένης της συνομιλίας με φωνή και κείμενο), ώστε να μπορείτε να εργάζεστε στον κώδικα ταυτόχρονα με άλλους ανθρώπους.
3) Glitch
Πολλοί κώδικες κώδικα σας επιτρέπουν να κωδικοποιείτε HTML / CSS / JS και να δημιουργείτε στατικές ιστοσελίδες, ενώ το Glitch προσφέρει ένα μικρό ελεύθερο χώρο αποθήκευσης για την αποθήκευση έργων και καθιστά αρκετά εύκολο τον εκτελούμενο κώδικα Node.js. Μπορείτε να προγραμματίσετε σε συνεργασία στο Glitch,
Έρχεται επίσης με μια σειρά από άλλα φανταστικά χαρακτηριστικά: συνεργατική κωδικοποίηση, έλεγχος εκδόσεων, πολλούς πόρους μάθησης, καλή ενσωμάτωση με το GitHub, εύκολη ενσωμάτωση, μια κοινότητα που ζητάει συμβουλές, έργα που έχουν ήδη γίνει για να μπορέσετε να τα τροποποιήσετε ή να χρησιμοποιήσετε ελεύθερα και Visual Studio ολοκλήρωση. Είναι ένας μεγάλος, γρήγορος και εύκολος τρόπος για να ξεκινήσετε μια εφαρμογή ιστού (ή να μάθετε πώς να το κάνετε).
4) CodeSandbox
Το CodeSandbox είναι παρόμοιο με το Glitch αλλά λίγο πιο περίπλοκο και πλήρες. Το CodeSandbox διαθέτει μια πιο ευέλικτη και προσαρμόσιμη διεπαφή, σας επιτρέπει να διανέμετε πλήρεις εφαρμογές ιστού, να έχετε χώρο για να αποθηκεύετε αρχεία και να κάνετε το μεγαλύτερο μέρος του βασικού έργου, αφήνοντας τον προγραμματιστή μόνο το έργο της γραφής.
5) Repl.it
Το Repl.it είναι ένα αναπτυξιακό περιβάλλον για τη δοκιμή διαφορετικών τύπων γλωσσών προγραμματισμού όπως η Python με την υποστήριξη κωδικών front-end και back-end, σας επιτρέπει να διανείμετε τοποθεσίες και εφαρμογές, έχει ενσωμάτωση με το GitHub και μια έξυπνη διασύνδεση. Μπορεί να είναι λίγο δύσκολο για όποιον προσπαθεί απλά να σχεδιάσει ιστοσελίδες, αλλά για ήδη έμπειρους προγραμματιστές είναι ένας πόρος που πρέπει να εξετάσουμε. αν σχεδιάζετε μόνο front-end ή αν είστε νέοι στον κώδικα, αλλά αν προγραμματίζετε τα πάντα τακτικά, αξίζει να εξερευνήσετε.
6) Το Liveweave είναι ένας επεξεργαστής ιστού παρόμοιος με τον JSFiddle, με τον οποίο μπορείτε να γράψετε και να δοκιμάσετε κώδικα για χρήση σε ιστότοπους, με ζωντανή λειτουργία προεπισκόπησης, υποδείξεις κώδικα για HTML5, CSS3, JavaScript και jQuery και που σας επιτρέπει να κατεβάσετε το έργο ως αρχείο zip. Είναι επίσης δυνατό να προσθέσετε εξωτερικές βιβλιοθήκες όπως jQuery, AndgularJS, Bootstrap αρκετά εύκολα.
7) Το CodeSandbox είναι ένας δωρεάν ηλεκτρονικός χώρος όπου μπορείτε να ξεκινήσετε έργα εφαρμογών ιστού χρησιμοποιώντας διαφορετικά πλαίσια, όπως το React, το Vue, το Angular και πολλά άλλα.
8) Το StackBlitz είναι ένας εξαιρετικός επεξεργαστής εφαρμογών javascript, ο οποίος υποστηρίζει διάφορα πλαίσια όπως το Vue και το React.
9) Φλαμίζει, μινιμαλιστική τοποθεσία, ιδανική για γρήγορες δοκιμές.
10) JSBin, μια πιο μινιμαλιστική έκδοση του JSFiddle, για να γράψει κώδικα ιστοσελίδας και να δούμε πώς φαίνεται.
11) Το CSSDeck είναι ένας απλός ιστότοπος για τον έλεγχο κάποιων βασικών ιδεών HTML / CSS και JS.
12) ICECoder, ένα άλλο ηλεκτρονικό περιβάλλον για τον έλεγχο κώδικα, το οποίο απαιτεί τη λήψη ενός προγράμματος που εκτελείται στο πρόγραμμα περιήγησης και μπορεί επίσης να χρησιμοποιηθεί και εκτός σύνδεσης.
13) Plunker, ένα εργαλείο front-end που σας επιτρέπει να γράφετε κώδικα, αρχεία και ιστοσελίδες και να τα αποθηκεύετε στο Github.
14) Το Scrimba είναι ένας καινοτόμος συνδυασμός επεξεργαστή βίντεο και κώδικα που είναι ένα τέλειο μαθησιακό περιβάλλον για τους μαθητές και όσους θέλουν να μάθουν.
15) WebMaker, δημιουργός εφαρμογών ιστού με λειτουργία χωρίς σύνδεση και ενσωμάτωση με το CodePen.
16) Dabblet, για να δοκιμάσετε να γράψετε κώδικα HTML / CSS / JS με ωραία γραφικά και αυτόματο διορθωτή για τον κώδικα CSS.
17) Το PlayCode είναι επίσης ένα περιβάλλον για την δοκιμή βασικού κώδικα HTML / CSS / JS σε πραγματικό χρόνο.
19) Το JSitor είναι μια άλλη εναλλακτική λύση από το Codepen και το JSFiddle, όπου μπορείτε να γράψετε κώδικα συνδυάζοντας HTML, CSS και Javascript και να δείτε αμέσως το αποτέλεσμα.
ΔΙΑΒΑΣΤΕ ΕΠΙΣΗΣ: Ιστοσελίδες για να μάθουν τον προγραμματισμό παίζοντας με διαδραστικά μαθήματα και προκλήσεις
Αυτοί δεν είναι απλοί συντάκτες κώδικα, αλλά μέρη όπου μπορείτε να δοκιμάσετε τον προγραμματισμό σας χωρίς να ανησυχείτε για λάθη και γρήγορα να μάθετε πού είναι τα λάθη. Το Codepen και το JSFiddle είναι τα δύο πιο δημοφιλή sites αυτής της κατηγορίας, αλλά υπάρχουν και πολλές εναλλακτικές λύσεις.
ΔΙΑΒΑΣΤΕ ΕΠΙΣΗΣ: Κύριες γλώσσες προγραμματισμού που χρησιμοποιούνται για εφαρμογές και ιστότοπους
Ιστότοποι για τον έλεγχο κώδικα στο διαδίκτυο
1) CodePen
Το CodePen είναι ο πιο δημοφιλής ιστότοπος και χρησιμοποιείται από τους προγραμματιστές επειδή είναι δωρεάν, διαισθητικό και εύκολο στη χρήση. Έχοντας γίνει ένα πρότυπο στον κόσμο των προγραμματιστών, απλά κάντε αναζήτηση στο Google για να βρείτε σελίδες που έχουν ήδη δημιουργηθεί από το Codepen και δείτε αμέσως αν αυτό είναι αυτό που ψάχνατε. Τα ευέλικτα παράθυρα προβολής και η άμεση εκτέλεση του γραπτού κώδικα το καθιστούν αρκετά τέλειο για να δοκιμάσουν κινούμενα σχέδια javascript και CSS, επιπλέον μπορεί εύκολα να συνδεθεί με εξωτερικά σενάρια (React, Vue και οτιδήποτε άλλο διατίθεται μέσω CDN).
Το CodePen αξίζει την πρώτη θέση σε αυτήν την κατηγορία, πλην όμως πληρώνονται ορισμένες λειτουργίες, όπως συνεργατική κωδικοποίηση και ζωντανές προβολές πλήρους σελίδας (οι μερικές ζωντανές εμφανίσεις είναι δωρεάν).
2) JSFiddle
Στη δεύτερη θέση (αν και χρονολογικά είναι ένα από τα παλαιότερα) στον κόσμο των χώρων για γράψιμο και δοκιμάζοντας κώδικα προγραμματισμού είναι το JSFiddle, προσανατολισμένο κυρίως στη δημιουργία και τη δοκιμή του JavaScript. Μπορεί επίσης να χρησιμοποιηθεί για HTML και CSS και επειδή υποστηρίζει συμβουλές ολοκλήρωσης κώδικα και μπορεί επίσης να είναι προτιμότερο από το CodePen για τους λιγότερο έμπειρους.
Ένα μεγάλο σημείο υπέρ του JSFiddle είναι ότι προσφέρει δωρεάν τρόπο συνεργασίας (συμπεριλαμβανομένης της συνομιλίας με φωνή και κείμενο), ώστε να μπορείτε να εργάζεστε στον κώδικα ταυτόχρονα με άλλους ανθρώπους.
3) Glitch
Πολλοί κώδικες κώδικα σας επιτρέπουν να κωδικοποιείτε HTML / CSS / JS και να δημιουργείτε στατικές ιστοσελίδες, ενώ το Glitch προσφέρει ένα μικρό ελεύθερο χώρο αποθήκευσης για την αποθήκευση έργων και καθιστά αρκετά εύκολο τον εκτελούμενο κώδικα Node.js. Μπορείτε να προγραμματίσετε σε συνεργασία στο Glitch,
Έρχεται επίσης με μια σειρά από άλλα φανταστικά χαρακτηριστικά: συνεργατική κωδικοποίηση, έλεγχος εκδόσεων, πολλούς πόρους μάθησης, καλή ενσωμάτωση με το GitHub, εύκολη ενσωμάτωση, μια κοινότητα που ζητάει συμβουλές, έργα που έχουν ήδη γίνει για να μπορέσετε να τα τροποποιήσετε ή να χρησιμοποιήσετε ελεύθερα και Visual Studio ολοκλήρωση. Είναι ένας μεγάλος, γρήγορος και εύκολος τρόπος για να ξεκινήσετε μια εφαρμογή ιστού (ή να μάθετε πώς να το κάνετε).
4) CodeSandbox
Το CodeSandbox είναι παρόμοιο με το Glitch αλλά λίγο πιο περίπλοκο και πλήρες. Το CodeSandbox διαθέτει μια πιο ευέλικτη και προσαρμόσιμη διεπαφή, σας επιτρέπει να διανέμετε πλήρεις εφαρμογές ιστού, να έχετε χώρο για να αποθηκεύετε αρχεία και να κάνετε το μεγαλύτερο μέρος του βασικού έργου, αφήνοντας τον προγραμματιστή μόνο το έργο της γραφής.
5) Repl.it
Το Repl.it είναι ένα αναπτυξιακό περιβάλλον για τη δοκιμή διαφορετικών τύπων γλωσσών προγραμματισμού όπως η Python με την υποστήριξη κωδικών front-end και back-end, σας επιτρέπει να διανείμετε τοποθεσίες και εφαρμογές, έχει ενσωμάτωση με το GitHub και μια έξυπνη διασύνδεση. Μπορεί να είναι λίγο δύσκολο για όποιον προσπαθεί απλά να σχεδιάσει ιστοσελίδες, αλλά για ήδη έμπειρους προγραμματιστές είναι ένας πόρος που πρέπει να εξετάσουμε. αν σχεδιάζετε μόνο front-end ή αν είστε νέοι στον κώδικα, αλλά αν προγραμματίζετε τα πάντα τακτικά, αξίζει να εξερευνήσετε.
6) Το Liveweave είναι ένας επεξεργαστής ιστού παρόμοιος με τον JSFiddle, με τον οποίο μπορείτε να γράψετε και να δοκιμάσετε κώδικα για χρήση σε ιστότοπους, με ζωντανή λειτουργία προεπισκόπησης, υποδείξεις κώδικα για HTML5, CSS3, JavaScript και jQuery και που σας επιτρέπει να κατεβάσετε το έργο ως αρχείο zip. Είναι επίσης δυνατό να προσθέσετε εξωτερικές βιβλιοθήκες όπως jQuery, AndgularJS, Bootstrap αρκετά εύκολα.
7) Το CodeSandbox είναι ένας δωρεάν ηλεκτρονικός χώρος όπου μπορείτε να ξεκινήσετε έργα εφαρμογών ιστού χρησιμοποιώντας διαφορετικά πλαίσια, όπως το React, το Vue, το Angular και πολλά άλλα.
8) Το StackBlitz είναι ένας εξαιρετικός επεξεργαστής εφαρμογών javascript, ο οποίος υποστηρίζει διάφορα πλαίσια όπως το Vue και το React.
9) Φλαμίζει, μινιμαλιστική τοποθεσία, ιδανική για γρήγορες δοκιμές.
10) JSBin, μια πιο μινιμαλιστική έκδοση του JSFiddle, για να γράψει κώδικα ιστοσελίδας και να δούμε πώς φαίνεται.
11) Το CSSDeck είναι ένας απλός ιστότοπος για τον έλεγχο κάποιων βασικών ιδεών HTML / CSS και JS.
12) ICECoder, ένα άλλο ηλεκτρονικό περιβάλλον για τον έλεγχο κώδικα, το οποίο απαιτεί τη λήψη ενός προγράμματος που εκτελείται στο πρόγραμμα περιήγησης και μπορεί επίσης να χρησιμοποιηθεί και εκτός σύνδεσης.
13) Plunker, ένα εργαλείο front-end που σας επιτρέπει να γράφετε κώδικα, αρχεία και ιστοσελίδες και να τα αποθηκεύετε στο Github.
14) Το Scrimba είναι ένας καινοτόμος συνδυασμός επεξεργαστή βίντεο και κώδικα που είναι ένα τέλειο μαθησιακό περιβάλλον για τους μαθητές και όσους θέλουν να μάθουν.
15) WebMaker, δημιουργός εφαρμογών ιστού με λειτουργία χωρίς σύνδεση και ενσωμάτωση με το CodePen.
16) Dabblet, για να δοκιμάσετε να γράψετε κώδικα HTML / CSS / JS με ωραία γραφικά και αυτόματο διορθωτή για τον κώδικα CSS.
17) Το PlayCode είναι επίσης ένα περιβάλλον για την δοκιμή βασικού κώδικα HTML / CSS / JS σε πραγματικό χρόνο.
19) Το JSitor είναι μια άλλη εναλλακτική λύση από το Codepen και το JSFiddle, όπου μπορείτε να γράψετε κώδικα συνδυάζοντας HTML, CSS και Javascript και να δείτε αμέσως το αποτέλεσμα.
ΔΙΑΒΑΣΤΕ ΕΠΙΣΗΣ: Ιστοσελίδες για να μάθουν τον προγραμματισμό παίζοντας με διαδραστικά μαθήματα και προκλήσεις
