James Ball

How Do You Do, Fellow Kids?

Bspwm

Fetch my .dotfiles here!

A Brief Introduction

The linux philosophy promotes modular software. Linux itself is modular. This ensures plug and play ability, extensibility, and customization to your heart’s content. This also means that you can get bare-bones software and install only the bare essentials suited to your needs.

Bspwm or Binary Space Partition Window Manager, is based around the same philosophy. Bspwm is a minimalistic modern window manager that represents windows as the leaves of a full binary tree. Now due to the fact that there is not a lot of comprehensive documentation out there for bspwm (especially as compared to other window managers like i3), I decided to go ahead and make a (somewhat) practical guide myself. Forgive me if this particular entry in the series is too long.

sudo apt install bspwm

To run it, simple add the following line in your ~/.xsession file:

exec bspwm

Logout and log back in again, and boom! You are good to go. When you login, you will be greeted by a black screen. That is because bspwm doesn’t know how to draw the wallpaper yet. You will also notice that none of your typical window manager key bindings work. That is because bspwm requires a third party daemon for the same.

Logout from the current environment and login to either a tty, or any other environment, and let’s get started with the configuration so that we can make bspwm a bit usable.

SXHKD: Adding a keybinding daemon

An example configuration lies in the /usr/share/doc/bspwm/examples/bspwmrc file. Simply copy the bspwmrc file to the ~/.config/bspwm/ directory to get started. The default config file looks like this:

Adding a key binding daemon

Sxhkd, mentioned in the architecture given above, stands for Simple X Hot Key Daemon (And you thought herbstluftwm was hard to pronounce). It runs in the background and uses a very simple syntax to bind keys to commands. To get started with it simply run:

sudo apt install sxhkd

Sxhkd looks for a configuration file for initialization. You can create one at ~/.config/sxhkd/sxhkdrc. Let us look at how to add some basic key-bindings to get started with bspwm:

our sxhkdrc file:

The second rule makes sure that the moment we hit alt + Escape, our sxhkd reloads automatically, therefore making any further changes will not require us to manually kill the daemon and restart it ourselves.

To start the daemon simply add the following line in your bspwmrc:

sxhkd &

Now logout and login again. You will be greeted with a black screen, but the moment you hit alt + Return, you will get the terminal of your choice! Now this is all we need for further configuring our bspwm.

Xscreensaver Wallpaper

Install Xwinwrap

This article assumes you already have Xscreensaver installed.

Note for a full list of backgrounds run ls /usr/lib/xscreensaver/.

  1. git clone https://github.com/ujjwal96/xwinwrap.git
  2. cd xwinwrap
  3. make
  4. sudo make install
  5. make clean
1
2
#!/bin/bash
xwinwrap -b -fs -sp -fs -nf -ov  -- /usr/lib/xscreensaver/cubicgrid -root -window-id WID &

Source

PHP Lambda Functions Approved!

The PHP team recently approved the Short Arrow Functions RFC proposed by Nikita Popov, Levi Morrison, and Bob Weinand.

In the RFC it shows this as an example to give you an idea on how it can be used:

php
1
2
3
4
5
6
$extended = function ($c) use ($callable, $factory) {
    return $callable($factory($c), $c);
};

// with arrow function:
$extended = fn($c) => $callable($factory($c), $c);
"A Laravel example could look like this"
1
2
3
4
5
6
7
// Current
$users->map(function($user) {
    return $user->first_name.' '.$user->last_name;
});

// with arrow function:
$users->map(fn($user) => $user->first_name.' '.$user->last_name);

Short Arrow Functions is targeted for inclusion in PHP v7.4, and you can read more about this on the PHP wik.

PI Cluster

Hardware

  • 4x Raspberry Pi 3 B+
  • 4x RJ45 Cat6 ethernet cable
  • 4x 32GB Micro SDHC
  • 4x Micro USB cable
  • 1x Switch TP-LINK TL-SF1005D 5-Port 10/100Mbps
  • 5x Anker USB Cables
  • 1x Anker Port Wall Chargers
  • 1x Soldering Iron
  • 1x Hot Glue Gun

Requirements

  • unix system (linux or mac)
  • flash v2.2.0 installation
  • hypriot OS v1.9.0 download
  • Pi Image Download

    SSH keys

    We need a SSH key in order to connect to the cluster without having to type the password every time we access.

In case you don’t have any, run this command and follow the steps.

ssh-keygen -t rsa -b 4096 -C "[email protected]"

`Add the key to your ssh agent, assuming our keys generated are id_rsa and id_rsa.pub

ssh-add ~/.ssh/id_rsa

You can find a more in depth explanation in this tutorial

Sync Script

some random description, lorem ipsum…

clusteri-sync.sh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#pi@raspberry

this=ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1'

declare NODES=("localhost
192.168.0.1
192.168.0.2
192.168.0.3
192.168.0.4
")

SSID="Test Wifi Network"
PSK="SecretPassword"

echo "network={
   ssid=\"$SSID\"
   psk=\"$PSKd\"
}" >> /etc/wpa_supplicant/wpa_supplicant.conf

sudo systemctl enable ssh
sudo systemctl start ssh

sudo apt-get install nginx

sudo shutdown -r now

sudo chown -R www-data:www-data srv/



su www-data

for $NODE in $NODES
do
    rsync -v -r --delete -e ssh /var/www/ "www-data@{$NODE}:/var/www/"
done

Phaser 3: Space Shooter

Play here

game.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
class Group extends Phaser.GameObjects.Group
{

  constructor(scene, x, y, key)
  {
      super(scene, x, y, key);

      this.scene = scene;

      if (this.scene)
      {
          this.scene.physics.world.enable(this);
          this.scene.add.existing(this);
      }
  }

  *[Symbol.iterator]()
  {
      if (this.getChildren())
      {
          for (let i = 0; i < this.getChildren().length; i++)
          {
              yield this.getChildren()[i];
          }
      }
  }

  update(time, delta)
  {
      for (let child of this)
      {
          if (child.update)
          {
              child.update(time, delta);
          }
      }
  }

  set(key=undefined, value=undefined, defaults=undefined)
  {
      if (value === undefined)
      {
          return defaults;
      }
      else
      {
          this[key] = value;

          return this[key];
      }
  }

  patch()
  {
      if (this.scene.ship)
      {
          this.scene.physics.add.collider(this.scene.ship, this.getChildren(), this.scene.ship.collideShipEnemy, null, this.scene.ship);

          if (this.scene.ship.bullets)
          {
              this.scene.physics.add.collider(this.scene.ship.bullets, this.getChildren(), this.scene.ship.collideBulletEnemy, null, this.scene.ship);
          }

          for (let child of this)
          {
              this.scene.physics.add.collider(this.scene.ship, child, this.scene.ship.collideShipEnemy, null, this.scene.ship);

              if (this.scene.ship.bullets && child.shootable)
              {
                  this.scene.physics.add.collider(this.scene.ship.bullets, child, this.scene.ship.collideBulletEnemyBullet, null, this.scene.ship);
              }

              if (child.projectile)
              {
                  this.scene.physics.add.collider(this.scene.ship, child.projectile, this.scene.ship.collideShipEnemy, null, this.scene.ship);
              }
          }
      }

      return this;
  }

  done()
  {
      return this.getChildren().length === 0;
  }

  getChildrenHead()
  {
      return this.getChildren()[this.getChildren().length - 1];
  }

}

export default Group;

Some Dated Post About Magento 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo luctus est. Ut ultricies mauris et ultricies interdum. Morbi risus ex, gravida sit amet vulputate nec, euismod sit amet ex. Aenean molestie imperdiet lacus, ut posuere metus pharetra quis. Nullam accumsan tincidunt sem. Fusce non metus sem. Nulla varius, arcu eget vestibulum pretium, magna velit pretium diam, eu viverra velit velit sed velit. Curabitur neque erat, tincidunt vel dolor a, iaculis vulputate est. Phasellus sodales massa a mauris venenatis tincidunt. Quisque diam lorem, volutpat non eleifend vel, porttitor et neque.

Sed erat velit, eleifend et varius nec, efficitur et nibh. Proin at pretium ligula. Aenean nunc nisl, aliquet eu risus non, fringilla rutrum dui. Aenean convallis ultricies porta. Donec tincidunt finibus libero, sed efficitur dolor sodales eu. Nullam nisi leo, auctor vitae mollis in, maximus quis nisi. Nam laoreet est elit, quis maximus nisl porta sit amet. Duis volutpat iaculis urna in feugiat. Aliquam fringilla fringilla tortor non ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Morbi lobortis nunc ac tortor dignissim, lobortis scelerisque eros congue. Sed lectus enim, ultricies at varius et, rutrum lacinia ex. Donec enim arcu, ullamcorper facilisis lectus tincidunt, elementum finibus justo. Quisque nec neque nec ligula blandit efficitur quis sit amet diam. Curabitur et auctor odio. Etiam varius mi eget elit vestibulum, a dictum nisi convallis. Vestibulum a arcu eu velit maximus tempor non nec leo. Cras id purus ex. In a orci massa. Phasellus sollicitudin libero vel nulla dignissim, eget vehicula mauris sodales. Phasellus maximus tempor quam, non venenatis mauris condimentum quis. Duis finibus enim sit amet ex convallis pellentesque. Mauris vestibulum bibendum dolor.

Reinstalling Existing Magento Modules

SRC:https://alanstorm.com/reinstalling_magento_modules/

Just a quick note, but it seems that despite having the whole thing going on in config files, Magento doesn’t actively do a version diff and reload a new module. If you want the system to reload the module (and re-run any database setup, etc.) take a look in the core_resource table.

+————————-+———+ | code | version | +————————-+———+ | adminnotification_setup | 1.0.0 | | admin_setup | 0.7.1 | | etc … | … | +————————-+———+ mysql>

Just delete your module from this table and then clear Magento’s cache. That should be all it takes to re-load the new module into the system.

Update: What I said above about the versions being meaningless isn’t correct. The mysql4-install-X.X.X.php files will only be run once by the system. However, by changing the version value in your XML config, you’re telling the system which install file it should be looking for. So, for example

//this in your config 0.2.1

//would load this sql install file mysql4-install-0.2.1.php …

When you’re deploying new versions of a module, be sure to change the version of your install script. During development though, it’s still best to just delete the record from your core_resource table.

Octopress: My Thoughts After Switching From Wordpress

Octopress is a framework built on top of Jekyll. It’s a static site generator which means that it lacks advance feature which would normally require scripting and a back-end like Wordpress. If you want to know whether you should switch to Octopress or would like to know some tweaks, tips or adjustments then continue through this post.

Why To Migrate From Wordpress

  • Wordpress is a great blogging and CMS platform, but it just had too many features for my personal blog.
  • So far I have found Octopress easier to maintain than Wordpress. There is no need to maintain wp-super-cache which serves up static pages in the same ways as Octopress along with not needing to manage a local and external LAMP stack.
  • WordPress blogs are a common target for hackers and spammers. To avoid this you need to keep your version of Wordpress constantly up to date.
  • Octopress allow you to create pages using Markdown instead of or along with HTML. Markdown has a cleaner, simpler and more readable syntax.
  • Octopress uses Jekyll to build pages. All pages of the pages are static and no server-side processing involved. This means that any requested page can deliver immediately by the server to the user.
  • THEME ETC, READY FROM THE GET GO

Features You Might Miss

  • You can’t edit online from anywhere. With Wordpress a mobile app was available so you did not need to be at your computer/laptop to publish new posts.
  • Yay Markdown. Shame there is no solid way to manipulate images except by hand. I have currently worked around this by using Picasa to host my images which will cache my images and resize my images.
  • Octopress does not feature drafts, previews or publishing. When you deploy your site, you deploy everything. And the publication date is the date it was started, not when it’s finished.
  • Although it’s nice not having to use the web interface it’s also a feature which I also miss being able to post from anywhere, on almost any device.
  • SLOW PREVIEW LARGE POST
  • Octopress has less plugins and themes available than Wordpress, If you want more features you will need to wait for someone to write it or write it yourself.
  • By default Octopress does not have a comment system. Although there is the option to use an external service for page comments such as Disqus. But using a service like this means that the comments are not hosted on your service and you lack the flexibility of the Wordpress commenting system.

Conclusion

Octopress is a great platform targeted at programmers who want to start blogging without having the hassle of customizing static page generators and caching on Wordpress. Personally I think that Octopress is ideal for my personal blog or a blog maintained by several developers which is where version control becomes essential. Although it is not practical for other user like a normal blogger who just wants to write content, a copy-editor or a business looking for more advance features such as LOREMIPSUM.

Tips, Tweaks & Adjustments

Faster Page Generation Using Isolation

If you have a lot post in source/_posts then it could take a long time to compile your posts every time you update you blog.

If you are only working on 1 post at a time then it would make sense to only compile that page, to do this use rake isolate[post_name].
This will isolate the post your are working on then automatically move all other posts to source/_stash.

When you are ready to publish your site, use rake integrate, which will move all posts from source/_stash and move them back to source/_posts.

Custom 404 Page

This is taken from a tutorial I have written in the past.

Open up config.ru from the root directory and update the sinatra not_found route to the following:

config.ru
1
2
3
not_found do
  send_sinatra_file('404')
end

This will redirect to http://yourdomain.com/404/ where the page is found, but we still need to create a page.

To do this use rake new_page[404]. This will create a new file named index.markdown in your /source/404 directory:

404/indexlink
1
2
3
4
5
6
7
8
9
10
---
layout: page
title: "404 Error"
comments: false
sharing: false
footer: false
---
Whoops, the page you’re looking for cannot be found.

Maybe you can find what you are looking for in the [archives](/blog/archives/).

View my 404 page here.

Related Posts

There is a related post plugin already included in Jekyll, to use it open up the _layouts/posts.html template and edit it

1
<a>CODE...</a>

To enable this function open up _config.yml and set lsi: true
The lsi option will use a statistical analysis to calculate which pages are most relevant.
Now you need to install GSL using Ruby Gems.

1
$ gem install gsl

After GSL is installed you can regenerated your blog.

Category List / Cloud Tree

Download the files from Github.
1. Save tag_cloud.rb to plugins/tag_cloud.rb
2. Save category_list.html to source/_includes/custom/asides/category_list.html
3. Append to default_asides in _config.yml:

1
default_asides: [custom/asides/category_list.html]

This plugin was created by tokkonopapa.

Escaping Special Character In Markdown

You can escape special characters in Markdown used in formatting using a \. For a list of characters you can escape take a look at this article from Daring Fireball.

Popular Posts

  1. Open up your Gemfile and add this: gem 'octopress-popular-posts'
  2. Install it using Bundler: bundle install
  3. Run the installation command through Bundler: bundle exec octopress-popular-posts install
    The popular posts asides will now generate whenever you run: rake generate
  4. Open up config.yml and add this line:
1
popular_posts_count: 3

Append to default_asides in _config.yml:

1
default_asides: [custom/asides/popular_posts.html]

Offloading Images to Picasa

At first I hosted all of my images using Octopress, then later switch to Picasa to host my images becuase of the following.

  • Images will be delivered from CDN (free)
  • Images will cache & resize on the fly.
  • You can create custom image sizes.
  • Optimize image by selecting image quality.

Conclusion

Jekyll Octopress

CSS3: Animate Dog Eared Icons

TLDR: View the demo here

The HTML

The html for this is fairly simple. We are going to create a few divs and wrap them inside links.

1
2
3
4
5
<a href="#"><div class="file orange">&lt;&#47;&gt;</div></a>
<a href="#"><div class="file blue">js</div></a>
<a href="#"><div class="file red">rb</div></a>
<a href="#"><div class="file yellow">py</div></a>
<a href="#"><div class="file purple">&lt;?&gt;</div></a>

Creating The Icon

As we are using a link for the HTML we need the CSS to do all the work.

First start off by creating the style for the file classes. This will create a rectangular box with text in the center.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.file{
  background: #b0b0b0;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: bold;
  height: 150px;
  margin: 10px;
  padding: 20px;
  line-height: 160px;
  text-align: center;
  width: 100px;
}

Creating The Dog Ear

Ok, nothing to fancy so far but we still need to create the dog ear for the top right of the icon. To do this we will be using borders to create a triangle which floats above the div using absolute and relative positioning.

One unusual thing about borders is that the browser draws them at an angle. One side of the border is colored for the colour of it’s sides (top, right, bottom, left), and the rest are left transparent. You can set the border width to a higher value e.g. 32px.

1
2
3
4
5
6
7
.border-effect{
  border-color:  red green blue orange;
  border-style: solid;
  border-width: 32px;
  width: 0;
  height: 0;
}

And it will output a shape like this.

Using this technique the left and bottom borders can be set to #888 & the top and right to #fff.

Here we have our shape now all we need to do is place it in the corner of our icon.

1
2
3
4
5
6
7
8
.dog-ear{
  border-color: #888 #fff;
  border-style: solid;
  border-width: 0 32px 32px 0;
  content: "";
  right: 0;
  top: 0;
}

If you want to learn more about border shapes take a look at this post by Jon Rohan.