WordPress to Fe-di…verse…?

This is another post in the series about WordPress discoverability for the people wanting to not put all their eggs in one basket by handing over all their content creations to walled gardens such as Google+, Facebook, Twitter, etc.

The problem about discoverability is one of the toughest challenges to overcome; with walled gardens, everyone has an account that can follow and be followed.
On a blog, you can get followers but you’re going to have to look into other data points than followers, because there aren’t clear cut numbers to look at. Instead of follower count you’d most likely have a look at visitors and page count as part of your website analytics package.

But, if one of the core problems to solve is discoverability, then what can you do to increase it?

Well, it depends. There are a multitude of paid services that can help you boost your messages to different networks, but what if you don’t want to spend d money on shady businesses and want to have more control of your communication? A connection to the “Fediverse” is one potential path to take.

The Fediverse is a collection/ensemble of different servers used for e.g. social networking, micro/macroblogging, file hosting and the likes. These servers communicate with other servers using a standardised protocol, making them compatible with eachother. A couple notable places being part of the Fediverse are Diaspora, Hubxilla and Mastodon.

Now, things aren’t super clear cut on what level these services coincidence. On the Wikipedia page linked above you’ll see in more detail what network has what integration available.

What you as a WordPress owner can do is to attempt to reach out within these servers on the Fediverse, e.g. by installing a plugin (or developing a solution of your own, but expect it to take significant effort) and having that do the heavy lifting.

I have tested two different plugins

I’ve been on the fence which one to use longer term, because both of them are considered to be beta in their current state. I’ve opted for Pterotype for now, as the developer is super responsive on Mastodon, and seem very ambitious about wanting this plugin to get a much needed rework.

It’s fairly straightforward to set Pterotype up, but be aware that to test this fully, you also need a Mastodon profile;

  1. Install the plugin using your method of choice
  2. Find the Pterotype settings in the administration panel and click it
  3. Make modifications to your liking
  4. If you haven’t already, create a Mastodon profile. mastodon.social is a popular place.
  5. On Mastodon, search for (include @-signs, but replace the [text] with your website): @blog@[yourwebsiteaddress]
  6. You should see a profile pop up that you can now follow on Mastodon
  7. All done, you’re now discoverable on (a part of) the Fediverse

This isn’t without limits, though.

The general idea is that your blog should have a two way communication with the Fediverse. E.g; you make a post from WordPress and it shows up on the Fediverse. Or you get a comment on the Fediverse on a post that you made in WordPress, you should be able to manage the comment like a regular comment on your post.

The first part is in place, however with the caveat that someone needs to follow it for the posts to automatically show up. What I did was to use my Mastodon profile, searched for my blog as described above, and the followed it. That way, it’s hooked up and “publishing” through your account.

The other part, about having bi-directional communication, is unfortunately not working right now. You, for the time being, have a one directional path into the Fediverse, but you’re not getting the comments sent back to WordPress. I’ll keep an eye on the progress of the plugin to see if there’s any news later on.

Leaving Google+ – a multi part story about “the how to what”…?

Being a long time, albeit sporadic, user of Google+, it’s with some resentment sadness surprise rage sense of meh I’m now trying to find a new place in the Wide World of Memes.

I’m going to ramble a bit about the problem space, where I’m at, and what I’ve been faced with in terms of starting up a blog, that not only I read. The part you’re about to read, is a generic “Where I’m at right now”, and even though I’m going through a process of leaving Google+ by force, finding a new space, this may very well apply to other scenarios.

I started out typing this as the only and single post for all of my thoughts and ideas, and experiences, but realised that it would probably wouldn’t ever be published, because I fear that it could be an ever ongoing subject/topic.

Technology choice

Given that I’m not keen on either Facebook, or Twitter, and I’m not really interested in letting someone else own my content any more, I believe the only fair option I have, is to run my very own website.

Now, running your own website isn’t super hard but it’s not super easy. Especially if a lot of the things you want to accomplish are to type some stuff on a computer and publish it to the world. And, as an added bonus, have and know that you have readers/lurkers that read it.

The reason this is easier, is that WordPress exists. WordPress is easy enough to at least type text in, add an image or two, and hey presto, instant words on the Memernet!

The reason it’s harder, is that if you want to make sure you own your content, to the extent that you can always bring it with you no matter what (as long as you’re not breaking the law that is), is that you basically need to install, set up and maintain your own web server and WordPress installation, by yourself.

Now, very often it’s enough to be semi-owning your stuff; a lot of web hotels offer built in WordPress installations and backup options for you, and unless you really want to know what it’s like to manage all the details that go into this, you’re probably just as well off with a hotel provided WordPress installation.

Discoverability

Ok, so you, as did I, decided to go the WordPress route at least. You’re still keen on running your own show, defining your own space and place in the vast web of content creators!

You probably don’t have much of an issue with the actual content creation; you got thoughts, ideas, creativity and energy to “just do it”. A few strokes of the keys, an image and whamo; blog post!

But, there’s something missing. Something that makes this all seem worthwhile. (No, not coffee. You got that right beside you, or behind your screen. You probably just forgot in all the excitement.)

But you’re missing that electricity to your eco friendly engine; visitors! And boy are those visitors hard to come by! I mean, you know they’re there, and in the millions at that, but they’re awfully shy. Or busy. Probably very busy. With Facebook. And Twitter. And Tumblr. And Google+. And MySpace.
So what do you do? How to make these people interested in your writing antics and photographic memess? Well, that’s discoverability in a nutshell; making sure you do whatever you can to make yourself discoverable.

Approaches

There are some caveats here, because some of you may think that it’s easy, and do any or all of these things:

  • Email everyone you know and don’t know about your site
  • Contact anyone and everyone on Facebook about your site
  • Buy dubious services that “make sure you’ll get more likes and subscriptions to your blog, as well as spreading the word” for just a few cents

The reason the above things are not really something you should do is because they label you and your site as being spam. Not only will they be annoyed and aggravated, they’ll make sure to do whatever is possible to block you in future communication.

So, what else is there? Well, here’s where tech can be off assistance, but don’t look at this as a silver bullet; it won’t automatically help you get 5 million readers to get you a fast retirement check. It may help you. And it will cost you something in return; time. You will spend time “groking the technical mumbo jumbo” of different technologies, plugins, services, etc. You will spend time choosing what you want to use in terms of being discoverable. You will spend time analysing and learning how a tool works, to have it work the way you get the most benefit from it.

I’ll be covering different technologies, and it’ll process at at least the following topics:

  • RSS
  • Twitter
  • Facebook
  • “The Fediverse” (Mastodon, Friendica, a metric ton of other platforms)
  • SEO (Search Engine Optimisation)

So, I’ll stop it here for now, and hop on to the individual topics in future posts, alright?

WP permissions

Installing WordPress and keeping some sanity for the inevitable

  • Upgrade
  • Plugin modification
  • Theme modification

needs this link and excerpts:

https://stackoverflow.com/questions/18352682/correct-file-permissions-for-wordpress

Excerpt one:

When you setup WP you (the webserver) may need write access to the files. So the access rights may need to be loose.

chown www-data:www-data  -R * # Let Apache be owner
find . -type d -exec chmod 755 {} \;  # Change directory permissions rwxr-xr-x
find . -type f -exec chmod 644 {} \;  # Change file permissions rw-r--r--

After the setup you should tighten the access rights, according to Hardening WordPress all files except for wp-content should be writable by your user account only. wp-content must be writable by www-data too.

chown <username>:<username>  -R * # Let your useraccount be owner
chown www-data:www-data wp-content # Let apache be owner of wp-content

Maybe you want to change the contents in wp-content later on. In this case you could

  • temporarily change to the user to www-data with su,
  • give wp-content group write access 775 and join the group www-data or
  • give your user the access rights to the folder using ACLs.

Whatever you do, make sure the files have rw permissions for www-data.


Excerpt two:

Giving the full access to all wp files to www-data user (which is in this case the web server user) can be dangerous. So rather do NOT do this:

chown www-data:www-data -R *

It can be useful however in the moment when you’re installing or upgrading WordPress and its plug-ins. But when you finished it’s no longer a good idea to keep wp files owned by the web server.

It basically allows the web server to put or overwrite any file in your website. This means that there is a possibility to take over your site if someone manage to use the web server (or a security hole in some .php script) to put some files in your website.

To protect your site against such an attack you should to the following:

All files should be owned by your user account, and should be writable by you. Any file that needs write access from WordPress should be writable by the web server, if your hosting set up requires it, that may mean those files need to be group-owned by the user account used by the web server process.

/

The root WordPress directory: all files should be writable only by your user account, except .htaccess if you want WordPress to automatically generate rewrite rules for you.

/wp-admin/

The WordPress administration area: all files should be writable only by your user account.

/wp-includes/

The bulk of WordPress application logic: all files should be writable only by your user account.

/wp-content/

User-supplied content: intended to be writable by your user account and the web server process.

Within /wp-content/ you will find:

/wp-content/themes/

Theme files. If you want to use the built-in theme editor, all files need to be writable by the web server process. If you do not want to use the built-in theme editor, all files can be writable only by your user account.

/wp-content/plugins/

Plugin files: all files should be writable only by your user account.

Other directories that may be present with /wp-content/ should be documented by whichever plugin or theme requires them. Permissions may vary.

Source and additional information: http://codex.wordpress.org/Hardening_WordPress

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
      B Wifi
      B
 ____________
|            |
| 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) {

var_dump($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.

AESOP STORY MODE ENGINE; WAS THAT SO BLOODY HARD FOR YOU TO WRITE?!

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

Theme

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:

/wp-content/plugins/add-fonts/fonts/my-font.css

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!

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.

add-fonts.php

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() {
 ?>
 <style>
 @import url('https://www.if-then-el.se/wp-content/plugins/add-fonts/fonts/my-font.css');
 </style>
 <?php
});

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

References

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.

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

[httpd]
    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:

http://localhost:3333

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:

[sshd]
    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!