I love the web. It is a modern-day superpower for the dissemination of information and empowerment of the individual. Of course, it has its downsides like trolling (largely possible through anonymity) and privacy issues, not to mention the problems of ownership and copyright infringement about to come into effect with the highly divisive article 13. But, let’s forget about that for just a moment and marvel at the technological innovation of the internet and the browsers which support it.

I first learnt to code in Javascript and have since been ridiculed by many for liking it. Yes, I know there are weird bits like this gem: [] == ![] // true but it has become one of the most ubiquitous languages on the planet thanks to the internet, browsers and the interpreters that run the code (Google’s V8 and Firefox’s SpiderMonkey to name a few). …

Originally as a personal project to itch a scratch, since having my Gatsby starter template merged with the official branch I thought it would be productive to share the key things I learned whilst building a simple Gatsby static site to host my notes and revision material. If you want to build your note-taking, organisation site using markdown then fork the Github page. If you want to learn more about Gatsby, React and Markdown then continue forth!

The Itch

As a computer science student, I need my note-taking tool to:

• make writing code easy and hassle-free, syntax-highlighting within my notes would be a big…

Data-Driven Documents (D3) is a JavaScript library for building powerful graphics to communicate information in datasets. It is also fair to say that for many, myself included, it has a non-standard approach to building the graphics. Often the learning curve can feel steep.

In this post we’ll look at using NetworkX — a Python library for exploring graph structures — to do some of the initial data processing for us. Then we’ll add the artistic finishing touches in JavaScript with D3. The full code can be found on my GitHub and an interactive version can be found here.

The data

I remember when I was first introduced to the CIA World Factbook, and I loved it. It holds a treasure trove of information about all of the countries in the world. It is just screaming for visualisations of the data to be made. On top of this, it has been converted to different formats on GitHub and — most importantly for us — to JSON. …

Neural networks (and all of their subtypes) are increasingly being used to build programs that can predict and classify in a myriad of different settings.

Examples include machine translation using recurrent neural networks, and image classification using a convolutional neural network. Research published by Google DeepMind has sparked interest in reinforcement learning.

All of these approaches have advanced many fields and produced usable models that can improve productivity and efficiency.

However, we don’t really know how they work.

I was fortunate enough to attend the Knowledge Discovery and Data Mining (KDD) conference this year. …

Learning the “TensorFlow way” to build a neural network can seem like a big hurdle to getting started with machine learning. In this tutorial, we’ll take it step by step and explain all of the critical components involved as we build a Bands2Vec model using Pitchfork data from Kaggle. For the full code, check out the GitHub page.

The Word2Vec Model

Neural networks consume numbers and produce numbers. They’re very good at it. But give them some text, and they’ll throw a tantrum and do nothing remotely interesting. If it is the neural network’s job to crunch the numbers and produce meaningful output, then it is our job to make sure that whatever we are feeding it is meaningful too. …

If you haven’t read my original post about p5.js then I highly recommend you do before starting with this one. It covers all of the basics and will get you up to speed with the p5 library. This post is structured like a lesson with the aim of either teaching people about how to use p5 or showing people how they can captivate their students by making use of p5 in their lessons.

Like I pointed out before, the people at p5 have the humble mission to make:

…coding accessible for artists, designers, educators and beginners…

Originally I was blinded by the potential for artists and graphic designers. I gave little thought to the true potential of the library in relation to educators. Of course, you can show people how graphics work and they can learn through a higher-level abstraction of how real graphics programs are written, but what about other domains? Mathematics? Physics? In this article, we’ll build a physical representation of the Earth and Moon using the true equations that govern their motion, whilst also teaching about programming fundamentals like Object-Oriented Programming, inheritance and methods. If you’re ready, buckle in! …

Inspired by a Syntax podcast, I got really interested in website optimisation. It can often be an overlooked aspect in web development with more focus on design and functionality, I realised my number one priority whenever I visited a website is load speed. My attention is a website’s number one goal, lose it and they lose all potential ad revenue or possibility to give me whatever information I was looking for. Many seem to agree. 53% of users abandon websites that take more than 3 seconds to load. …

Graphics and computer programming are two dearly intertwined disciplines. The oscilloscope is often recognised as one of the first examples of “computer graphics”, the cathode-ray versions emitting a beam of electrons onto a phosphorescent screen. By using magnetic fields to change the beam’s direction, we can sweep from left to right and move up and down — the basic idea behind most CG! (I highly recommend watching this video from 1970).

We’ve come a long way since then — modern day graphics is a complicated science as well as an art, and the barrier to entry is constantly increasing. Graphics programming can be so complex, that a simple program to draw a triangle can be over 1000 lines of code! However, this article will introduce you to p5.js (also known as p5). …