Oct 18, 2020 | science & tech

The re origination of jamescbain [dot] com

Just because you can doesn't mean you should

I've been here before, sitting at my computer, searching for the perfect words to encapsulate a moment that is probably only important to me. And you know what, that's okay. If I can garner anything from 2020, it's that sometimes the only justification you need for doing something is that it matters to you. So, here I am again, sipping coffee and listening to Lemonade, writing about what I consider to be a personal victory, the reincarnation of my personal website.

I'm a shameful self-promoter. It's partly a personality thing and partly because I fear using a voice that just isn't me, a voice that is more LinkedIn than I ever care to bring myself to; it reads like newspeak to me. I swear, if I ever start to build posts around the vocabulary like "agile", "pivot" or "core compentancies" I'm going to exile myself to Elba. But I also recognize that self-promotion is important. You can't expect anyone else to show off your work (and why would they?) and so I've settled on a compromise of sorts: build my own website where I can showcase the things I am building as I build them. You may be asking how this is different than any other blog where people write about their work, and my answer is simply it isn't... for the reader. But for me, blogging becomes an exercise in digesting what I have done, a chance for me to step back and explain my logic and design process. You see, it challenges me to understand a problem such that I can explain it clearly to anyone who stumbles upon these posts and in turn I too can better understand what I did. Putting it out to the world becomes a nice added bonus but not my primary, mental directive.

So what better place to start (again) than the website I've built to deliver this content.

Introducing the new jamescbain.com

Consider this my official welcome to my new website! After three iterations, I've finally settled on something that I am happy with, both in terms of design as well as functionality. The first two runs I focused way too heavily on animations. Mea culpa. I had just discovered React Spring and quickly found myself needing a new mantra, "just because you can doesn't mean you should". This mistake, which I am now reframing as a learning experience, I made twice. And twice I found myself in over my head with a tower of animations sitting on a foundation as stable as cooked spaghetti. So before the third attempt and, what I can proudly say you are viewing right now, I decided to ask myself what were the biggest priorities and what could wait for later. Was I still tempted by animations? Yes. But did writing down my priorities keep me focused? Yes. Here are the things that made the cut.

Blogs need the capability to be interactive

My current position, albeit at an academic institution, involves me creating web-based data visualization that are often interactive in nature. While videos, images or other types of media can get the point across, I wanted a place where people can engage with compartmentalized versions of my work while looking at some of the code that makes it possible. Considering that I write much of my work using React, Gatsby seemed like a natural framework to build my website. There are many reasons I found this to be the case but I will focus on just one here: adding JSX (React flavored JavaScript) was simple to add to markdown blog posts. This means that I could easily transfer any former posts that I had writtem and had rendered using a static site generator into my new website with minimal pain, while jumping over to a medium that allowed me to showcase my interactive data viz work.

To get a feel for what I'm talking about, imagine you live in a super progressive neighborhood that doesn't have any pet breed restrictions (because pet breed restrictions are terrible, misinformation campaigns that perpetuates incorrect perceptions of certain breeds (this is the hill I will die on)) and you decide to go to local pet adoption agency to adopt a cute baby t-rex. Like all baby t-rexes, a healthy diet is necessary for it to grow to become the family friendly dino that you've always wanted. Well, I created a component just for this scenario, which allows you to simply feed your pet theropod until it gets to a certain size (somewhere around 4em is CSS). Go ahead, and give it a try!




Lordy...this was probably the single most difficult task for me to tackle. I'm still not convinced that I have it right, but I currently have something that I do not hate. I toyed around with the idea of using a primary color palette but I also wanted to incorporate pink. Unfortunately, the type of pink that I wanted to feature (the pink you see throughout this site) isn't the type that goes well with the louder, primary colors. So I sacraficed the primaries for more subtle neutral tones with an accent of pink. Let's call this an attempt at capturing my personality 🤷‍♂️.

Some animations

I felt pretty strongly that I should at least include a couple of animations. Nothing like the previously, bloated, former rendition of my site, but perhaps just a fraction of that. I can always work up the bloat as this thing grows 😉. So I stuck to one practical and one splurge item. I'll admit, I started with the splurge before I began the practical but at least censored myself.

The practical is the sliding menu. Sure, these things could be done in pure css but what fun is that? Plus, react-spring gave me the option to chain animations together. It isn't just about shifting the menu to the left but also the fade in of the menu items and the social icons. It's a whole thing. Stop judging me. I just wanted to play with react-spring.

The splurge was the little menu icon. Go ahead. Give that puppy a click. I'll be here waiting. You see that seemless shift from "X" to modified hamburger? That was all me. I understand if you want to give it a couple more clicks. I consider this a splurge because the animation is rather subtle, perhaps even unnoticeable until I pointed it out, but it is something I really wanted to do. I often find that I enjoy the flexibility of programming because it gives me more control over the details and this was one detail that I wanted to get right. Not for you, but for me. I wanted it to shift from hamburger to "X" when the menu hit it and vice-versa when the menu collapsed. Again, not that big of a deal but it was a fun afternoon challenge.

A platform to be me

I guess this isn't really specific to this blog but in a way it kinda is. One of the difficult things about blogging for me is that I sometimes don't want to blog about programming or data science. Sometimes I just want to share my thoughts about a book or throw out something pointless into the void, like a discussion about the most recent episode of the Bachelor. One of the major motivators of creating this site was to give myself a platform to speak about things, other than work, that matter to me even if they are seemingly trivial. Sometimes it is good to show the world that my life isn't just me crouched over my computer writing functions all of the time. In fact, much of my mental image of myself has nothing to do with what I work on but instead the things that I'm interested in. In other words, I want this new site to be more of a reflection of who I am as much as it is a reflection of what I do.