Πώς κάνοντας εκατοντάδες χιπ χοπ χτύπημα με βοήθησε να καταλάβω HTML και CSS

Ήταν 2 πμ το Σάββατο το βράδυ, και ήμουν αργά εργαζόμενος σε ένα νέο έργο.

Ως beatmaker, θα σκεφτόσαστε ότι η οθόνη μου θα έμοιαζε έτσι:

Image Credit

Αντίθετα, φαινόταν έτσι:

Πηγή: My Screen @ 2 AM ότι το Σάββατο το βράδυ

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

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

Κάπως έτσι, αλλά με τρόπο λιγότερο μουστάκι.

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

Αυτή η σκέψη ήταν βραχύβια.

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

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

Αφιέρωμα στους ήρωές μου.

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

Και τα θέματα ήταν πολύ συνηθισμένα. Θα κάνατε κλικ στο your-favorite-artist.com, μόνο για να προσγειωθείτε στο ίδιο πρότυπο Squarespace που έχετε δει ήδη εκατοντάδες φορές.

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

Ήθελα να προκαλώ τον εαυτό μου.

Έτσι αγόρασα ένα μάθημα Udemy, κατέβασα Brackets και ξεκίνησα τα μαθήματα.

Και ... wow. Ήμουν αμέσως γαντζώθηκε.

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

Έτσι ... τι με έκανε να αγαπώ τόσο πολύ την εμπειρία;

Εδώ είναι μερικά από τα πράγματα που βρήκα ιδιαίτερα δροσερό:

  • Η φιλοσοφία "Turn a turd into a diamond": η δυνατότητα δημιουργίας ακατέργαστου περιεχομένου σε HTML (ανεξάρτητα από το πόσο crappy θα φαινόταν) και στη συνέχεια να την ομορφύνει σε CSS
  • Η επανασυγκέντρωση των υφιστάμενων πόρων: λήψη εικόνων, γραμματοσειρών εικονιδίων κ.λπ. από οπουδήποτε και χειρισμού τους για να ταιριάζει στην αφήγησή σας
  • Η χρήση εξωτερικών εργαλείων: η διαθεσιμότητα των plug-in jQuery που θα μπορούσα να χρησιμοποιήσω για να βελτιώσω τη σελίδα

Αφού επέστρεψε και σκεφτόμουν για λίγο, είχε νόημα γιατί μου άρεσε τόσο πολύ.

Αυτά τα ίδια στοιχεία είναι σταθερά ενσωματωμένα στη διαδικασία beatmaking επίσης!

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

Μια περίληψη της διαδικασίας Beatmaking

Για όσους από εσάς δεν είστε εξοικειωμένοι με την παραγωγή hip hop, πρόκειται να απλοποιήσω τη διαδικασία στα παρακάτω τρία βήματα:

  1. Τύμπανα
  2. Δειγματοληψία
  3. Ενοργάνιση

Για τους σκοπούς αυτής της άσκησης, θα αποικοδομήσω τον ακόλουθο ρυθμό, με τίτλο "Clear Skies Ahead" (ληφθείσα από τη σελίδα Soundcloud μου):

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

Θα περπατήσω μέσα από κάθε ένα από τα βήματα χρησιμοποιώντας αυτό το τραγούδι και θα δούμε λεπτομερώς πώς το HTML και το CSS είναι πιο hip hop απ 'ότι θα μπορούσατε ποτέ να φανταστείτε.

Εξερεύνηση των συνδέσεων

Ομοιότητα # 1: Κάνοντας τα τύμπανα είναι ακριβώς όπως να οικοδομήσουμε το περιεχόμενο σε HTML και να το στυλάρουμε αργότερα στο CSS.

Φωτογραφία Credit: Nam Bui

Θέλω να επισημάνω δύο βασικά χαρακτηριστικά του HTML:

  1. Το HTML παρέχει δομή. Το HTML παρέχει την αρχιτεκτονική της σελίδας. Σε ένα τυπικό έγγραφο HTML, έχουμε ετικέτες , , ,
    που οριοθετούν σαφώς κάθε τμήμα, μαζί με κλήσεις σε όλα τα απαραίτητα αρχεία CSS και plug-ins του jQuery.
  2. Η HTML φιλοξενεί το περιεχόμενο που θα διαμορφωθεί αργότερα. Παρόλο που η HTML είναι υπεύθυνη για το περιεχόμενο μιας σελίδας, κωδικοποιούμε τα πάντα με τρόπο που μας διευκολύνει να στυλ αργότερα. Η αρχική προεπισκόπηση μπορεί να φαίνεται πραγματικά μπερδεμένη τώρα, αλλά την προετοιμάζουμε για μελλοντική εξωραϊσμό μέσω του CSS.

Τα τύμπανα ενός ρυθμού έχουν επίσης παρόμοια χαρακτηριστικά:

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

Ας ρίξουμε μια ακρόαση στα αρχικά τύμπανα για το beat beat, "Clear Skies Ahead". Το ωμό μοτίβο αποτελείται από κλωτσιές, παγίδες και ένα σπασμένο τύμπανο:

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

Πρέπει λοιπόν να το στυλίσουμε και να το ομορφύνουμε!

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

Αυτό μπορεί να είναι το ισοδύναμο της ανάθεσης ενός στοιχείου div με τις κατηγορίες "equalizer", "reverb" και "stereo-imager" στις διάφορες ενότητες σε HTML:

  

Παιχνίδια     

Η "έκρηξη"

  

Snare     

Το "bap"

  

Break Drum     

"Ανορθωτικό κτύπημα"

Στη συνέχεια, μπορούμε να προσαρμόσουμε τα στυλ των τάξεων ανάλογα με το CSS:

.equalizer {
  γραμματοσειρά-βάρος: πιο τολμηρή?
}}
.reverb {
  σκιά κειμένου: 1px 1px μπλε;
}}
.stereo-imager {
  διάστιχο: 1px;
}}

Εδώ είναι το ηχητικό ισοδύναμο του styling των τύμπανων (με τα επεξεργασμένα εφέ):

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

Ομοιότητα # 2: Η δειγματοληψία ενός τραγουδιού είναι ακριβώς όπως η επανασυγκέντρωση εικόνων και γραμματοσειρών εικονιδίων ώστε να ταιριάζουν σε μια νέα αφήγηση.

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

Υπάρχει μια τεχνική στο hip hop που ονομάζεται "κόψιμο", στην οποία παίρνετε ένα παλιότερο τραγούδι, κόψτε το σε μικρά κομμάτια και επαναλάβετε τα με μια νέα σειρά για να δημιουργήσετε ένα καινούργιο τραγούδι.

Χρησιμοποιώντας το "Clear Skies Ahead" ως παράδειγμα, το παρακάτω κλιπ ορίζει τη διαδικασία των 3 βημάτων:

  1. Προσδιορίστε το τραγούδι προς δειγματοληψία ("dig" για το δείγμα) - ξεκινά στις 0:00
  2. Ρυθμίστε μια νέα ακολουθία με τις τεμαχισμένες φέτες - ξεκινάει από 0:13
  3. Προσθέστε τυχόν απαραίτητα εφέ και ενσωματώστε το ρυθμό - αρχίζει στις 0:24

Η οικοδόμηση μιας ιστοσελίδας ακολουθεί την ίδια φιλοσοφία.

Ας πούμε ότι χτίζετε μια πολύ απλή σελίδα τεσσάρων κεντραρισμένων εικόνων που αλλάζουν αδιαφάνεια όταν πετάτε πάνω τους. Η ίδια διαδικασία σε 3 βήματα ισχύει και εδώ:

  1. Προσδιορίστε τις εικόνες που θα χρησιμοποιηθούν

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

2. Τοποθετήστε τις εικόνες σε HTML σε μια ακολουθία που ταιριάζει σε μια αφήγηση

  άνοιξη   καλοκαίρι   πτώση   χειμώνας

3. Προσθέστε τα απαραίτητα εφέ στο CSS για να ολοκληρώσετε τη σελίδα

.box img {
  / * Αλλαγή μεγέθους εικόνων * /
  πλάτος: 50%.
  ύψος: auto;
  / * Κεντρικές εικόνες * /
  εμφάνιση: μπλοκ?
  περιθώριο-αριστερά: auto;
  margin-right: auto;
   / * Αποσύνδεση εικόνων * /
  περιθώριο-κάτω: 30px;
}}
img: μετακινήστε {
  αδιαφάνεια: 0,5;
  μετάβαση: 0,3s;
}}

Αυτή η διαδικασία ενεργό σκάψιμο για τους πόρους, αναδιάταξη τους, και το styling τους σύμφωνα με τις προτιμήσεις σας είναι καθολική τόσο στην ανάπτυξη hip hop και web.

Ομοιότητα # 3: Η προσθήκη ενός εικονικού εργαλείου είναι ακριβώς όπως η προσθήκη μιας προσθήκης jQuery για την ενίσχυση της σελίδας.

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

"Τι πρέπει να κάνω αν δεν έχω κιθάρα; Και ακόμα κι αν έχω ένα, δεν θα ήξερα πώς να το παίξω! "

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

Για το "Clear Skies Ahead", πρόσθεσα το εικονικό όργανο που περιείχε το υποβρύχιο, το κατέγραψε και το εφάρμοσε στο υπάρχον beat:

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

Για να το περιγράψω στην ιστοσελίδα μου, ας εισαγάγουμε μια γκαλερί εικόνων που μπορεί να εμφανίσει τις τέσσερις εποχιακές εικόνες στο προηγούμενο παράδειγμα μου. Αντί να χτίζετε ένα από το μηδέν, ας αξιοποιήσουμε το jQuery και να χρησιμοποιήσουμε μια εξαιρετική εμφάνιση plug-in. Θα χρησιμοποιήσω το Swipebox:

Για αναγνώστες κινητών, δείτε το JSFiddle εδώ.

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

Τελικές σκέψεις

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

Και αυτό με οδηγεί στην τελική μου σκέψη:

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

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

Στην περίπτωσή μου, η κατανόηση της σχέσης μεταξύ της HTML / CSS και της μουσικής παραγωγής επιτάχυνε σημαντικά την καμπύλη μάθησης και έκανε μια πραγματικά διασκεδαστική εμπειρία. Όταν οικοδομήσαμε τον ιστότοπό μου, μπήκα σε καταστάσεις ροής που θυμίζουν αυτό που θα αισθανόμουν κατά τη διάρκεια των συνεδριάσεων beatmaking μου.

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

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

Γεια σου, είμαι ο Lawrence και κάνω κτύπους με το όνομα Trebles and Blues. Απλά κυκλοφόρησα ένα νέο EP, το Set It Off, το οποίο βγαίνει τώρα. Για περισσότερη μουσική, μην διστάσετε να δείτε τη σελίδα Soundcloud μου.