Ring, ring... Terebikko calling!

2020-11-22 - Reading time: 4 minutes

So, a couple weeks ago I was watching this video tribute to Super Mario World's 30th anniversary.

At around the 17:20 mark, in the middle of talking about various tie-in products to promote the game, it brings up Mario & Yoshi's Adventure Land. A one-episode animated movie that follows Mario and Luigi through, essentially, the events of Super Mario World.

What makes it unique is that it this is a "VCR game" of sorts that uses the Terebikko: an interactive 'quiz' device that mimics a telephone. Mario calls you. The phone rings. You pick it up. He asks you a question that needs a 1, 2, 3, or 4 response. (Or red, green, yellow, blue.)

You press the answer within the allotted time, and you get a response. (Near I can tell, it mutes the phone for the inappropriate response, but that's something we're going to find out definitively.)

And it's more than just Mario. There's a whole catalog of videos made for it in Japan, including Dragon Ball Z and Sailor Moon.

I found it all oddly fascinating. And my curiosity started to kick in. It seemed so simple, but it was a clever idea. I loaded the audio into Audacity and realized I could make out binary... uh oh.

See, one of the things I've always had an interest in, but never got a chance to try was demodulation of a digital signal from an audio file. Like the screeching of a modem, or a game loaded off an audio tape into a ZX Spectrum. That kind of thing. This seemed like the perfect on-ramp for it.

With very little actual information online, this also seemed like a perfect reverse engineering project in general.

I found out they released a version of this in the United States in 1989 under the Mattel label, a year after it's debut in Japan from Bandai, and... I found one on eBay for under $20 shipped. 😎

So now I'm, seemingly, irrevocably committed to this project, now that money is involved. 😏

Here's what I'm planning. I've already spent a couple days dicking around and have a stack of notes. I'm hoping to get at least several decent blog posts out of this adventure:

My Goals for this Project!

Primary

• Reverse engineer the digital protocol used, as much as possible
• Create a real time decoder for it
• Create a tool to generate the codes, so people can create their own, new videos

Secondary

• Do a complete tear-down of the actual device with high res screencaps of the internals (I believe both US and JP versions are identical -- the case and operation certainly is, and the videos are all compatible with each other's versions). Just totally document the hell out of it. Get it all onto Github and Archive.org for safe keeping.

Nice to Have

• Possibly integrate the decoder into a software emulator/video player as an all-in-one playback app. (How hard are VLC plugins to write...? 🤔)

That last one is unlikely, but hey, if I haven't burned myself out on the entire thing by that point, who knows?

WordPress Plugins That Changed My Life

2020-02-12 - Reading time: 4 minutes

In my day job, I do a great deal of development on WordPress sites. I've come a long way in my understanding of the popular CMS software in the last couple years, but I'm still learning something new all the time.

In that spirit, here's a collection of WordPress plugins that I've found to be life changers. I consider them must-installs when working on new sites:

Advanced Custom Fields (Pro)

I remember when I started creating custom post types and using ACF. It expanded my perception of what a WordPress site could be. Before discovering ACF, I had to resort to ugly hacks and just kind of lumping posts together with categories and duct tape.

The base ACF is free, but the Pro version is not only an extremely fair price (A$25 at the time of writing), but includes invaluable field types, like the Repeater, Options pages, and the ability to integrate with the new Blocks feature in WP5.

WP Updates Notifier

This one may have been abandoned, but it still works as of this writing. It checks for plugin, theme, and core updates regularly, and emails me about it. WordPress being kept updated is crazy important, so it's great to be able to update as soon as possible. Might need to find a replacement for it, though, if it really has been left for rats.

View Admin As

If you're doing any work with user roles, you need this. View Admin As allows you to switch between various roles and capabilities without having to log out, or keep a private browsing window open with another account loaded up.

Query Monitor

Which template wound up being loaded? Why is this taking so long to load? WHERE ARE MY PANTS?? Query Monitor adds a wonderful dropdown on the admin bar that helps you find out the answer to all of these, and more.

And these I discovered most recently:

JSM's Show Post Meta

Dumps all of a post's meta values at the bottom of it's edit screen. See every little bit of information being stashed along side your posts. Why something like this isn't included as a built-in debug tool is beyond me.

Debug Toolkit

Adds the wonderful vd(), vdd() debug methods (substitutes for print_r, et al), and a gorgeous, very helpful error message via the Whoops error handler.

Just a word of warning though: this seems to crank the error reporting level, so even basic issues stop everything in their tracks. Normally, this is good -- fix it! But I had at least one time where it caused a silent crash, and I couldn't do ANYTHING in WordPress. Not even disable Debug Toolkit. I had to go in and manually remove the plugin from the command line. MOST of the time, it's perfectly great though. Just stay aware.

WP Console

An interactive PHP console via the admin bar! Instead of hacking in a test or two and dying somewhere, just pop down the console and test out your PHP/WordPress code assumptions in a safe space.

Prenatal ACF Data Insertion (...or "that's the most boring title I've ever written.")

2020-02-02 - Reading time: 9 minutes

Just wanted to document an interesting issue I had with Advanced Custom Fields recently...

Don't get me wrong, I swear by ACF on all of my WordPress projects. I consider it an absolute necessity. It's powerful, easy to use, and is priced reasonably.

It's when you go outside the standard usage of ACF that things get a bit... thorny...

Into the weeds

Normally, you'd create a field group. And you'd assign that field group based on a set of criteria (a particular page template, or a custom post type, etc.).

Then you create a new post, and you're presented with your custom fields. You enter your data, and it's attached to the post when you save. And accessing that data is trivial from templates.

But what happens if you create a post with custom fields, but you're doing it from inside a PHP function, using wp_insert_post?

What if you want to add content to a field in that post immediately afterward? Surprise! Your standard update_field or add_row code will silently fail. According to the documentation, you need to reference the field name using the field key in that situation.

The field’s key should be used when saving a new value to a post (when no value exists). This helps ACF create the correct ‘reference’ between the value and the field’s settings.

Let's unpack that

ACF stores all of it's custom field values inside standard WordPress meta fields inside the post. In fact, you could just as easily use get_post_meta to retrieve ACF field values under many circumstances. Or even write it back.

But ACF is much more than just a key/value pair, of course. Each field has a whole host of information associated with it. Label name, conditional display logic, field type, etc.

In the post's meta data, ACF creates two different values: the field name, and a field key reference.

Let's say I have a custom, basic Text-type field called "Title".

Inside the post, there will be a title meta data field; this holds the actual value of the field. And then there's a _title field. The underscore means it's a field key reference. The value of that looks something like field_123456. Each field group entry gets it's own unique field key name that looks like that.

Internally, when you call get_field('title') ACF looks up the post meta with an underscore -- _title -- and uses that to pull up the details in the custom field group entry.

If you call get_field('field_123456'), in fact, it will work as well. ACF will reference the field group info, and return the appropriate post meta that way.

Both are valid ways to work with ACF field content.

A brand new post, inserted with wp_insert_post is completely blank. It has no post meta data, outside of the usual timestamp and creation info.

So if you try to run update_field('title', 'My Title', 9999), it does nothing. As if it doesn't exist. Because as far as ACF is concerned, it doesn't.

Not yet.

There's no _title for it to reference for guidance.

But if you update_field('field_123456', 'My Title', 9999), it WILL work. ACF knows right where to go to get it's field details, and it works as normal.

Now here's where it gets tricky

That's all well and good for a simple Text field type.

But what if I have something more complicated? What if I have a Group type, with a Repeater inside that?

Let's say I have a Group called "Vehicles" and a Repeater inside that called "Trucks". (And presumably a "Cars", "Motorcycles", etc, but let's keep it simple!)

And each row inside "Trucks" has a "Model" Text field, and a "Mileage" Number field.

Under normal circumstances I could do:

add_row('vehicles_trucks', ['model'=>'Bigfoot', 'mileage' => '50000'], 9999). _(Note the special, barely documented vehicles_trucks underscore selector notation for these nested fields. )_

But if I've just inserted the post, none of those key field references exist!

The vehicles_trucks selector doesn't work. But the previous fix, using the raw key field reference... say, `add_row('field_902100'...``, well, that doesn't work either! Because which field key reference makes sense in this situation? The one for Vehicles? The one for Trucks?

If you use the key_ field key for Vehicle, it fails. Vehicle is a Group type. Nothing happens.

If you use the key_ field key for Trucks, however, something weird happens. Instead of creating a _vehicles_trucks key reference, it creates a _trucks reference...

At this point it's important to note that ACF is smart and slick... right up until the point it is not.

From what I've discovered, there is no shortcut to adding a new row to a Repeater field nested inside a Group if you've created the post inside PHP, before someone had a chance to hit 'Save' on it from the admin.

If you try to get clever, you might fairly think that underscore notation might apply here. Maybe stick the two together, like field_111111_ field_22222.

But you'd be wrong

No, we have to manually create all of ACF's key references ourselves before we can do anything:

update_post_meta(9999, '_vehicle', 'field_111111');
update_post_meta(9999, '_vehicle_truck', 'field_222222');

THEN we can add_row('vehicles_trucks', ... and insert our data programmatically as expected.

This holds true for even deeper nested content, but at that point maybe you want to rethink what you're doing. 😉

I was surprised by just how little information about this specific use case exists. Hopefully this helps somebody out there!

Hit me up on Twitter if I've made an error anywhere in here.

Sectional PHP Highlighting in VSCode

2019-07-16 - Reading time: 3 minutes

So, my eyes were glazing over some WordPress PHP in my editor of choice, VSCode.

The weaving in and out of <?php, <?= and ?> tags, bouncing between PHP and HTML contexts was making my head spin.

I kept having fantasies of a time when I could highlight the PHP (or HTML) context using a different background color... but there didn't seem to be anything like that for VSCode, at least. It's possible I was thinking of PHPStorm, but that was a lifetime ago.

So I powered through, cleaning up the twisty templates, trying to make them as readable as possible. But I finally hit my breaking point and started looking around... and I think I found a good solution. Whether it's a good long term solution, well, that remains to be seen.

The Highlighter extension for VSCode is where the magic happens.

This extension allows you to define custom highlighting rules to regex matches in your code.

You can probably see where this is going.

After some futzing around, I wound up with these rules in my VSCode settings config:

"highlight.regexes": {
        "(<\?php)((.|r|n)+?)(\?>)": [
            { "color": "#FF00FF", "backgroundColor": "#FF00FF40" },
            { "backgroundColor": "#FF00FF40" },
            { "color": "#FF00FF", "backgroundColor": "#FF00FF40" }
        ],
        "(<\?=)((.|r|n)+?)(\?>)": [
            { "color": "#FF00FF", "backgroundColor": "#FF00FF40" },
            { "backgroundColor": "#FF00FF40" },
            { "color": "#FF00FF", "backgroundColor": "#FF00FF40" }
        ]
    }

Your color preferences will vary, of course, but do at least note that I'm using the extended alpha value in the hex (the final octet), so you can blend your background color into your theme's existing color!

(And yes, you can combine that down into one regex. Go ahead and do that.)

Pico-8: Lines Screensaver

2019-01-22 - Reading time: 2 minutes

Okay, so it's not really a screensaver in this instance, but it's the art from inside one. You recognize it. You've seen it before. But here it is... much lower res than usual. ;)

Source: https://gist.github.com/Fortyseven/a4e2d5d3105ed86e0916d162a1a4d466

pico-8 cartridge // http://www.pico-8.com
version 16
__lua__
-- lines (classic)
-- by fortyseven

SPACING = 4
SPEED = 1

function buildPolyVerts()
    local verts = {
        x=rnd(128),
        y=rnd(128),
        xvel= SPEED,
        yvel= SPEED
    };
    if (rnd(1) > 0.5)  verts.xvel = -verts.xvel
    if (rnd(1) > 0.5)  verts.yvel = -verts.yvel
    return verts;
end;

-------------------------------------------------------------
poly = {}

function poly:init(i, color)
    self.color = color
    self.verts = {}

    -- ensure we use the same seed for each poly object, so it will always
    -- create the same intial x/y/velocity directions

    for i = 1, 4 do
        verts = buildPolyVerts()
        add(self.verts,verts)
    end

    -- run the update a couple times to space them out

    for i = 1, i*SPACING do self:update() end
end

function poly:update()
    foreach(self.verts, function(vert)
        vert.x += vert.xvel
        if ((vert.x >= 128) or (vert.x <= 0)) vert.xvel = -vert.xvel
        vert.y += vert.yvel
        if ((vert.y >= 128) or (vert.y <= 0)) vert.yvel = -vert.yvel
    end)
end

function poly:draw()
    for i = 1, 3 do
        color(self.color);
        line(self.verts[i].x, self.verts[i].y, self.verts[i+1].x, self.verts[i+1].y)
    end
    line(self.verts[4].x, self.verts[4].y, self.verts[1].x, self.verts[1].y)
end

function poly:new(o)
    self.__index = self
    return setmetatable(o or {}, self)
end

-------------------------------------------------------------
polyCluster = {}

function polyCluster:init(col_array)
    self.objects = {}
    seed = flr(rnd(1000))

    -- generate three unique polys
    for i = 1, 3 do
        srand(seed)
        local o = poly:new()
        o:init(i, col_array[i])
        add(self.objects, o )
    end
end

function polyCluster:update()
    foreach(self.objects, function(obj)
        obj:update()
    end)
end

function polyCluster:draw()
    foreach(self.objects, function(obj)
        obj:draw()
    end)
end

function polyCluster:new(o)
    self.__index = self
    return setmetatable(o or {}, self)
end

-------------------------------------------------------------
clusters = {}

function _init()
    local c = polyCluster:new()
    c:init({2,8,14})
    add(clusters, c)

    c = polyCluster:new()
    c:init({1,6,12})
    add(clusters, c)

    c = polyCluster:new()
    c:init({13,6,7})
    add(clusters, c)
end

function _draw()
    foreach(clusters, function(c)
        c:update()
    end)
end

function _update()
    cls()
    foreach(clusters, function(c)
        c:draw()
    end)
end

Fantasy consoles?!

2019-01-05 - Reading time: ~1 minute

Been really enjoying playing with Pico-8 lately. If you're not familiar, it's essentially a so-called 'fantasy console' that you can code against. It has all kinds of restrictions as far as code size, memory, graphics, etc. But that's the point: coding within restraints. Old-school style before entire trucks full of gigabytes and gigahertz were dumped on our doorstep.

The consoles include code, music, and art editors inside the app, so you can do everything in one place. It's possible to edit these things externally, too, if that's your bag. Personally, I've been using VSCode along with an appropriate extension.

My first attempt was recreating the classic demo-scene fire effect, which has popped back into the mainstream consciousness thanks to this post.

As you can see, it runs pretty great in a web browser!

There's other 'fantasy consoles' besides Pico-8, including TIC-80 which has an Android port for coding on-the-go!

Not only is it a good exercise coding down to restrictions, it's very convenient to just pick up and go to sketch out gamedev ideas.

Give it a go!