Refactoring Artist Management in MyRockinApp Part 1

Adding artists has been an ongoing pain in my ass during the entire lifetime of this project for many reasons. All of those reasons have one root reason — when I want to get something done, I tell myself I don’t have time to learn how to do it better … and I spent all that time learning how to do it the way it is now … I want to keep practicing that …

TL;DR — I am taking the time to completely refactor (as well as redesign) the entire app so it is more efficient, elegant, and easier to use.

The horrifying current state of affairs

I add artistIDs to a new array. Usually, they’re artists I have yet to add, artists I’ve realized I didn’t have, or there’s a new class of Rock and Roll Hall of Fame nominees.


Then use the Spotify WebAPI to get their data and insert rows into the artists table of my database. I do this the most stupid way possible — by changing the value of a variable in a PHP file and then going to that URL in a browser.

Then, I … don’t judge me! … I’ve been manually adding lines like this …

Yes, I know my camelCase wasn’t consistent. That’s why I’m doing and writing this.

So that … um … I can … well … manually add them to the “Choose Artist” menu like this:


Needless to say, I’ve often remembered to update one of those files and not the other. Or mismatch artistIDs and artistNames.

Because my albums table has a foreign key for artistID (from the artists table) and the tracks table has a foreign key for albumID from the albums table … sometimes forgetting to add things in order of artist, albums, tracks is another pain in the ass.

Also, I have separate files and functions for each little task and purpose — and not in the good way you’re probably picturing in your mind. They’re all redundant and overlap in countless ways.

I’ve know there was a better way for a long time but I’m always busy and always in a hurry. But I’m fixing that now. I’m forcing myself to. There’s a growing list of things like adding genres and grouping artists i.e. Dio, Ronnie James Dio, Elf, Rainbow, Black Sabbath, etc. that — to keep my sanity intact — require me to create some forms and functions resembling code written by a professional.

I’m doing this now for two reasons — I have the time and patience … but, more importantly, I learned a mother-butt-load earning Udacity’s Mobile Web Specialist nanodegree as well as the other resources I discovered while completing the program.

Now is the time on Sprockets where I replace much of the PHP in the app with Javascript. All of the Front End stuff, in fact, will now be strictly HTML, CSS, and Javascript. The PHP will be hidden in the back like Geoff Nicholls and any other heavy metal keyboardist.


PrezPlayPro Progress

I’ve made so much progress since I last revised my schema in Nov 2017. Most of that progress has been in the last week — two weeks at the very most. The Mobile Web Specialist nanodegree program I’m in as a Google Udacity Scholar via a Grow With Google scholarship has made my skillset and confidence go all supernova.

See also: I have a dream come true (2012 results made manually in Photoshop)

Here is what I’m up to:

Gray states are those with no socialist candidates (or there were socialist candidates but they received zero votes).

This query fetches only socialist candidates (excluding Hillary Clinton in one state where she’s actually on the ballot as a socialist — she’s not included because then she’d win all the states … until I fix my query by, hopefully, finally completing the affiliations table below) to see who among would “win” among the socialist candidates.

Here’s the new schema … I still haven’t added a stateAbbr column to the affiliations2016 table which, I think, is the reason for a problem I’m having with my first major query.


I need some buttons to change what results are fetched and displayed including but not limited to:

  • Results if all the “left-ish” third parties voted for a single candidate — would that candidate have beaten Trump?
  • If all the right-ish votes went to Trump, would he have have won the popular vote?

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:

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:


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


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 …


or Yucky Version B.


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


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.


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 …

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.


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.


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.


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

Data Journalism Roxor My Soxor

I think I’ve decided on my niche and what RoxorSoxor is to be.

Now going through Doing Journalism with Data: First Steps, Skills and Tools and the Google News Initiative‘s Fundamentals course while waiting to find out if I am among the #GoogleUdacityScholars selected for Phase 2 of the GrowWithGoogle scholarship.

Loving both.

While working on an exercise in lesson 11 of the GWG Challenge course, I learned that the Tampa Bay Times used to be the St. Petersburg Times and they are the ones who started Politifact!

The St. Pete Times bit is important to me because when I was a young teenager, I had the opportunity of getting to know an investigative reporter and ask him over the course of several conversations about what it would take for me to get into journalism. He recommended the St. Pete Times as a great paper to read and work for. It was led for decades by one Mr. Poynter, followed by his son who left all of his ownership stock in the paper to start the Poynter Institute.

They have a history of excellent journalism and they only got better over time. Even as they almost ceased to exist, they racked up a few Pulitzers and, while being a bit slow on the online uptake, they not only did that whole Politifact thing but kinda showed the world was data journalism was.

They really kick ass and … might make me feel like coming to this area is my destiny and not a big, fat mistake.

Serendipity and Service Workers

Over the last few days, I’ve been updating an Acrobat JavaScript app (totally awesome dynamic PDF that may be the one thing I’m most proud of) I made for a client and realized I could add use Service Workers in Stakeout — the mobile Web App I started building around and on top of the PDF.

While working on the PDF, I went back to the web app to apply some of what I learned in the Grow With Google Mobile Web course that’s finishing up and happily realized it is a far better candidate to apply everything we learned about IndexedDB than the popRock (personal) project I’ve been trying to force it into as practice. And … AND … Service Workers which I couldn’t even come up with an impractical reason for forcing into popRock. But wait, there’s more …

Not only that but it’s a perfect candidate for learning and experimenting with pouchDB and couchDB — two IndexedDB alternatives a bunch of my fellow GoogleUdacityScholars keep suggesting because, if for no other reason, this app could absolutely completely benefit from being offline first!

The timing of this is super-awesome. For a couple reasons, I hadn’t worked on the web app in about a year and this gave me both the motivation and the tools to jump back on it.

“Just in cases” – Aurelia from Love, Actually

I don’t want to go against all the advice in books like The Secret and You Are a Badass but I just answered a post in the Grow With Google Udacity Mobile Web Developer forums about what we’ll do if we don’t get selected to continue on with a nanodegree scholarship. Here are my “backup” plans in some sort of order of priority:

  • Google’s Data Journalism course
  • Data Journalism training/resources I found at ProPublica
  • Continue work on personal project using Spotify Web API – adding D3
  • Return to FreeCodeCamp to resume algorithms and start D3
  • Finish a couple other courses I’ve started at Udacity.
  • My wife’s Christmas present to me was 2-3 courses at Udemy so those are waiting.
  • Use all my new knowledge to rebuild-from-scratch an app I made for a client but could make much better now.

Also, continue After Effects courses at Lynda so I can crank up the quality of the videos and other eLearning I do at my day job until I find … let’s just say, “someplace else.” Some sections of the GWG course were pretty inspiring in this way …



They’re probably not that impressive because the screenshots are still images and taken out of context but I believe — unlike a former employer — it’s a no-brainer that appropriate animation adds a tremendous amount of value to any course especially what are otherwise powerpoint-based page-turners.

I just popped into a course at Khan Academy this morning while checking for something and saw this as well.


In that case, the combination of animation with video probably didn’t actually add much to knowledge transfer but planted some seeds I’ll water and nurture. I do think there’s value in Over-the-Shoulder (or “all around his head”) graphics to enhance a talking head but, in this case, I think it was more eye-candy to keep peoples’ attention and, yes, there’s value in that too. Mostly, it was cool-looking and aesthetically done well so I wanted to remember it by placing it here.