software engineering

base64 encode explained

By Adam K Dean on

This is from a kata I recently completed at codewars. I've used base64 a lot but never have I delved into it enough to understand exactly what goes on. So I took the time to explain via inline comments. I hope you enjoy reading it as much as I enjoyed writing it. Part 2 - base64 decode explained.

String.prototype.toBase64 = function () {  
  const base64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef' +

  let plaintext = this,
      result = '',
      padding = '';

  // step 1. ensure that the string is a multiple of three chars
  if (plaintext.length % 3 > 0) {
    for(let count = 0; count < 3; count++) {
      padding += '=';
      plaintext += '\0';

  // step 2. iterate over the input string, three chars at a time
  for (let i = 0; i < plaintext.length; i += 3) {
    // step 3. take three 8-bit (ASCII) chars, and store
    //         them as one single 24-bit number
    // 00000000 8-bit (1 byte)
    // 00000000 00000000 00000000 24-bit (3 bytes)
    // we'll bitshift the first number two bytes (16 bits)
    // we'll bitshift the second number one byte (8 bits)
    // and we'll pop the other number into the third byte
    // 00000000 <------- -------- first char << 16
    //          00000000 <------- second char << 8
    //                   00000000 third char (no shift)    
    const a = plaintext.charCodeAt(i) << 16;
    const b = plaintext.charCodeAt(i + 1) << 8;
    const c = plaintext.charCodeAt(i + 2);
    const n = a + b + c;

    // step 4. separate this 24-bit number into four 6-bit numbers
    // we'll do this by shifting to the right (with zero pad >>>)
    // and then doing a logical AND (&) to strip everything after 
    // the first (right most) six bits
    // e.g.   00001111 00000101 00001010
    // to     |----||- ---||--- -||----|
    //         d     e      f      g
    // >>> 18 00000000 00000000 00000011
    // & 63   00000000 00000000 00111111
    // d =    00000000 00000000 00000011
    // >>> 12 00000000 00000000 11110000 
    // & 63   00000000 00000000 00111111
    // e =    00000000 00000000 00110000
    // >>> 6  00000000 00111100 00010100 
    // & 63   00000000 00000000 00111111
    // f =    00000000 00000000 00010100
    // noop   00001111 00000101 00001010
    // & 63   00000000 00000000 00111111
    // g =    00000000 00000000 00001010
    const d = (n >>> 18) & 63;
    const e = (n >>> 12) & 63;
    const f = (n >>> 6) & 63;
    const g = n & 63;

    // step 5. use the four 6-bit numbers as indices to pluck
    //         chars from our char array above, and add to the
    //         result string, before continuing with the loop
    // this works because a 6-bit number is 0-63, and we have
    // 64 characters above. Therefore, we can pluck out chars
    result += base64chars[d];
    result += base64chars[e];
    result += base64chars[f];
    result += base64chars[g];

  // step 6. finally, we'll remove the zero pad we added above
  //         and add the actual padding, then return this string
  return result.substring(0, result.length - padding.length) + padding;

Clutter free Unity/VSCode

By Adam K Dean on

So, it's 2016. It's been over two months since my last post. I've just been so busy recently, with work being emotionally tiring and with a baby on the way, I've just been busy with real life and not really had much chance to do much else. I've decided that I need to enjoy programming. I need to use my ability for good. So I'm going to make games.

I've dabbled in game development before but it's always been unchannelled, uncontrolled, and that isn't a good thing. The first step to being able to enjoy something is to enjoy your environment, and for us devs, that means our development environment. I'm using OS X, so things are sometimes different to 90% of the internet. Unity ships with MonoDevelop, which fair enough, does it's job, but it's pretty shit. Luckily, VSCode works on OS X and though I'm now a convert, I have always like Visual Studio ever since I started using it 16 years ago with VB6.

A chap named @reapazor wrote a VSCode integration script for Unity which works really well, but my OCD goes wild at all the miscellaneous files which show up in the treeview. It just doesn't look good. Note: I had to install VSCode from the asset store for it to work properly.

Cluttered treeview

This can be fixed by exlcuding a few files/directories in your user settings.json file (which you can access with cmd + ,). If you ever need to access these files, just remove them from the exclusion list.

Update I've realised just now (25/01/16 14:39) that the VSCode plugin actually has an option to do this for you, in the preferences, "Write Workspace Settings". I guess it didn't jump out at me at the time but this also works. All you need to do is append two lines to the .vscode/settings.json file to clear up a few other files you may not want to see:


The full list is at the end of this post. It will result in lower blood pressure:

Lower blood pressure with Unity + VSCode

Well, hopefully I'll be posting some interesting posts this year. I'll be using C# for game dev, ES6 at work, and with a baby on the way, there will be lots of non-computer related discoveries too I'm sure.

Here is to a great 2016, and here is your complete settings.json file:


List all files changed in last commit

By Adam K Dean on

List all files changed in the last commit by using git diff-tree on HEAD.

git diff-tree --no-commit-id --name-only -r HEAD

For example, if you changed in your last commit:

adam@macbook:project (master) $ git diff-tree --no-commit-id --name-only -r HEAD

Change keyboard layout on Ubuntu + Xrdp

By Adam K Dean on

If you're using Ubuntu with Xrdp, and you find the keyboard to be infuriatingly inaccurate, you should probably change it. To do this, you need to have the ability to open the System Settings window, which you can't always do over RDP. In there, go to Text Entry, and click the little plus at the bottom. Now select the keyboard layout that applies to you, and test it works.

Now, finally, to make these settings apply to Xrdp, run the following command:

sudo xrdp-genkeymap /etc/xrdp/km-0409.ini

Logout, log back in with Xrdp and it should now work.

Available devtools for webpack

By Adam K Dean on

In case the webpack docs ever lose this, here is a list of available devtools. Choose a developer tool to enhance debugging.

eval - Each module is executed with eval and //@ sourceURL.
source-map - A SourceMap is emitted. See also output.sourceMapFilename.
hidden-source-map - Same as source-map, but doesn't add a reference comment to the bundle.
inline-source-map - A SourceMap is added as DataUrl to the JavaScript file.
eval-source-map - Each module is executed with eval and a SourceMap is added as DataUrl to the eval.
cheap-source-map - A SourceMap without column-mappings. SourceMaps from loaders are not used.
cheap-module-source-map - A SourceMap without column-mappings. SourceMaps from loaders are simplified to a single mapping per line.

Prefixing @, # or #@ will enforce a pragma style. (Defaults to #, recommended)

Combinations are possible. hidden, inline, eval and pragma style are exclusive.
i. e. cheap-module-inline-source-map, cheap-eval-source-map, #@source-map