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.


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.


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:

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.

423 Errors and I Couldn’t Be Happier

This new JavaScript & jQuery version of my Python project with the Spotify API continues to go well. The fact that I even began writing big chunks of code between tests and those chunks passed those tests is a real confidence booster. I’ve made significantly more progress with JavaScript than I did with Python (someday, I’ll look further into why).

The Python versions put the results into an HTML table or a list but, for now, I’m just logging results in the console. To get the results in question I’ve built functions and loops to do the following:

  1. Build artistURL using artistID
  2. Use artistURL to request artist JSON
    • Get artist name
    • Get artist popularity
  3. Build artistAlbums URL using artistID
  4. Use artistAlbums URL to request artist’s albums JSON
    • For each album
      1. Get albumID
      2. Build albumURL using albumID
      3. Use albumURL to request album JSON
        • Get album release date
        • Get album popularity
      4. Build albumTracksURL using each albumID
      5. Use albumTracksURL to request album tracks JSON
        • For each track
          1. get each trackID
          2. Build trackURL for each track using trackID
          3. Use trackURL to request track JSON
            • Get track name
            • Get track popularity

Cyber Oddity

One function of my little program gets all albums by an artist. I’ve limited results to “albums” — no singles, no EPs, no compilations. There are still, however, multiple albums per title with different IDs. They have exactly the same title and year so it doesn’t appear to be “deluxe” or “anniversary” editions but I’ll double check that using the URLs appearing in the console later. I’m currently searching through StackOverflow and GitHub (Spotify API repo issues) for other possible answers as to why. The number of “versions,” for lack of a better word, ranges from 1-4 with new albums among those with the most versions (eliminating–I think–the idea that they are re-releases and such).

423 Errors and Learning Dev Tools and Stuff

The first major milestone gave me a motherload of errors that, while puzzling, weren’t frustrating or discouraging. My browser of choice is Firefox Developer Edition:


Google didn’t have much on “XML Parsing Error: not well-formed Location” and almost all of the results referred to WordPress problems. One post said the errors weren’t returned when using Chrome or Firefox, so I tried Chromium. Generally, I avoid Chrome–on my Linux laptop, the reason is a dialogue repeatedly pops up asking for passwords and shizzle for a keychain but this made me want to get past my issues:


First of all, I like that it tells me there are 423 errors. It would be great if told me the total number of lines as well (it might, I’m new to the dev tools in all browsers).

Most of all, I like that it tells me “Too Many Requests” which I think is the actual problem, not anything to do with XML or parsing. My theories and ideas for solving this are:

  • Using my API key to see if I am allowed more requests
  • Using “Get Multiple Tracks” instead of requesting each track individually to dramatically reduce the number of requests. The only problem with that might be that “Get Multiple Tracks” might not return the Track Object and property I want — popularity. The reason I requested each track individually is that “Get An Album’s Tracks” returns only some properties and popularity isn’t among them. On that same note, that’s why I have to use “Get an Album” instead of “Get an Artist’s Albums.” If “Get Multiple Tracks” returns the popularity for each track, I’ll have the results of “Get An Album’s Tracks” (how I get the ID for requesting each track) put the IDs in an array and use that array to “Get Multiple Tracks.” If none of those solutions work, I have other ideas but they’re much less desirable. I want something automated so I can collect data over time for some groovy data viz.

Jay Pride Parade

I am so freaking proud of this dynamic PDF using templates with dynamic menus and what I’ll call “smart redaction” I just can’t stand it. I feel more creative, powerful, geeky, as well as downright handsome and sexy because of this I can’t even stand it. I’ve made several interactive PDFs that I thought made the world a significantly better place but those just took time and effort. I’m creative and knew how to do what I wanted. This project, however, required I learn a bunch and solve a whole list of problems other people all over the web were struggling with and some people said these things couldn’t be done. I am beating my chest and yelling like Tarzan right now.

The client had a list of what they wanted/hoped the PDF would do and each of them was a challenge by themselves, let alone getting all these “features” to work together and in a way that didn’t make the user cry. Lots of Googling, forums, documentation, taking pieces from multiple solutions and combining them, followed by lots of experimentation, trial-and-error, debugging and falling in love–deeply and passionately–with Acrobat‘s JavaScript Console.

The client is a private investigator who has been assembling his reports in (God have mercy on his soul) MS Publisher. He asked for what sounded pretty simple: templates for PDF forms. It got complicated surprisingly quickly and, as I said, I found that others have faced these problems and I had them all together. Below are some of the challenges I’ll document along with their solutions in the next few posts.

The Client’s Hopes and Dreams

Which came true cuz I’m totally the Fairy Godmother of Adobe Acrobat

Templates in the Investigation Report include, among others, a Subject Background form and an Investigative Action form.

  • Each of those (and other) forms/templates need to be used multiple times in the same report so, as you may know, the form fields on each spawned page need to have different names so they can hold unique values. Not a problem, right? Wrong.
  • There’s a main form I’ve called the Report Dashboard in which the client enters the pertinent subject and locations so they are available in “Subject” and “Location” menus in the various templates/forms. Challenge #1 Populating fields based on a menu choice is easy but populating a menu based on text fields was new to me. Still not too bad, though, right? Wrong. Challenge #2 The dashboard might be updated after those pages (containing menus with unique names) are spawned.
  • Other information on the dashboard appears on all pages’ footers such as Case Name, Case Number, Date, and Page Number. Challenge #3 Unique field names meant I needed to be creative (because the dashboard content such as date completed/submitted and such might not be entered until the end of the investigation) but that was (truly, this time) not bad. Challenge #4 User needs to be able to rearrange and remove pages at will. This affected several things including but not limited to the page numbers. While the client owns Acrobat Pro …
  • Oh, and all of this needs to be possible after the client has saved, closed, and reopened the file as well.
  • I still wanted the client have as little burden as possible. I wanted a design and process that was elegant, easy and simple. If he had the time and inclination to learn and master Acrobat’s innards, he wouldn’t be paying me, right? Right.
  • Redaction. Never a fun topic for anyone, apparently. This client’s situation is particularly unique. Nobody wants to pay a private investigator thousands of dollars for a report that says, “I didn’t find anything useful” so my client’s customers want to see they’re going to get something for their money. If the investigator shows the fruit of their labor, however, their customer can then just run with that information to their lawyer (another expensive expense of the client’s customer) so they have no compelling reason to pay my client–at least not in a timely or easy manner. So, I need to creatively redact information while still showing there’s something substantial … in a way that doesn’t make me want to cry like others suffering under a requirement for redaction.
  • Security. Related to redaction but with other, more typical concerns like preventing printing, watermarks, and of course preventing changes … all without requiring my client learn or do any more than they have to.

This project kicked so much ass because I kicked its ass so thoroughly. My client suggested I license or sell this template/report to thousands and thousands of investigators like him who share his struggles and I’ll do what I can to profit further from this effort but, while he was saying that, all I was thinking was I couldn’t wait to share everything I learned because, you know, OPEN SOURCE, BITCHES!

G*dd**n, The Coder

Gosh dangit, I love coding!

I love learning, I love making progress, I love making stuff that does stuff!

Mr. Swizec took the time to review my code, hack around a bit and submit a Pull Request on my GitHub.


Some for real Data-Viz developers and authors are liking and responding to my tweets and encouraging me.

Discovering new (to me) tools. I shouldn’t say “discovered.” It’s more like, “Hey, that wasn’t scary and I didn’t feel overwhelmed, lost, and want to cry.”


I’m excited.

Debugging with Firebug

Previously: Debugging Isn’t Always Fun

After the wasted hours spent thinking I was debugging my code during which it seemed absolutely nothing worked I, eventually, thought I’d just wait until I got home and finally use these Developer Tools and Consoles in Firefox, Chrome, and all the IDEs I’ve been downloading and installing. I’ll finally do some hardcore for real debugging, developing, and hacking. I’ll be a pro. Troubleshoot just like in Khan Academy, Codecademy, and FreeCodeCamp. It’ll be easy. I’ll forget all about the hours I’ve just wasted because I’ll be glowing with new knowledge and skills.

This is what I thought real-life consoles would be like:

Codecademy‘s slick, user-friendly learning interface

Above, the student can make changes to relevant files (with all three linked files visible and accessible) and instantly see the consequences. Below, pretty much the same thing (having access to the jQuery files wouldn’t help much so they’re not displayed).

FreeCodeCamp‘s equally awesome learning interface.

The online, interactive How to Think Like a Computer Scientist has similar features I geeked-out over and loved.

How to Think Like a Computer Scientist: Interactive Edition

So, I’m expecting to open a file in Firefox, Chrome, whatever, and:

  1. Make changes
  2. Run my code
  3. Repeat

Fun, productive, good times.

I thought, for example, I could write a little JavaScript app that might ask me questions using console.log instead of prompt and I’d also answer them in the console. I thought, if my js file had an array and a function that would log something to the console, I could type


in the console and it might log the random number and the file name of the resulting random image as output.

As it turns out, these tools work nothing like that so I was in for hours of even more notFun. I did, eventually, figure out what I could and couldn’t do. And, eventually, the console told me the value of “masthead” was null so I Googled that and found the cause and solution. But, man, I SWEAR I’d already tried it. Regardless of how or what code, changes, and/or environment made the difference, it all works now.


Firebug console displaying output

That’s my code stripped down to identify the smallest working parts that could be broken.

Using the Firefox Firebug Console

That’s the state of my code before I spent far too many hours ripping it apart trying to find out what the non-existent problem was.

Here’s my final js file:

JavaScript code for random images

As you can see, I commented out the function so I could put it on each page as so:

HTML code linking to an external js file

The aforementioned “null” problem taught me the reason people put their links to external files just before the closing body tag–because my script can’t put a src into an img that doesn’t yet exist. And I knew that. I just didn’t … you know … put it into practice.

Update: All of the work described in this post and the previous post was done on the home page. After I made my victory lap, I uploaded that page, copied and pasted lines 97-99 from that last image into all my other pages (there aren’t many), and uploaded those. After some WTF exasperation and more frustration, I “learned” a couple things from that:

  • If your code refers to some images, you might want to upload those images
  • If your code is targeting an img element, it’s a good idea to make sure you haven’t commented out that line of code
  • If your code refers to id=”masthead”, you should probably have an element with that id somewhere on the page

Yep, and were those the first things I checked? Not by a long shot. Once again, I scoured my javascript over and over again, eventually pasting it into the console and–well, how about that–“masthead” is null again (but for a different reason this time). That made the placeholder image appear (there in case JS is disabled or … whatever) which, fortunately, were originals from before I adjusted the dimensions. While looking for the smaller version I noticed that not only was it not there but I hadn’t yet uploaded any of the other images.

Update #2 (The Final Straw): If your image src says the images are in the “imgs” folder, they should not be in a different folder called “randomTampa.”

See Also: It’s Always Your Fault