Website revitalised using Gatsby!

This year, one of my personal goals was to revitalise this website and get the source code onto Github.

Historically it has been a blog, and not that anyone’s really noticed, but I haven’t done any blogging lately. While I do want to maintain my blog, and I intend on continuing to post to it, I don’t think it should be the focus of this website anymore.

Moving forward, I want this website to be somewhere:

  • I store technical information that I might need to refer to later.
  • I can highlight projects I’m working on & try out new ideas.
  • I can blog about different topics easily.

This presented a few issues for me with the websites existing setup:

  • It was built on WordPress, which I didn’t find very motivating to develop on anymore.
  • It was self-hosted on a server that included websites for family & friends. This made me hesitant to install new tools or languages on the server.
  • The existing UI/UX of the website didn’t cater to most of what I had in mind.

Naturally, I concluded the best course of action was to start from scratch—the sort of decision you can easily take on a project that’s entirely your own.

I had recently started to use ReactJS on a few projects at Kobas and was enjoying using it, so I decided I would use that for the frontend. I also knew I wanted to utilise some form of auto-deployment for the project, as that makes development much more comfortable.

After several iterations of trying different JAMstack frameworks, I landed on Gatsby hosted on AWS Amplify.

I started the project using the ”Gatsby WordPress starter”, immediately giving me a ReactJS frontend with the data sourced from my existing WordPress instance.

This allowed me to quickly get to a point where I could work on the design using real data and recognise the functionality I needed to code myself. While I did have data sourced from WordPress, I didn’t have a comment system, contact page, search, or sidebar widgets for things like tags/categories.

I needed to decide what I didn’t immediately require, as I wanted to get the new version out as soon as possible. A design I was happy with was the first thing to get added to my MVP list. The sidebar widgets I considered design-related, the website looked bare without them, they went into my MVP list. The contact page also went onto the MVP list, mainly as it was trivial to add utilising getform.io.

I decided that I could live without a comment system, it had never gotten much engagement anyway. I also thought that if I wanted one later, I could use something like Disqus. Adding search functionality seemed the most complex out of the features I was missing, so I didn’t add it to the MVP list.

Over the next few weeks, I worked on the above MVP list. Doing my best to avoid adding more functionality along the way.

Once I was done with the MVP list, I started looking at deployment options. I wanted something I wouldn’t need to spend much time configuring. AWS Amplify fit that requirement. First, I moved my domain over to Route53. Then I pointed Amplify to my Github repository, which automatically picked up the build command in my package.json. So simple!

I’m pretty happy where I’ve got to at this point, any future development I want to do here is much more streamlined for me. More fun stuff to come I hope. 😀


Posted on October 29, 2020

Programmer Personality: 2020

While converting over my previous post of my Programmer Personality, I decided to do it again and see whats changed, as expected it has.

Your programmer personality type is:

DLSB

You’re a Planner..

You may be slow, but you’ll usually find the best solution. If something’s worth doing, it’s worth doing right.

You like coding at a High level.

The world is made up of objects and components, you should create your programs in the same way.

You work best in a Team.

A good group is better than the sum of it’s parts. The only thing better than a genius programmer is a cohesive group of genius programmers.

You are a liBeral programmer.

Programming is a complex task and you should use white space and comments as freely as possible to help simplify the task. We’re not writing on paper anymore so we can take up as much room as we need.

Find out what kind of programmer you are here !


Posted on August 09, 2020

GPG signed commits in PHPStorm on CentOS 7

Having the functionality of automatically being prompted to sign your commits while still using PHPStorms Git GUI means you’ll never forget to sign commits again.

To start with, the version of Git installed needs to be > 2.0, otherwise certain options we are using will not work.

On CentOS 7 you’ll need to either build from source, or use a 3rd-party repository such as the IUS Community Project in order to do that. I prefer using repositories over building from source, as it’s easier to update the packages later on.

To use the 3rd-party repository method run the following:

yum install epel-release
yum remove git
rpm -U https://centos7.iuscommunity.org/ius-release.rpm
yum install git2u

Next, if you don’t have a GPG key yet, you’re going to need to generate one, GitHub have a nice guide on this already.

Next we need to add some options to our git config, I’ve went with adding to my global configuration here, however you can set this on a project by project basis by just omitting the --global tag.

git config --global commit.gpgsign true
git config --global user.signingkey ENTER_YOUR_KEY

If you’re confused on how to get your signing key for above, again Github have a guide on that.

At this point, running git commit -S -m "Example commit" will prompt you to enter the password for your secret key.

The last part is to add the following configuration to ~/.gnupg/gpg.conf

no-tty

Now when you make a commit in PHPStorm, you’ll be prompted for the password for your secret key, and the commit will be signed.


Posted on January 23, 2019

DevOps at Kobas

I’ve been at Kobas two years now, I previously wrote about my experiences in my first month , so it seemed fitting to do an overview of my experiences since then surrounding the software we use for DevOps.

Jenkins & Continuous Delivery

Jenkins Image At Kobas we use continuous delivery rather than continuous deployment, tool of choice; old man Jenkins .

Jenkins, although riddled with UI/UX issues, is a very helpful tool for us day to day now. We have all sorts of pipelines setup for deploying to our EPoS & Cloud servers. Having the ‘one click’ ability to release to a QA or Production environment and letting Jenkins handle all the steps that go on throughout that build process is a time-saver.

Having the ability to rollback to a previous git tag when a bug has been introduced proves to be a real lifesaver. I can’t imagine going back to releasing projects via script or knowledge.

We keep our Jenkins configuration backed up in Git as the thought of losing all the work put into Jenkins and having to start again is nightmare inducing.

Codeception & Jenkins

My latest win, and one that took the longest to achieve was having Codeception and Jenkins play nicely together for automated testing.

The initial part of that went fine, just getting Codeception to run automatically via the Jenkins build process. But then I decided I wanted metrics like code coverage, the ability to run acceptance tests via Selenium & being able to reset our testing database before each test runs.

Selenium is something I’ve played with a lot on my own machine, so setting up Selenium Grid on a server didn’t cause me much trouble.

Code coverage however has been a pain. Needing c3.php to get remote code coverage working required a number of disgusting hacks / workarounds. This was due to the way our project is setup, the main directory Codeception is in, isn’t even synced to our servers.

The results where worth the pain though I now have the ability of viewing a breakdown of code coverage like this:

Code coverage report

(clearly not an image from our Jenkins, imagine a lot more red).

You also get a dashboard for coverage distribution and showing you the files with the most CRAP (change risk anti-patterns), my new favourite acronym. I can’t seem to find an example of that view online however.

Perhaps later I’ll do a blog post on how to set this up on an open source project and will link to it from here. (Making plans for 2020 already)

Puppet & Server Config

Controlling configuration manually might seem okay when you only have a handful of servers, I certainly manage my personal servers manually still.

At Kobas we have two types of servers, our ‘Cloud’ servers (hosted by AWS) and our ‘EPoS’ servers (hosted by our clients on-site). Currently, we have 4-5 AWS servers, and 170+ EPoS servers. Managing configuration change across the EPoS servers would be impossible without Puppet.

Puppet isn’t the only tool that handles configuration management, there are a number of tools to choose between; Chef and Ansible are two that come to mind. I’ve only used Puppet so can’t comment on the advantages of one over the other. I do recommend getting at least one of these tools setup to manage your server configuration though as the pay-off is huge.

Using a configuration management tool ensures that all your configuration is the same across every environment; development, qa and production. Significantly reducing the ‘But it works on my machine’ issue. It also requires you to put additional thought into making configuration changes.


Posted on September 23, 2018

Helpful Linux commands

So this is just going to be a bit of knowledge dump of things I’ve picked up lately / don’t want to forget.

Bang Cash !$

If you are intending on running a few commands with the last argument of the command being the same this can be really helpful. For example:

ping 127.0.0.1
netmap !$
traceroute !$

Alternatively you can also do !* to use all the arguments of the previous command.

sudo !!

This one is pretty simple sudo !! takes the last command and re-runs with sudo.

Screen

screen is a great feature that allows you to do any of the following; – Use multiple shells in a single SSH session. – Run a long running process without maintaining an active shell or worrying about network disruptions. – Disconnect and re-connect to a shell from multiple locations.

Using it is very simple, to start it you just use the command screen, from this point you are now inside of a window within screen.

Using screen requires remembering a few more commands (or noting them down in a blog post or something).

Start screen:

screen

To start a screen with a name, you can do the following screen -S 'name'

Create another window:

Ctrl-a c

Next window:

Ctrl-a n

Previous window:

Ctrl-a p

Detach window:

Ctrl-a d

This will detach your window and return you to your bash shell.

Re-attach screen:

screen -r If you have multiple screens, this will display a list of them and you will have to use the name of the screen as a third parameter to reattach to it.

Searching through previous commands

So as you may know you can use Control + R on Linux to search through previous commands you’ve entered in the terminal. You can with a few modifications of your ~/.profile or ~/.bash_profile improve what is stored in the ~/.bash_history file, making this feature even more useful for remembering previous commands.

Ignore certain commands:

HISTIGNORE="pwd:df:du:cd:ls"

Increase how many commands are stored:

HISTFILESIZE=10000 (the default on most systems is 500)

Don’t save duplicate commands:

HISTCONTROL=ignoredups


Posted on January 14, 2018

Bash/Cygwin Terminal in PHPStorm

I’ve been meaning to post about this for a while, but it seems hard lately to make time to post here.

I personally hate windows shell, in my mind it is utterly useless. If I’m ever using it I’m probably not in a good mood. Powershell makes me laugh, like I’m sure it has some uses for people who for some insane reason run Windows servers, but for a sane developer; I think not.

Bash is where it’s at, probably the tool/language that saves me the most time on a day to day basis. Regex is a close second and guess what, Regex & Bash play very nicely together. Luckily I work with a company that exclusively uses Linux servers, because they make good decisions like that. So any server admin is painless, however for development, I still seem to be stuck in Windows land. I could make the leap over to just using Linux, however there are unfortunately a handful of programs keeping me on Windows and WINE still sucks.

So Bash on Windows, only one way to do that really. Cygwin . I’m not going to go into how to install that here, because it’s very simple, just download, run and press next.

Jetbrains make amazing products, PHPStorm is the editor I spend most of my time in, so I’ve shown how to do this here. However it should work for any Jetbrains IDE since they are all pretty consistent.

I liked the idea of a terminal window inside the IDE, mainly as just a quick way to grep or find things within projects. So I decided to figure out how to replace the windows terminal embedded in it with the cygwin terminal.

So it turns out it’s pretty simple, just go File -> Settings and hit Tools -> Terminal. You’ll want to change it’s default from cmd.exe to "C:\path_you_installed_cywin_to\bin\bash.exe" --login -i

Here is an image of what I have: phpstorm.png

After this, when you relaunch your terminal inside PHPStorm it will be the Cygwin terminal rather than the Windows terminal. However there is just one issue left to deal with, it will default to your Cygwin home directory rather than the project directory. Fixing this is also pretty easy just navigate to C:\path_you_installed_cywin_to\etc\bash.bashrc at the bottom of that file just add

cd "$OLDPWD"

Here is another image for those still confused:

script.png

Well that’s it, enjoy Bash’ing away inside PHPStorm.


Posted on March 14, 2017

Making a simple RTS game – Week Three

So week two of making an RTS was September 2nd – 9th. Almost three months later I’ve managed to spend most of my weekend on it. This is pretty typical timeline of any of my personal side-project’s. sigh

So I started on Friday after having a burger and beer at the ingeniously named Burger and Beer doing some work on graphics. Even though I haven’t put any work into the game I had been thinking about how to make things easier since I’ve decided to make an RTS game as my first game while learning PhaserJS. Not exactly the easiest idea to go for, snake or space invaders would have been much easier.

So I decided to ditch my idea of having actual units that would require a lot of animation and switch to a space theme as spaceships seem easier overall to animate. I bought ” Space Shooter Creation Kit” from Gameart2d.com which was only $13.50 USD so pretty reasonable cost for a hobby project.

To begin with I really only need two sprites, one for a “fighter” and one for a “worker” so the following two seem to do the trick for now:

Attacker Unit Worker Unit

After that I decided to redo my tile map to match the space ships, I decided to just look for an image with a free to use license of space because how hard can that be, but space seems to be pretty low quality when zoomed in so I did end up having to do some editing of what I ended up finding. The result of that was this:

Map

After implementing the new images in Phaser that was pretty much my Friday.

Saturday and Sunday (today) was spent trying to get units to move based on cursor movement, overall an hilarious experience. I spent a lot of time laughing at the worker unit going out of control when I had bugs in movement and/or physics code.

Saturday I was attempting to actually get the functionality required, which is using the selection box to select units and then clicking a location to move those units to that location. However trying to do all of that at once was proving to be very confusing so I decided to first figure out how to get the sprite to move to the location clicked by the cursor. That worked easily enough as there are some in-built PhaserJS functions for that functionality, however since I don’t really intend on that being the functionality I ended up having to write some of my own functions so that when I have the selection group working the movement will work with it also. Doing that took most of Saturday and Sunday, my next challenge is getting the sprite to rotate to the moved location.

Lastly I realised I can host the whole thing on Github Pages since I have the code up in my github repository so throughout development this url will always be the master version of where I am at.

I’m hoping there won’t be as big of a gap between week 3 -> week 4, however next week is already looking pretty hectic so it is going to be delayed.


Posted on November 27, 2016

Making a simple RTS game – Week Two

So week two has gone relatively well, I didn’t spend as much time working on the game as I would have liked, it’s hard going from programming at work to programming at home every day. However I persevered and at least made some progress.

I ended up making a map since it was hard to try develop controls and camera without having anything to see, I found out about Tiled which is a free tile map editor, very easy to use. Not wanting to waste my time on trying to create graphics (and hating whatever I ended up making), I browsed /r/gamedev for some free assets to do for the moment, turns out this Kenny NL guy has some amazing stuff for free up there. I ended up going with his ’Topdown shooter pack’ as it seemed visually appealing to me.

Next step was figuring out how to get the cursor (arrow) keys to work as input, once I figured out how to do that I set those keys up to handle the camera movement. That was easy enough.

After that I wanted to deal with the mouse moving the map when near the edges of the screen, that proved a little more difficult, but not too bad.

My main achievement for the week (and the hardest part) was having the mouse create selection boxes, as you would in Windows etc. This will be used later on for selecting units & buildings. This proved more problematic as I first started out using the built in Phaser Rectangle Object and setting the (X,Y) to the point where the mouse was clicked and having the (width,height) update to where the mouse is before the left click is released. The first issue was my map is larger than the actual screen so it would not work once you scroll. Not helpful, luckily I then realised I could just add the camera.x and camera.y positions to my initial (x,y) points, and it is all good!

Lastly I realised that I shouldn’t have used the Rectangle object at all as the only way to fill that is by using a debug function in render (not what I intended), so I ended up having to switch that over to using game.graphics instead.

Also as a note I started making the UI for a mineral count in the top right (thanks Game Icons), doing it in jQuery as I couldn’t figure out how to do graphics on the screen at the time, but after going through my selection box stuff I now realise I need to re-do that part.

I’ve come to realise some things are going to be more complicated than I anticipated, for instance implementing a mini-map I am kind of dreading. However overall working with Phaser has been great, there are lots of resources out there and the community in both Slack and IRC are very helpful.

Here’s a crappy video of where we are so far:

I’m unsure if I will have enough changes to do a Week 3 next week as I’m currently in the process of finding a new place to live in London and it’s a whole insane experience itself, very time consuming, very tiring and very depressing financially. So week 3 might be on the 23rd, we’ll see!


Posted on September 09, 2016

Making a simple RTS game – Week One

So I’ve decided I want to make a game again, nothing crazy just a simple RTS game, browser based (mainly for speed of development and that I’m interested to see what it’s like), I’ve decided I may as well blog along the journey to keep myself motivated and prevent quitting mid-way through.

I might also do some videos & live streams as we get closer a prototype and there is actually something interesting to watch me doing rather than researching things. So watch this space.

So far stack wise I’ve decided on using the following tools:

  • Phaser.io – Open source HTML5 Game Framework
  • Socket.io – Real-time bidirectional event-based communication.

I need to find a tool for making tile based maps, but I’m not too concerned about that right now, I’d prefer to start with controls, units and economy before jumping into anything too graphical and getting demotivated.

I think plan wise of order of doing things will go like so:

  • Controls
  • Camera – Camera movement etc.
  • Units – basic movement and control
  • Economy – basic income system
  • Unit Types
  • Unit Attacking
  • Map – singular
  • Game State – Playing, Game Over, Winner etc.
  • Lobby System – Find Game etc.
  • Chat

I’ve probably forgotten some thing’s but that’s just a kind of overview for now, I’ll probably make a Trello board and share that at some stage.

Graphics wise I’m worried, I’m intending on the graphics for the game to be super basic, probably just spheres initially, if I am actually enjoying how the game is progressing I’ll either put myself through the pain of trying to do graphic design or (more likely) pay someone to do it for me.

Anyway that’s all I really have to say on this for now, I’m going to try do weekly updates if not bi-weekly. Hopefully motivation will stay with me!


Posted on September 01, 2016

My thoughts on management & time tracking

manager-time.jpg So I’ve talked about time tracking before , however that was much more a “Keep yourself on track / how to know what to bill per hour as a freelancer/contractor”. Today I’d like to share some thoughts on bigger companies and my feelings toward management and time tracking there.

I’ll preface all this with ”these are my opinions, I’m not saying I’m entirely correct here, this is just how I personally feel“.

As a programmer I love my craft, I spend hours playing around with new technologies, learning new languages and wrapping my head around computer science concepts. I’ve always known programming would be my career from a young age, finding it amazing that people would pay me to do what I love to do anyway.

What I never realised back then is how much of a programming role involves no programming at all. Meetings can be a daily occurrence, eating into your time, understandable though as things do need to be decided on/signed off. Managers need you to explain all sorts of stuff to them so that they can sound informed to whoever it is that they report to. Clients want you to explain why you can’t add five new features by next week. Customers want you to explain how to use things (and occasionally need you to fix things).. Priorities must be juggled.

All of the above I don’t really have an issue with, they are mildly annoying but to be fair, necessary evils.

What I do have an issue with however is time tracking on top of this in large organisations, usually so your manager can have some form of chart showing what their team have spent their time on the last few weeks. Of course this would all be possible without disturbing the programmers workflow at all (since we all have issue management systems) but the word “granularity” starts getting thrown around and the next thing you know you’re now in JIRA logging hours on tickets trying to justify where you spend every minute of your day.

I honestly don’t get it.

I feel as a developer getting told to do this makes you feel that you are not trusted to manage what little time you have to do programming yourself. That you’re possibly under performing and need to work harder. Or that your time isn’t as valuable as the managers time. All in the name of a granular report that probably gets a courtesy glance at and then binned. It definitely doesn’t create a happy team environment.

If you haven’t read Programmer Interrupted , I recommend that you do, but I’ll just include the results of their study here:

  • A programmer takes 10-15 minutes to start editing code after resuming work from an interruption.
  • When interrupted during an edit of a method, a programmer resumed work in less than a minute only 10 percent of the time.
  • A programmer is likely to get just one uninterrupted two-hour session in a day.

These are the problems that management should be trying to solve, not trying to interrupt a programmers time further by requiring that they log each and every hour that they’ve spent on each feature.

Another great article that discusses how programmers see time different to managers is the Makers Schedule.

Where I currently work (Kobas) actually deals with all of these things I’m complaining about very well. For a start there is no time tracking (making me very happy), we have a daily slack stand-up (i guess its more sit down?) where we give a few sentences of what we worked on yesterday and what we plan to do today. It’s very helpful for knowing what other people are up to without wasting time doing an actual stand-up.

Interruption wise at any point i feel I need to have an uninterrupted session I can pop in my headphones and unless something explodes I never get interrupted. Meetings for me are rare but when they occur they have an actual purpose. Developers != Support leading to less interruptions, of course I have to fix problems that come up from support but I’m not personally being interrupted by support requests.

So its certainly possible for companies to function well in these ways, why more big companies are not is beyond me.


Posted on August 29, 2016