Το ταξίδι μου για να γίνω προγραμματιστής ιστού από το μηδέν χωρίς πτυχίο CS (και τι έμαθα από…

Πρώτα, επιτρέψτε μου να συστήσω τον εαυτό μου. Το όνομά μου είναι Sergei Garcia και είμαι προγραμματιστής πλήρους απασχόλησης με 2 χρόνια εμπειρίας. Εκείνη την εποχή, έχω εργαστεί ως προγραμματιστής front-end τόσο για μια εταιρεία συμβούλων Forbes 500 όσο και για μια μικρή εταιρεία.

Αυτό μπορεί να μην ακούγεται σαν μεγάλη εμπειρία, αλλά η ολοκλήρωση της δεύτερης χρονιάς ως προγραμματιστή ήταν ένα τεράστιο ορόσημο για μένα. Αυτό συμβαίνει επειδή δεν είχα πραγματική εμπειρία να κάνω ανάπτυξη ιστοσελίδων - και όχι πολύ εμπειρία προγραμματισμού γενικά πέρα ​​από κάποια βασική εκπαίδευση C # και Java που πήρα από μερικά διαδικτυακά μαθήματα. Δεν είχα επίσης πτυχίο επιστήμης υπολογιστών από τότε που αποφοίτησα με πτυχίο στη διαχείριση έργων πληροφορικής.

Ποτέ δεν είχα γράψει για την εμπειρία μου παρά την όλη βοήθεια που έχω λάβει από υπέροχους πόρους όπως Medium, Stack Overflow και Reddit προγραμματισμένα subreddits. Έτσι, σήμερα, αποφάσισα να το αλλάξω. Σήμερα θα σας συμπληρώσω τι πήγε σωστά και τι όχι, έτσι ώστε αν ξεκινήσετε αυτό το ταξίδι, θα έχετε καλύτερη τύχη από ό, τι εγώ.

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

Θα ξεκινήσω με το ταξίδι μου, συμπεριλαμβανομένων όσων πήγαν στραβά στην πορεία. Εάν σας ενδιαφέρει απλώς ποιες είναι οι προτάσεις μου για τη συντομότερη δυνατή διαδρομή για να γίνετε προγραμματιστής ιστού από το μηδέν, μη διστάσετε να μεταβείτε στην τελευταία ενότητα: Η συντομότερη διαδρομή .

Έτσι, χωρίς άλλη παραλλαγή, Ας ξεκινήσουμε!

Να πάρει τα βασικά

Αφού αποφάσισα, ήθελα να μπω στην ανάπτυξη ιστού το πρώτο ερώτημα στο μυαλό μου ήταν «Τι μαθαίνω;» Αφού έκανα κάποια έρευνα, κατέληξα να κάνω τη μαθησιακή μου πορεία βασισμένη σε αυτό που ζήτησαν οι περισσότερες θέσεις προγραμματιστών ιστού σε επίπεδο εισόδου, η οποία ήταν:

  • JavaScript
  • HTML & CSS
  • Προεπεξεργαστές CSS (λιγότερα & Sass)
  • Ανταποκρίσιμος σχεδιασμός
  • Γωνιακό JS
  • Σχεδιαστικά πρότυπα
  • Γκιτ
  • NodeJS
  • Δρομείς εργασίας

Δείτε πώς πήγε.

Javascript

Ξεκίνησα το ταξίδι μου να μαθαίνει JavaScript μέσω του CodeSchool(επί πληρωμή) και Codecademy(Ελεύθερος). Εάν δεν γνωρίζετε σχετικά με αυτά, είναι εξαιρετικοί ιστότοποι που σας επιτρέπουν να μάθετε να κωδικοποιείτε κωδικοποιώντας μέσα στο πρόγραμμα περιήγησης.

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

Μόλις ξεπέρασα τα βασικά, προχώρησα σε ένα ισχυρότερο θεμέλιο JavaScript διαβάζοντας το βιβλίο Eloquent Javascript: Μια σύγχρονη εισαγωγή στον προγραμματισμό του Haverbeke (δωρεάν).

Αυτό το βιβλίο μου προτάθηκε από πολλά άτομα στα φόρουμ JavaScript ως απαραίτητη ανάγνωση και για καλό λόγο. Αυτό το βιβλίο ήταν δύσκολο - ειδικά αν απλά μαθαίνετε προγραμματισμό όπως ήμουν τότε. Αλλά χαίρομαι που δεν τα παρατήρησα και το κράτησα. Ήταν φαινομενικό λόγω του τεράστιου εύρους των εννοιών προγραμματισμού που καλύπτει, ακόμη και αν ήταν κάπως αδίστακτη κατά καιρούς. Ό, τι κι αν κάνετε, μην παραλείψετε τις προκλήσεις κώδικα. Μόλις ολοκληρώσετε αυτό το βιβλίο, τότε μπορείτε τελικά να πείτε με σιγουριά ότι έχετε καλή κατανόηση στο JavaScript.

Μπορείτε επίσης να μάθετε προαιρετικά το jQuery (αν και πραγματικά δεν το συνιστώ να το μάθετε ακόμα - περισσότερα για αυτό αργότερα). Μπορείτε να το μάθετε μέσα από το μάθημα του CodeSchool's Try jQuery.

HTML & CSS

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

Θα μπορούσατε επίσης να το αλλάξετε εύκολα για κάτι σαν το μάθημα HTML & CSS του Codecademy και να πάρετε παρόμοια αποτελέσματα. Ή αν είστε έτοιμοι για μια πρόκληση, το Intac σε μαθήματα Udacity για HTML και CSS είναι πολύ πιο ολοκληρωμένο και ελαφρώς πιο δύσκολο.

Μπόνους : Εάν μπορείτε να πάρετε τα χέρια σας στο HTML και CSS του Jon Duckett : Σχεδιάστε και δημιουργήστε ιστότοπουςβιβλίο, είναι επίσης ένα σταθερό σημείο εκκίνησης για την εκμάθηση HTML & CSS (με μια σειρά από σχεδιασμό ιστοσελίδων). Έχει υψηλή βαθμολογία (4,7 / 5 στο Amazon), προσφέρει μια σταθερή εισαγωγή στον κόσμο της ανάπτυξης ιστού. Είναι ένα όμορφο βιβλίο χάρη στον καθαρό του σχεδιασμό με μεγάλα γράμματα και πολύχρωμες σελίδες. Συχνά επιστρέφω σε αυτό για να το θαυμάσω.

Λιγότερο / Sass

Για όσους δεν είναι εξοικειωμένοι, το Less & Sass είναι μεταφορείς CSS που σας επιτρέπουν να γράφετε CSS με πιο κομψό τρόπο. Αυτό σας επιτρέπει να κάνετε πράγματα που δεν υποστηρίζονται κανονικά, όπως κανόνες ένθεσης CSS. Μόλις ολοκληρωθεί, αυτοί οι μεταδότες CSS «μεταγλωττίζουν» τον κωδικό σας και τον μετατρέπουν σε κανονικό CSS.

Υπάρχουν 2 σημαντικοί μεταφορείς CSS αυτήν τη στιγμή: Λιγότερο και Sass . Το Sass είναι το πιο δημοφιλές, αλλά βρήκα ότι το να μαθαίνω λιγότερο πρώτα είναι πιο εύκολο, κυρίως επειδή η χρήση του Sass στον υπολογιστή σας απαιτεί επίσης την εγκατάσταση του Ruby, το οποίο δεν μου άρεσε.

Μπορείτε να πάρετε μια γρήγορη, αλλά ολοκληρωμένη επισκόπηση του Less χρησιμοποιώντας το Online Less Compiler του WinLess και είναι παραδείγματα κώδικα για να δείτε πώς ο κώδικας Less θα μετατραπεί σε CSS. Μπορείτε επίσης να δοκιμάσετε το Sass online χρησιμοποιώντας το SassMeister (αν και αυτό δεν περιλαμβάνει παραδείγματα κώδικα).

Δεν έχει σημασία αν μαθαίνετε πρώτα Λιγότερα ή Sass. Είναι εξαιρετικά παρόμοια, οπότε μόλις ξέρετε το ένα, γνωρίζετε σχεδόν το άλλο. Μπορείτε να βρείτε μια μεγάλη γρήγορη σύγκριση μεταξύ Less και Sass στο άρθρο του Shelby Moulden Σύγκριση μεταξύ LESS & SASS.

Ανταποκρίσιμος σχεδιασμός

Αρχικά έμαθα για το σχεδιασμό απόκρισης και το Bootstrap χρησιμοποιώντας τη διαδρομή HTML & CSS του Codeschool, αλλά πρόσφατα βρήκα το μάθημα Udacity από το Google on Responsive Web Design Fundamentals να είναι φανταστικό στο να καλύπτει τα βασικά και πέρα ​​με πολύ πιο ολοκληρωμένο τρόπο από ό, τι το Codeschool.

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

Εάν δυσκολεύεστε να κατανοήσετε τις βασικές αρχές του, διαβάστε την ανάρτηση ιστολογίου του Froont σχετικά με 9 βασικές αρχές σχεδιασμού ιστοσελίδων που ανταποκρίνονται. Έχει όμορφα καθαρά και απλά κινούμενα σχέδια που βοηθούν στην απεικόνιση οπτικά των αρχών του ανταποκριτικού σχεδιασμού ιστοσελίδων.

Γωνιακό JS

Δεν ήξερα πραγματικά τι ακριβώς ήταν το AngularJS τότε, αλλά ήξερα ότι ο καθένας μιλούσε γι 'αυτό και ότι αν ήθελα να γίνω προγραμματιστής ιστού, έπρεπε να το μάθω. Βρήκα τις αποφάσεις σχεδιασμού του Google Developers στο AngularJS να παρέχουν την καλύτερη γενική επισκόπηση του AngularJS και πώς βελτίωσε την κατασκευή εφαρμογών ιστού.

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

Στη συνέχεια προχώρησα να μάθω AngularJS μέσω Codeschool. Με τη θετική μου εμπειρία στα μαθήματα JavaScript και CSS και από εκεί, δεν περίμενα τίποτα λιγότερο από ένα υπέροχο μάθημα. Εκανα λάθος. Το μάθημα ήταν μια καταστροφή από το ξεκίνημα, καθώς ο αλγόριθμος χρησιμοποιούσε για να ελέγξει αν πήρατε το παράδειγμα κώδικα σωστά μερικές φορές δεν λειτούργησε σωστά και σημείωσε τη σαφώς σωστή λύση σας ως εσφαλμένη. Υπήρξαν ακόμη και φορές που το μόνο που χρειάστηκε για να διορθώσετε το κατεστραμμένο σύστημα επικύρωσης ήταν μια ανανέωση σελίδας. Όσο για το περιεχόμενο του μαθήματος, δεν ήταν υπέροχο. Έκανε μια εντάξει δουλειά για να εξηγήσει τα βασικά στοιχεία μιας εφαρμογής AngularJS, αλλά έκανε μια φοβερή δουλειά στην ενσωμάτωσή τους σε μια πραγματική εφαρμογή, με άφησε πολύ περισσότερες ερωτήσεις από ό, τι ξεκίνησα.

Μετά από κάποια αναζήτηση γύρω από φόρουμ, σκόνταψα στο Egghead.io(δωρεάν / επί πληρωμή) όπου είχα πολύ καλύτερη τύχη. Το υλικό των μαθημάτων τους ήταν πολύ πιο καθαρό, πιο περιεκτικό και πιο ολοκληρωμένο, κάνοντας μια πολύ καλύτερη εμπειρία. Για να μην αναφέρουμε ότι εκτός από τα μαθήματά τους, έχουν μαθήματα μεγέθους 2-5 λεπτών που καλύπτουν σημαντικά θέματα. (Για παράδειγμα: Τι είναι ο ελεγκτής; Τι είναι το φίλτρο; Τι είναι το εύρος $;) Αυτά καθιστούν πολύ εύκολο να κατανοήσουμε τα βασικά. Έχουν επίσης ορισμένα βίντεο που απαιτούν πληρωμή, αλλά συνήθως είναι αυτά που καλύπτουν πιο προχωρημένα γωνιακά θέματα που δεν θα χρειαστείτε αργότερα. Πήρα τα μαθήματά τους AngularJS Fundamentals και ήμουν απόλυτα ικανοποιημένος με τα αποτελέσματα (και επίσης έγινε οπαδός των μαθημάτων του Egghead.io στη διαδικασία).

Σχεδιαστικά πρότυπα

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

Βρήκα τις 2 καλύτερες πηγές για να μάθω ότι είναι τα σχέδια σχεδίασης JavaScript του doFactory και τα πρότυπα σχεδίασης JavaScript μάθησης του Addy Osmani. Βρήκα το doFactory πολύ πιο εύκολο να το καταλάβω, ενώ το βιβλίο του Addy Osmani ήταν πολύ πιο ολοκληρωμένο.

Chrome DevTools

Το Chrome είναι ένα από τα πιο ισχυρά εργαλεία για έναν προγραμματιστή ιστού. Όσο πιο γρήγορα το καταφέρετε, τόσο περισσότερο χρόνο μπορείτε να εξοικονομήσετε αργότερα. Το δωρεάν μάθημα του Codeschool Explore and Master Chrome DevTools κάνει εξαιρετική δουλειά στην παρουσίασή τους.

Git (Έλεγχος έκδοσης)

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

Βρήκα ότι το δωρεάν μάθημα του CodeSchool του Try Github είναι ένας φιλικός τρόπος για να ξεκινήσετε. Η εκπαίδευση Git της Atlassian ήταν εξαιρετική για την κάλυψη των πιο προηγμένων διαθέσιμων εντολών. Το Git Learning Path του Codeschool είναι επίσης εξαιρετικό στο να καλύπτει τις βασικές αρχές του Git.

NodeJS

Δεν χρειάστηκε πολύς χρόνος για να μάθω ότι η βασική κατανόηση του NodeJS θα με βοηθούσε πολύ στην προσπάθειά μου να γίνω προγραμματιστής ιστού (περισσότερα σχετικά με αυτό σύντομα).

Δοκίμασα τα μαθήματα του Codeschool στο Node, αλλά τα βρήκα πραγματικά έλλειψη περιεχομένου. Βρήκα το NodeSchool.io να είναι πολύ καλύτερος δάσκαλος για να πάρει τα βασικά σωστά και ήταν διασκεδαστικό! Μου άρεσε πολύ η πρακτική προσέγγιση που προσέφερε, η οποία ήταν παρόμοια με το Codeschool και το Codecademy - με την πρόσθετη βελτίωση που έτρεχα πραγματικά το NodeJS.

Task Runners (Grunt & Gulp)

Ο Γκριντ και ο Γκουλπ ήταν πολύ μεγάλη έκπληξη για μένα, καθώς δεν είχα ιδέα ότι υπάρχουν τέτοια εργαλεία - αλλά είμαι πολύ χαρούμενος που το κάνουν! Βασικά, αυτοί οι δρομείς εργασίας σας επιτρέπουν να αυτοματοποιήσετε κοινές εργασίες. Για παράδειγμα, θυμηθείτε λιγότερα / Sass; Κανονικά θα πρέπει να εκτελείτε μη αυτόματα το μεταγλωττιστή CSS κάθε φορά που κάνετε μια επεξεργασία για να μεταγλωττίσετε το CSS και, στη συνέχεια, να ενημερώσετε το πρόγραμμα περιήγησης. Χρησιμοποιώντας ένα πρόγραμμα εκτέλεσης εργασιών, μπορείτε να το ρυθμίσετε για να παρακολουθείτε τα αρχεία Less / Sass για αλλαγές και όταν εντοπίζει μια αλλαγή, μεταγλωττίστε το CSS σας και ανανεώστε αυτόματα το πρόγραμμα περιήγησης. Αυτό είναι εξαιρετικά χρήσιμο στη μείωση του χρόνου ανάπτυξης.

Υπάρχουν 2 κύριοι δρομείς εργασίας αυτή τη στιγμή: Grunt και Gulp. Ενώ κάνουν το ίδιο ακριβώς πράγμα, δουλεύουν με πολύ διαφορετικούς τρόπους, με τον Grunt να είναι πολύ πιο ριζοσπαστικός και προσανατολισμένος στη διαμόρφωση και ο Gulp να είναι συντομότερος για να γράψει και να προτιμά τον κώδικα από τη διαμόρφωση.

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

Βρήκα ότι τα μαθήματα του Scotch.io για το Grunt και το Gulp είναι από τα καλύτερα εκεί έξω.

Προκλήσεις που αντιμετώπισα στην πρώτη μου δουλειά

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

Πρέπει να πω, ήμουν αρκετά νευρικός στο πρώτο μου έργο. Περιλάμβανε την κατασκευή επαναχρησιμοποιήσιμων στοιχείων ιστού με HTML, CSS και JavaScript, μαζί με το Bootstrap, το Sass, το Grunt ως εργαλεία. Τ

δύο μεγάλα λάθη που βρήκα στην αρχή ήταν:

  1. Φόβος αποτυχίας. Επειδή ήμουν ο νέος άντρας, φοβόμουν συνεχώς ότι ο κώδικας μου ήταν λανθασμένος ή κακώς φτιαγμένος, οπότε πέρασα πολύ χρόνο να ελέγξω τα πάντα και να τηρήσω τις βέλτιστες πρακτικές κωδικοποίησης. Εξαιτίας αυτού, σπάνια προσπάθησα λύσεις με δημιουργικούς νέους τρόπους, λόγω του φόβου μου ότι ενδέχεται να μην λειτουργήσει σωστά στο τέλος. Αυτό έκλεισε αποτελεσματικά τη μονάδα μου για να μάθω νέα πράγματα.
  2. Κάνοντας πράγματα γιατί το "Χ" άτομο που ξέρει καλύτερα από εμένα το είπε. Το έκανα πολύ στην αρχή. Αν και δεν είναι εντελώς λάθος, κάνοντας τα πράγματα με έναν συγκεκριμένο τρόπο μόνο και μόνο επειδή ο ειδικός του "Χ" το είπε - χωρίς να ξέρω γιατί - με οδήγησε να μην ξέρω πραγματικά πότε γιατί γίνονταν τα πράγματα όπως ήταν. Σύντομα έμαθα ότι υπήρχαν εξαιρέσεις σε όλα και ότι πρέπει πάντα να γνωρίζετε τον λόγο πίσω από τις βέλτιστες πρακτικές.

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

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

Η χρήση του AngularJS σε ένα πραγματικό έργο αποτέλεσε επίσης μια μεγάλη πρόκληση για μένα. Αυτό οφείλεται κυρίως στο ότι πολλά από τα πράγματα που έκανα μαζί του, το έκανα χωρίς να καταλάβω πλήρως γιατί συνέβησαν. Το σκέφτηκα ως «γωνιακή μαγεία».

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

Τελικά σκόνταψα πάνω σε ένα καταπληκτικό βιβλίο με τίτλο Build Your Own AngularJS. Δεν τα διάβασα όλα, αλλά διάβασα την ενότητα σχετικά με τα πεδία και τους παρατηρητές και πώς λειτουργούσαν πραγματικά αποκάλυψε πώς η μαγεία πίσω από τη γωνιακή, δεν ήταν πραγματικά μαγική. Ήταν απλώς ένας έξυπνος τρόπος διατήρησης της δέσμευσης δεδομένων χρησιμοποιώντας βρώμικο έλεγχο και ένθετα πεδία. Συνιστώ ανεπιφύλακτα αυτό το βιβλίο σε όποιον προσπαθεί να κατανοήσει πλήρως το AngularJS.

Η άλλη πρόκληση που αντιμετώπισα ένα χρόνο αργότερα ήταν το πόσο γρήγορα εξελίχθηκε η ανάπτυξη ιστού. Μόλις είχα μάθει τον AngularJS και τον Grunt, και ένιωθα πολύ περήφανος και δυνατός - μόνο για να μάθω σύντομα ότι ο Gulp και ο ReactJS ήταν στον ορίζοντα. Και ένα χρόνο αργότερα, αφού τα μάθατε, το Webpack άρχισε να κερδίζει έδαφος και έπρεπε να το μάθω κι αυτό. Όπως μπορείτε να φανταστείτε, ένα μεγάλο μέρος μου ήταν αρκετά απογοητευμένος από το πόσο γρήγορα μερικές από τις γνώσεις μου έγιναν ξεπερασμένες. Αλλά ένας συνάδελφος σύντομα με διαφώτισε λέγοντας κάτι που άλλαξε τον τρόπο με τον οποίο έβλεπα τις βιβλιοθήκες και τα πλαίσια για πάντα:

"Οι βιβλιοθήκες και τα πλαίσια μπορεί να καταστούν άνευ αντικειμένου, αλλά οι έννοιες και οι λύσεις που προτείνουν συχνά επιβιώνουν από τη δοκιμασία του χρόνου."

Είχε δίκιο. Το AngularJS μπορεί να έχει καταστεί άνευ αντικειμένου, αλλά η πλήρης κατανόηση της μαγείας πίσω από αυτό με βοήθησε να κατανοήσω καλύτερα την αρχιτεκτονική του διαδικτυακού στοιχείου της React, η οποία βελτιώθηκε με την έννοια της Angular's Directives Με βοήθησε επίσης να καταλάβω πώς το ReactJS κέρδισε τόση δημοτικότητα, καθώς και τι είδους περίμεναν μέλλον.

Δεν θυμάμαι να αντιμετωπίζω άλλες μεγάλες προκλήσεις στα επόμενα έργα μου. Αλλά αυτό που θα πω είναι ότι κατά τη διάρκεια των 2 ετών έκανα ανάπτυξη ιστοσελίδων, το # 1 πράγμα που βοήθησε στην επιτυχία (σύμφωνα με τους συναδέλφους μου) ήταν ο ενθουσιασμός μου και η ισχυρή μου προσπάθεια να είμαι πάντα επιφυλακτικός για να μάθουν νέα πράγματα. Σύντομα ανακάλυψα ότι αυτός ήταν ένας νικηφόρος συνδυασμός με την ανάπτυξη διαδικτύου, καθώς τα πράγματα εδώ αλλάζουν πραγματικά, πολύ γρήγορα, με νέα πλαίσια και βιβλιοθήκες να εμφανίζονται συνεχώς.

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

Δεν είναι ασυνήθιστο να βλέπουμε άτομα να επικρίνουν τον ασυνήθιστα γρήγορο ρυθμό εξέλιξης των τεχνολογιών Ιστού ή πώς μια νέα βιβλιοθήκη ή πλαίσιο JavaScript βγαίνει σχεδόν κάθε μέρα. Αλλά με τον καιρό είδα το φως και τελικά κατάλαβα:

Δεν χρειάζεται να μάθετε κάθε νέα βιβλιοθήκη ή πλαίσιο που βγαίνει.

Συχνά είναι εξαιρετική ιδέα να κάνετε μια απλή εφαρμογή παραδείγματος για τον κόσμο, ώστε να βλέπετε τι προσφέρει ένα πλαίσιο. Τότε μπορείτε να προχωρήσετε. Αλλά συνήθως, πρέπει να προσπαθήσετε να εστιάσετε σε αυτό που ταιριάζει καλύτερα στις ανάγκες του έργου σας. Αυτό μπορεί να είναι δύσκολο στην αρχή, αλλά ευτυχώς υπάρχουν υπέροχα μέρη όπως το Stack Overflow, το Medium και το Reddit όπου μπορείτε να βρείτε χρήσιμες συζητήσεις μεταξύ των πλαισίων και να μάθετε ποια ταιριάζουν καλύτερα στις συγκεκριμένες περιπτώσεις χρήσης.

Προχωρώντας περαιτέρω

Τα επόμενα χρόνια, προχώρησα στη συνεχή βελτίωση με τους ακόλουθους τρόπους

JavaScript

Μόλις ολοκληρώσετε το Eloquent JavaScript, είναι μάλλον εύκολο να πείτε και να νιώσετε σαν να έχετε κατακτήσει τη JavaScript, αλλά έπειτα έρχεται το You Don't Know JS και σας καταστρέφει απολύτως (ή τουλάχιστον το έκανε για μένα). Αυτή η σειρά βιβλίων (δωρεάν παρεμπιπτόντως) μου αναφέρθηκε αρκετές φορές από μερικούς ανώτερους προγραμματιστές ιστού στο γραφείο ως το βιβλίο για ανάγνωση, και μόνο μέχρι να το διαβάσω μπορώ να πω ότι γνωρίζω πλήρως τη JavaScript. Είχαν δίκιο, δεδομένου ότι η σελίδα μετά τη σελίδα έσπασε συνεχώς το μυαλό μου για το πόσο πραγματικά περίπλοκο ήταν πραγματικά το JavaScript, καθώς και πολλές, πολλές κοινές παγίδες που δεν έχουν έμπειρους και έμπειρους ανθρώπους χωρίς την κατάλληλη κατανόηση της JavaScript.

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

  • JavaScript, The Better Parts: Μια καταπληκτική ομιλία του D. Crockford που μιλά για τις μεγαλύτερες αδυναμίες της JavaScript, είναι το "Foot Guns" και πώς να τα χρησιμοποιήσετε ως τα δυνατά του σημεία.
  • Οι δύο πυλώνες της JavaScript: ένα συμπαγές άρθρο από αναγνωρισμένο συγγραφέα JavaScript Medium Eric Elliott που μιλά για τους 2 μεγάλους πυλώνες της JavaScript: Πρωτοτυπική κληρονομικότητα και λειτουργικός προγραμματισμός

Μόλις κατανοήσετε σε βάθος τη JavaScript, προχωρήστε στο ECMASCript 2015 (επίσης γνωστό ως ES6), το πιο πρόσφατο και το τρέχον πρότυπο JavaScript. Το άρθρο του Smashing Magazine ECMAScript 6 (ES6): Τι νέο υπάρχει στην επόμενη έκδοση του JavaScript είναι μια μεγάλη σύντομη κριτική για το τι νέο υπάρχει στο ES6. Μπορείτε να δοκιμάσετε το ES6 στο πρόγραμμα περιήγησης χρησιμοποιώντας το διαδικτυακό transpiler της Babel.

CSS

Το CSS μπορεί να γίνει ακατάστατο και αποδιοργανωμένο πολύ γρήγορα. Έχουν προταθεί αρκετές διαφορετικές μεθοδολογίες για να γράψετε καθαρότερο CSS, αλλά 2 ξεχωρίζουν τις οποίες σας συνιστώ ανεπιφύλακτα να διαβάσετε για το ASAP για να παραμείνετε ανταγωνιστικοί:

  • SMACSS: Επεκτάσιμη και αρθρωτή αρχιτεκτονική για CSS. Ένας ευέλικτος οδηγός για την ανάπτυξη ιστότοπων μικρών και μεγάλων.
  • BEM: μια μεθοδολογία που σας βοηθά να επιτύχετε επαναχρησιμοποιήσιμα στοιχεία και κοινή χρήση κώδικα στο front-end.

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

Θα πρέπει επίσης να αρχίσετε να εστιάζετε στην απόδοση του CSS σας. Το άρθρο του Smashing Magazine Διαχείριση της βελτιστοποίησης απόδοσης για κινητά και το άρθρο της HTML5 Rocks High Performance Animation έκανε μια σταθερή δουλειά στο να δώσει μια πρώτη αρχή σε αυτό. Μια γρήγορη ανάγνωση και των δύο άρθρων θα σας δώσει μια σταθερή βάση.

Πακέτα JavaScript

Μέχρι τώρα θα πρέπει να έχετε καλή κατανόηση του Grunt ή του Gulp. Το επόμενο βήμα είναι να προσθέσετε ένα πρόγραμμα δέσμης JavaScript στο πρόγραμμα εκτέλεσης εργασιών, το οποίο θα επιτρέψει μια πιο αρθρωτή οργάνωση της εφαρμογής σας JavaScript.

Οι δύο μεγαλύτεροι παίκτες τώρα είναι:

  • Browserify: σας επιτρέπει να χρειάζεστε ενότητες στο πρόγραμμα περιήγησης, ομαδοποιώντας όλες τις εξαρτήσεις σας.
  • Webpack: βασικά Browserify σε στεροειδή. Είναι πιο δύσκολο να διαμορφωθεί και να ρυθμιστεί.

Το μίνι-μάθημα του Scotch.io Ξεκινώντας με το Browserify μπορεί να σας προσφέρει μια εκκίνηση με το πρόγραμμα περιήγησης, ενώ το άρθρο του David Fox Powell Γιατί δεν μπορεί κανείς να γράψει ένα απλό εκπαιδευτικό Webpack; είναι μια υπέροχη, διασκεδαστική ανάγνωση εισαγωγή στο webpack.

Προσωπικά δεν έχω ξοδέψει πολύ χρόνο χρησιμοποιώντας το webpack, αλλά στον καιρό μου με αυτό, πρέπει να πω ότι ήταν καταπληκτικό - ακόμα κι αν είναι λίγο πιο δύσκολο να το δημιουργήσω. Εάν μόλις ξεκινήσετε, θα έκανα το Browserify, καθώς είναι πολύ πιο απλό να ρυθμιστεί. Απλώς να γνωρίζετε ότι το webpack είναι το μέλλον και ποια μεγαλύτερα έργα αρχίζουν να χρησιμοποιούν.

ReactJS

Το ReactJS κερδίζει γρήγορα δημοτικότητα και δεν φαίνεται να επιβραδύνεται - στο βαθμό που οι άνθρωποι ρωτούν "Το React σκοτώνει το Angular;"

Το Learning React.js του Scotch.io: Ξεκινώντας και Έννοιες παρέχει μια σταθερή επισκόπηση του React. Μόλις το ξεπεράσετε, συνεχίστε με το μάθημα του Egghead.io για το React Fundamentals, όπου θα δημιουργήσετε μια πλήρως λειτουργική εφαρμογή ReactJS και, στη συνέχεια, τη μετεγκαταστήστε στη σύνταξη ES6. Μπορείτε να συνεχίσετε με την επίσημη τεκμηρίωση του ReactJS που είναι πολύ καλά φτιαγμένη και θα σας επιτρέψει να την κυριαρχήσετε πλήρως.

Δεδομένου ότι το React είναι μόνο η προβολή, συνιστάται να μάθετε το Redux. Τα περισσότερα μαθήματα για το Redux είναι λίγο περίπλοκα κατά τη γνώμη μου, αλλά το CSS Tricks Leveling Up με το React: το Redux σημειώνει μεγάλη ισορροπία μεταξύ της απλότητας και της ενημέρωσης κατά την έναρξη του Redux.

Ίσως έχετε επίσης ακούσει για το Flux σε αυτό το σημείο, αλλά αν αναρωτιέστε γιατί πρέπει να χρησιμοποιήσετε το Redux over Flux, ρίξτε μια ματιά στο Stack Overflow Γιατί να χρησιμοποιήσετε το Redux μέσω Facebook Flux; που απαντήθηκε από τον δημιουργό του Redux!

Κοιτάζοντας πίσω τα λάθη μου και ό, τι έμαθα

Έκανα πολλά λάθη στα 2 χρόνια της εκμάθησης μου στο web development. Συνολικά, νομίζω ότι το μεγαλύτερο λάθος μου δεν ήταν να μάθω τα βασικά πριν προχωρήσω σε βιβλιοθήκες και πλαίσια. Υποθέτω ότι αυτό ισχύει για σχεδόν κάθε γλώσσα προγραμματισμού εκεί έξω, αλλά κατά τη γνώμη μου ισχύει ακόμη περισσότερο για τη JavaScript. Αυτό συμβαίνει επειδή με πολλούς τρόπους, η JavaScript είναι μια σπασμένη γλώσσα και περιέχει πολλά "Foot Guns" (θα έπρεπε να το έχετε ακούσει αν παρακολουθούσατε την ομιλία του D. Crockford σχετικά με το "JavaScript, τα καλύτερα μέρη" που ανέφερα νωρίτερα). Αυτά μπορεί να κάνουν τη ζωή ανεπαρκώς δύσκολη, αν δεν τις καταλαβαίνετε πλήρως.

Θυμάμαι μια φορά που πάρει κολλήσει σε ένα θέμα AngularJS με $ πεδίο που μου πήρε 3 μέρες για τον εντοπισμό σφαλμάτων, για να διαπιστώσουμε ότι δεν ήταν ακόμη ένα ζήτημα AngularJS, αλλά ένα θέμα το JavaScript ότι εγώ ο ίδιος προκάλεσε, λόγω της αποτυχίας να καταλάβουμε πώς αυτό λειτουργεί.

Καθαρισμός κώδικα

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

Αυτή είναι μια τάση που θα ήθελα να αλλάξω και πιστεύω ότι μπορεί να γίνει μια διαφορά εάν αρκετοί άνθρωποι το κάνουν. Προσπαθήστε να κάνετε τα ονόματα μεταβλητών και λειτουργιών κατανοητά στα Αγγλικά, ακόμα και αν πρέπει να γράψετε λίγο περισσότερα. Αν δεν το κάνετε, θα πρέπει να το εγγράψετε με μη αυτόματο τρόπο κάποια στιγμή στο μέλλον για να το καταστήσετε πιο σαφές. Αυτό θα κάνει επίσης τη συνολική βάση κώδικα να γίνει δυσκολότερη από τους νέους προγραμματιστές και από εσάς. Ναι, εσύ. Γιατί εσύ; Επειδή εάν δεν εφαρμόζετε τον καθαρό κώδικα, τι σας κάνει να πιστεύετε ότι οι συνάδελφοί σας πρέπει να τον επιβάλουν και να γράφουν καθαρό κώδικα για να καταλάβετε εύκολα; Ας οδηγήσουμε με το παράδειγμα.

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

jQuery

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

Μην με παρεξηγείτε, το jQuery ήταν φοβερό στη στιγμή που το χρησιμοποιούσα, τόσο φοβερό στην πραγματικότητα, που αγνόησα τυφλά ότι το 90% αυτού που έκανα με το jQuery θα μπορούσε να γίνει εγγενώς σε μοντέρνα προγράμματα περιήγησης με παρόμοια εύκολη σύνταξη.

Ίσως τώρα σκέφτεστε: «Τι συμβαίνει λοιπόν με αυτό; Το jQuery δεν σταματάει τόσο πολύ κι αν το χρησιμοποιείτε, καταλήγετε να γράφετε λιγότερο κώδικα από ό, τι αν κάνατε τα πράγματα εγγενώς. " Αλλά η χρήση του jQuery μέσω εγγενών API δεν ήταν το πρόβλημα. Το πρόβλημα ήταν ότι ολόκληρος ο τρόπος σκέψης μου και όλες οι λύσεις σε κοινά προβλήματα που ήξερα μέχρι εκείνο το σημείο απαιτούσε το jQuery να λειτουργήσει. Και αυτό έγινε ένα τεράστιο πρόβλημα όταν πήρα το πρώτο μου έργο και μου είπαν ότι το jQuery δεν ήταν εξάρτηση.

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

Από τότε, προσπάθησα να μην χρησιμοποιήσω το jQuery εκτός εάν είναι απολύτως απαραίτητο και παρέχει πραγματικά μεγάλη βελτίωση στην αποδοτικότητα και την αναγνωσιμότητα στη βάση κώδικα μας (για παράδειγμα, βαριά χειραγώγηση DOM).

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

ΚΥΚΛΟΣ ΜΑΘΗΜΑΤΩΝ

Όσον αφορά το υλικό του μαθήματος. ενώ πολλά μαθήματα του CodeSchool ήταν εξαιρετικά (ο κλάδος HTML & CSS ήταν ιδιαίτερα φανταστικός), ακόμα κι αν μερικά από τα μαθήματά τους σε πλαίσια ήταν επίπεδη (AngularJS, BackboneJS κ.λπ.).

Έκανα επίσης πολλά μαθήματα Pluralsight, τα οποία δεν ανέφερα γιατί μετά από τόσο καιρό, έχω καταλήξει στο συμπέρασμα ότι η επιλογή της μαθησιακής τους πορείας είναι γενικά μια κακή ιδέα και αναξιόπιστη . Δεδομένου ότι τα μαθήματά τους γίνονται από καθηγητές που δεν είναι πάντα (κατά τη γνώμη μου) πολύ καλοί στη διδασκαλία, διαπίστωσα ότι η ποιότητα των μαθημάτων τους κυμαίνεται έντονα, καθώς τα πρότυπα ποιότητας των μαθημάτων τους είναι ανύπαρκτα. Είχα μαθήματα όπου ακόμη και το άτομο που έδωσε το μάθημα έμοιαζε να κοιμάται. Και ειλικρινά δεν έχω την προσοχή να συνεχίσω να προσέχω σε μια πορεία 6-10 ωρών - και πολλά από αυτά διαρκούν τόσο πολύ, αν όχι περισσότερο.

Πέρασα μια καλή 80-100 ώρες προπόνησης στο Pluralsight, και θέλω ειλικρινά ένα καλό μέρος πίσω. Μην με παρεξηγείτε, είχα μερικά καταπληκτικά μαθήματα για το Pluralsight, αλλά η εστίασή τους στην ποσότητα πάνω από την ποιότητα με έκανε πραγματικά να σπαταλήσω το χρόνο μου. Θα μπορούσα να είχα μάθει πολύ περισσότερα αν είχα λάβει μαθήματα από καλύτερες πηγές όπως το Egghead.io και το CodeSchool, όπου εκτιμούν περισσότερη ποιότητα ποσότητας.

Ο μόνος λόγος που θα μπορούσα ποτέ να σκεφτώ κάποιον που χρησιμοποιεί το Pluralsight είναι να ακολουθήσει ένα μάθημα που κανένας άλλος ιστότοπος δεν έχει κάποια πιο ασαφή τεχνολογία (όπως το Installshield ή το Xamarin) ή να παρακολουθήσει μερικά πολύ συγκεκριμένα μαθήματα που γνωρίζουν ότι έλαβε πολύ καλά και αναθεωρημένο (Για παράδειγμα, οι γωνιακές βασικές αρχές του John Papa).

Συνολικά, εάν θέλετε να χρησιμοποιήσετε το Pluralsight, βεβαιωθείτε ότι παρακολουθείτε μαθήματα που επιλέγονται με το χέρι από κάποιον που τα πήρε πρώτα και ότι αναγνωρίζονται ως υψηλής ποιότητας και χρήσιμα.

Δοκίμασα επίσης πρόσφατα την προπόνηση Team Treehouse και έχω να πω, είμαι έκπληκτος με την ποιότητα που πήγε στα μαθήματά τους, ακόμη και ανταγωνίζομαι αυτή του CodeSchool, και το υλικό των μαθημάτων τους είναι πολύ εκτεταμένο.

Αφού περιηγηθείτε στα μονοπάτια εκμάθησης HTML, CSS και JavaScript εκεί, βλέπω ότι θα μπορούσατε εύκολα να αποκτήσετε τα θεμέλια σχεδόν όλων. Δεν με πιστεύεις; Κοιτάξτε τα κομμάτια εκμάθησης και πείτε μου ότι δεν είναι εκπληκτικό. Σίγουρα, είναι λίγο ακριβό με 30 $ USD το μήνα, αλλά κατά τη γνώμη μου αξίζει πολύ. (Το πληρώνω τώρα για να μάθω το WordPress αφού το χρειάζομαι για ένα ανεξάρτητο έργο και το υλικό είναι υπέροχο).

Μια λέξη για τα μαθήματα επί πληρωμή

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

Ναι, υπάρχουν φοβερά μαθήματα πληρωμένης μάθησης, τα οποία θα συμβούλευα, καθώς η πρόταση αξίας τους είναι αμφισβητήσιμη (βλ. Pluralsight), αλλά άλλα όπως τα Egghead.io, CodeSchool και Team Treehouse προσφέρουν εξαιρετικό bang-for-your-buck, παρά το σχετικά δαπανηρό τους μηνιαία συνδρομή (25 $ - 30 $ το μήνα). Επιπλέον, όλοι έχουν δωρεάν δοκιμές 7-15 ημερών, ώστε να μπορείτε να δείτε ποια είναι η καλύτερη για εσάς.

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

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

Η μυστική σάλτσα για την επιτυχία

Έχω γνωρίσει πολλούς προγραμματιστές τα τελευταία 2 χρόνια Είμαι προγραμματιστής ιστού. Κατά τη διάρκεια του ταξιδιού μου, γνώρισα μερικούς προγραμματιστές που πραγματικά ξεχώρισαν - προγραμματιστές που ήταν σαφώς σε ένα δικό τους πρωτάθλημα, και στους οποίους κοιτούσα εγώ και όλους τους άλλους. Βρήκα ότι αυτά τα άτομα μοιράστηκαν αρκετά χαρακτηριστικά, τα οποία θα ήθελα να μοιραστώ μαζί σας αυτήν τη στιγμή. Αυτά είναι κατά τη γνώμη μου η μυστική σάλτσα για να είσαι επιτυχημένος προγραμματιστής ιστού:

  • Αγάπα ότι κάνεις. Αυτό είναι απλώς το πιο σημαντικό χαρακτηριστικό όλων αυτών. Εάν δεν σας αρέσει αυτό που κάνετε (είτε πρόκειται για στυλ CSS είτε για JavaScript), θα εμφανιστεί πραγματικά σε αυτό που κάνετε. Όσοι είναι παθιασμένοι με αυτό που κάνουν συχνά ξεχωρίζουν ξεκάθαρα από το πλήθος.
  • Να είστε γενναιόδωροι και να μοιραστείτε τις γνώσεις σας . Είναι πολύ εύκολο να θέλουμε να διατηρήσουμε αυτό το νέο hack CSS / JavaScript που βρήκατε που λύνει τα ζητήματα του έργου μυστικό, αλλά παρακαλώ μην το κάνετε. Τα άτομα που μοιράζονται τις γνώσεις τους περισσότερο είναι συχνά τα πιο πολύτιμα, καθώς μπορούν να τοποθετηθούν σε οποιοδήποτε είδος ομάδας και να βελτιώσουν την ποιότητά της με τεράστιο περιθώριο.
  • Πάντα να ψάχνετε για νέα πράγματα . Οι περισσότεροι από τους επιτυχημένους προγραμματιστές που έχω γνωρίσει μοιράζονται αυτό το κοινό χαρακτηριστικό. Είτε διαβάζετε ιστολόγια, ξοδεύετε πολύ χρόνο σε σχετικές συζητήσεις προγραμματισμού, ή ακόμα και μιλάτε για το τι νέο υπάρχει στην ανάπτυξη ιστού κατά τη διάρκεια των διαλειμμάτων του γεύματος. Το να ψάχνετε για νέα πράγματα συνεχώς επιτρέπει στους καλύτερους προγραμματιστές να παραμένουν πάντα μπροστά από την καμπύλη.

Η πιο σύντομη διαδρομή

Λοιπόν, αυτό το άρθρο χρειάστηκε λίγος χρόνος για να ολοκληρωθεί (6 ώρες και μετράει). Έχουμε σχεδόν τελειώσει! Ίσως αναρωτιέστε: "Εντάξει, ωραία ιστορία, αλλά ποια είναι η πιο γρήγορη διαδρομή;" Και λοιπόν, εδώ είναι.

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

Javascript

  1. Μάθημα Javascript CodeSchool ή Treehouse (επί πληρωμή) Ή μαθήματα Javascript του Codecademy
  2. Έγγραφο JavaScript
  3. Δεν ξέρετε JS
  4. JS: Ο σωστός τρόπος
  5. Μάθετε ES6 από Egghead.io

HTML & CSS

  1. Διαδρομή HTML & CSS CodeSchool ή Treehouse (επί πληρωμή) Ή HTML και CSS: Σχεδίαση και κατασκευή ιστοσελίδων από το μάθημα John Ducket Ή Codecademy HTML & CSS.
  2. Στοιχεία σχετικά με την προδιαγραφή CSS από τεχνάσματα CSS
  3. Μάθετε CSS Διάταξη
  4. SMACSS
  5. 9 βασικές αρχές σχεδιασμού ιστοσελίδων από το Front
  6. Βασικές αρχές αποκριτικής σχεδίασης Ιστού από την Google στο Udacity (Λάβετε υπόψη εάν δεν χρησιμοποιήσατε το PathSchool ή το Treehouse learning
  7. Διαχείριση βελτιστοποίησης απόδοσης για κινητά από Smashing Magazine Ή Βελτιστοποίηση απόδοσης προγράμματος περιήγησης και βελτιστοποίηση απόδοσης ιστότοπου από την Google στο Udacity
  8. Βασικές αρχές ιστού από την Google

Εργαλεία προγραμματιστή

  1. Εξερεύνηση και Master DevTools από CodeSchool
  2. Μάθετε το Git by Codecademy και Δοκιμάστε το Github by Codeschool
  3. Εισαγωγή στις εντολές Linux από το περιοδικό Smashing
  4. Αυτοματοποιήστε τις εργασίες σας εύκολα με το Gulp.js από Scotch.io

Γωνιακό JS

  1. Αποφάσεις σχεδιασμού στο AngularJS από Google Developers (Εισαγωγή στο AngularJS)
  2. Βασικές αρχές του AngularJS από το Egghead.io
  3. Γωνιακός οδηγός στυλ του John Papa
  4. Δημιουργία μιας εφαρμογής Todo μίας σελίδας με κόμβο και γωνιακό (MEAN) από τον Scotch.io
  5. Δομή εφαρμογής AngularJS από Egghead.io (επί πληρωμή) Ή γωνιακά μαθήματα Scotch.io

ReactJS

  1. Learning React.js: Ξεκινώντας και Έννοιες από το Scotch.io
  2. Εισαγωγή στο webpack από το Egghead.io
  3. React Fundamentals από τον Egghead.io
  4. Leveling Up με React: Redux από CSS Tricks

Επιστροφή

  1. Σεμινάρια NodeJS από το NodeSchool.io
  2. Πώς εξήγησα το REST στη σύζυγό μου
  3. Δημιουργία μιας εφαρμογής Todo μίας σελίδας με κόμβο και γωνιακό από Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Μπόνους: Πόροι

Εντελώς προαιρετικό, αλλά μερικά από τα αγαπημένα μου άρθρα και πόρους που έχω βρει όλα αυτά τα χρόνια, τα οποία πιθανώς θα λατρέψετε αν σας ενδιαφέρει το αντίστοιχο θέμα τους.

  • Σχεδιασμός Ιστού σε 4 λεπτά. Ένα πολύ δημιουργικό και πρωτότυπο διαδραστικό σεμινάριο που σας διδάσκει τις βασικές αρχές του web design.
  • Προς τα πάνω. Ψάχνετε για έμπνευση σχεδιασμού ιστοσελίδων; Μην ψάχνετε άλλο.
  • Γιατί η πρόσληψη είναι τόσο δύσκολη στην τεχνολογία από τον Eric Elliott. Εδώ ο Eric κάνει μια καταπληκτική δουλειά στο να συνοψίζει πώς είναι εκπληκτικά δύσκολο να βρεις σπουδαίους προγραμματιστές και πώς να γίνεις ένας.
  • Μέγα σύγκριση συστημάτων βάσεων δεδομένων NoSQL από τον Kristof Kovacs. Αυτή είναι μια εξαιρετική σύγκριση μεταξύ των πιο δημοφιλών συστημάτων βάσεων δεδομένων NoSQL εκεί έξω. Οι MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, αυτοί και άλλοι είναι όλοι εδώ.
  • Παιχνίδι XSS. Τα σφάλματα cross-site scripting (XSS) είναι ένας από τους πιο συνηθισμένους και επικίνδυνους τύπους ευπάθειας σε εφαρμογές Web. Χρησιμοποιώντας αυτόν τον καταπληκτικό πόρο, μπορείτε να μάθετε πώς να βρίσκετε και να εκμεταλλεύεστε σφάλματα XSS και πώς να τα αποτρέψετε να συμβούν στην εφαρμογή ιστού σας.
  • Πώς να γράψετε μη διατηρήσιμο κώδικα. Ξεκαρδιστικό άρθρο για το πώς όχιπρος τογράψτε συντηρήσιμο, καθαρό κώδικα.

Μπόνους: Τα εργαλεία μου

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

  • Jetbrains Webstorm: Πλήρες χαρακτηριστικό Web Development IDE. (Ο συντάκτης της επιλογής μου) Πληρώθηκε, αλλά προσφέρει δωρεάν άδεια 1 έτους για φοιτητές.
  • Atom.io: Πολύ επεκτάσιμο πρόγραμμα επεξεργασίας κειμένου με χαρακτηριστικά όπως IDE που ανταγωνίζονται το Webstorm. Ελεύθερος.
  • Sublime Text: Lightning fast text editor με υποστήριξη προσθηκών και αισθητικά ευχάριστη εμφάνιση. (Συνήθως διατηρώ το Webstorm / Atom εγκατεστημένο ως IDE για σοβαρή δουλειά και το Sublime Text εγκατεστημένο για γρήγορες αλλαγές σε αρχεία.)
  • caniuse.com: Η υποστήριξη του προγράμματος περιήγησης είναι σημαντική για τους ιστότοπους και αυτός είναι ο # 1 πόρος για να μάθετε ποιες δυνατότητες υποστηρίζονται από ποια έκδοση του προγράμματος περιήγησης και ποιες.
  • Cloud 9: περιβάλλον ανάπτυξης με βάση το cloud και IDE με υποστήριξη Git που εκτελείται σε Linux. Ιδανικό για απομακρυσμένο προγραμματισμό και δοκιμή NodeJS ή άλλων πραγμάτων διακομιστή χωρίς να χρειάζεται να εγκαταστήσετε τίποτα στον υπολογιστή σας
  • CodePen, Plunker και JSFiddle: Υπέροχες παιδικές χαρές με βάση το cloud που σας επιτρέπουν να κάνετε γρήγορες επιδείξεις HTML / CSS / JS τις οποίες μπορείτε να μοιραστείτε ή να εργαστείτε αργότερα εάν δημιουργήσετε έναν δωρεάν λογαριασμό. Το CodePen είναι συχνά καλύτερο για πράγματα που σχετίζονται με το CSS λόγω της μινιμαλιστικής διεπαφής και της πληθώρας λειτουργιών που σχετίζονται με το CSS, του Plunker για επιδείξεις JavaScript λόγω των ισχυρών λειτουργιών του JS και του JSFiddle για επιδείξεις που θέλετε να συνεργαστείτε με άλλους σε πραγματικό χρόνο χάρη στον ζωντανό επεξεργαστή του κοινή χρήση της δυνατότητας συνεργασίας.
  • Λίστα βανίλιας: Ένα αποθετήριο προσθηκών και βιβλιοθηκών JavaScript χρησιμοποιώντας μόνο JavaScript βανίλιας (που σημαίνει ότι δεν απαιτούν καμία βιβλιοθήκη για να λειτουργήσει, όπως το jQuery)
  • YouMightNotNeedjQuery: Πιθανότατα δεν το κάνετε. Κοιταξε και μονος σου.
  • PublicAPIs: Αναρωτηθήκατε ποτέ ποια δημόσια API υπάρχουν; Μην ψάχνετε άλλο!
  • Gravit.io: Εφαρμογή σχεδίασης που βασίζεται σε σύννεφο και ανταγωνίζεται τον εικονογράφο πλίθας. (Δωρεάν!) Χρήσιμο για γρήγορη κοροϊδεύω και σχεδιασμό ιστοσελίδων.
  • Adobe Kuler: Webapp για να σας βοηθήσει να δημιουργήσετε αρμονικούς συνδυασμούς χρωμάτων για οποιονδήποτε ιστότοπο. Διαθέτει επίσης μια βιτρίνα "Εξερεύνησης" χρωματικών παλετών που έχουν κατασκευαστεί από άλλους σχεδιαστές, καθώς και ένα σύστημα κατάταξης για να σας εμπνεύσει.
  • Ονομάστε αυτό το χρώμα: Σταματήστε να ξοδεύετε πολύ χρόνο για να μάθετε πώς να ονομάσετε τις μεταβλητές χρωμάτων σας σε λιγότερο / sass και απλώς χρησιμοποιήστε το νόμιμο όνομά τους με αυτό το webapp

συμπέρασμα

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

Όπως έχουν ήδη παρατηρήσει ορισμένοι από εσάς, αυτή είναι η πρώτη μου ανάρτηση στο blog, αλλά μπορείτε να είστε σίγουροι ότι σκοπεύω να γράψω περισσότερα. Απλά μην περιμένετε ένα κάθε εβδομάδα. Θυμηθείτε: ποιότητα σε σχέση με την ποσότητα!

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

Ελπίζω να ήταν χρήσιμο για εσάς, μέχρι την επόμενη φορά, Καλύτερο!

Ενημέρωση Μαρτίου '18 : Για όσους ενδιαφέρονται για το τι έχω επισκεφτεί, ακολουθεί μια γρήγορη ενημέρωση κατάστασης!

//medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca