Tag Archive | GitHub

Computer Science Blogs Beta

CSBlogs.com Homepage - Desktop

Rob and I have both been doing a lot of work on CS Blogs since the last time I blogged about it. Its now in a usable state, and the public is now welcome to sign up and use the service, as long as they are aware there may be some bugs and changes to public interfaces at any time.

The service has been split up into 4 main areas, which will be discussed below:

csblogs.com – The CS Blogs Web App

CSBlogs.com provides the HTML5 website interface to Computer Science Blogs. The website itself is HTML5 and CSS 3 compliant, supports all screen sizes through responsive web design and supports high and low DPI devices through its use of scalable vector graphics for iconography.

Through the web app a user can read all blog posts on the homepage, select a blogger from a list and view their profile — including links to their social media, github and cv — or sign up for the service themselves.

One of the major flaws with the hullcompsciblogs system was that to sign up a user had to email the administrator and be added to a database manually. Updating a profile happened in the same way. CSBlogs.com times to entirely remove that pain point by providing a secure, easy way to get involved. Users are prompted to sign in with a service — either GitHub, WordPress or StackExchange — and then register. This use of OAuth services means that we never know a users password (meaning we can’t lose it) and that we can auto-fill some of their information upon sign in, such as email address and name, saving them precious time.

As with every part of the site a user can sign up, register manage and update their profile entirely from a mobile device.

api.csblogs.com – The CS Blogs Application Programming Interface

Everything that can be viewed and edited on the web application can be viewed and edited from any application which can interact with a RESTful JSON API. The web application itself is actually built onto of the same API functions.

We think making our data and functions available for use outside of our system will allow people to come up with some interesting applications for a multitude of platforms that we couldn’t support on our own. Alex Pringle has already started writing an Android App.

docs.csblogs.com – The CS Blogs Documentation Website

docs.csblogs.com is the source of information for all users, from application developers consuming the API to potential web app and feed aggregator developers. Alongside pages of documentation on functions and developer workflows there are live API docs and support forums.

In the screenshot below you can see a screenshot of a docs.csblogs.com page which shows a developer the expected outcome of an API call and actually allows them to test it, in a similar way to the Facebook graph explorer, live on the documentation page.

CS Blogs API Documentation

CS Blogs API Documentation

Thanks to readme.io for providing our documentation website for free due to us being an open source project they are interested in!

The CS Blogs Feed Aggregator

The feed aggregator is a node.js application which, every five minutes, requests the RSS/ATOM feed of each blogger and adds any new blogs to the CSBlogs database.

The job is triggered using a Microsoft Azure WebJob, however it is written so that it could also be triggered by a standard UNIX chronjob.

Whilst much of the actual RSS/ATOM parsing is provided by libraries it has been interesting to see inconsistencies between different platforms handling of syndication feeds. Some give you links to images used in blog posts, some don’t, some give you “Read more here” links, some don’t. A reasonable amount of code was written to ensure that all blog posts appear the same to end-users, no matter their original source.

Try it!

I welcome anyone who wants to to try to service now at http://csblogs.com. We would also love any help, whether that be submitting bugs via GitHub issues or writing code over at our public repository.

Danny

Introducing CSBlogs.com

CSBlogs.com Homepage

Between studying hard for my masters degree — and applying for jobs for when it ends — I have managed to find some time to set up a new website called CSBlogs.com

People who have been reading this blog for a few years will have seen HullCompSciBlogs.com mentioned a few times, for those that haven’t it was a service which aggregated all of the blog feeds of computer science students at the University of Hull.

John Van Rij did a great job of keeping that service online, but unfortunately doesn’t have time to maintain it anymore. Since the service went down I have grown to miss it — I guess I didn’t realise how much enjoyment I get from seeing how well everyone is doing from back in Hull — current students, alumni and even lecturers.

In order to resolve this problem I set up CSBlogs.com with the aim of getting all of the Hull Computer Science bloggers and others from around the country onboard.

The project is entirely open source, under the MIT license, and can be forked, modified and improved by the community on Github.

The website itself is hosted on Microsoft Azure and utilises CloudFlare to provide security, analytics and a global content delivery network. Node.js is used as the backend programming language and the MongoDB NoSQL database is used for persistent data storage. Nodes packages are used extensively, including Express.js for routing, Handlebars for data-binding to the front end and LESS-Middleware to improve CSS development.

Complicated acronyms aside I have worked hard to make setting up a local development environment and contributing source as easy as possible for beginners via the instructions I have written on the homepage of the Github repository. I would really recommend any 1st or 2nd year students give it a go — open source development looks great on your CV! And if you need any help contact me as per the instructions.

We are currently in the process of setting up all of the required frameworks and technologies and writing guides for how to get involved (this has actually been one of the more challenging and interesting parts of the project so far) and hope to have a working minimum viable product in the next week.

At this point I would like to thank Charlotte Godley, Alex Pringle & Rob Crocombe for their extensive help in getting the project to where it is now. Charlotte has taken on a role of project management, Alex has developed a rudimentary database controller and Rob has been working on implementing less.js support and developing a theme for the site.

I will keep the blog updated with progress on the project.

Danny

Introducing Dollar IDE – An Update on my Final Year Project

Dollar IDE - The Modern IDE for PHP

In the past few weeks, since the semester 1 exams in January, we third years have been blessed with some calm time without any exams to revise for or coursework to work on, just two days a week of lectures. During this free time I have been working on my final year project.

User Interface, Icons and a Name

As recently as two weeks ago I had very little to show anyone who asked to see my project due to it all being technical back-end stuff without user interaction, which was a shame as I’ve actually done a reasonable amount of work on it, however now I have developed some of the UI and finally have something I can ‘show off’.

My previously unnamed PHP IDE is now known as Dollar IDE, so called because of how all variables in PHP are denoted by a $ sign. At the top of this blog post you can see a fantastic logo which my friend, Harry Galuszka, who studies Graphic Design at Lincoln University designed for me.

The colour scheme I have chosen for the user interface and logos consists of various shades of purple,  an unusual choice for me because I don’t usually like the colour, however it is the ‘official’ colour of PHP, as you can see from the PHP.net website, and it also fits in quite well with the design language I am using, which is based on Microsoft’s Modern (formally metro) ideas.

The program doesn’t contain any bitmap images, instead I use XAML vectors, and is built using Windows Presentation Foundation meaning that the program works well on all screen resolutions and pixel densities, including Apples famous “retina displays”.

The main code editing screen isn’t ready to be shown off just yet, but below you can see some images of the “Start Screen”, which is the first window shown to the user when they launch the program. From here the user can opt to create a new Dollar IDE project, or open an existing Dollar IDE project or stand-alone PHP file. The 5 most recent projects and displayed in order to allow the user to rapidly get back to work on their website or web-app.

Dollar IDE - New Project Information Validation

Dollar IDE – New Project Information Validation

An important aspect of the start screen is its ability to inform the user of any issues in creating a new project before they continue, as you can see in the above screenshot issues are denoted by a red circle with a cross in, and fields which are OK are denoted by a green circle with a tick in.

This as-you-type validation means that mistakes can be spotted earlier, thus saving the user time and the exact cause of any issues can be determined and displayed. It’s always annoying when you enter some data into a program only to be told its wrong when you try to save… and then not be told what is wrong with it, being forced to make an educated guess. Dollar IDE gives you no such hassle.

Git Integration

Dollar IDE - Git and GitHub Integration

Dollar IDE – Git and GitHub Integration

One of the coolest aspect of my new IDE is its tight integration with the git revision control system. The program can interface with any git repository, hosted either locally or on a remote server, and has additional support for repositories hosted on the popular GitHub service.

In the main IDE window, which I will show off soon, the user will be able to

  • See which files have uncommitted changes
  • Commit files and projects
  • Merge files with conflicts
  • Pull changes from a remote server

Other Progress So Far

Other than what I’ve shown you in this very quick preview I have the following features working:

  • Correct tokenization of the most common PHP tokens
  • Complete coverage of the tokenizer with unit tests to ensure program correctness
  • A source code editing window with colour highlighted text and line numbers
  • Project loading and saving
  • File associations (to allow project files and PHP files to be loaded from Windows Explorer)

What’s Left to Do

There’s still rather a lot left to do on this project, but fortunately there’s still around another 2 months to do it in. I’m now feeling rather confident that I will finish my product on time with all of my primary functionality and a lot of my secondary functionality implemented.

I will of course keep the blog up to date on my progress.

Danny

 

The Generation Game – A Simple Genetic Algorithm

Evolution with Green Sheep

Last night my housemate Hayley and I were talking about the Data Mining and Decision Systems module we took last semester, during that discussion the concept of genetic algorithms came up.

In the computer science field of artificial intelligence, a genetic algorithm (GA) is a search heuristic that mimics the process of natural selection, except that GAs use a goal-oriented targeted search and natural selection isn’t a search at all

– Wikipedia

Hayley explained the concept to me using the idea of an animal that is more likely to survive in its environment by blending in with the colour of its surroundings. So tonight, as a nice change from revision and work on my Final Year Project, I had a go at developing such an algorithm — with a somewhat humorous undertone. The result of this undertaking is a little tech demo called “The Generation Game – A Simple Genetic Algorithm”.

In the demo it is advantageous for a sheep to be green, in order to fit in with its field. However at the beginning of the game the ten sheep in the initial flock are of completely random colours.

Turns are taken, in order by

  1. A Flock of Sheep, which breeds, producing 1 new sheep for every two sheep in the flock (if there is a left over sheep it doesn’t breed). Sheep produced by the mating process are the median colour of its two parents.
  2. A Wolfpack which depending on its hunting ability can eat 10% – 60% of the heard in any given turn

The closer a sheep is to the colour green, the less likely it is the be a casualty of a wolf attack (however there are other contributing factors, and a green sheep can still be killed).

As you can see from the gif image above if the initial flock has a green sheep amongst its ranks then evolution takes place (survival of the fittest, like how Darwin described it) and within just 20 generations the flock consists of only green sheep.

Another interesting situation is when there is no green sheep in the initial flock.

Evolution with No Green Sheep

Evolution with No Green Sheep

As you can see from the example above which starts with no green sheep the flock gradually becomes a light brown colour, this is the closest colour the flock could get to green with the genes avaliable in its gene pool.

This is just a simple tech demo (written in C# with XNA) to prove to myself I understood the concept, but it worked out quite well and I think its cool. I’ll be cleaning up the code and adding some comments, so be sure to check out the repository containing the program on GitHub.

Thats all for now,
Danny

“All In” on The Cloud

My Cloud Workflow

I got back to Hull yesterday morning, having left Dunstable at 5:30am, moved into my new house — which is spacious, well furnished and an all round upgrade from last years dingy old thing — and so today I had my first day back in the Forward Thinker Developments office. Over the summer I had been working from my new dual screen rig at home.

My "Battlestation" -- When you get a document up on that baby, you are seriously looking at that document

My “Battlestation” — When you get a document up on that baby, you are seriously looking at that document

I spent the vast majority of the day working on my Tablet, which was already set up with the correct FTP details, Git repositories and had all of the programs I wanted and needed on it, however when — towards the end of the day — my tablet finally ran out of juice I had to work on a PC which had an internet connection, but to which I had no administrative privileges.

This meant I was unable to install any of the programs I wanted and needed to do the work I needed to do; writing PHP script, committing changes to my Private GitHub repo and keeping in contact with the rest of the team, nor install the applications I like to have open whilst I work; such as Spotify for music.

The Cloud to the rescue.

I soon discovered that a little while back GitHub released a reasonably full-featured code editor to their website which you could use to make quick edits to files and then immediately commit them to the repository, it even included some syntax highlighting and simple auto-complete,, you can see this in the image at the top of this post. That meant that both writing my code and adding it to source-control was taken care of. I then found that you can make Skype calls, including Video and Voice messages from outlook.com, and, whilst this is still in beta, it seemed to work really well — this covered my communication with my team mates.

At this point I could work well, and get on with what I need to do, but something was missing, something very important indeed — perhaps the most important piece of software on any computer. A music player. I simply loaded up play.spotify.com and within seconds, after logging in with Facebook, was enjoying a bit of Frank Sinatra. Great programming music.

Whilst it is clearly preferable to have a fully featured IDE and source control client on your PC, when required these solutions do very well, and I wouldn’t be surprised if it wasn’t long before the web app counterparts to many traditional client side programs, such as Office, Visual Studio and iTunes are actually better and replace their client side versions. Perhaps, even today’s third year computer scientists will be involved in that and bring computing back to having a mainframe style server system as it did in the past, but on a much larger scale.

Danny

Make Yourself a Nice Workplace

Github for Windows and the Powershell Command Prompt for Git

I’ve recently started a new job as a Software Engineer at a local tech start up called Forward Thinker Developments. One of the nice things about this new role is that I have been given a reasonable amount of control over the workflow of the projects we are working on, all of which are pretty exciting! One of the things I’ve discovered whilst doing this is just how important it is to make yourself a nice environment to work in, much like Rob spoke about whilst teaching us in the first year.

As a Software Engineer your job is simply to design and develop software to a specification given to you by either a customer, or in this case, your boss. Whilst I cannot understate how important things like source control, coding standards and the set up of your development environment are making these things work for you isn’t actually part of your final product. This is why its important you get it done right first time — though there is of course scope to review and amend certain practices — and make it simple and elegant to use.

I’m a firm believer in beautiful, user friendly software. Some people in the Computer Science community will looks down on me for this but if I can avoid the use of a command line tool, I do.

This is for the simple reason that when I am working I like to be immersed, because this is how I do my best work. For me immersion is thinking purely about the code and the product I’m developing with no distractions, this means I don’t want to have to spend a few moments — even if its just a second or two — trying to remember the command to branch a git repository, for example. Why? Because that means I’ve lost my train of thought about the thing I’m actually trying to develop.

This is why rather than use Git Bash, I am using GitHub for windows, and I have to say I can see now downsides at all to its use. I have a pretty front end program for my source control, which makes it a pleasure rather than a chore to use but then if I need to do something particularly complicated I still have the option to open Powershell, the Windows Command Line or even our old friend Bash to do whatever I need to in the command line. Another, perhaps more important reason to use a GUI rather than a CLI for things such as source control is that you wan’t to make them as accessible as possible, the less “nasty” a program is to operate, the more likely your team members will use it frequently, and if you’re working on any sort of commercial project you really do want frequent commits to source control.

Whilst reading an article on Ars Technica which asks the question “Is it a good idea to impose uniform code format for all developers?”, I realized that having an automated code formatter might be a good idea. An automated code formatted can be used to ensure that all code is formatted in the same way before being commited to source control or before being uploaded to an FTP server — i.e. Make sure it conforms to your companes particularly coding conventions —  but the also ensure that code is downloaded to the develops machine in the format he likes.

So, for example, I love the Allman style indentation — in which curly braces for any function or control block are on the line after the declaration, like so:

public static void MethodName()
{
      //Content inside method is tabulated
      //Danny likes this style
}

Whereas some of my colleagues may prefer K&R style indentation, in which many of the curly braces are on the same line as function or control block declaration

public static void MethodName() {
      //Content inside method is tabulated
      //Danny doesn't like this style
}

This article on Smashing Magazine has some really cool online formatters which could do the job of making code styled the way you like it a lot easier.

Conclusion

Here’s the tl;dr, if you want to spend your time developing great software make sure you’re not spending a great deal of your time doing menial tasks when theres an easier way. Before I discovered code formatters I would spend a lot of time formatting things the way I like them, now I don’t. Before our team discovered Git for Windows, over git bash, we would spend longer typing commands and administrating our own self-hosted git repo, now we let the GitHub team deal with all of that and only crack out Git Bash on the rare occasion we wan’t to do something complex.