Καλύτερη HTML, CSS, Javascript Πρακτική: Επέκταση Chrome

Για άτομα που μόλις ολοκλήρωσαν την Codecademy.

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

Κανονικά, οι άνθρωποι αρχίζουν να μαθαίνουν προγραμματισμό με HTML, CSS και βασικό Javascript στον προγραμματισμό ιστού, ωστόσο, πριν φτάσουν στο τμήμα του διακομιστή, είναι δύσκολο να κάνουν μια ουσιαστική εφαρμογή.

Έτσι, πάντα προσπάθησα να πείσω τους μαθητές σαν αυτό,

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

αλλά πολλοί μαθητές σταματούν να μαθαίνουν προγραμματισμό ενώ βρίσκονται στο στάδιο HTML και CSS.

(Ίσως, ξεκινώντας με το HTML, δεν είναι καλή ιδέα για να ενθαρρύνετε τους ανθρώπους να σπουδάσουν προγραμματισμό.)

Μια μέρα, άνοιξα το πρόγραμμα περιήγησης Chrome για να ξεκινήσω να δουλεύω. Τότε συνειδητοποίησα ότι είχα χρησιμοποιήσει την καλύτερη εφαρμογή που μπορείτε να δημιουργήσετε χρησιμοποιώντας μόνο HTML, CSS και Javascript.

Ορμή

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

Ας προσπαθήσουμε να κλωνοποιήσουμε αυτήν την εφαρμογή!

Φάση 1: Πράγματα που πρέπει να προετοιμαστούν

  • HTML
  • CSS
  • Javascript
  • Νίκαια εικόνα: από την απεμπλοκή
  • manifest.json (για φόρτωση από το Chrome)

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

Ας το κρατήσουμε απλό.

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

Βρείτε μια φωτογραφία

Εάν μεταβείτε στην ιστοσελίδα Unsplash μπορείτε να βρείτε τόνους δροσερών εικόνων χωρίς άδεια.

Εφόσον είμαι στη Νορβηγία, αποφάσισα να χρησιμοποιήσω αυτή την εικόνα.
Ευχαριστώ, Vidar Nordli-Mathisen. (Είναι πάντα σημαντικό να αναγνωρίσετε το ταλέντο τους.)

Φωτογραφία από τον Vidar Nordli-Mathisen στο Unsplash

Κάνετε ένα έργο

Απλή Απλή Απλή

Ένα αρχείο HTML, ένα CSS, ένα Javascript και ένα αρχείο δήλωσης.

Αυτό είναι το μόνο που χρειαζόμαστε.

Εντάξει, αυτή είναι η πρώτη έκδοση.

Αυτή είναι μια απλή ιστοσελίδα. Τώρα, για να φορτωθεί από το Chrome, πρέπει να προσθέσετε το ακόλουθο αρχείο manifest.json.

Το "chrome_url_overrides" είναι η πιο σημαντική ιδιότητα σε αυτήν την εφαρμογή.

Μεταβείτε στη σελίδα επέκτασηςΚάντε κλικ στο κουμπί Κάντε κλικ στο κουμπί επιλογής μέσα στο φάκελο του έργου σαςΗ ταπεινή επέκταση ...Κάθε φορά που ανοίγετε τη νέα καρτέλα, θα εμφανιστεί η απλή ιστοσελίδα σας.

Εκεί πηγαίνετε, μόλις ολοκληρώσαμε το πρώτο μας έργο.

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

Αλλά ας το κάνουμε καλύτερο από αυτό.

Φάση 2: Πράγματα που πρέπει να προστεθούν

  • Τρέχουσα ώρα
  • Λειτουργία αλλαγής ονόματος
  • Λειτουργία αλλαγής εικόνας

Για να συμπεριλάβουμε αυτά τα τρία νέα χαρακτηριστικά, άλλαξα το αρχείο HTML όπως παρακάτω.

Το CSS θα πρέπει επίσης να αλλάξει.

Στη συνέχεια, η νέα σελίδα θα είναι όπως παρακάτω.

Νομίζω ότι ήταν Momentum :)

Ενημέρωση του manifest.json

Τώρα, θα προσθέσουμε δύο χαρακτηριστικά.

Πρώτα απ 'όλα, θα προσθέσουμε μια φόρμα εισόδου σε αυτή την εφαρμογή, έτσι ώστε οι άνθρωποι να μπορούν να βάλουν το όνομά τους σε αυτό. Θα προσθέσουμε αυτήν τη φόρμα κάτω από το μήνυμα "Hello, Jungwon Seo".

Αυτό είναι άσχημο, ας το διορθώσουμε

Νέο στυλ για την ετικέτα εισόδου.

Εντάξει, πολύ καλύτερα.

Από τώρα και στο εξής, πρέπει να σκεφτούμε πώς να αποθηκεύσετε αυτές τις πληροφορίες.

Θα χρησιμοποιήσουμε το "cookie", αλλά δεν μπορείτε να χρησιμοποιήσετε το "cookie" εάν απλά ανοίξετε το αρχείο HTML από το Chrome Browser. Δοκιμάστε να δοκιμάσετε μετά τη φόρτωση ως επέκταση του Chrome.

Υπήρχαν λανθασμένες πληροφορίες σχετικά με την άδεια αποθήκευσης στην προηγούμενη ανάρτηση. Δεν χρειάζεστε την άδεια αποθήκευσης για να χρησιμοποιήσετε το "Cookie".

Επίσης, δεδομένου ότι προτιμώ ακόμα τη χρήση του jQuery, ας το προσθέσουμε.

Προσπάθησα να προσθέσω jQuery CDN, αλλά ...

Μην ανησυχείτε, απλά πρέπει να προσθέσουμε μία ακόμα ιδιότητα στο manifest.json.

Καλό, τώρα είμαστε έτοιμοι να κωδικοποιήσουμε στο αρχείο script.js.

Αυτό που θέλω να κάνω πρώτα είναι:

  1. Κάνετε τους χρήστες να πληκτρολογούν το όνομά τους.
  2. Αποθηκεύστε στο Cookie (ας χρησιμοποιήσουμε μόνο τον πιο δημοφιλή κώδικα)
  3. Ξεθωριάστε τη φόρμα εισαγωγής και ξεθωριάστε στο μήνυμα χαιρετισμού.

Τώρα, αυτή είναι η πρώτη φορά που πρέπει να σκεφτούμε σαν έναν πραγματικό προγραμματιστή.

Περίπτωση 1: Όταν το ανοίξετε για πρώτη φορά.
Περίπτωση 2: Όταν το ανοίγετε αφού πληκτρολογήσετε το όνομά σας.

Πρέπει να αποφασίσουμε τι πρέπει να είναι ορατό και τι δεν πρέπει να είναι.

Περίπτωση 1:
Ώρα: Τρέχουσα ώρα
Μήνυμα Μήνυμα: Ποιο είναι το όνομά σας;
Έντυπο εισαγωγής: Ορατό

Περίπτωση 2:
Ώρα: Τρέχουσα ώρα
Μήνυμα χαιρετισμού: Γεια σας, <όνομα>!
Εισαγωγή: Αόρατη

Και ο τρόπος διαφοροποίησης αυτών των δύο περιπτώσεων είναι να ελέγξετε αν το cookie έχει το κλειδί 'username'.

Με τη λειτουργία ενημέρωσης χρόνου, το νέο script.js θα είναι όπως παρακάτω.

Πριν πληκτρολογήσετε το όνομαΑφού πληκτρολογήσετε το όνομα

Εντάξει, φαίνεται να δουλεύει.

Φυσικά, υπάρχουν ορισμένα πράγματα που πρέπει ακόμα να βελτιώσουμε, όπως τα αποτελέσματα μετάβασης.

¶Αλλά, θα σας το δώσω.

Τώρα, τι άλλο;

Πρέπει να προσθέσουμε τη λειτουργικότητα που επιτρέπει στους χρήστες να αλλάζουν την εικόνα τους.

API Unsplash

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

Για να χρησιμοποιήσετε το API Unsplash, πρέπει να καταχωρήσετε την αίτησή σας στη σελίδα προγραμματιστή τους.

Κάνοντας κλικ στην επιλογή

Για το προϊόν επίδειξης, θα έχετε τη δυνατότητα να χρησιμοποιείτε έως και 50 αιτήματα ανά ώρα. Και αυτό είναι αρκετό για εμάς.

Απλά συμπληρώστε την παρακάτω φόρμα, ωστόσο θέλετε.

Πληκτρολογήστε οποιοδήποτε όνομα

Εάν δημιουργήσετε την εφαρμογή, θα δείτε το τμήμα "Κλειδιά" από τον ανακατευθυνόμενο ιστότοπο.

Έχω διαγράψει αυτήν την εφαρμογή, οπότε δεν υπάρχει κανένα σημείο να προσπαθήσω.

Απλά πρέπει να αντιγράψετε το 'Access Key' και να αντιστοιχίσετε στη μεταβλητή javascript 'ACCESS_KEY'.

Θα χρησιμοποιήσουμε το API αναζήτησης.

Εδώ είναι το σενάριο. Όλοι οι άνθρωποι έχουν διαφορετικά ενδιαφέροντα. Έτσι, θέλω να ρωτήσω πρώτα το ενδιαφέρον τους, και έπειτα θα ψάξω αυτή την εικόνα χρησιμοποιώντας το API Unsplash. Μετά από αυτό, θα συνεχίσω να ενημερώνω την εικόνα κάθε 12 ώρες (ίδια λέξη-κλειδί, διαφορετική εικόνα).

Έτσι, η λειτουργία AJAX θα είναι όπως παρακάτω.

Και αυτή η λειτουργία θα καλείται αφού πληκτρολογήσετε το ενδιαφέρον σας.

Στη συνέχεια, όπως μπορείτε να περιμένετε, πρέπει να είμαστε και πάλι προγραμματιστές.

Περίπτωση 1-1: Πολύ πρώτη φορά
Περίπτωση 1-2: Μετά το όνομα
Περίπτωση 2: Αφού πληκτρολογήσετε το ενδιαφέρον σας
Περίπτωση 3: 12 ώρες αργότερα.

Εντάξει, ας αποφασίσουμε μία προς μία.

Στην υπόθεση 1-1, πρέπει απλά να αποκρύψουμε όλο το τμήμα που σχετίζεται με την εικόνα. Περάστε αυτό.

Στην περίπτωση 1-2, εμφανίζεται μόνο η φόρμα εισαγωγής για το ενδιαφέρον.

Στην περίπτωση 2, καλέστε το AJAX και αποθηκεύστε τις πληροφορίες εικόνας.

Στην περίπτωση 3, ας θέσουμε απλώς το χρόνο λήξης σε 12 ώρες και αν το cookie είναι άδειο, καλέστε ξανά το αίτημα AJAX.

Λέξη-κλειδί: London

Ναι, λειτουργεί.

Φάση 3: Τελικές πινελιές

Δεν είναι υποχρεωτική η πίστωση του φωτογράφου, αλλά γιατί όχι;

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

Για να μπορέσουμε να χρησιμοποιήσουμε τις πληροφορίες του φωτογράφου όταν ελέγχετε για πρώτη φορά το cookie.

Ένα ακόμα πράγμα, τι γίνεται αν κάποιος θέλει να αλλάξει το ενδιαφέρον τους;

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

Πριν κάνετε κλικ στο κουμπί

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

Αφού κάνετε κλικ στο κουμπί

Φάση 4: Δημιουργήστε το δικό σας προϊόν.

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

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

Καλή τύχη και μην το εγκαταλείπετε!

Η πλήρης έκδοση μπορεί να βρεθεί εδώ: https://github.com/thejungwon/MyChromeExtension

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

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