Why Does It Work? Wait, what?

Preface

First, let me get this out of the way: The most frustrating thing about working on PrezPlayPro the last couple days is … I don’t know my states. I could list them all off the top of my head but if I could not pass a test where I had to label them. You know, like my kids do at school.

I need to practice that and know which are which. Seriously. As self-righteous as I get with my “nobody should be born a citizen — most people born here can’t pass the citizenship test and that just isn’t fair” I should, you know, be able to pass the citizenship test myself and know where Kansas, Nebraska, Missouri, etc. are without googling “usa map”.

Actual Post

Four months ago, I wrote that I was trying to perfect my SQL query selecting the “socialist winners” from my 2016 Presidential Election results database table. Here’s part of the screenshot from that post:

pppprogressCropped.png

Relatively recently, I created an Excel worksheet for party affiliations that included the state for each candidate/party pair and this week, I finally got around to importing that into my database.

Next step: fixing my SQL query so it used the new table!

But something weird happened.

I opened the page and saw this:

nowAll.png

I expected ZERO visual changes–I had not yet changed any code–but saw SIX states change color.

I had no theories but checked to see who won those states — they were all now going to Chris Keniston.  All states with no socialist votes stayed gray but Alyson Kennedy and Michael A. Maturen each lost three states. I looked at my code and saw his candidateID wasn’t even listed in my switch function so I added him. While doing that, I noticed  Dan R. Vacek, Jerry White, and Bradford Lyttle had a case each but none of whom won a state … I couldn’t think of a reason they’d be listed. All of this are the perils of returning to a project months later. I can’t even remember exactly what I wanted to “fix” about the final query!

doneForNowMaybe.png

I also added a stroke for the states so I could *ahem* tell the yellow ones apart.

I totally did not trust this so I looked at all the results for socialist candidates returned via SQL query.

Jill Stein won all six of these states — but, for some reason, with whatever query I used in June, those states went to Kennedy or Maturen and, yesterday, they all went to Keniston. I am completely baffled. Good thing I wasn’t in charge of the election results because this is what reality looked like in Vermont:

  • Chris Keniston     =        3
  • Alyson Kennedy  =        2
  • Jill Stein                =  6758

So, I am writing my query from scratch because it needs more than fixing.

Advertisements

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.

PHP Rabbit Holes [solved]

Whoa.

  1. Got tracks to work (with laptop not at home).
  2. Destroyed tracks by attempting to “fix” or improve it (with laptop still not at home).
  3. Fortunately, I hadn’t pushed anything to GitHub yet so, at home on my iMac, got tracks to work again … with a bit of ghost code “product” appearing in the browser with my returned data.

After my success with albums, I then got tracks to work. The loop(s), however were sending 36 requests (one for each album). What I wanted, however, was to combine all the tracks from all albums into one array, then divide them by 50 so there were nine arrays and, thus, only nine requests. So I started to “fix” it.

That’s when the madness began.

Insanity #1: After much debugging and profanity, I realized that instead of putting tracks into the arrays like this …

  • 50
  • 50
  • 50
  • 50
  • 50

and so on, it was doing this …

  • 50
  • 100
  • 150
  • 100
  • 50

At first I thought the numbers were only going up but then realized they were going up then down. It did this while using array_slice despite the start and stop variables echoing the correct numbers … and that’s just one bit of weirdness with numbers/calculations not making sense. One of the other bits of weirdness is back when the tracks script worked (meaning it got everything even if it took “too many” requests for my standards of elegance) the variables for start and stop in the array_slice were not correct — they weren’t incrementing at all.

Still don’t think figured that out but it may be related to …

Insanity #2: After giving up on solving and fixing that (I just accepted the idea of 36 requests for the time being), one of the echo commands I used from a previous version of madness still appeared …

You have made 0 getTracks requests

Two things about that:

  • The line of code with the echo no longer exists.
  • The line of code setting the variable the echo refers to no longer exists.

Honestly, I don’t remember googling “super globals” or even “php globals” or why I thought of those but I’ve since learned, so far, that they, apparently, are stored in either php.ini or some other php config file … so me deleting the line of code in my script may not have gotten rid of the variable? Maybe? Let’s assume that’s true. That explains my second bullet above — why the variable still exists — but it doesn’t explain how or why the echo command still … “exists”(?) … somewhere …

INSERTED UPDATE: The above theory about the $GLOBALS being stored somewhere is just as false and nonsensical as I knew/hoped it was. See end of post.

It can’t be the cache because I did the destruction on one computer and re-did the progress with tracks on a different computer. The code related to the “ghost” feedback never existed on the iMac and I never accessed the “broken” files from browsers on the iMac. The ghost is in the remote machine.

Seriously, PHP has been creeping me out for about 18 hours. I had dreams about it. For real. I also had dreams about multiple wives and multiple ex-wives and the Chinese successfully invading the USA though those may have been subconscious metaphors for the PHP weirdness. Or metaphors or prophecies having to do with something else entirely.

More to come.

P.S. What worries me is, in troubleshooting, I thought I should make more $GLOBALS variables of things in loops so I could unset them, but … so … who knows what supernatural, ancient, Lovecraftian, Raimian, code gods I’ve unleashed …

Update #1: Read entire php.ini file and there’s no mention of the $GLOBALS array. The other super globals are mentioned.

Update #2: Insanity #2 was totally my fault. That actually makes me feel much better. There is currently a total of five files in this little app. Here at home, I was only changing and uploading two of them but the two lines of code also appeared (I was using that echo and variable in multiple locations for debugging purposes) in a third file.

Insanity #1 still haunts me.

UPDATE #3 on Nov 8: Insanity #1 [solved]

I was basing my array_slice on how I did it in Javascript so it looked like this:

$x = ceil((count($artistAlbums))/20);
$firstAlbum = 0;
for ($i=0; $i<$x; ++$i) {
$lastAlbum = $firstAlbum + 19;
$artistAlbumsChunk = array_slice($artistAlbums, $firstAlbum,     $lastAlbum);
$albumsArrays [] = $artistAlbumsChunk;
$firstAlbum += 19;
};

I was interpreting the offset parameter as “first” (accurate enough) and the length parameter (because I wasn’t paying attention when I read the documentation) as “last” like it is in Javascript.

Close To Wit’s End

I should know better than to try editing/testing code on this particular computer/network. Stuff that works anywhere else doesn’t work here. So, it might be that.

But this new script is so simple.

But, if it works, then I make a change and that doesn’t work so I undo the change … then the previous working thing doesn’t work anymore.

I never know what’s really working and what isn’t.

This happens ALL the time. It will work fine … then it won’t.

Then I questioned whether it ever functioned correctly so maybe I’ve been basing my recent work on incorrect information so I have NO F**KING idea what I’m doing!

How can I f**king learn if I never know what actually works and what doesn’t? What was actually working or  not?

DAMMIT!

Update: I did a “Save As” to change the js filename from 02 to 03, updated that in the html, then when 03 didn’t work … I, um … didn’t change the reference in the HTML file back to 02 … and, that’s … um … Windows sucks!

Merde! Merde! Merde! Merde! Merde! Merde! Merde! Merde! Merde!

Or, if Napoleon (as quoted in Bill and Ted’s Excellent Adventure) isn’t your thing and you prefer German historical figures (as recorded for posterity in Inglorious Basterds) …

Nein! Nein! Nein! Nein! Nein! Nein!

Or, if you voted for Trump …

JavaScript is rigged. Bad!

I was so right to be skeptical. I’ve spent the last twelve days neglecting my family — except to yell at them to leave me alone — while I’ve worked in vain to debug this code. I was SO cruising … or thought so …

While I’ve found multiple new ways to break my code while “fixing” it, the problem boils down to one of two outcomes. I either get

  • Figure A. 37 different albums, each with the correct tracks but the tracks have “undefined” popularity, or
  • Figure B. 37 copies of the same album with the correct tracks which have a popularity value
v4.png
Figure A
v5.png
Figure B

After looking at the code, the console in Figure B shouldn’t even give me that much because of where the log lives in the code — it shouldn’t return any albums at all. I think it only does if I haven’t cleared the cache but I’m not sure because I’m trying so many different things in succession. I’m fighting in the dark here in several ways.

Depending on which “solution” I’m trying (for the Nth time), I might get

  • 37 copies of the same album but with tracks from different albums
  • 37 different albums with no tracks
  • 37 different albums each with 432 tracks
  • 2 albums — one with no tracks and the other with tracks that have a popularity value
  • Linda Blair projectile vomiting countless errors from the console
  • and more

I think what I just have to do is rebuild it from scratch using everything I’ve learned to this point instead of trying to fix one or both of those first two that are each almost perfect in their own way.

Each time, the results in the console are different and it’s unpredictable what will come up because of the asynchronous aspect of it (and, I think, whether or not I clear the browser cache between changes) so I really can’t tell with any certainty what difference my most recent change(s) made.

Two weeks ago, I thought for sure I was mere days away from being the most in-demand developer in history. Progress gives me hope and confidence. This makes me feel I’ll be trapped in my cubicle forever and that is as good as it gets for me.

variables == “pain in my butt”

I just don’t get this global variables and hoisting and scope business.

Actually, I do. I really do.

I just don’t understand why changing the value of a global variable in a function doesn’t change the value of the global variable.

You might say, “But …”

And I’ll say, “Nope … because this other person said the opposite and I know that the opposite is true.”

It doesn’t matter what would follow your “but” — the opposite is true. And that’s what confuses me.

All the articles and such that I read give contradictory information. Yet, apparently, they’re all correct and I can’t figure out why.

works.jpg
Best comic ever.

I’m back to [re]writing my javascript code so I can get my data into my database.

I thought that maybe, since global variables aren’t really global, I’d follow the advice of some documentation/articles/posts and use object methods instead — having all my functions use the variables they’re forcing to become local to build a javascript object at the global level sounds like a great idea.

Except functions are like black holes and don’t seem to allow information to escape them.

Here’s the latest code with which I’m experimenting:

code2.png

code.png

There’s also console.log(rockstar); at the top level on line 226.

All variables such as artistName, artistPop, and artistAlbums are declared globally at the top. That doesn’t seem to make a difference in the behavior of my code, however. Here are the results:

console.png

The problem I’ve been having is the result from line 226 but I at least thought I understood the problem. Little tests like lines 88 and 90 produced similar, expected results.

  • Line 88 gets the name and popularity because it’s super local
  • Line 90 can’t see either because it’s outside the function. Fine. I don’t like it and it’s a wee bit inconsistent with other results I’ve seen but, whatever, I’m just hoping I’ll start to understand why it works other places but not here. Moving on.

Then, just for kicks, I did line 109. I expected it to see artistAlbums but of course it wouldn’t see artistName and artistPop. No way.

  • How can line 90 — inside the same function (requestArtistInfo) as line 88 — see neither artistName nor artistPop yet line 109, in a completely different function, can?
  • If line 109 can see those values, why can’t line 226?

I want to pound myself in the face with a hammer.

WAIT A SECOND …

It looks like 90 is getting “hoisted” or, by any other name, completed first even though it comes after line 88 … when those variables don’t have values yet.

Even though line 226 is called after requestArtistInfo, requestArtistInfo still might not be done … I didn’t explicitly say for anything to “wait” until anything else was “done” before starting …

Line 88 logs after those values are assigned and there’s no getting around that so it works.

Line 109, in getArtistAlbums, isn’t going to happen until bunches of other shizzle is complete so that comes back with everything …

SO, brothers and sisters, everything is working (or would work) but some stuff is just happening (or trying to happen) too soon.

My tests and experiments have been failing but not for the reasons I thought.

Okay … this is awesome. Major learning experience if I’m correct that it isn’t the “where” that’s not working, it’s the “when.”

When Bugs Are Fun

Been making a lot of progress on RockinJS (the lame name I have for the JavaScript version of my little program that uses the Spotify API). I spend a lot of time fixing and changing things but these aren’t the enraging or even frustrating problems that don’t result in learning experiences — these have all been awesome learning experiences. Not only am I learning from the mistakes but learning new ways to test and debug.

Tons of fun.

The console is my best friend. I said that months ago about the JavaScript Console in Acrobat but now I mean the console in either Internet Explorer‘s (hey, sometimes it’s all I have), FireFox‘s or Chrome‘s Dev Tools. Oh, wait, there is something frustrating — bear witness to the word-wrapping in Chrome’s console.

chromeConsole.png

If Firefox for Mac can do that, I haven’t been able to find it. Sure, I could and do use Chrome for Mac but look at how much prettier Firefox Developer Edition‘s console (left) is otherwise:

Tue5pmConsole_10b.png
Firefox Developer Edition’s console (left) is much prettier than even Firefox for the Common People’s. Also note how beautiful Atom is. I know I could configure the color theme in Dreamweaver and/or SublimeText but who has the time?

My bugs are, so far, related to loops — a line or two that should or should not be inside a loop — so I’m using the console to find out where and when things are happening. I also draw a lot and am surrounded by mountains of crumpled up paper. I wish I had a whiteboard at home. I wish I could study at work where I have multiple giant monitors and a big whiteboard right next to my desk.

Sometimes the “when” is hard to identify because, for me, the order things appear in the console is, sometimes, odd to me. I have a hunch that’s because things are asynchronous and results of faster tasks appear before and between results of slower tasks.

I think my only remaining “bug” at this moment is that tracks for 19 of the 37 albums are returned twice (the 19 items in the first array in my array of arrays in the image above). I’m depending on the console for this because whenever I’ve worked through the code in my head 99% or I’ve drawn it out to a conclusion and I think I’ve solved it, someone or something interrupts me and the thoughts poof away.

When I have a moment to just play, not only will I config the color themes in all my text editors (I’d exclusively use Atom for Linux on my laptop if it didn’t keep freezing and/or crashing) but check out the dev tools in all my other browsers. I’d also like to synchronize all the indenting in all my text editors across the computers I use — I’m pretty sure you can do that.

Speaking of Dev Tools … has anyone reading this watched the video series on Dev Tools in Free Code Camp? Is that girl drunk in those videos? And, is it just me, or does she appear to be fumbling around a bit (and not in a drunk way)? Her other videos aren’t like that so I was a bit perplexed.