I’ve not written many technical articles before so please let me know what you think and if you found all this as interesting as I did. I’m sure I’ll be doing more development-like articles in the future especially when the process involves cool tools like ChatGPT.
I am a co-founder of a music data and analytics company called Rankd. This is by far the most complicated technical endeavour I’ve ever been in charge of building and has been a huge learning curve to build. It’s got a lot of complicated components that have made this a challenge, especially as a novice in programming that is working full-time, freelancing and working on multiple other companies all at once.
However, I’ve recently been experimenting with a tool that can help with that learning curve and can even program web components for you.
ChatGPT is a large language model designed to provide accurate and helpful information on a wide range of topics. The model is trained on a vast amount of text data, that enables it to understand and generate human-like responses to questions and prompts. A lot of the data the model has been trained on is seemingly website development related and that’s where this tool becomes insanely useful for development.
But first, let me describe what I wanted to create and the process of going about it.
Rankd is a music analytics platform and our homepage at the time of writing this article is a leaderboard displaying musicians from Brighton rated on Instagram and Spotify following. However, this isn’t the best for a couple of reasons.
One, the leaderboard makes it overly competitive. Our goal is to display, appreciate and teach people about the Brighton music scene and the competitiveness takes away some of the community spirit that we wish to nurture. It was never our intention nor the final product but it was a good use of our data at the time and definitely helped us generate organic search traffic and traction amongst local musicians.
Secondly, the way I had built our backend data collection script was flawed and sometimes couldn’t successfully scrape Instagram for the current follower count of the artists on the site. This lead to the data sometimes being out by a few days and what’s the point of a leaderboard if the score isn’t 100% correct?
This led to the following idea. I wanted to build something that displays musicians, uses our data (without the need for it to be as up-to-date) and works as a platform for musician discovery. This led to me designing and coming up with the Rankd Discover page.
This idea stemmed from stock market visualisation graphs (Are these called heatmaps?) which are super useful for easily dissecting large quantities of financial information. I thought we could use a similar approach and style to build our discover page.
My idea was to show musicians in a grid and have the size of the artist's block be dependent on a few things. I wanted to take into account their growth, if they had upcoming gigs, new song releases, etc.
In summary, this view wouldn’t rely on the live data as heavily, It would feature more musicians with less of a following as it takes into account more data and it would be a much better way of visualising data.
ChatGPT is a large language model that can generate human-like responses to whatever you input. It was developed by OpenAI and trained on data from conversations between real people. It can be used to answer questions, help with programming, do translations and can have conversations with you if you’re lonely (Definitely not what I’m using it for).
Things like ChatGPT have been around for a couple of years but in the last 6 months, this model has become incredibly advanced and can do a lot more things that few people thought possible at the start of the year.
I wasn’t planning to originally. It was a coincidence that I had ChatGPT open and just decided to test out how well it can generate HTML and CSS code. So I started by asking it to build me a grid.
My prompt: “Could you make me an HTML and CSS grid with varying row heights and column widths with 15 divs inside of it which all have a <img> tag, <h1 > element, <h4 > elements and a <p > element”
The response:
An automated way to scrape data within Google Sheets seems too good to be true? In this article, I will show you how and go through some examples of how I’ve used this in my role as a Paid Media Marketer.
Read MoreKPIs ensure that you execute a more successful marketing strategy as well as helping you to identify which campaigns and tactics are having the biggest impact for your business.
Read MoreStrategies that you can use in this new era of cookie-less, privacy focused browsers.
Read More