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!

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!