Author Archives: Jonas Hellström

Port forwarding over SSH to an Android Thing(s)

I was a bit frustrated on this one, because even if the commands are fairly easy, the results are hard to debug when they show up.

I wanted to be able to connect to my Android Things RPi3 device over SSH. This is pretty much simple port forwarding shenanigans but I got stuck for it for about an hour.

My computer setup looks somewhat like this

|            |
| Computer 1 |
| (client)   |
      | Interwebs
|             |
| Computer 2  |
| (server)    |
| port: 2222  |
      B Wifi
|            |
| RPi 3      |
| (Android)  |
| port: 5555 |

The command to make this work is

ssh -L 2223:[ip of RPi3]:5555 [user name to server]@[host name/ip of server] -p 2222

What this does is create a local port, 2223, on Computer 1 that connects to the ip of the RPi3 on port 5555, through the server using port 2222.

After this command is executed you will have to use your password to log in on your server, and it will end up at a console prompt. Open a new terminal window on Computer 1 and execute the following

adb connect localhost:2223

This will tell adb on Computer 1 to attempt a connection to itself, localhost, on port 2223, which is the one we created in the step above. This will automatically trigger that connection attempt to pass through the SSH tunnel and talk to the RPi3.

You should see your device being connected on Computer 1 through

adb devices

…and you should be good to go with monitoring, developing, or whatever you fancy, through adb.

Thanks to Otyg over at #sis on IRC

I’ve Framed! my hosts

And it feels great!

For a couple of days I’ve been poking around with a small tool to ease the burdens of keeping track of different web development environments.

The problem

Nowadays a lot of developers have a number of different environments set up to improve the way they work. It’s often safe to tinker around and break things in a development environment, a little less so in a stage environment and absolutely potential high risk disaster to do anything at all in live/production!

In order to try and fix this, I, in the early days, went the way of directly editing files server side on the different hosts. This had an added benefit of making it clear to anyone that visited that host, that it was a special type of environment. But, there was a downside. And that was that it was visible to everyone and not just to me, when surfing around on the different hosts. Plus, editing files like this is a nightmare to keep track of when deploying.

The solution: a multi browser extension

So, I thought that it would be nice to have these visual cues available on the client side, in the browsers, instead. I started looking around in the different browser addon stores and sure, I found one or two tools, but they were all either low on features or tied to only one browser.
To fix this, I started developing an extension for Chrome that could take of this. Said and done, I’ve now created an extension, Framed!, that works on three browsers so far; Chrome, Firefox and Opera. Soon, there will be Microsoft Edge and Safari versions but they are super quirky to work with, so don’t expect it to be available for a little while.

What it does

Anyways, what the extension does is allowing you to paint a frame around your choice of host(s), customisable to what color, thickness, placement (top, right, bottom, left), opacity and Z-index. As an added bonus, you can import/export your frames by copying and pasting a human readable and editable JSON format between the browsers you use.

I hope you find this tool useful, and I’ll spend some more time working on it to make it even more useful and polished.

How to get it

Here are the links to the extension on all browsers:

Taking back your control after Windows reinstall

We all do it. I mean, it’s not really a choice is it? It’s just something that has to be done more frequently than changing socks.

I’m of course talking about reinstalling Windows. Because, man, is this a totally non-hardened OS or what? You can go to one ad-powered website and get a whole slew of issues that will sit on you system partition for as long as you don’t do that reinstall. So you do it. You do the reinstall. And everything feels so much better; Things are snappier, all of a sudden you have your system drive storage space back, and still all the rest of the files on a separate drive since 2006, because you remember that time when you reinstalled and you naively put everything on one single huge drive… Everything got erased.

And now you’re trying to install Cygwin and get some projects going. Maybe try to clone a git project from your home controlled server. And then…. Permission denied, said Bill. Access Denied, said Bull. Oh yeah… Windows don’t know who the hell you are anymore. I mean, sure for the system drive it knows you are its benevolent master. But that separate drive. Ooooh, it’s more inpentetrable than Fort Knox.

Well, there are a thousand different vague answers ranging from so called MS Support and MVP’s to helpful forum users who tells you to install Norton to see if you have a virus, so you at same time can get a thousand new toolbars in IE installed.

There’s _one_ solution that’s worked. Only one. And it’s the command line. Because no OS creator in their right minds would make a command line that cannot rectify the errors all shitty 3rd party applications or window managers can make. Behold, the command:

icacls [The folder you want to get back control over] /reset /t /q

That’s it. Everything you need on one line. Don’t thank me, thank Reddit.

Just a small note on add_filter in WordPress

add_filters seem to have its use in a WordPress context. However, debugging them is shit. And there are not a whole lot of good examples around to explain how to work with them.

I was trying to figure out a way to modify the colour defaults for the quotes component in AESOP Story Engine, and that took me a couple of hours to figure out (I’m just not that used to mucking around with plugins, filters and hooks); mainly because there are absolutely zero actual examples on how you can override them defaults.

So, here it is

add_filter() – The bare minimum

add_filter([a filter associated to the component you want to affect], [a method name reference that you come up with]). E.g:

add_filter(‘aesop_quote_defaults’, ‘modify_defaults’)

modify_defaults() – A couple things

You actually get an incoming argument that contains stuff in it, that you can review with… let’s say… var_dump()?

modify_defaults($whatsThis) {



and stuff comes out that you can actually work with! Yeah, it’s going to print all over your wordpress page whenever this is being called, but it sure beats not knowing _anything_ about the contents!

So, what a total add_filter code snippet could look at in the context of changing the background colour for the quote module, that could go into a functions.php file in a child theme:

add_filter(aesop_quote_defaults‘, ‘modify_quote_defaults);

function modify_quote_defaults($defaults) {

        $defaults[background] =white‘;

        return $defaults;


So, now the background will by default be white, in terms of the quote module.


I’m not (quite yet) a super savvy WordPress developer, and I shouldn’t have to resort to make a lot of Google searches (as an extra to reading your documentation), that proved to be several rabbit holes, and still I have to go through the core source code(!) to figure this out.

And not only that AESOP HORROR STORY ENGINE; It is your RESPONSIBILITY to document these things CLEARLY, but you seem to actually expect your userbase to go trawl your Github to find the fields that are applicable for these things. SHAME!

Anyways, apart from that, there’s a thing that I am a bit uncertain of how to do or handle appropriately;

  • How to modify the defaults used in the admin area of WordPress when adding each component?

Adding _your_ fonts to TinyMCE (WordPress)

This took me a while to figure out, mainly because I:

  • Went the quick and dirty route
  • Found a TON of tips on how to add Google Web and other web fonts, which I didn’t want because I
  • Wanted to load custom (TTF) fonts

I was about to use a WordPress plugin called Fonts, because it was minimal and had exactly what I needed:

  • The buttons to choose Font family and size
  • Enabled the possibility to add custom fonts

But, alas, there was a snag that I wasn’t particularly interested in pursuing. When reading the instructions on how to add custom fonts to the fonts list, you get linked to the WP SITES page where it, when coming to the actual solution part of the answer, states:

You have reached content available exclusively for members.

To enjoy unlimited access & support, register using this form, or login.

Clicking the register button and what do you know; registering sets you back $49.99 a month!

So instead I went the “Spend hours, days, even weeks” route (it took me longer than I suspected, I’ll give it that) and figured out something that seems to work!

Step 1 – Fonts

Now, I’m no expert in this field so I took the trusted “Throw it on the wall and see what sticks” approach and converted the fonts I needed to a number of other font formats, other than the one I had (otf). In the end, what I use is:

  • EOT
  • WOFF
  • TTF

The tools I used for this is FontForge and ttf2eot, both for Windows.

Step 2 – Development

You need:

  • 1 piece of Theme
  • 1 set of Plugins


If it’s one of your own themes or one that you made a child theme out of or you’re just messing in another one’s, doesn’t really matter. I will not go into any detail on how to make themes or edit the files for a specific theme, as that is abundantly well described pretty much everywhere on the InterWeb.

What really matters is what you put in the style.css (or corresponding style file) which is this:


Important to note here is that I reference a path to a plugin. If I can, I try to consolidate things. You could potentially place these wherever you’d like, but having a shared space is nice.

Now, this means that the wordpress pages will load the fonts (read on and you’ll see the contents of my-font.css as well) so they become available to the browser for viewing, should they not be available on the viewer’s computer already.

Onwards to the plugin!


This is the gritty part to make TinyMCE actually show you the Font family dropdown box and load up the fonts you want. This took a b unch of hours to navigate, as I’m not used to mucking around in TinyMCE and the border between what WordPress can do and what TinyMCE expects is certainly not clear cut!

Anyways, what I ended up with is this folder structure

  • wp-content
    • plugins
      • add-fonts
        • add-fonts.php
        •  fonts
          • My-Font.eot
          • My-Font.woff
          • My-Font.ttf
          • my-font.css

I’m not claiming this to be the best structure, it’s just one that seem to work ok.


The meat of the plugin. This makes sure to

  • Add the Font family button to TinyMCE
  • Add the fonts you want to the Font family dropdown
  • Reflect your changes when you select a font

Quite simply, this is what it looks like:

 * @package Add_Fonts
 * @version 1.0
Plugin Name: Add Fonts
Plugin URI:
Description: This simply adds "back" the Font Family button in TinyMCE and enables a custom (local) font
Author: Jonas Hellström (shellström)
Version: 1.0
Author URI: 

 * Adds the Font Family button
add_filter( 'mce_buttons_3', 'my_mce_buttons_3' );
function my_mce_buttons_3( $buttons ) {
 $buttons[] = 'fontselect';
 return $buttons;

 * Adds new font items to the Font Family dropdown
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
function wpex_mce_google_fonts_array( $initArray ) {
 // The format is [Font name in dropdown=Font name in font-family of CSS]
 $theme_advanced_fonts = 'My font=My font;';
 $initArray['font_formats'] = $theme_advanced_fonts;
 return $initArray;

 * Loads the font-faces so the editor can reflect the selected font in the editor
add_action( 'admin_init', 'wpex_mce_google_fonts_styles' );
function wpex_mce_google_fonts_styles() {
 $font1 = '';
 add_editor_style( str_replace( ',', '%2C', $font1 ) );

 * Imports the font-face styles for some reason
add_action('admin_head-post.php', function() {
 @import url('');

It’s somewhat self explanatory. Except for the my-fonts.css reference in there. Well, how about we take a look at that as well, shall we?:

@font-face {
 font-family : 'My font';
 font-style  : normal;
 font-weight : normal;
 src         : url('');
 src         : url('') format('embedded-opentype'),
 url('') format('woff'),
 url('') format('truetype');

Well, as you can see these are mostly a ton of references to places where the font files are. The @import rule in the theme style.css at the beginning of this article uses these font definitions, so when you change something in this file, the theme will naturally just follow along.

Adding more fonts later on should be as simple as:

  • Generating the font files
  • Adding a new @font-face definition in my-font.css and making sure the paths are set correctly
  • Adding new $theme_advanced_fonts = ‘My font=My font;’; rows


I didn’t come up with this on my own, here’s a link to where I finally got stuff up and running for real:


Final words

Since you’ve now created this as a plugin, you will also have to enable it in the Plugin tool of WordPress.

Compatibility? Well, I tested this out on WordPress 4.4.2 and I have absolutely _no_ idea whether it will work on older or newer versions. But the original StackOverflow answer was written in June of 2014, so it should be alright.

Package, where the hell are you??!

Simple solution to a simple problem;


I can’t figure out where in the wholey hell of Linux-operating-system-paths-and-specifications, a package is spread out.


dpkg -L [package]

Tunneling Gerrit

Tunneling and Gerrit was a really interesting happening, as it wasn’t all clear how to do the following things

  • Allow cloning and interaction with Gerrit Git
  • Allow interaction with Gerrit’s web UI

The first part was easier than the second. So let’s look at the second first.

Allowing interaction with Gerrit’s web UI

In order to set this tunnel up you need to know the port it’s running at. This can be stuck in a few places, depending on your configuration. Most obvious places to look are

  • Apache site configuration
  • /etc/gerrit/gerrit.config

Mine was residing in the config, which said

    listenUrl = http://*:8080

This is something we can use when we set up our tunnel. The tunnel setup is a bit opaque, but the general gist is:

ssh -L [local port number]:[remote host where gerrit web is running]:[remote port where gerrit web is running] [username]@[remote host] -p [remote ssh port]

So, a command would look like this:

ssh -L 3333:cerberus:8080 -p 1234

After having done this and logged in you will be able to reach the web ui through:


Make sure you add your local SSH key so you can interact with Gerrit Git.

In parallel you can/need to set up another tunnel to Gerrit, which usually runs on port 29418…

Allowing interaction with Gerrit Git

The port Gerrit runs on was found in the /etc/gerrit/gerrit.conf file, looking like this:

    listenAddress = *:24918

So let’s use this for setting up the Git tunnel. The command follows the same pattern as for tunnelling the Gerrit web UI:

ssh -L [local port number]:[remote host where gerrit web is running]:[remote port where gerrit web is running] [username]@[remote host] -p [remote ssh port]

And the final tunnel would be something like this:

ssh -L 29419:cerberus:29418 -p 1234

In order to interact properly with Gerrit Git through this tunnel, you would for instance clone a repo like this:

git clone ssh://[gerrit user]@localhost:[tunnel port]/[git repo]

And the command itself would be similar to:

git clone ssh://john@localhost:29419/doe.git

Good to know!

Gerrit commands and other bits

Gerrit is a really interesting code review tool. When I worked for one of my former employers I got to test it out and I was both intrigued and daunted by it.

The learning curve is sky-high with this one, but there’s a lot of things done right, when it comes to running huge code bases.

So, naturally, I want to use this at home as well, for my own pet projects. If nothing else, to keep myself updated on the technology.

Here are a few things that become important when you have got your Gerrit-site up and running. You know, the day-to-day and next-project kinda things that aren’t super obvious.

Cloning a repo

git clone ssh://[username]@[server]:29418/[project]

Getting the commit-hook

 scp -p -P 29418 [username]@[server]:hooks/commit-msg .git/hooks

Pushing to origin

git push origin HEAD:refs/for/master

Alternative way of pushing to origin

vim .git/config

[remote "gerrit"]
 url = http://[server]:29418/[git-repo]
 fetch = +refs/heads/master:refs/remotes/origin/master
 push = refs/heads/master:refs/for/master

git push gerrit

Fixing permissions in a shared Git repo

I hate shared Git repos’. Especially when I forget to set them as shared ones. And I start inviting people to join in on the fun.

So, therefore, here’s a tip from a blog that tells you a way of fixing the mess you did, retroactively:

tl;dr TheRightWay

git init --bare --shared

tl;dr TheRadioactiveWay

ssh server
chown -Rf root:git /path/to/bare/git/repo
cd /path/to/bare/git/repo
git config core.sharedRepository group
find /path/to/bare/git/repo -type f | xargs chmod 664
find /path/to/bare/git/repo -type d | xargs chmod 775
find /path/to/bare/git/repo -type d | xargs chmod g+s