DEV Community: Mike Bobadilla

Building a product part 2

Mike Bobadilla — Fri, 29 Jan 2021 06:16:55 +0000

On the last post we created our MVP, setup our Gitlab repository, setup our hosting on Vercel, and pointed our domain to Vercel. It sounds like a lot and it kind of is, but the point was to just get the most minimal app deployed. This serves as the band-aid to delivering something useful to the internet, and once the first one is done, it becomes addictive. The main goal is deploy as much as possible without feature creep becoming an issue.

The plan for today is going to be:

Adding analytics from Plausible Analytics.
- The reason I went with them is because while they aren't free, it's minimal and I'm not just giving a ton of user data to Google.
Adding Tailwinds and some minor styling to freshen up the site.

Adding the analytics script

First you have to head over to Plausible and create an account. They give a 30 day trial without a credit card so no excuses. Once you have the account, Add a website and create the snippet.

Now since we're using NextJS we need to use one their special pages named document.js and it goes in the pages directory. Here's what my _document.js looks like.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <script
            async
            defer
            data-domain="whenarethefights.com"
            src="https://plausible.io/js/plausible.js"
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Give it a quick save, commit, push, and go to Plausible to make sure it's working. git add . && git commit -m "Add analytics" && git push. Then you get to see this cool screen.

Adding Tailwinds

So one of the main benefits of using something popular is getting pretty straightforward documentation. Here is how to setup tailwinds with NextJs.

Installation

npm install tailwindcss@latest postcss@latest autoprefixer@latest
git commit -am "Add Tailwinds, postcss, and autoprefixer"

npx tailwindcss init -p

Following the instructions I updated tailwind.config.js and styles/globals.css to look like the following

// tailwinds.config.js
module.exports = {
  purge: ['./pages/ **/*.{js,ts,jsx,tsx}', './components/** /*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}


/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Save and commit again. This steps important just in case shit hits the fan, you have a known good starting place.

git commit add . && git commit -m "Configure Tailwind"

Updating the style

So im going to cheat here and just go to https://tailwindui.com/. The reason being is I'm not the best designer and it's just easier. If you don't want to pay for this, there is an alternative free one that I've seen mentioned a few times https://kitwind.io/. I'm not going to post the code because I feel like I would be distributing it, but look at the source if you want 🤷‍♂️. This is the component I'll be using. It's clean and has some badges on it. I think it's pretty close to what I need.

And heres the final layout with our current info:

I think thats a good stopping point, so let's save, commit, and push. Once thats up we can start thinking about our next deploy with will be letting React build the layout for us.

This is part of my experiment to try and write 250,000 words in 2021. It's not accurate and is just meant to loosely track progress.

Current word count: ~3376 / 250,000

Daily average: ~121

Daily average Goal: ~685

Building a product (whenarethefights)

Mike Bobadilla — Thu, 28 Jan 2021 16:30:03 +0000

Photo by Hal Gatewood / Unsplash

I've been meaning to rebuild When are the fights and I keep getting stuck worrying about where the data is going to come from, how cool I can make it, and if I want to use any new technologies. I decided I didn't care anymore and just wanted to go back to when I first made the site. It was just a static page hosted on Netlify. I decided to document the process of how I break down my process on building products, or at least how I try and approach them.

What problem are you solving

I want to see what fights are coming up in the UFC, Bellator, Glory, etc. It's a problem that scratched my own itch so I'm not too worried how many people come to the site.

What is the MVP

For this site I am thinking a static page with a few upcoming fights should work. Nothing crazy, just a static site. The hardest part of this is not trying to over-engineer at the very beginning. The only exception I am making currently is that I am going to use NextJS, and the only reason I am choosing that is because I know something more dynamic might be needed later. It's a tiny bit overkill, but it's ok.

Technology that is needed/wanted

NextJS for building
Vercel for hosting
Gitlab for tracking changes and CI/CD
Cloudflare for DNS and CDN.

This is a bit much, but I usually set up deployments before I build anything. The reason for this is that gearing up for deploying code after a session of coding starts off exciting and then kills the mode, so I prefer to start from a barebones app to track what ends up breaking the deploy. It's like TDD for deployments.

How will this be deployed

Some sort of hook via gitlab and vercel. The goal here is whenever something is merged to master, we get a new build.

Settings up the first deploy

Setup the NextJS boilerplate

I'm just going to follow the getting started page on nextjs and get that deployed.

Getting it on Git{lab, hub}

Follow the instructions on Gitlab if you're using Gitlab. Github has something similar.

Once that's done you will get instruction how to add your project to the repo.

Connecting Vercel

Luckily Vercel has a connect gitlab project button so it's basically just a one-click deploy.

And now https://whenarethefights-com.vercel.app/ has my app running.

Now lets add some fights

I'm just going to put the next couple UFC fights on there and we'll call it finished so we can point our domain to our app on Vercel. We're just going to create the most basic and ugly site. No one cares, seriously.

import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>¯\_(ツ)_/¯ When are the fights</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.grid}>
          <a
            href="https://www.ufc.com/event/ufc-fight-night-february-6-2021"
            className={styles.card}
            target="_blank"
          >
            <h3>UFC Fight Night - Overeem vs Volkov</h3>
            <p>Sat, Feb 6 / 5:00 PM PST</p>
            <p>UFC APEX Las Vegas , NV United States</p>
          </a>

          <a
            href="https://www.ufc.com/event/ufc-258"
            className={styles.card}
            target="_blank"
          >
            <h3>UFC 258 - Usman vs Burns</h3>
            <p>Sat, Feb 13 / 7:00 PM PST</p>
            <p>UFC APEX Las Vegas , NV United States</p>
          </a>
        </div>
      </main>
    </div>
  );
}

Save and push 🚀

Now that the ci/cd stuff is done, let's point whenarethefights.com to our app.

Pointing the domain to our vercel app

I followed these instructions loosley to get it working. I did however go through cloudflare as well so there was an extra step.

This is part of my experiment to try and write 250,000 words in 2021. It's not accurate and is just meant to loosely track progress.

Current word count: ~2723 / 250,000

Daily average: ~101

Daily average Goal: ~685

Update on 250,000 #1

Mike Bobadilla — Tue, 26 Jan 2021 05:53:56 +0000

I started trying to do this challenge without any sort of schedule or plan. I just started writing about whatever came to my mind. The problem with that thinking is it really only works for tweets and small paragraphs. I was stuck just getting half-baked idea on the page.

Problems I noticed:

I spent way too much time worrying about hitting my daily word count that It stopped me from even writing anything down.
I found myself looking at ways to monetize the site with newsletters, affiliate links, etc. No ones even read the fucking thing.
I was being really shy for whatever reason while I was writing.
I completely forgot that this was just supposed to be fun and who give a fuck about anything else.
I was worrying too much about writing the way that I speak. I say fuck. so what.

I was listening to Atomic Habits and in the first chapter my problem was pointed out; I was spending too much thinking about the goal and not enough time thinking about the process (He called it a system). So now I need to create a system that will work for me and help me succeed in this goal.

Action Items:

Update the word count to reflect the year instead of whatever I have now.
Spend a day or two outlining a topic and working on a rough draft. Then I can write a longer post but meet my daily word count.
Don't worry if I hit the word count or not. Just work on the habit of writing consistently.
Fuck around more. This is just a personal life goal.

Current word count: ~1964 / 250,000

Daily average: ~79

Daily average Goal: ~685

Setting up a Raspberry Pi Cluster

Mike Bobadilla — Tue, 12 Jan 2021 05:31:08 +0000

For whatever reason, in my head, running software on a raspberry pi is a lot cooler than running it on my macbook. I have one running pi-hole and a couple others just lying around, so I thought of something to use them for. I have a couple web scrapers running for whenarethefights.com on lambda and thought it would be nice to move those to a pi-cluster.

I already had 3 pis so here was my shopping list:

Installing the OS

So after I got everything I just need to flash each sd card with an OS. A list of them can be found here. I chose Ubuntu Server for no reason other than I have used it before on Digital Ocean. To flash each card I used Etcher. Its pretty straight forward and keeps me from having to use dd. I knew I wanted to run these in a headless mode so I need to place an empty file named ssh on each drive after they were done flashing. To do this you will need to re-mount the drive after Etcher ejects it; The easiest way to do that on Mac is to use the disk utility.

This is the disk utility panel

Once mounted, you can open up the terminal to place the empty file.

cd /Volumes
# find the drive with the rpi OS
cd <OS Drive>
touch ssh
cd

Unmount the drive and repeat for each drive you have

Setting up each Raspberry Pi

I like to set one pi up at a time because each pi sets its hostname as ubuntu and I don't want to arp for the ip of each one and guess. My plan was to name each pi green-pi, white-pi, etc according to whatever color ethernet cable is plugged into it. Load all the sd cards but only plug one of the pi in and wait a min. You should now be able to ssh into the first pi.

ssh ubuntu@ubuntu

# When asked for a password, enter 'ubuntu'. You will be asked to change it to a new one.

Now we need to change the hostname and restart so our dnsserver picks up the new name.

hostnamectl set-hostname green-pi
sudo reboot

If you try to ssh to ubuntu again it won't let you since the ssh keys changed, so you will need to delete ubuntu from known users. Open up ~/.ssh/known_hosts and delete the line with ubuntu on it.

vim ~/.ssh/known_hosts
ubuntu,192.168.0.88 ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBGGRsJ...

Repeat for each pi.

Log into each Pi

So now that they are all set up, we need to log into each one so we know we can. Since the hostname was updated we should be able to use the new hostname.

ssh ubuntu@green-pi

# Enter the new password you created

Once we know that works, let's copy our keys over so we don't need to enter a password anymore.

ssh-copy-id ubuntu@green-pi

# Enter the password again. When it's successful it will log you out and tell you to login again.

ssh ubuntu@green-pi

You should be able to login without a password now.

Setup your ssh config

Less typing is always better for me so the final step is to set our ssh config so I don't have to type the username anymore. Open up ~/.ssh/config and place the following:

Host green-pi
  HostName green-pi
  User ubuntu

Host white-pi
  HostName white-pi
  User ubuntu

Host blue-pi
  HostName blue-pi
  User ubuntu

After adding that you can just ssh with the hostname and be done.

ssh green-pi

Now that the pi cluster is set up it can be used to do anything. We can do all the buzzword things like Blockchain, Kubernetes, crypto mining.

Just kidding, we're just gonna put some web scrapers on them.

Photo by Clint Patterson / Unsplash

Current word count: ~1681 / 250,000

Daily average: ~560

My Remote Workflow

Mike Bobadilla — Fri, 08 Jan 2021 04:59:24 +0000

I love my 2012 Macbook Pro. It got me through school, helped me learn JavaScript and Python, got me my first full time tech job, etc. I took it everywhere and used it all the time, but it started to get old. JS libraries and frameworks began to become extremely bloated and CPU intensive for development. All those libraries/frameworks are great when optimized for production, but to keep a great developer experience it comes at a cost. Now it's more about standing up an entire infrastructure locally like PostgresSQL, Redis, , plus all my Chrome tabs. My poor MBP couldn't handle it all so I started looking at ways to offload as much as possible.

The easiest thing to offload is the database layer. Some people like to use sqlite, but I'm not really a fan since I like to use one DB in all stages to avoid any surprises. The easiest and free way is stand one up on Heroku or something similar. The heroku-cli is pretty nice and easy to use and only downside is having to learn it like every other abstraction layer. This method just means for every DB you want to setup, you have to go through the same process and keep the URI saved locally. Not a big deal, but can be kind of annoying.

This worked fine for persisting data, but I still need a backend server and a frontend. So usually it's something like this:

So it's actually two servers running two sets of code. Frontend is usually a React app using Create React App and the backend is some flavor of Node (Express, Fastify, Hapi). This is pretty standard but I really only wanted the frontend code to run on my laptop since Im usually just on the couch or my bed and my desktop is in my office. So the next step was to just run the backend code on my desktop like this:

This is better. Well, not really. Now if I want to update both the backend and frontend I have to do it in two places. I'm kind of lazy, so I'm thinking the ideal setup is to keep the everything in one place and treat my laptop as the client.

Now my laptop is just running a browser and I can connect to my react app with http://desktop:3000. The only problem is now I have to update my frontend code to point to the desktop IP instead of localhost. I don't want to that. I just want to hit everything with localhost like I would be if I was running everything on my laptop. SSH port forwarding, or SSH tunneling, to the rescue.

So I would open up my terminal and type the following to connect to my CRA running on my desktop.

ssh -L 3000:localhost:3000 desktop

I would also open up another session to connect to my backend service.

ssh -L 8080:localhost:8080 desktop

This works and is pretty neat, but like I said earlier, I'm lazy. Two separate shell sessions just to connect to two ports is a bit redundant and wasteful, we can let our ssh config take care of this. So let's open ~/.ssh/config and add the following lines

Host remote-desktop
  HostName <desktop-ip or hostname>
  User ubuntu
  LocalForward 3000 localhost:3000
  LocalForward 8080 localhost:8080

The reason I create a new host for remote-desktop is because I don't want it linked to the same hostname since it will try to open the same ports and create errors. I think it's better to keep it separated.

It is still a work in progress, but I'll cover how I have it set up to edit code remotely as well using VSCode and Tmux in the next article.

Current word count: ~1000 / 250,000

Daily average: ~500

The road to 250,000 words

Mike Bobadilla — Wed, 06 Jan 2021 16:40:31 +0000

Im not even sure where to start, but 250,000 / 350 = ~715 so that sounds kinda doable. So the thinking is that I write around 715 words a day and by the end of the year, I will have written 250,000 words. I'm sure most of it will be crap, but who cares. At this point I'm writing for myself.

I always wanted to try and write so the main topics I am thinking of writing about are:

Programming
Deploying code
Mentality
Stuff I find interesting
My family (maybe)

For the programming posts that I work on I am going to avoid beginner tutorials. I think there is plenty of content, made by really good developers, so Im not going to do that. The main focus here will be things that save me time and stress.

Deploying code is weird. I remember just using FTP to push my new pages to my shared hosting provider. Now, you can do a JAM stack, Serverless, VPS, blah blah blah. There are so many that it's a bit overwhelming. Deployment posts will be more of a documentation for myself instead of a tutorial. I will be writing for my future self, kinda like coding.

Mentality posts are going to be the most difficult ones since they can be super intimate. I hope these posts can shed some light on how much a toll imposter syndrome can take on you. I still struggle with imposter syndrome every day, so maybe these will be a bit therapeutic and might actual help someone else.

My things Im interested in posts are the ones I am actually looking forward to. I like a lot of random shit and I am hoping this will give me reason to just share some weirdness with others. And also for me to remember what my flavor of the week was.

Im sure the word count will go up as I write more of these, but I just need to get the first one out.

Current word count: 343 / 250,000

My last year with a side project

Mike Bobadilla — Sat, 04 Jan 2020 03:19:25 +0000

I started https://whenarethefights.com a year ago now and it kinda flew by. It all started out with a post on Reddit and I was completely shocked that more than just me had a use for it. I was immediately starting to think of ways to improve the site and the easiest way to do so. I tried to listen to everyone on Reddit and tried to find ways to improve the way I collected fights. This was a mistake. I forgot about the actual problem I was trying to solve and that was just to let people know when the next fight was. Over the last couple weeks I have started to think about how I can just go back to square one and do what I set out to do. I wanted to build a community around combat sports in the spirit of The Underground and /r/mma. These were the places that I found out about all the fights that were coming up and which fighters to pay attention to.

Since I started it, I went through 3 designs on the frontend and one change on the backend. The site first started out as a React app using Create React App, hosted on Netlify (where this is now) just to get things moving. I quickly found out that Google’s search results weren’t really nice for JAM stacks and being that I wasn’t well versed in SEOfu, I thought maybe just use a static site generator. I wanted to mess around with GatsbyJS, so why not. It’s been one of the better decisions I made since starting the project. Another big change was switching my data store from Google’s Firebase to Postgres on Heroku with Hasura. I’m at the point now where I want to start trying to build a community where smaller promotions and other users can add events. I created /r/whenarethefights for a spot to talk about some future ideas.

Some things I have planned for the next few months are:

Weekly newsletter on Sundays with upcoming fights and results
Accounts with locations and preferences
Social media sharing and notifications
New design with a smaller payload. I want to ditch Semantic UI
Once ^ happens I can start thinking about an native app for people that prefer something like that, if there is enough demand for it
Open up the API to the public so other sites can let people know when the fights are

Here is the last year on Google Analytics. Every spike is a Saturday, the common fight day during the week. I think the most interesting part about this is you can actually see when bigger fights are happening. Data is pretty cool.

Setting up git autocomplete on mac

Mike Bobadilla — Thu, 05 Sep 2019 02:39:32 +0000

Mac's git doesn't come with auto complete, which is obnoxious, so I just run this is on my new systems. You don't have to do it this way and just piece it together for yourself using the git site like I did.

cd
curl -O https://github.com/git/git/blob/master/contrib/completion/git-completion.bash
echo "source ~/git-completion.bash" >> ~/.bash_profile
source ~/.bash_profile

This is the code I run. Trust but verify ☑️

This is also stored in my current setup page