Face Your Problems

I maintain a web site (and a gaggle of apps) that scrape event lists of all the clubs and concert venues in Oslo.  The other day, I was told that it missed a bob hund concert and I was all whaaa?

It turned out that the reason was that Facebook is now blocking all non-logged-in access to their event lists.

Because nobody who has a venue wants anybody but people on Facebook to show up when they have a concert.  I guess that’s what you get when you’re gardening in a walled garden.

This made about a dozen sites disappear off of CSID, so I had to get real and figure out how to deal with the Facebook “Graph” API.  And it turned out to be really easy to work with.  After I read “howto” web sites for half an hour, implementing it was just a matter of connecting app secrets with app IDs with client tokens with access tokens with long-lived access tokens.

It all makes sense.

It’s all on github as usual, but it’s trivial, really.  And I guess it’ll work until Facebook feels like they should cut off more access to the data, whenever they feel like that’ll make more sense for their quarterly outlook.

Blackest Night

Previously: I bought an HDMI OLED screen and determined that its black pixels emitted light.

This made me start wondering: Do all OLED screens emit light from “black” pixels?

So I did the simplest thing possible to test this: I made a little app that displays a black screen. It’s on Google Play and everything. It’s called “Blacker Than Black” if you just want to search for it on your phone.

So I loaded it up on my Blackberry Priv AMOLED (that’s short for “armored led”, I think), and went into the unmentionable room, and took a picture:

OK, that’s kinda… black… let me twiddle the camera settings… er… f2.8… ISO6400… two second exposure…

That’s still very black! Although now the camera can see my fingers in the very, very dim room. Very dim.

OK, let’s test another phone. That’s a Samsung Galaxy S6…  (Which is also AMMO LED.) Very black indeed.

OK, I’m convinced. That SmallHD AC7 OLED screen sucks, but other black OLED screens are blacker than very black.

For kicks, I loaded the app onto my Sony Xperia z4 tablet, which has an IPS screen. And dialed the exposure settings waaaay down.

Yeah. It’s not very black.

Galaxy S6 in front to compare.

So there you have it: The OLED blackness myth… IS CONFIRMED!

Shocking. But that just means that I have to find a different 7″ OLED screen from somebody that makes a better screen, and things will be perfect!

Unfortunately, after googling for an hour or two, that doesn’t seem to exist. There are other OLED screens, and a couple of them even have HDMI, but they’re all really, really ugly, and isn’t really something that I want in my bedroom.

Oh, well. I’ll have to wait a few more years for perfection…

More Fun With Google Geocharts

I’ve been using Google Geocharts to create nice world maps for my World of Films and Cocktail blogging project. It’s a pretty good service, but it doesn’t really have all the bells and whistles I need to customize the interactive version the way I want.

But today I’m hung over, and I got down to the nitty gritty undocumented interfaces. Behold!

But click over here to experience the much awesome.

Here’s the longer story for other people who are interested in doing something similar. Note that this is likely to stop working at any point since I’m using non-public features that just happen to work now with the version of Google Geocharts right now, on January 1st 2017.

So: I wanted to have stuff happen on a “hover” action, so that people don’t need to click to make things happen. Much more fun. But there is no “hover” callback in Google Geocharts. Instead I piggy-back on the tooltips and use them to root out the data I need to determine what country the user is hovering over.

First of all, make the tooltip be HTML instead of the default SVG text elements:

var options = { 
  ... 
  tooltip: { trigger: "focus", isHtml: true } 
};

Then hide the oh-so-ugly tooltip:

.google-visualization-tooltip { 
  visibility: hidden; 
}

Then do something like the following to have something happen when you hover over a country. Each country is a separate SVG path element, so:

$("path").each(function() { 
  $(this).hover(function() { 
   $(".google-visualization-tooltip")
     .find("span")
     .first()
     .each(function() { 
             var html = this.innerHTML; 
             if (html.length == 2) { 
               $.map(films, function(film) { 
                if (film[0] == html) 
                 displayFilm(film); 
               }); 
             } 
           });

Obviously this won’t work directly for you, but what I’m doing here is rooting out the data from the displayed tooltip (here it’s the two-character country code), and then using that to figure out what country I’m over. And from there you can just do whatever you want.

What I wanted was to display a random image from the film from the country under the cursor, so I used a weird cross-origin Google script service, which just reads the HTML from the blog post, finds all the images, and displays one of them at random.

Useful, huh? HUH??!?!

Oh, well.

Here’s the source code.

“Muting” Pictures With Pure CSS

I’ve been somewhat wary about posting some of the images from some of the more extreme Fantagraphics comics I’ve written about (I’m thinking of you, Grit Bath).  Not everybody appreciates being flashed images of bitten-off ears or penises while scrolling down a blog.

On the other hand, I want to represent these comics honestly, so I thought it might be nice to “hide” images from more sensitive readers without making a big deal about it.  That is, I wanted them still to be accessible without the reader having to go to a new page, and I wanted to make this possible without adding a lot of redundant HTML to the articles.

Presto!

shot0028 png

The solution is pure CSS: I only have to add the “redact” class to the <a> link that surrounds the image.  It took me several hours of googling around to put all the pieces together, but the end result looks quite “d’oh, that’s simple”.  All the other solutions I found involved adding <div>s around and <p>s inside, which is yucky.

I’ve put the solution on Github for people interested in adapting it to their own needs.

Google GeoChart

I wanted to have some maps in my World of Films and Cocktails series.  Like this:

I tried various mapping services, but nothing was flexible enought to do what I wanted.  I wanted more recently “visited” countries to be brighter, I wanted it to be scriptable, I wanted it to be easy to take unassisted “screenshots”, and I wanted an interactive version where you could click on the countries to get some information.

Then I found Google GeoChart. It’s really kinda geared towards displaying numerical data per country, but it’s flexible enough that you can disable almost all of the distracting, ugly elements.  And, as a bonus, it generates SVG images, so whatever you can’t disable with the features provided, you can just alter by inspecting the DOM after the image has been generated.

Kudos to Google.  It’s very neat.  I managed to make the maps look exactly like I had envisioned.

You can see the interactive version here, and the source code is on github. It’s totally trivial.  It just sets a bunch of defaults, and then (after inspecting the DOM a bit), it removes some textures.  And adds events that pop up lightboxes that point back to the films.

To create the snapshots of the charts, I use PhantomJS. It allows rendering web pages headless, and generates a PNG as the result.  It’s really neat and easy to work with.  With all this in the tool chain, I can generate the WFC entries automatically without human intervention.

Well.  Somebody has to make the cocktails.  And drink them.  And edit out the boring screenshots.

shot0023 png2

Yes!  I do that!  The nerve of some people…

Filtering Out Pingbacks From A WordPress.com-Hosted “Recent Comments” Box

If you self-host your WordPress blog, you can do whatever you want.  If your blog is hosted at WordPress.com, you’re very limited in what you can customize.

For instance, for years I have wanted to get rid of pingbacks from myself in the “Recent Comments” box on the pages.  When I link to older messages, the box ends up looking like this:

commentsI look like a monomaniacal self-commenter.  Like, eek.  So yesterday I spent most of the day googling around trying to find out how to stop this insanity.  And it turns out that this is something that users have requested from Automattic since (at least) 2009, but they just haven’t implemented it.

Even though it’s totally trivial.  On a self-hosted WordPress blog, it’s a one line change.

So my choice here is to either start self-hosting (and I don’t want to — I host enough stuff already), or to figure out a way to work around this weirdness.

WordPress.com offers a few handfuls of widgets.  One of them seemed promising — the “Text Widget”.  But although you can put HTML in there, there’s no way to update it automatically, or use an <iframe> to embed HTML dynamically.

Then I saw that there’s an RSS widget!  What if I were to download the comments feed from WordPress, filter out all pingbacks, and then create a new RSS feed based on that?

Presto!

rssNo more pingbacks!  However, the RSS feed only has the last ten comments, and virtually all of them were pingbacks (except for the two test comments I added while developing), so I’m still the only one there in that box.  But that should hopefully fix itself after a while.  🙂

(The script caches comments, so it should build up to a more meaningful feed after a while…)

The code is on Github, so feel free to use it if you’re also annoyed by the “Recent Comments” box. Two non-optimal things about using this way to list the comments: 1) No images are allowed in the RSS Widget on WordPress.com, so it looks kinda boring, and 2) WordPress.com caches the RSS for a while (an hour?), so it’s not updated immediately.

But it’s good enough for me, and I won’t have to start self-hosting (and stop paying Automattic money).

(My very first Python script!  Python seems rather inconsistent.  Hysterical raisins, I guess.)

NCSI SUV: CSID

Look, I’m a Windows developer:

DSC01961Actually, I just pushed the Concerts in Oslo Cordova app to the Windows Phone store to debug the submission process.  At work I’ve tried to push an app several times to the store, but Microsoft just says “it doesn’t work”.  When I ask “er, what doesn’t work?” their response is “it doesn’t work”.

And pushing the CSID app helped!  From the server logs, I can see that Microsoft never let the app contact the server.  So either they don’t actually test the apps before putting them on the store, or they only test them in non-networking mode.

Which would explain why the app at work gets the response “it doesn’t work”.  It’ll have to provide more in-depth error messages when there’s no network, and perhaps that’ll make Microsoft let the app through.

*crosses fingers*