Play Nohzdyve from Bandersnatch in your browser

Netflix’s latest episode of the series Black Mirror, Bandersnatch contains a fair share of easter eggs. One of them exposes a link to the fictional Tuckersoft website where users can download a copy of the ZX Spectrum game Nohzdyve, from the movie.

The game requires a ZX Spectrum emulator. Fortunately, QAOP is an emulator that runs in the browser. So we can run the game through that, super simple. Here’s how.

  1. Download: nohzdyve.tap
  2. Visit QAOP
  3. Open nohzdyve.tap

That’s it.

Once the game loads, just press SPACE to start, O and P to move left and right. Avoid obstacles and capture eyeballs.

Play Nohzdyve from Bandersnatch in your browser

Relax to Code

I’ve recently found that code-related tutorials and discussions provide far better background sound while programming than the music I used to listen to.

Enter the “Soothing Sounds of Coding” playlist:

That’s a YouTube playlist of coding tutorials, discussions, reviews, etc. Basically, anything code related and spanning the gamut of tech from assembly language coding on Commodore 64 to music programming using Pure Data.

EmacsRocks provides the base experience I was looking for. The levels are nicely balanced (no sharp drops or harsh clipping), pacing and vocals are generally relaxed and keyboard sounds exist in abundance. The rest of the playlist is an attempt to follow suit; code-related content with balanced audio that works great for background sound.


There are a few benefits I saw to this:

  • Very relaxing aesthetic to program to since it’s all programming related.
  • Code related content can provide a way to learn something new while coding.
  • Draws attention to lesser known channels with good content.

I hope others find it as helpful as I do. Feel free to share your thoughts in comments. Cheers!

Relax to Code

Best font for VS Code

There is no best font. There’s only what works best for you. For a great many developers, Operator Mono is the best font. It’s a commercial font, well worth the money.

For those who lack the funds,  Fira Code iScript is the best alternative (as of 2018). It supports the same programming ligatures and embeds Script12 for italicized text.


Get it here:

To download and install it:

  • Click “Clone or download” and select “Download ZIP”.
  • Unzip the file locally.
  • Select the .ttf files in the unzipped folder, right-click and select “Install”.

In VS Code press ctr + , to open User Settings then:

  • Type font to quickly locate font settings.
  • Add 'Fira Code iScript', at the start of the Font Family setting.
  • Tick to enable Font Ligatures.

Or in previous versions using text-based settings, add the following options and save changes.

   "editor.fontFamily": "Fira Code iScript",
   "editor.fontLigatures": true,

That’s it. Hope it works well for you.

Best font for VS Code

Revitalizing the text editing experience with Atom

Atom is a beast of a text editor. It was all the rage in the text editing world prior to Microsoft’s release of VS Code, which just like Atom, is built on Electron. The two editors are very similar, but VS Code is clearly faster and arguably uses better defaults. On the upside though, visual elements in Atom can be fully customized using CSS. Given that, it’s the best text editor for experimenting with next generation visuals. That’s what this post is about.

Only with Atom

Atom’s reliance on HTML/CSS make it possible to do things no other editor can do. Like this:


That’s my recently published Notebook UI theme. It makes extensive use of gradients, blend modes and background images; only feasible using CSS. It’s heavy on the CPU but makes text editing feel a little like gaming.

Then there’s this:


That’s Blueprint UI which uses subtle text-shadows to emphases code elements while comments without shadows blend comfortably in the background.

And on a bit more of a practical note, there’s this:monotony-syntax.png

That’s Monotony Syntax theme, which uses subtle rotations to highlight simple but common keywords while somewhat blurring comments to keep attention on code elements.

Experimenting toward a better experience

Given the use of rather heavy CSS styling, those themes may not be the most practical. On older computers, they might be unusable. Even gaming notebooks might get a fair bit of unwanted battery drain as well. However, they’re great for experimenting to see if there’s an experience that might actually work better for programmers or data scientists.

As an example, Notebook UI works just fine alongside the Hydrogen extension for Atom. Since it looks like a notebook and Hydrogen was inspired by Jupyter notebooks, the combination feels natural.

Much more is still possible with Atom too. Here’s a great example of someone making use of 3d transforms:

On a very fun note, Gradient Syntax Theme adds a bit of CSS animation with gradients:


I’m also assembling a UI theme to simplify use of SVG filters, tentatively named Wireframe UI. It aims to bundle in the beautiful SVG filters from Inkscape and provide the simplest example for anyone to make use of them.

More possibilities exist.

Pressing Concerns

Both Electron and Atom were made by GitHub. Since Microsoft announced its purchase of GitHub and especially considering Microsoft already develops and maintains VS Code, Atom’s future seems uncertain.

We’ll see how that goes but meanwhile, we can still use Atom as the best platform for experimenting with visual designs for the next generation of text editing.

Revitalizing the text editing experience with Atom

VS Code – snake_case to camelCase

VS Code doesn’t currently provide a built-in way to convert cases like snake_case, camelCase or TitleCase. Here’s a keyboard focused workflow to handle snake_case to camelCase conversion:

Some Background

I began one of my web apps using snake_case for class and function names. It turns out, a lot of JavaScript apps and tool-kits use camelCase and I wanted other users to feel comfortable using the app alongside those. So I wanted to convert cases. In editors like Vim or Sublime Text, it’s super easy. I’d been using VS Code, which required a workaround, resulting in the workflow above.

More Discussion

I posted the same workflow here as well:

In that discussion, user @jpike88 provides an alternative explanation that follows the same line of thought. The difference is just that the workflow I posted focuses on key-presses, no mouse interaction needed. I thought Vim users might find that more natural. Either way, I think both explanations work together to help get the workflow idea across.

Hope it helps. 🙂

VS Code – snake_case to camelCase

Scanline theme for Hyper terminal is a terminal built on web technologies, namely Electron. As such, it can be customized using CSS. Here’s a screenshot of Hyper with scanlines, made possible through CSS:


And here’s the config file for that:

To use it:

  1. Open Hyper terminal and press CTRL , to open preferences file.
  2. Copy and paste the code above to replace existing preferences (or just copy-paste over the ‘css’ section.

That’s it.

NOTE: The subtle scanline animation is a bit of a drain on the CPU but it can be disabled  replacing line 89 with ‘animation: none;’


Scanline theme for Hyper terminal

Deactivate WordPress plugins and themes from phpMyAdmin

Sometimes plugin or theme conflicts can disable a WordPress site. Often, renaming the plugin folder can get your site back up, but if you don’t have access to the file system, it’s kinda tough to rename that folder! If you have access to the database though, you can try using phpMyAdmin to disable the plugins and/or theme.

Here’s a walk-through for that.

The Details

You’ll need to ensure you’re logged in to phpMyAdmin. If you’re not sure how to access that, you can ask your web host. They’ll usually provide a help page for it.

Once logged in to phpMyAdmin, you can switch the current theme as follows.

Select your main WordPress table.

phpMyAdmin - Select WP table

Select the wp_options table (the name might be different depending on how you or your web host has configured it but wp_options is the most common and default name).

phpMyAdmin - Select wp_options table

Click the Search tab.

phpMyAdmin - Search tab

Replace ‘template’ option

In the options name field, type ‘template‘ and press Enter (or press the Go button).

phpMyAdmin - Search for 'template'

You’ll then see a list of results, there should be just one item there with the option_name ‘template’. Locate the ‘option_value‘ column and double-click that value.

phpMyAdmin - Search results - Edit option_value

Replace that value with ‘twentyfifteen‘ and press Enter.phpMyAdmin - Search and replace template value

That will set the theme to Twenty Fifteen, which is the best current starting point for trouble shooting.

REPLACE ‘stylesheet’ OPTION

Now, do that once more for the stylesheet. Click the Search tab and in the option_name field, type ‘stylesheet‘ and press Enter.

In the search results, change the option_value to ‘twentyfifteen‘.

REPLACE ‘active_plugins’ OPTION

We’ll do that just one more time, for the active plugins. Click the Search tab again and in the option_name field, type ‘active_plugins‘ and press Enter.

The option_value for that one should look rather cryptic. Simply select and delete it all and press Enter.

phpMyAdmin - Search and replace 'active_plugins'

That will deactivate all the plugins on your site.



That’s it!

With that done, assuming the trouble on your site was due to a plugin or theme conflict of some sort, you should be able to access your site once more.

To help with the troubleshooting, here’s a very helpful flowchart:

Which reminds me, if it’s still presenting trouble, or if you’d just rather not bother with it yourself, I’d recommend checking with these guys:

WPMU DEV provides extensive, professional support services for the WordPress platform, backed by many years of experience (they’re the same people behind

Cheers! 🙂

Deactivate WordPress plugins and themes from phpMyAdmin