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 = 'http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/my-font.css';
 add_editor_style( str_replace( ',', '%2C', $font1 ) );

 * Imports the font-face styles for some reason
add_action('admin_head-post.php', function() {
 @import url('http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/my-font.css');

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('http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot');
 src         : url('http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot?#iefix') format('embedded-opentype'),
 url('http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot?#iefix.woff') format('woff'),
 url('http://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/My-Font.eot?#iefix.ttf') 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:

  • http://stackoverflow.com/questions/24105575/how-to-add-new-font-to-tinymce-advanced

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 john@doe.com -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 john@doe.com -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: https://blog.christophersmart.com/2014/01/10/permanently-fixing-permissions-on-a-shared-git-repo/

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

SmartWatch2+3 in one apk

So, I got into this thing when I developed a watch face for the SmartWatch 2 and wanted to see if I could combine it in any way to work with a SmartWatch 3 as well.

My route was a bit more strangled than the one I am about to present, but if nothing else, now that I’ve done that, you don’t have to!

Primary setup

The ingredients list, as of this writing, is straight forward. This is what you need before moving on:

  • Android Studio 1.0.2
  • Android SDK Tools 23.0.5
  • Android SDK Platform-tools 21
  • Sony Add-on SDK 3.0
  • Android SDK 5.0 (API21)

Step 1: Create a Wear (API21: Android 5.0) project

This is for the SmartWatch 3 part of this SmartWatch 2 and 3 mashup.

It is actually as simple as that sounds. In Android Studio, choose the File-menu -> New Project and decide what you’d like to name it along with all the other settings you’d like to use for your SmartWatch 3 project. NOTE! The package name is going to be extra important, as you will have to use that later on in this guide.

When you have ran through the wizard and managed to find yourself with a Wear project that compiles, let’s import a SmartExtensions project.

Step 2: Import one of the SmartExtension samples as a module

Using a sample project is a quick and easy way of getting the right dependencies in place for the SmartWatch 2 part of this mashup.

Importing a sample project is done by clicking the File-menu -> Import-module, browsing to the SmartExtensions sample folder directory (usually located in ANDROID_SDK/add-ons/addon-sony_add-on_sdk_3_0-sony-19/samples/SmartExtensions) and selecting one of the samples. The import wizard will automatically present you with the option of also importing the “SmartExtensionUtils” and “SmartExtensionAPI” projects. Make sure that you include these, or you will run into build issues because of missing dependencies.

NOTE! I chose the “HelloLayouts” sample during my tests. Any other sample should work but avoid importing the “SmartExtensionAPI” and “SmartExtensionUtils” projects, unless you want to create a project from scratch without any boiler plate setup from the samples.

Step 3: Do a bit of modifications to project files

Here’s the tricky part. It’s not that tricky though. You will need to:

  • Modify the SmartExtension sample package name
  • Creating release build signing configs

and do some edits to the following files:

  • The SmartExtension sample gradle file
  • The SmartExtension sample AndroidManifest

Modifying the package name

This took a bit of trial and error but in the end, the recipe I would use:

  1. Create a new package in the SmartExtension sample module that has the same name as the Wear module package name
  2. Drag-and-drop all the classes from the old package “com.example….hellolayouts” to the new package
  3. Delete the old package
  4. Open the AndroidManifest file in the SmartExtension sample and replace the old package name “com.example….hellolayouts” the new name
  5. Open the SmartExtension gradle file and replace the package name here as well, referenced as applicationId

Try to build (a clean may also be required) your SmartExtension sample module to see whether everything seem to be in the right places and don’t contain errors. I got some minor issues with imports to “com.sample….R” that had not been cleaned out. Deleting those manually worked out perfectly fine for me.

Modifying the gradle files to update references and build configs

To lay the last stones in the process, you will need to do some additional updates to gradle files, both the SmartExtension sample and the Wear app.

NOTE! These steps require you to have an Android keystore and the secrets that go with them:

  1. Open the Wear app gradle build file
  2. Add the signingConfigs declaration and reference as shown below:
android {
  signingConfigs {
    release {
      keyAlias 'YOUR_KEY_ALIAS'
      keyPassword 'YOUR_KEY_PASSWORD'
      storeFile file('PATH_TO_YOUR_KEYSTORE_FILE')
      storePassword 'YOUR_KEYSTORE_PASSWORD'
  buildTypes {
    release {
      signingConfig signingConfigs.release
  1. Open the SmartExtension sample gradle build file
  2. Add the same declarations and references as in step 2 above, but also include the following (replace ‘:app’ with the module name of your Wear module):
dependencies {
  wearApp project(':app')

Step 4: Configure the Build Variants

This is the last step before making the final build. Find the “Build Variants” panel in Android Studio (it’s usually located at the bottom left of the UI) and select release for the Wear app and the SmartExtension sample. Leave “SmartExtensionUtils” and “SmartExtensionAPI” on debug.

Select the SmartExtension sample as your build configuration, compile, run and deploy! (If the “Edit configuration” dialogue shows up, choose to not launch an Activity, as the sample does not have a Default one declared)

Step 5. Done!

Congratulations! You should now, given nothing breaks down on you, have a SmartWatch 2 and 3 combined Android Studio project!

Musings about going from Eclipse to Android Studio 0.3.7

So, the first time around when Android Studio was announced I was pretty excited. Seeing that something tightly connected to Android in the shape of a Google pushed IDE, well that should bring a lot of nice things!
But alas, after a few hours of tinkering and trying to import projects exported from Eclipse by following the it’s-supposed-to-be-this-easy guides, I gave up. Too many issues with importing my projects and also, not having really used IntelliJ and even less Gradle, it was just too many issues at hand to keep track of that I chose to postpone.
So, here we are, version 0.3.7 later and I must say it seems a lot more straight forward (in most cases).

¤ One thing that I really have to stress is Android Studios way of not helping out how to import projects based on bare Android source code. The guides talk a whole lot about Maven and Gradle, but it took me actually testing out an import where I ignored all those keywords and reading the IntelliJ documentation on importing code, to be able to deduce that yes, it is possible to import bare Android code.
Really, this should have been much more clearly stated/supported because now, there is no clear way at all whether this kind of import is supported or not.

¤ Another thing. In Eclipse it was possible to mark projects as libraries and then chain the dependencies in a way that your project can reference a library that in turn references another library. With Android Studio it seems that your project has to refer to all the libraries it needs, in effect not being able to chain the dependencies.

¤ Oh, a third thing. It seems like the terminology “project” in Android Studio is an umbrella for keeping track of one or more “modules”. The Eclipse “projects” seem to map to “modules” in Android Studio and I guess Android Studios “projects” are most likely “workspaces” in Eclipse.