End of summer 2019, I find myself leaving my first job after college for a new role and end up with more than a month of free time. I thought about traveling but ultimately decided to spend my time in New York focusing on myself. I found that, after my resignation, I still had the urge to code. I’ve been considering building a personal page for awhile as I’ve wanted to build a platform where I can share my story as well as advertise my technical abilities. Now was the perfect time.
I'm lucky to have had this short sabbatical to put all of this together, especially in the hustle of New York. This project has been more than just writing code or sharing aesthetically pleasing photos. I’ve found an entrepreneurial spirit in me that I did not think existed. It’s been a joy to create something that is purely my idea without the pressure or input of a deadline, boss, or client. Also, attempting to create a site that I feel accurately portrays me has required a ton of reflection about who I am as a person and for that I’m thankful.
So to answer the question, what is this? It’s my instagram, but also a resume, but also also a snapshot of things floating in my head. I’m proud of the work I've put into this site and I’m happy with the way it turned out. I hope you can appreciate it.
I designed the site so that browsing would feel playfully random. The idea behind this was to make it highly interactive. I wanted a user to be able to get lost in the experience and I wanted the experience to be unique every time someone visits a page. When perusing the site, you might have noticed that the images/gifs will change position or entirely new ones will appear. You’ll notice buttons that, under the guise of being interactive tools, just refresh the page inviting new visual content.
I also drew on inspiration from nineties websites to motivate my own. I imagine most would find these designs unpleasant and messy, but I think there is something raw yet creative about them. During the early stages of the internet there were no standards for how websites should be designed or formatted - great example of this being www.arngren.net a site that is complete chaos. With a site like this in mind I did my best to reject notions of needing whitespace or a clean layout. I avoided modern styling for links and buttons as much as possible. I still, however, kept many familiar elements with regards to navigation such as the navbar with menu icon at the top left. I also divided each page to be specific and puposeful. This resulted in a website that feels like a modern web page but looks unique.
One of the languages rising in popularity is called Go. At my previous job, we always talked about building production applications using Go, for both latency purposes and to keep up with industry standards; however, due to the widespread adoption of Java across the enterprise, it didn't make much sense to use. Here was my chance to learn.
That being said, I was torn. I wanted ppvm.io to be a visual experiennce and for these types of projects, using a javascript framework such as React, Angular, or Vue is standard. I was worried that I would end up spending all of my time learning one of these libraries rather than building an actual site. Thus, I decided to go with my initial plan, run a simple Go server that would fetch data from a backend service, then dynamically render html based on the data and serve the static files to the browser.
After completing the project, I will not be designing any more frontend applications this way. I ended up duplicating a lot of html. I also had to hard code logic on the server to vary how elements would be rendered on the page. Both could have been avoided with a frontend framework. Also, you may have noticed there are numerous buttons that end up refreshing the page in order to pull new images and gifs on screen. This triggers a new request to the server which, slows the experience down. Preferably I should have tried to avoid making redundant calls to the server.
Still, I was able to accomplish my goal of learning basics about Go. I built a simple API with some routing and handler methods. I was able to take advantage of Go’s first class support for multithreading to improve the efficiency of the server. As part of the sever there are several background processes that periodically reach out to the backend to determine which images will be placed on screen and will pick up any new content I may have added.
This project was an exercise in learning about Amazon Web Services as well as open sourced devops tooling. To perform builds a combination of Github and Docker Hub were used. I setup a docker project to integrate with my GitHub. Docker Hub will watch my Github and build an image based on any push to master or any pushes with tags.
On the AWS side of things, I first started by setting up an AWS S3 bucket to store the content for my website, this was essentially my backend. I then added the Go AWS SDK to my application to pull content from S3. Once I had an MVP, I worked on the deployment using AWS ECS. I used ECS Fargate since I only had a few containers to run and did not want to manager the underlying infrastucture. I setup a cluster that originally had two services. The first one was to be for nonprod (I've since deleted this service to avoid extra costs). The second service was the production version, this is the version you are seeing on your screen. This service runs one task but utilizes 2 autoscaling policies that will increment the number of tasks if the service approaches 90% CPU or memory usage. After this, I created an application loadbalancer for the prod service which will healthcheck and round robin between containers. I used AWS Route 53 to purchase my domain name and AWS Certificate Manager to provision a cert for TLS. Both were configured in conjunction with the loadbalancer to send encrypted traffic to the site via the URL. The last thing I did was use AWS Cloudfront to setup a CDN for all of my images to improve caching for the site.