Reading time: 5 minutes
JavaScript killed the radio star…
Introduction
Before I got involved with coding or even teaching, I cherished music. From the age of 12, my whole world revolved around making tracks, performing and “gasp” getting signed to a record label and winning a Grammy! Marrying either Alicia keys or Beyoncé would have been the icing on the cake. (Jay-Z and Swiss Beats beat me to it! Dammit!)
Although my Puff Daddyesque dreams never came to be, I am incredibly grateful to music, for giving me the unique set of skills that have benefitted me in every area of my life. Music Production taught me how creativity and technical know-how can come together in perfect harmony: the sweet art of melody and composition meeting the cold science of audio engineering creates the stuff that becomes the soundtrack to your life. Music production taught me that creativity without knowledge, creates original but undisciplined songs that confuse the listener. But songs that are technically correct but lack that creativity sound decent but they are stale, lifeless & boring. Getting the balance right is key.
Many people are baffled by music production. Walking into a professional recording studio can be like stepping into NASA Headquarters just before the first Apollo mission.
But as I teach my students in music college, a great song goes through 3 important stages.
- Composition – creating the rough idea for the track & is usually just a riff or loop
2. Arrangement – fleshing out the idea, adding a clear sequence & other instruments
3. Post-Production – adding effects & sonically enhancing the track to sound ‘polished’.
The Penny Drops…
When I started to learn about Front-End Development, I really struggled to get my head around the strange concepts: variables, selectors, concatenation, attributes and refactoring were attacking my brain like Bruce Lee in a fury. I just couldn’t get my head around it and it made me miserable. But as I went further along, I realised that a website had its own framework.
- HTML – Forms the basic structure of the website
2. CSS – Deals with the presentation of the website (makes it look pretty!)
3. JavaScript – Adds interactivity & enhances to the website
The two processes were remarkably similar… and when I realised this, it just clicked for me and the same passion that I had for creating the perfect song transferred to creating the perfect website. Here’s how the two processes compare.
1) Drop The Beat! HTML Is The ‘Composition’ Of The Website
As good ol’ Kanye showed us, composition is all about the ‘big idea’ of the song. Whenever I created my best beats, it would start with me playing around with the sample, tinkling the piano keys or playing with the cool sound effect. Once inspiration caught me, I would scramble to add of a basic elements until I had a basic ‘loop’ going.
The loop acts the basic sketch of the track & the concept that the rest of the track will be built around. Creating a loop gives the producer a rough idea where every think should go i.e. where the rapper spits his bars and where singer belts the chorus. Although loops may not take long to develop, you quickly see if it has that “magic” – that feeling that the track will be special. If you get the loop right, then all the other sections will be easier to complete. As they say in the music industry “you can’t polish a turd” – if the idea is garbage, then the song will be a non-starter.
Likewise when creating a website, HTML provides as the tools to create a structure of what the site needs to become. HTML like a loop is a rough sketch of our website – allowing us to quickly decide where all the main parts will be from our navigation menu to our search bar. Although HTML won’t create the prettiest website, like a loop, HTML allows us to see whether our site has that “magic” & will it work. The best websites are deceptively simple, clean and let you see “the big idea” straight away. A poorly structured site will chase users away.
2) “I Can Make Arrangements”: CSS As The ‘Arrangement’ Of The Website
Thank you Pharrell & JT! Once you have the your basic idea, you would move to the arrangement phase. Arrangement is turning your 30 second movie pitch into an epic motion picture with a beginning, middle and end: full of tension, twists and turns & finishing with a great climax.
At this stage, an arranger’s knowledge of music theory is absolutely key. An arranger needs to have an in-depth knowledge of his genre and ask herself questions like:
Who will listen to this track?
What additional instruments do I need?
What key is the song in?
Do I want to make it sound happy/sad/mysterious?
How many verses/choruses does it need?
The arranger takes that 30 second loop & takes the listener on a 4 minute journey adding the instruments, melodies & soundscapes that bring out the emotional content. As the track evolves, the arranger is not afraid to remove parts of the original composition if it is no longer useful & may find themselves troubleshooting sections of the song as some instruments or melodies may clash together. An arranger must be patient, borrowing from all the knowledge of music history but allowing for new ideas.
Likewise CSS takes your basic HTML website that you have created on with the use of colours, layout and design, turns it into a beautiful website that takes the user on a visual journey. CSS uses the HTML structure to target specific elements to make the site pretty! Like an arranger, a web developer must draw from a bank of technical and design experience to know what is worked in the past but also keep an eye for future design trends and stay ahead of the curve. A great designer constantly asks questions about what is the site’s target audience, the overall theme and how the design compliments with the overall goals of the creators and more.
Like an arranger, a great developer be brave enough to add elements if needed or take away elements if they distract from the overall experience. This is especially critical as a designer must use “responsive design” techniques to factor in screen sizes & may have to change different elements around for the site to be viewed from mobile devices all the way up desktop computers. Sometimes the design will not render how it should and a web developer will often have to troubleshoot parts of their CSS & work around the problem and making sure that the user has a great experience on whatever device that they use.
3) Flipping The Script! How JavaScript is the ‘Post-Production’ of our website
Bruce Swedien was the Quincy Jones’ main sound engineer to mix Michael Jackson’s Thriller – the greatest selling album of all time! His mixes are legendary!
Whoa… We’ve arranged the track but it still sounds…off. Parts of the track sound too loud or too soft. The track when played on a boombox sounds radically different when played on an iPhone and although it’s finished it sounds like a demo & doesn’t have that ‘polish’. This is where Post-Production comes in. The track will be passed to a sound engineer who will take the track through the process of mixing & balancing the levels, adding effects to enhance the most important parts & sonically sculpt the track so it sounds more dynamic & enriching to the listener.
At this point, a sound engineer may introduce a fixed like delay or reverb to make the vocal sound more ‘epic’ and standout against the instruments. He may use a tool called an equaliser to cut or boost certain harmonic frequencies (pitches) in a sound i.e. make the trumpet sound ‘less bright’ so that it doesn’t smother the piano and may place the lead guitar and keyboard sounds in the left and right speakers respectively (panning) which helps create a sense of ‘space’. The sound engineer has to decide what file format to export the song to, as the different compression rates have a drastic effect on the sound & try to balance the track so that it will sound as good on as many different devices as possible. Some argue that this is the least musical stage, but is no less important than the others.
Likewise JavaScript takes your beautifully designed yet static website and makes it a fully interactive experience that you are users will rave about. A JavaScript programmer on and take parts of the website and bring them to life for more personalised experience for the user such as creating interactive timetables, ever changing photo galleries or forms that will ask you to complete different parts depending on the user.
A good JavaScript programmer, like a sound engineer, must have in-depth knowledge of the language & decide what would be the correct tools for the job. She may use JQuery to execute a variety of common JavaScript tasks, which make the code easier to run in the browser. Or she may use AJAX which can allow you to update individual parts of he page for ease and speed & must continue to learn about the ever changing frameworks & libraries & how it will effect future websites.
To a newbie, JavaScript seems mysterious & unworldly. But like sound engineering, with a bit of practice and dedication, newbies will discover that their sites will become more polished and take user experience to a higher level.
You Matter
So what is the point of all of this? Is creating a website really like making a song? A metaphor can only stretch so far and this piece is far from perfect.
But the real point is that, as a newbie, even though you may not have a computer science background, you have picked up a variety of skills that with a bit of imagination & creative thinking can be used to help you learn to code better. For me, it was music but for you it could be cooking, rock climbing, sewing or playing badminton. Nothing is wasted. Technology & society, needs your unique viewpoints to help us solve the tremendous problems that face us in the future. Go ahead. Lean in and create your own song whatever it maybe and rock the world.
Thank you reading! Leave some comments below and let me know what you think. Follow me on twitter @karlwebdev!
See you next Thursday!
Karlwebdev
karlwebdev 