Great tools for Website and online Developers

At the moment, with the massive rise in open source projects there are so many great tools for developers. This post will outline the tools I use to help make my development life much easier.

GOGS

Gogs Logo (site tools)

For git repositories, GoGits (GoGs) is a great self hosted tool. GoGits is heavily influenced by Github in both its design and functionality. The way I use it is for hosting projects any projects which I may need to access elsewhere. At the moment I am primarily using it to test out new things and host a big range of projects that I can pick up when the mood strikes.

Built with Go, GoGits is an extra dependency to install on the server. Having multiple sites on one server I run it behind Apache which handles the SSL and means all my sites are configured in a similar way. I’m sure that GoGs offers all the functionality of having it be setup without the need for Apache. Maybe that’s something for me to add to my trello list.

Why not Github?

For a regular user like me I think that GoGs is probably a bit of an overkill as I don’t use half of the functionality it ships with. Having the ability to easily setup new repositories and just code though is great and incredibly useful. People probably are asking the question “Why don’t you just do it on GitHub?”. Three reasons:

  1. I use GoGs for testing and throwaway projects most of the time, so might not necessarily want them to be seen.
  2. I get the flexibility of everything been in one place where I can just share or make repos private without needing to worry about costs or another companies licences (Microsoft is coming!).
  3. The experience. It’s great to have something like this on a CV as it shows interest and are passion for the web and server configuration.

All in all I think GoGs is an awesome tool and if you feel like taking advantage of any of the benefits I mentioned above I’d recommend giving it a shot.

Trello

Trello Logo (Site Tools)

I mostly use Trello at the moment for a single massive board where I have a big list of things I want to learn and build. Trello makes it easy to just quickly note down any thoughts you may have wherever you are and everything always keeps in sync. It’s free and I’d definitely recommend it.

Personal Website

Wordpress Logo (Site Tools)

I first had the idea whilst looking for a new job to have a blog. Somewhere I could record my thoughts and share some of the things I have discovered with others. The site holds most of my CV and a few other blog posts which you may find interesting.

The site also allows me to document my ideas and give me something to look back to. The foundation for the site is currently WordPress just using the twenty seventeen theme. I did build it with the thought of building my own theme and learn a bit about plugins. Other things have however got in the way, as they often do so that part is on halt for the moment.

MediaWiki

MediaWiki (Site Tools)

I setup my own wiki which I would recommend to anyone. It runs on MediaWiki, a free to use PHP based Wiki site. I primarily use it to document anything I feel I may need to check/do repeatedly in the future. A great example of this is simple commands to refresh SSL certificates and various configuration examples from different frameworks. This helps greatly in keeping things documented and in a safe place where I know I can find them.

Conclusion

This concludes some of the main tools I am using on a daily basis, the majority of which are to help with project management and planning. I’m keen in future to share some of the tools which I use for development in a future post.

Talk soon!

Build a new site to help with my Dad’s Football sweepstake

Introduction

Every so often an opportunity arises or an idea springs to mind for something new that you want to build. Even less so when you can create a website that others might find useful. Enter https://shelleyfootball.club.

Shelley Football League Logo for the build

The Reason

In April I visited my parents house on a Sunday afternoon, I noticed my Dad was preoccupied with something. I wandered over and asked what he was doing. He showed me a large spreadsheet with people’s name, football teams and scores on it. Upon quizzing him further about it, he said that every season he runs a football sweepstake with some friends.

The Problem

Each week his friends drop £1 in a pot and pick a team from 4 leagues in the UK. Wins, Draws and Loses were researched and jotted down each week with points given out based on their pick. The process for this was all manual, with people emailing him with what team they would like that week. This was rather time consuming for him as each week my dad had to get scores for each of the teams.  Update picked teams for the coming week and make sure everyone else was aware of who picked what team.

Coming up with a solution

After itching to build something new and wanting to learn more Laravel, I pitched an idea. I asked if for the next season I could build a website which would automate the entire process. The football scores could be updated each week automatically and take into account the picks we got from players. I could automatically build the league table. The idea of him still being able to run this and keep his Sunday afternoons free for other things excited him. He therefore agreed to let me do it.

I noted down all of the requirements for things he needed and various rules. These were things like:

  • People can’t pick the same team twice in one season
  • People can’t pick opposing teams.

The Build

The Framework

As mentioned before I wanted to try and use Laravel for this so I could improve my skills with it. I love the framework as a whole and the functionality it packs in is amazing. It’s also free, which is perfect for this.

Emails

I built a mail server last year. It was always something I wanted to try out and felt it would allow me to learn more about security. Plus it’s pretty cool to have mailboxes with your domain that you don’t have to pay for!

Emails are an important part of the site as it’s the only way people can pick their team. I wanted to make sure it was right so ran through some online tests for the mail server to ensure that it was as secure as possible and not be blacklisted.

The Frontend

For the frontend functionality I opted for Vue.js. Mostly because I find it much easier to use than React and Angular. Also because Laravel ships with it.

For the CSS I opted to use Bulma. It’s a nice framework to use and has some nice helper classes, plus the documentation is spot on.

NOTE: You can find out about the server for this site and the Shelley Football Club one here: https://jaymeh.co.uk/updates-server-migration/

What I learnt and Conclusion

The process was a great exercise for me. Working in a development team with project managers and other developers you can often end up getting a specification created by someone else on the teem. Usually it’s based on a meeting they had with a client. It was great for me to go through the process of building something personally for an actual client.

The site has had a few small bugs when we launched at the start of the season. These weren’t major though and overall everyone was able to get on and start picking. It was a great opportunity for me to improve my skills in Vue.js and to do some frontend too. All be it using the Bulma CSS framework but I think for a project like this, it was a perfect decision.

It’s also always nice to see people using something you poured a large amount of your time into.

See you next time.

Mailcatcher setup for PHP on Mac OSX

In this post I’m going to talk about installing Mailcatcher for PHP on Mac OSX.  It is particularly useful when developing new websites as you can test emails without worrying if they are going out to a recipient.

This has two advantages:

  1. You can rapidly test emails without worrying that it will go out to it’s recipient
  2. You can save money on services such as postmark or mailchimp since development emails no longer will hit that service.

Installing Mailcatcher

Mac’s come preinstalled with Ruby so it’s as simple as installing a ruby gem. This is just a package manager which allows you to easily install programs and libraries. To install mailcatcher simply run the following.

Let it do it’s thing which will involve installed any dependencies for mailcatcher and finish setting up.

One completed successfully you can run the following:

If the program started successfully you will get the following:

If you open http://127.0.0.1:1080 you will be presented with the mailcatcher interface.

Screenshot of Mailcatcher interface

That’s the first part and mailcatcher is now setup for the mac. Next we need to link it with php, which is covered in the next section.

Setting Mailcatcher up with PHP

Once this has been setup we now need to link it to PHP.

First we need to find out where catchmail (a program installed with mailcatcher) has installed to. I’m going to assume it’ll be located in the following directory:

However if you are unsure you can run the following command:

This will return the directory path for catchmail. We will need this later.

Next we need to find the php.ini file so that we can configure catchmail to respond to the mail() command in php. You can find this by running

And finding the configuration file path function. e.g.

Once found open up the file using your favourite command line text editor:

Update the following:

to

And update:

to

Once the above has been done save the file and quit out.

Restart php locally and try to send a test email using the mail() command.

If you open up the following url: http://127.0.0.1:1080

You should now see your email going into Mailcatcher.

Congratulations you now have a working setup for testing development emails. Good job!

New job and a recent Server Migration

Server Migration

It’s been a while since my last update. After starting a new job I have been getting used to the adjustment. Last night I managed to find a bit of time to get some things in order which have played on my mind for the past few months. I have since done a server migration and moved my site hosting to Linode. This has allowed the doubling of available RAM on the server to improve performance for roughly the same price.

Linode Logo - Company used after my Server Migration

This has allowed me to setup the hosting of a private mail server. Something which I have been looking to try for a few years now. I’m looking forward to tweaking this and seeing what it’s capable of. The changes had brought this site down for the past 24 hours so that I can reprocess the SSL. I might look into this further to prevent downtime in the future and maybe write a quick post in future to share how.

Whilst doing the server migration and upon building the new mail server I encountered a fairly large issue. This issue caused the server to constantly stay at 100% CPU usage whilst my spam blocker service ran. After an hour of head scratching and confusion I managed to figure out that it was a configuration issue. This was due to the user an out of date configuration setup tutorial.

Not long until I’ll be a Dad!

I have also been busy preparing for the arrival of my first child. It’s pretty amazing how much such a small person in life would require at such a young age. The due date is tomorrow and I am getting anxious and very much looking forward to meeting him/her.

Between the end of march and beginning of May I attended NCT classes. These were recommended by most people I spoke to and have really helped in preparation. I’d definitely recommend them also to any new parents as they will teach you vital things going forward. As strange as it sound I think it helped the experience to sink in a little more and feel more ‘real’.

I’ve also picked up a couple of parenting books. One I would definitely recommend to new Dad’s is “The Expectant Dad’s Survival Guide” by Rob Kemp. It’s been full of seemingly great knowledge and shares experiences about the topics from other Dad’s.

Until Next Time

PixiJS – Getting Started with a Snake Game

PixiJS

This is my first look into PixiJS, I am quite excited about jumping right into this. One of my favourite game frameworks relies on using PixiJS for rendering and if you haven’t already, check it out at http://phaser.io/

Goals of this Tutorial

For this first section of my PixiJS getting started guide I plan on just setting up the project with the required libraries and getting an image to render on the screen.

Setup Development Environment

Firstly, we need to setup our development environment for running our Pixi Project which can be done in a number of different ways. Personally I have decided to set this up using NodeJS and an NPM package called serve. This is really easy to use and involves a small amount of setup.

You can also use tools like MAMP, AMMPS or XAMPP to name just a few which are various Apache stacks and involve a little setup for hosts.A lot of this is beyond the scope of this tutorial but feel free to leave a comment below if you would like me to cover some of these in a separate post. I would however try to suggest using a tool which is a little more simple. The above tools are full stacks for storing databases and running server side code therefore can be a little overkill for what we want.

Project Setup – index.html

pixijs game project structure

Above I have provided a screenshot which outlines the file structure for the project so use this as a guide to assist in the setup. You can obtain the pixi.js file from the Pixi website. I have opted to use the un-minified version throughout this tutorial as it’s a little easier to debug with.

The project root is where we will put index.html file. This is just used as an entrypoint to the application and will load in all the javascript we will need.

The contents of this file are as follows:

We are also using a script created by  on github which we will use to ensure that the game is always centered on the screen. It’s also great at preserving the aspect ratio.

Project Setup – game.js

Next, we need to create a game.js file inside the js folder. This file serves as the start point for our app and is the main entrypoint to the various functions and features of our game. Currently I am just using the one file and adding in code to it as I go along. Once this app becomes larger we may need to split the functionality around. For the purposes of this tutorial and what we are trying to achieve it’s fine for now.

Initially we setup a renderer object which calls an autoDetectRenderer function within Pixi.  This takes in a width and height  (256 x 256).

From here we append the renderer view directly into the DOM using the appendChild function.

We define a stage object using Pixi’s Container function.

Next we call the scaleToWindow library in to center the object on the page.

Finally render the stage object to show the object on the page and add an event listener to the rezie function which will call the scaleToWindow library on the renderer.

The contents of game.js is displayed below:

Project Setup – snake-item.png

Finally just add the following png to your images folder with a name of “snake-item.png“. This is just a small silver box which is used for demonstration at this point.

pixijs game - Grey box used for snake

Conclusion and Wrap up

So, hopefully if you were following this closely, you should end up with the following result. At this point it doesn’t seem like much and it seems like a fair amount of code to display an image.

Screenshot of pixijs game so far

Should there be any differences between the results of the project and what you have, all of the source code and images are available on github at the link below.

https://github.com/jaymeh/pixi-snake/tree/chapter-1

I am keen to continue diving into it more as we are barely scratching the surface. I can’t wait to start adding in controls and actually getting some interactivity into this, which we will get onto in the next tutorial.

Until then, happy coding!

Snowboarding in Val Thorens 2017 and Sam’s Injury

Snowboarding

I have just got back from snowboarding at the lovely resort of Val Thorens. This is a great destination for both Skiiing and Snowboarding, with runs for people of all abilities.

Around this time last year I took a trip to Andorra. The resort was beautiful and  also excellent for snowboarding and skiing. So far Val Thorens is much bigger and there’s so much more going on here.

Sam’s Injury

Unfortunately the trip didn’t quite go to plan. On the first day Sam fractured a vertebrae on one of the runs. This has caused some dip in morale for the rest of us and it has been very hard to enjoy ourselves without him. It is also very sad that he has been in hospital since Monday evening. I was hoping he would beat us back to the UK but unfortunately this hasn’t been the case.

Raising money for charity

On a brighter note one of my other friends completed the Tyrolienne zip line in Val Thorens for the “Forget Me Not” Trust and managed to raise around £300. Walker is terrified of heights making a 250m high zipline very difficult. Unfortunately Sam couldn’t have been there for moral support. He was the one who initially put Walker up for it. It’s great though that Walker still went ahead with this despite Sam’s incident the day before and the fact a considerable sum of money was raised for charity is amazing. You can see the video where Walker does the zipline below:

The week unfortunately didn’t go as planned but I really wish Sam all the best in his recovery and hope that he can return to the UK very soon.

All the best,
Jamie

UPDATE: Sam arrived back in the UK on Tuesday 31st January. It looks like he will be making a full recovery over the next 3 months.

Development Blog – I have only gone and done it

Introduction

For the past year all of my hosting and web development has been done on a Raspberry Pi. The main uses for it were a personal wiki and private git hosting platform. It has been useful and will still be sticking around for this purpose in the future.

About Me

I’m Jamie (Jaymeh), a Multimedia Graduate and technology enthusiast. I love all things tech and computing. For the past 3 years I have been working in Website Development doing a bit of Frontend, Backend and Server Management. I am currently working at Creode, a medium sized Drupal and Magento specialist company. I have been there for over 1 and a half years now working as a Backend Website Developer on mostly Drupal 7 websites.

Last year I setup a test server running Ubuntu for Creode. This is currently used to demo and test Magento 2 and Drupal 8 websites.

As mentioned in the Introduction I have a big interest in Raspberry Pi’s. In 2014 I used one to build a coffee table style arcade cabinet. This allowed me to improve my knowledge of Linux on the command line and some learn some basics for electronics.

Arcade Coffee table from my Living room

PiXI and Development

This blog is for sharing things that have been discovered whilst working in Web Development and other various frameworks. The first thing to investigate and document will be that of using the Pixi framework to develop a simple snake game.

Diary

It’s also a chance to keep some kind of diary so that future me could look back one day and think “Wow, I have come far”. Its a great chance to document learning experiences and I’ll be trying to share as much as possible with everyone.

It’s already looking to be a great year with things happening both in my Career and home life. Can’t wait, so excited!

Talk soon,
Jamie