October 30, 2020 project breakdown

Next up is an interactive 3d website from one of my favorite artists: Saba.

Update: The site was originally hosted at sabapivot.com but it's since been reverted back to his home page. This'll be a good lesson for me to include video captures of future microsites because they tend to have shorter life-spans

It's a fun concept site for his fans built on the three.js 3d library.

John Walt Foundation

Before getting into the site, if you rock with Saba, please check out the John Walt Foundation. Named for his late cousin John Walt, it's an amazing organization doing great things. They recently hosted a fun, informative, and socially distant writing session. Featuring Saba, Joseph Chilliams, Defcee, and Benjamin Earl Turner, its focus was encouraging self-expression. The foundation also put on an awesome food drive with a huge turnout.

I'll give the foundation some more shout-outs at the end of this article.

Saba Season

Chances are you've heard Saba even if you haven't realized it.

If you listen to Chance The Rapper, you heard Saba on "Angels", the lead single off "Coloring Book".

If you listened to Revenge of the Dreamers III, you heard Saba on the beautiful outro track "Sacrifices".

If you listen to anyone in the Chicago new school, you've certainly heard Saba on one of his countless collaborations with artists ranging from Noname to Mick Jenkins to Jamila Woods to the previously mentioned Chance the Rapper. He's also formed a super-group of sorts with Noname and Smino.

An amazingly talented rapper from Chicago, his 2018 "Care For Me" topped my list of favorite albums that year.

If that all sounds familiar, it may be because I wrote briefly about Saba here when discussing one of my favorite artists of 2020, singer-songwriter Gaidaa, who I found through a Saba co-sign.

But if you're still not familiar, it's a great time to get familiar. Saba is two studio albums into his career and about to release his third.

At least that's what this tweet made me hope a few weeks ago:

Cue the hype!

Later that day he followed up with this tweet:

If you text the number you get a quick reply back from "Saba" with a link to a website named community.com to share your contact info:

what up it's Sab. thanks for hitting me up. just click the link and add yourself to my phone so I can text you directly 🙏🏾. looking fwd to hearing from u

The link asked for a lot more personal information than I expected, so I looked it up. After some research it looks like community.com is a growing method of artist/fan engagement and let's artists "text" their fans directly. Their site touts tons of public figures using the platform. Even Obama is using it.

As someone who turns on Twitter notifications for my favorite artists, I'm pretty intriged by the idea and I'll stay tuned to see how Saba uses it.

Two days later brings us to the topic of this post:

Crack The Code

If you haven't yet, check out the Crack the Code site, which is actually Saba's homepage re-purposed.

You'll notice the familiar red telephone from his "Text me" tweet, and that the entire scene is interactive. You can change your perspective, you can zoom, and you can tap buttons.

Different buttons trigger different audio cues, almost like a telephone drum machine. But where are these sounds from?

And what about the code? One way to find the answer is to read the comments on Saba's Twitter and Instagram posts. But is there another way?

Take your own crack at the code before continuing...

The Code

Like I did on my Gaidaa post, I want to continue analyzing the source code behind these amazing music websites. Plus I knew the answer had to be somewhere in the code.

Unfortunately for me, the code on sabapivot.com was a bit more difficult to read than the code I analyzed on gaidaaonthewebs.co.

For example, the code from Gaidaa's video game website contains relatively readable references to the collectable items and enemies:

Gaidaa source code

Meanwhile, the code on Saba's website looks like this...

Saba source code

So what the heck is going on here? The difference is that Saba's code is minified.

Minification

Minification is a common practice on the web that reduces the size of code.

Code is minified by doing things like removing spaces, tabs, new lines, and shortening lots of the variables names. In the screenshot above you can see lots of single letters like r.clip, t.currentSound, (e), etc.

In Gaidaa's code, you see things like this.load.atlas. If Gaidaa's code was minified, it might look more like this.l.a.

This may seem silly, but one huge reason to do this is cost savings.

It may not matter as much on a personal blog like alej.hiphop, but if you add up bandwidth costs on websites with millions of views, every byte adds up quickly.

Pretty Print

Thankfully there is a way to make this code a little easier to read. Every browser has a way to "pretty print" the code, or restore some of the spacing that existed before. You'll still have lots of non-sensical short snippets of text but it'll take you a long way.

Looking closer at the snippet of Saba's code from earlier, you can see that not every variable is short. For example, this highlighted text looks promising:

Saba source code with the word "unlock number" highlighted

If we "pretty print" the code and let the browser restore the spacing and indentenation, suddenly the code is marginally more approachable:

Saba source code with with more readable text

We'll analyze this in a second, but first let's look around the code some more.

three.js

Scrolling through the code in general, the top of the file is especially difficult to parse.

If we go towards the end and start looking for more meaningful clues, we see words like the previously mentioned unlockNumber as well as other good launching points for any curious debuggers such as:

numbersPressed
checkKey
onDocumentMouseDown

The onDocumentMouseDown in particular includes a reference to Raycaster which is a part of the three.js Javascript library.

This is a library that let's you view and interact with 3d objects, specifically WebGL objects, in web browsers.

This reference to Raycaster as well as viewing the files loaded by the browser confirm that three.js is the library that this site is built on.

Although the Javascript code was hard to read, thankfully the 3d objects are fully accessible to us. What I love about the web is that everything you see in the browser, from code, to images, to 3d obects can all be inspected in detail.

If you open the Network tab in your web browser, you can even download the 3d objects yourself and view them individually.

For example here are the main objects that form the scene:

3d render of telephone

3d render of glass

3d render of table

Slowly the site becomes more and more approachable.

(Side bar: if all this talk about "inspectors" and "network tabs" and "libraries" sounds interesting to you, but also sounds like mumbo jumbo, reach out to me on Twitter and I'll update this post with more technical details. My goal is to feel out what kind of technical interest exists and fill that need.)

So there you have it! The three.js library (along with 3d WebGL objects) is what makes this site tick, but what about the answer to Saba's prompt to "crack the code"?

The Code... Cracked

If you haven't guessed it yet the answer can be found – where else? In the code.

Following the unlockedNumber variable from earlier, and searching for it in the pretty printed code, we find the answer laying in plain sight:

Saba source code which shows the numbers 7, 7, 3

In fact if you look at the code from earlier, this makes a lot of sense:

Saba source code with with more readable text

Even though a lot of the code is shortened (because of minification) a lot of this is understandable, even without coding knowledge.

The first line of this code tells us this snippet of code is meant to checkForUnlock, aka check if users have unlocked whatever this site is hiding.

We can also see there is lots of matching-ing going on in this snippet.

Specifically, we see some === symbols next to the unlockNumber code (which we know is "7, 7, 3").

We then might be able to guess that this code is trying to check if the numbersPressed by the user are equal to 7, 7, 3.

And in fact when you click those 3 numbers on the website, at last, our reward is unlocked.

Saba Season

The result is Saba's first single of 2020, "Mrs. Whoever". Even better, he immediately followed it up with another single, "Something in the Water" featuring Denzel Curry.

And with that, Saba season has officially started.

If you hadn't seen the answer on social media and didn't go into the code, the answer may have come to you if you tried the area code of Saba's hometown, Chicago.

Or even simpler than that, the answer was in his very first tweet to text him at 773-345-9523.

The Wrap Up

Although the answer was in plain sight the whole time, the ability to analyze Javascript and HTML on the web can be very helpful:

As a recovering vinyl-head, lots of websites that sell limited edition collectibles (like vinyl records) contain information on the number of products left in stock in their HTML source code.

Or if you're writing a blog and find design inspiration on another website, going into the Inspector can often help you find out what libraries or plugins that site is using.

All that to say I hope you enjoyed this and took something useful from it.

As one final treat, I found a fun function while searching the source code:

Source code of a function named 'yo yo'

Though I couldn't figure out what it did after continued searching, the function is named yoyo. I love having fun with my code and I'm happy this developer does too.

John Walt Post-Script

I offer one last bit of encouragement to readers who've made it this far.

First, even if you didn't know Saba, I hope this site and his singles inspire you to dive deeper into his music. I can't recommend his 2018 "Care For Me" enough.

And finally, and most importantly, please consider contributing to one of his initiatives in the John Walt Foundation. Even if you're not a Chicago local, you can always donate. Any little bit helps, especially in these crazy times.

If you enjoyed this breakdown, please feel free to retweet and share.