Ενισχύστε το χαρτοφυλάκιο προγραμματιστών σας με τις σελίδες GitHub και το φάρο

Για κάποιον που προσπαθεί να εισέλθει στην ανάπτυξη λογισμικού, δεν έχει σημασία πού κοιτάζετε - LinkedIn, πίνακες συμβουλών σταδιοδρομίας, σεμινάρια youtube - οι συμβουλές είναι πάντα οι ίδιες: χρειάζεστε ένα χαρτοφυλάκιο. Το freeCodeCamp γνωρίζει αυτήν την συμβουλή και το καθιστούν υποχρεωτικό να δημιουργήσουν έναν για να ολοκληρώσουν την πιστοποίηση "Responsive Web Design".

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

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

Η de facto μέθοδος για την ολοκλήρωση των έργων στο freeCodeCamp είναι να χρησιμοποιήσετε το codepen.io. Η δωρεάν έκδοση σάς επιτρέπει να κωδικοποιήσετε σε ένα παράθυρο HTML, CSS και JavaScript και να δείτε τις αλλαγές σας καθώς τις πληκτρολογείτε σε ένα παράθυρο. Μπορείτε να ανοίξετε τη σελίδα σε πλήρη προβολή, η οποία εξαλείφει τα παράθυρα HTML, CSS και JavaScript, αλλά αφήνει ένα μαύρο banner στην κορυφή. Η διεύθυνση URL είναι κατακερματισμός, κάτι σαν το //codepen.io/cam-barts/full/ZPWpqo, το οποίο δεν είναι αξιομνημόνευτο, δεν δίνει καμία ένδειξη σχετικά με το περιεχόμενο του ιστότοπου και κατά τη γνώμη μου δεν κάνει κανένα κύμα σε ένα ΒΙΟΓΡΑΦΙΚΟ. Επιπλέον, αν δεν πληρώσετε για συνδρομή στο codepen, δεν μπορείτε να το αλλάξετε.

Περίπου την ολοκλήρωση του έργου μου, τα αστέρια ευθυγραμμίστηκαν και ανακάλυψα δύο τεχνολογίες που θα μπορούσαν να βοηθήσουν το χαρτοφυλάκιό μου να ξεχωρίσει: Github Pages και Google Lighthouse

Οι σελίδες Github σάς επιτρέπουν να φιλοξενείτε έναν ιστότοπο απευθείας από ένα αποθετήριο GitHub. Προσφέρει μια όμορφη κηλίδα url github.io, η οποία μου άρεσε για κάτι που έβαλα σε ένα βιογραφικό. Θα μου επέτρεπε τον πλήρη έλεγχο του τι θα έβλεπαν οι χρήστες μου κατά την πλοήγησή τους στον ιστότοπο (τόσο μεγάλο, μαύρο banner) και δεν θα έπρεπε να ασχοληθώ με την αυτο-φιλοξενία ή την πληρωμή για κάποια άλλη φιλοξενία.

Άκουσα για το Google Lighthouse στο CodeNewbie Podcast με τον Frances Coronel. Ελέγχει τον ιστότοπό σας απευθείας από το Chrome Dev Tools για πέντε περιοχές: Απόδοση, Προοδευτική εφαρμογή Ιστού, Προσβασιμότητα, Βέλτιστες πρακτικές και SEO. Το SEO, ή η βελτιστοποίηση μηχανών αναζήτησης, είναι αυτό που βοηθά τον ιστότοπό σας να φτάσει στην κορυφή των μηχανών αναζήτησης όπως το Google, το οποίο σας βοηθά να βρεθείτε. Επίσης, τώρα που επρόκειτο να φιλοξενήσω τον ιστότοπό μου στις Σελίδες, ήθελα να αναλάβω την ευθύνη για την απόδοση του ιστότοπού μου και να το κάνω αποτελεσματικά, έπρεπε τουλάχιστον να έχω ένα σημείο αναφοράς.

Ο στόχος μου να γράψω αυτό το άρθρο είναι να σας βοηθήσω να δημιουργήσετε έναν απίστευτα γρήγορο, επαγγελματικό ιστότοπο χαρτοφυλακίου χωρίς κόστος. Θέλω να είναι κάτι για το οποίο είστε περήφανοι να δημοσιεύσετε στο LinkedIn και γύψο στην κορυφή του βιογραφικού σας και θέλω να αξιοποιήσω τις σελίδες GitHub και το φάρο Google για να το κάνω.

Για να προχωρήσω περισσότερο, έχω κάνει μερικές υποθέσεις. Το πρώτο είναι ότι έχετε λογαριασμό Github. Εάν δεν έχετε ήδη, η δημιουργία ενός είναι εύκολη. Το δεύτερο είναι ότι έχετε μια βασική κατανόηση του git. Εάν είστε ολοκαίνουργιοι, υπάρχουν πολλά εξαιρετικά άρθρα για να ξεκινήσετε. Αυτό το άρθρο προϋποθέτει ότι έχετε ολοκληρώσει το χαρτοφυλάκιό σας στο codepen. Τέλος, θα πρέπει να έχετε εγκατεστημένο το Google Chrome.

Αυτό το άρθρο ακολουθεί το προσωπικό μου χαρτοφυλάκιο. Μπορείτε να βρείτε το στυλό εδώ, τον κωδικό εδώ και το τελικό προϊόν είναι στο cam-barts.github.io.

Ξεκινώντας

Η ρύθμιση του ιστότοπού σας Github Pages είναι αρκετά απλή. Η έκδοση TL; DR είναι:

  • Δημιουργία αποθετηρίου ακολουθώντας τη σύμβαση ονόματος [GitHub Username] .github.io
  • Κλωνοποίηση τοπικά
  • Δημιουργήστε αρχεία index.html , style.css , script.js μέσα στο αποθετήριο
  • Προσθέστε κώδικα σε αυτά τα αρχεία
  • Δέσμευση και προώθηση στο GitHub
  • Κέρδος!

Δημιουργείτε ένα αποθετήριο με τίτλο που ακολουθεί τη σύμβαση [Your Github Username] .github.io. Εδώ είναι το δικό μου: cam-barts.github.io. Όποιος κώδικας ωθείται σε αυτό το αποθετήριο εμφανίζεται όταν μεταβαίνετε σε αυτόν τον ιστότοπο.

Έτσι, όταν έχετε κλωνοποιήσει το αποθετήριο τοπικά, τι ακριβώς το τοποθετείτε;

Θα πρέπει να ξεκινήσετε με τρία αρχεία, ένα αρχείο index.html , ένα αρχείο style.css και ένα αρχείο script.js . Σε όποιο πρόγραμμα επεξεργασίας θέλετε (χρησιμοποιώ Atom), πρέπει να ξεκινήσετε με το ακόλουθο απόσπασμα κώδικα στο index.html :

Υπάρχουν πολλά που συμβαίνουν εδώ που μπορεί να είναι άγνωστα εάν εργάζεστε μόνο με το codepen.io.

Η dir χαρακτηριστικό στην ετικέτα HTML υποδεικνύει ότι το έγγραφο θα πρέπει να διαβαστεί L eft T o R ight. Αυτό διασφαλίζει απλώς ότι όταν εμφανίζεται η σελίδα σας, όλα τα στοιχεία αφήνονται δικαιολογημένα, όπως διαβάζουν οι αγγλόφωνοι.

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

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

Το επόμενο βήμα είναι να αντιγράψετε την ενότητα HTML της πένας χαρτοφυλακίου σας στην ενότητα σώματος του αποσπάσματος. Μόλις ολοκληρωθεί, εάν συνδεθείτε με οποιοδήποτε εξωτερικό CSS ή JS στις ρυθμίσεις της πένας σας, όπως το Bootstrap ή το Font Awesome, θα πρέπει να τα συνδέσετε στο index.html .

Δημιουργήστε περισσότερες ετικέτες συνδέσμων για css και ετικέτες σεναρίων για JavaScript και προσθέστε τους συνδέσμους που βρίσκονται στις ρυθμίσεις στα χαρακτηριστικά href και src , αντίστοιχα. Για να βεβαιωθείτε ότι εμφανίζονται τα στυλ και τα σενάρια σας, φροντίστε να τα τοποθετήσετε πριν από τον υπάρχοντα σύνδεσμο και τις ετικέτες σεναρίων στο απόσπασμα. Για παράδειγμα, η σύνδεση με το Bootstrap και το JQuery θα μοιάζει με:

Στη συνέχεια, πρέπει να προσθέσετε το δικό σας CSS στο style.css σας και αν έχετε JavaScript, προσθέστε το στο script.js σας .

Αφού το κάνετε αυτό, είστε καλοί να δεσμεύσετε όλη τη δουλειά σας και να το προωθήσετε στο Github. Αμέσως μετά το κάνετε αυτό, μπορείτε να μεταβείτε στο [Το όνομα χρήστη σας Github] .github.io και να δείτε τον ιστότοπό σας!

Βελτιστοποίηση του ιστότοπου χαρτοφυλακίου σας

Συγχαρητήρια για τη δημοσίευση του χαρτοφυλακίου σας!

Τα επόμενα βήματα περιλαμβάνουν τη βελτιστοποίηση του ιστότοπού σας. Για αυτό, θα χρησιμοποιήσουμε το Google Lighthouse. Είναι καλύτερο να το κάνετε αυτό σε ένα παράθυρο στο ιδιωτικό πρόγραμμα περιήγησης, ώστε τυχόν κρυφές μνήμες ή επεκτάσεις Chrome που ενδέχεται να έχετε να μην επηρεάζουν τα αποτελέσματα. Όταν περιηγείστε στον ιστότοπό σας, ανοίξτε τα Εργαλεία προγραμματιστών Chrome (Ctrl + Shift + i) και κάντε κλικ στην καρτέλα Έλεγχοι .

Οι Προοδευτικές Εφαρμογές Ιστού βρίσκονται εκτός του πεδίου αυτού του σεμιναρίου, αλλά δεν υπάρχει βλάβη στην εκτέλεση όλων των ελέγχων. Όταν τα εκτελείτε, πρέπει να λάβετε μια σελίδα που μοιάζει με αυτήν:

Το καλύτερο πράγμα για αυτές τις αναφορές είναι ότι σας δίνει "Ευκαιρίες" για να βελτιώσετε τις βαθμολογίες σας.

Στην ενότητα επιδόσεων, σας λέει να προβάλλετε μορφές αρχείων επόμενης γενιάς, όπως το WebP έναντι των παραδοσιακών εικόνων .PNG και προτείνει τεμπέλης φόρτωση των εικόνων.

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

Για μένα, χρειάστηκε μόνο μια ώρα για να λάβω τα αποτελέσματα για τον ιστότοπό μου στη δεκαετία του '90 για απόδοση, προσβασιμότητα, βέλτιστες πρακτικές και SEO. Μπορείτε να δείτε όλες τις αλλαγές που έκανα εδώ.

Πηγαίνοντας πιο μακριά

Τα επόμενα βήματα για τον ιστότοπό σας εξαρτώνται από εσάς. Θα μπορούσατε να το συνδέσετε στο Google Analytics για να δείτε πόσους επισκέπτες λαμβάνει το χαρτοφυλάκιό σας. Θα μπορούσατε να προσθέσετε ενότητες για τα βραβεία σας για να δείξετε τις πιστοποιήσεις freeCodeCamp καθώς τις λαμβάνετε. Η εξέλιξη του ιστότοπού σας είναι εντελώς στα χέρια σας! Σχόλια συνδέονται με το χαρτοφυλάκιό σας παρακάτω.