Portfolio

Pandora

The most recent version of Pandora, a virtual learning environment I made.
The most recent version of Pandora, a virtual learning environment I made.

Pandora was a virtual learning environment, that I built during years 10 and 11. It was one of the first big projects, I programmed, and in the course of building it, I learned a great deal about server-side programming, HTTP, databases, templating languages, deployment, data serialisation and version control. I wrote numerous versions of the project.

The client-side was naturally written in HTML, CSS and JavaScript. In the early verisons, there was very little client-side JavaScript, as the server would generate the HTML. In later versions I tried out a new architecture, wherein the server would provide an API to return JSON data, and the client which sent AJAX requests to fetch data and generate HTML. Although this relied heavily on client-side JavaScript, I found that this made development quicker. This was because: - There was a separation of concerns. The server could focus solely as acting as a buffer between the database and the client, with its main priority as security, and client could focus solely on the user interface. - It was easier to create complex user interfaces. An example of this was the form to create quizzes, because all the templates were stored on the client-side, if the user clicked on the new question button, another question subform could be added to the quiz form instantly.

I tended to use Bootstrap as the CSS framework, although in later versions I used SASS as a CSS pre-processor. I began using grunt to compile SASS to CSS, minify JavaScript and compile templates, among other tasks, although later switched to gulp.

On the server-side, I used Node.js, which is a server-side JavaScript environment. Although at the time, I thought the dynamically-typed "loose" nature of JavaScript made development quicker, today I would probably use a typed language. I generally used the express web framework. In my final version, I experimented with Meteor, a JavaScript full-stack web framework, however I grew to dislike its monolithic nature. As I said, in earlier versions, the server generated the HTML and to do this I played around with templating languages such as Jade, EJS, Mustache and Handlebars.

For the database, I used MongoDB, which is a NoSQL database. In some versions, I also used Redis to store data about sessions.

Pandora included features such as quizzes, vocabulary quizzes, blog posts, YouTube integration and rich-text editing. Although the primary objective of creating it was as a learning experience and to experiment, Pandora was used in various classes at school, to test its functionality.

Demonstration of some of the quiz functionality.
Demonstration of some of the quiz functionality.
Demonstration of the quiz results bar chart.
Demonstration of the quiz results bar chart.
Year 10 Summer Holidays version.
Year 10 Summer Holidays version.
Another screenshot from that version.
Another screenshot from that version.
Early Year 10 version.
Early Year 10 version.

Cadmus

Cadmus is an online textbook on Java, covering topics such as Object-Oriented Programming & Java Swing. It was originally written by UCL, but collaborators from my school and I, at the behest of the Computer Science Department re-wrote large portions of it as well as expanded it in much greater detail.

The objective was to create a textbook to teach Java at my school. It is meant to be concise and have many exercises, with the intention of being used in combination with a teacher. The pages are written in the formatting language, Markdown, and converted using a gulp script into HTML files. Writing the textbook gave me a greater insight into Java, for instance the difference between a primitive data type (e.g. int or float) and a complex data type (e.g. String).

See Site and GitHub Source.

WHSB Charity Week 2016

For Westcliff High School for Boy's Charity Week 2016, I wrote a site containing information on the charities that we supported and the committee. I used an open-source Bootstrap theme as the CSS framework and also Font Awesome for the icons.

See Site.

Personal Site

This website is written in HTML, CSS as well as Markdown, which is converted to HTML, by a Node.js server. Unlike most of my other projects, I did not use a CSS framework, and wrote all the CSS from scratch, except for flexboxgrid, which provides a grid system. For this website, I chose some custom fonts from Google Web Fonts. These are Open Sans and Raleway.

See GitHub Source.

Quote of the Day Server

To learn more about network programming, I wrote a server implementation of the Quote of the Day protocol (IETF RFC 865) in several programming languages, including JavaScript and Java. I have a version running on this server at port 17, to try it out you can run nc hashanp.xyz 17. The quotes are stored in a separate a file, and the servers read the file, and store the quotes in a data structure. When a connection is opened with the server, the server selects a random quote and writes it to the outgoing stream, before closing the connection.

See GitHub Source.

Postcss Spiffing

Postcss is a tool for applying transformations to CSS in a script that runs on Node.js. The idea is rather than using a monolithic CSS preprocessor like SASS, you can choose what transformations you want, and what you don't want. These transformations are available as plugins. Postcss Spiffing is a plugin I wrote in JavaScript, as a joke more than anything, to allow somebody to use British English in CSS, e.g. "colour" rather than ghastly "color". It is installable from NPM as postcss-spiffing.

See GitHub Source.