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.

Why?

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.

fira-code-iscript

Get it here: https://github.com/kencrocken/FiraCodeiScript

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:

notebook-ui-fullscreen.png

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:

blueprint-ui-main.png

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:
https://medium.com/hacking-atom/some-subtle-3d-effects-for-atom-d7a624a74fdd

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

gradient-syntax.gif

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:

Convert snake_case to camelCase in VS Code

  • Press CTRL-H ( ⌥⌘F on Mac ).
  • Press ALT-R ( ⌥⌘R on Mac ).
  • Type _([a-zA-Z]).
  • Press TAB and type $1.
  • Press ALT-ENTER ( ⌥ENTER on Mac ).
  • Press F1 and type upper, then press ENTER.
  • Press CTRL-ALT-ENTER ( ⌥ENTER on Mac ).

Explanation

VS Code (and Atom) currently use JavaScript-style regular expressions for the find/replace feature so the replace operation doesn’t support switches that are available in other editors like Vim (example: \u\1) or Sublime Text (example: $1-\L$1\E).

The workflow above will achieve the same results.

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:
https://github.com/Microsoft/vscode/issues/12185#issuecomment-414411370

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

Hyper.is 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:

hyper-scanlines.png

And here’s the config file for that:

// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// choose either `'stable'` for receiving highly polished,
// or `'canary'` for less polished but more frequent updates
updateChannel: 'stable',
// default font size in pixels for all tabs
fontSize: 26,
// font family with optional fallbacks
fontFamily: '"Fira Code iScript", "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
// default font weight: 'normal' or 'bold'
fontWeight: 'normal',
// font weight for bold characters: 'normal' or 'bold'
fontWeightBold: 'bold',
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
cursorColor: 'rgba(255,255,255,0.8)',
// terminal text color under BLOCK cursor
cursorAccentColor: '#000',
// `'BEAM'` for |, `'UNDERLINE'` for _, `'BLOCK'` for █
cursorShape: 'BLOCK',
// set to `true` (without backticks and without quotes) for blinking cursor
cursorBlink: false,
// color of the text
foregroundColor: '#fff',
// terminal background color
// opacity is only supported on macOS
backgroundColor: '#000',
// terminal selection color
selectionColor: 'rgba(150,150,150,0.3)',
// border color (window, tabs)
borderColor: '#333',
// custom CSS to embed in the main window
css: `
header.header_header {
opacity: 0;
}
.terms_terms {
margin-top: 16px !important;
margin-left: 8px !important;
}
.hyper_main{
background: linear-gradient(45deg,
rgba(14,14,14,1) 0%,
rgba(78,92,90,1) 18%,
rgba(130,157,152,1) 33%,
rgba(142,166,162,1) 50%,
rgba(153,175,171,1) 67%,
rgba(174,191,188,1) 78%,
rgba(216,224,222,1) 100%);
box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
mix-blend-mode: overlay;
box-shadow: inset 0 0 100px black;
}
@keyframes scan {
0% { background-position-y: 0px; }
50% { background-position-y: 100px; }
100% { background-position-y: 0px; }
}
.hyper_main::after {
background-color: lightgreen;
content: "";
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-image: linear-gradient( to bottom, #444, #444 50%, #555 50%, #555);
background-size: 100% 6px;
background-position-y: 0px;
background-blend-mode: multiply;
mix-blend-mode: hard-light;
animation: scan 20s linear infinite;
}
.terminal.xterm {
mix-blend-mode: color-dodge;
}
`,
// custom CSS to embed in the terminal window
termCSS: ,
// if you're using a Linux setup which show native menus, set to false
// default: `true` on Linux, `true` on Windows, ignored on macOS
showHamburgerMenu: '',
// set to `false` (without backticks and without quotes) if you want to hide the minimize, maximize and close buttons
// additionally, set to `'left'` if you want them on the left, like in Ubuntu
// default: `true` (without backticks and without quotes) on Windows and Linux, ignored on macOS
showWindowControls: false,
// custom padding (CSS format, i.e.: `top right bottom left`)
padding: '0px',
// the full list. if you're going to provide the full color palette,
// including the 6 x 6 color cubes and the grayscale map, just provide
// an array here instead of a color map object
colors: {
black: '#000000',
red: '#C51E14',
green: '#1DC121',
yellow: '#C7C329',
blue: '#0A2FC4',
magenta: '#C839C5',
cyan: '#20C5C6',
white: '#C7C7C7',
lightBlack: '#686868',
lightRed: '#FD6F6B',
lightGreen: '#67F86F',
lightYellow: '#FFFA72',
lightBlue: '#6A76FB',
lightMagenta: '#FD7CFC',
lightCyan: '#68FDFE',
lightWhite: '#FFFFFF',
},
// the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
// if left empty, your system's login shell will be used by default
//
// Windows
// – Make sure to use a full path if the binary name doesn't work
// – Remove `–login` in shellArgs
//
// Bash on Windows
// – Example: `C:\\Windows\\System32\\bash.exe`
//
// PowerShell on Windows
// – Example: `C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
shell: '',
// for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
// by default `['–login']` will be used
shellArgs: ['–login'],
// for environment variables
env: {},
// set to `false` for no bell
bell: 'SOUND',
// if `true` (without backticks and without quotes), selected text will automatically be copied to the clipboard
copyOnSelect: false,
// if `true` (without backticks and without quotes), hyper will be set as the default protocol client for SSH
defaultSSHApp: true,
// if `true` (without backticks and without quotes), on right click selected text will be copied or pasted if no
// selection is present (`true` by default on Windows and disables the context menu feature)
// quickEdit: true,
// URL to custom bell
// bellSoundURL: 'http://example.com/bell.mp3',
// for advanced config flags please refer to https://hyper.is/#cfg
},
// a list of plugins to fetch and install from npm
// format: [@org/]project[#version]
// examples:
// `hyperpower`
// `@company/project`
// `project#1.0.1`
plugins: [],
// in development, you can create a directory under
// `~/.hyper_plugins/local/` and include it here
// to load it and avoid it being `npm install`ed
localPlugins: [],
keymaps: {
// Example
// 'window:devtools': 'cmd+alt+o',
},
};

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

Krita on Elementary OS

Krita is a stunning, open-source drawing and image editing application that works a lot like Photoshop. Til recently, it hasn’t been available out-of-the-box for Elementary OS. There were certain dependency requirements that couldn’t be met by default, but that’s now been addressed with AppImage!

Check out the bottom of this article for info: Krita 2.9.11 and the second 3.0 alpha build

Get Krita running on Elementary OS

All you need to do to run Krita on Elementary OS now is download the AppImage file (mentioned in the above article), set the properties so it’s executable, then run it. Dead simple!

Here’s a quick rundown:

  1. Download kkrita3-prealpha2-3c69a59-x86_64.appimage
  2. Right-click the file and select Properties.
  3. Click the More tab.
  4. Toggle Execute for Owner and Group.
  5. Click the Close button.
  6. Click on the file to run Krita (or right-click the file and select Run).

That’s all there is to it. Finally, Krita for the ultimate OS! 😉

Krita on Elementary OS

How to defeat Beep Beep Bop!

Professing itself as ‘improved’, the evil perpetrator hijacked the seamless and unbroken experience WordPress.com users had come to love. It proceeded to taunt them … “Beep Beep Bop!”

Okay, nuff with the melodrama. Let’s hijack back our improved posting experience. To get back to the traditional WordPress.com post editor, just go to your blog’s /wp-admin/ section like so:

  • yourblog.wordpress.com/wp-admin

You can then make your way to the posting options using the dashboard menu or you can get to the post sections quickly as follows:

  • All Posts: yourblog.wordpress.com/wp-admin/edit.php
  • Add New Post: yourblog.wordpress.com/wp-admin/post-new.php

A little clarification

In case the above is confusing, I’m referring to the ‘improved posting experience’ here on WordPress.com.

Edit Post ‹ D0TH N0T C0MPUT3 — WordPress.com
The ‘improved posting experience’.

Here’s how it used to look.

More improved posting experience
The experience from days of yore.

For those accustomed with the traditional editor, there’s really nothing to gain from the new editor, but there’s a new interface to come to grips with. There’s also a huge loss in that it’s not easy to navigate to other admin sections.

Requests for the traditional editor

It’s possible to access the traditional editor, using the details above. But it seems it won’t be the default anymore, at least from what I understand of this support topic:

https://en.forums.wordpress.com/topic/how-to-permanently-disable-improved-posting-experience

It’s also been discussed at length here:

https://en.forums.wordpress.com/topic/please-reinstate-the-option-of-choice-to-use-the-old-publishing-format/

So for those preferring the traditional post editor, the method outlined above is the way to go. For now, it seems Beep Beep Bop is invincible. But we can sneak our way past his evil grasp.

How to defeat Beep Beep Bop!

Edit GitHub Pages

Here’s a quick guide to editing GitHub Pages. Not familiar with GitHub Pages? It’s a totally free service provided by GitHub where you can freely host HTML pages. Read more about it here: https://pages.github.com/

The Details

GitHub uses a separate branch for those pages so you can access the gh-pages branch like so:

In your GitHub repo, click to open the Branches drop-down.

GitHub branch dropdown

Select gh-pages.

GitHub gh-pages branch

You’ll be switched over to the gh-pages branch, where you should see the files served publicly such as the index.html file.

GitHub gh-pages index.html

Click on the index.html file to open it, then click Edit (pencil) icon to make changes.

GitHub gh-pages edit index.html

Once you’re done with editing, scroll to the bottom of the page and you’ll see a Commit changes button. To save the changes, press that button and optionally leave a comment about the changes.

GitHub gh-pages edit commit

That’s it!

You should see the change(s) reflected when viewing the page in your browser, through the page’s github.io url (or via a custom domain if you’ve set configured that).

The command-line method

Of course, if you’re more comfortable editing through your command-line or linux terminal, it’s very simple. If you haven’t already, clone your repo locally. For example, you can clone my Nibble project like so:

git clone https://github.com/Ugotsta/nibble.git

Once that’s cloned, go to the project folder:

cd nibble

Then access the gh-pages branch using the git-checkout command like so:

git checkout gh-pages

You’ll then be able to see and edit the files from the gh-pages branch. You can make your changes to the index.html file, like so (using Vim) for example:

vim index.html

You can make the changes to the file, then add those files as part of a commit using git add:

git add .

Commit those changes with git-commit:

git commit

The commit process will request a comment, to be added to the changelog. On linux systems, usually Nano is used for the comments.

When using Nano:

  1. Type any comments you’d like to add.
  2. Press CTRL-O to save.
  3. To select and overwrite the file you’re viewing, press ENTER.
  4. Then CTRL-X to return to your terminal prompt.

Now you can push those changes back to the repository with git-push:

git push

that’s it for the command-line!

Here’s a quick syntax-colored summary of those commands:

git clone https://github.com/Ugotsta/nibble.git
cd nibble
git checkout gh-pages
vim index.html
git add .
git commit
git push

I hope that helps, feel free to ask if anything’s unclear. 🙂

Edit GitHub Pages