I Can Feel the Power

Geeky Iron Maiden data is at the bottom.

Learning so much in the Mobile Web Specialist nanodegree. My Dev Tools skills have exploded. For example, I’ve struggled for hours (all together over the course of many days) to figure out what’s making my pretty new album chart display with either way too much margin:

idol

Note also the horizontal scroll showing how much space is there for nothing.

or, when I tried (among other “fixes”) the fix that did anything remotely desirable, up against the left with no margin:

billyIdol

Well, today, I used my little web app to look something (Iron Maiden related — see below if you’re interested) up and — a combination of irritation and actually having the time — I fought with it until I fixed it.

The chart is in a DIV with

id="forChart"

No matter what style in CSS or property in D3 I changed, nothing seemed to work. I also tried removing various DIVs and, opened my dev tools and saw that the page was still seeing a style for #forChart I’d commented out a while back. Even though the page file itself was being updated when I refreshed, the CSS wasn’t!

Once that was fixed by clearing my cache, it was better but still didn’t look right so I uncommented the “container” DIV I’d commented out while debugging and that added some huge margins again. I was back to having Yucky Version A …

ironMaiden_2400.png

or Yucky Version B.

ironMaiden_wContainer.png

Just to make sure — because I was going insane — I at least identified the culprit was something in Bootstrap by removing all the Bootstrap:

ironMaiden_noBootstrap.png

I went back to Dev Tools and, while I couldn’t see anything affecting the margins, I scrolled all the way down to the little diagram showing the margins and padding. When you click the components inside, it highlights them in the browser so I could see there was a buttload of margins — I just had to figure out where. Then I realized that when I clicked in the code (the Elements tab of DevTools), it showed much more specific information under the Styles tab.

Then I finally got to do one of the coolest things Dev Tools can do which is hack around in the code to change what’s displayed. So I could test it “live” without uploading, refreshing, testing, changing the code again, etc. … OH MY GOD what a time saver!

Once it was beautiful, I copied the new CSS fromt the Styles tab, pasted it into my CSS file, uploaded, and viola! Awesomeness.

fixed.png

What made me visit my little app today was this … the sort of nerdy curiosity about data that inspired the app in the first place.

Geeky (Geekier) Iron Maiden Data

I was celebrating yesterday’s purchase of Iron Maiden‘s Live After Death by pricing some of the other albums on Amazon — in particular, Brave New World because it is my second favorite album of theirs and it has a wicked cool cover similar to Live After Death.

And this nonsense is what I saw …

nonsense.png

Can you see it? What a … a travesty! an injustice!

“Blood Brothers” — obviously the best song on the album, has like zero popularity. I couldn’t even hum what Amazon says are the most popular tracks from memory. I almost lost my faith in humanity. So, I went to my little app to see how the song rated on Spotify.

First I sorted all their tracks by Track Name.

myspotBlood.png

Various versions of “Blood Brothers” do seem to be a bit low on the curve. For comparison, I sorted by popularity. Here are their top tracks as of last Sunday.

topMaidenTracks.png

Then I sorted by album so I could see how the song placed compared to other tracks on the album — the way Amazon showed them.

braveNewWorld.png

On Spotify, it is the second most popular track on the album and by a decent margin.

Advertisements

About jotascript

Aiming to please. Seeking to impress.
This entry was posted in D3, Data Visualization, Debugging, Developer Tools, myProgress, myProjects, Spotify, Web Development and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s