Silly projects count

September 04, 2019

I love making silly little projects. The more pink and purple and glitter I can put into it the better. If it looks like a 4th grader's Trapper Keeper from the 1980s, it is perfect.

My latest project Liquid Hot Magma is an example of this.

Outline for my silly site process

  1. Buy a silly domain name.
  2. Forget about the domain for several months.
  3. When reviewing your domains, remember that you were going to do something silly with it.
  4. Forget about it for another month.
  5. Finially decide to make the site and do it in an afternoon or weekend.

Indepth process

The good part about forgetting about my silly projects is that I keep trimming what the project is until it is something very small. I find it is always easier to add things to a site or project versus removing them.

The core of this silly website was hosting a Dr. Evil gif.

I used Google's Firebase Hosting for this project because I wanted to see if I remembered how to do the setup and I bought the domain through them.

Create GitHub repo

First thing I did for this project was create a GitHub repository. I admit I commit directly to master, especially with little projects. But it is a great way for me to timestamp and organize my code.

I create the repo online because I can easily add preconfigured .gitignore and license files.

I use the git clone command to pull my newly configured repo into my local code folder and start.

I created a blank index.html file and proceeded to work on my Firebase configuration.

Configure Google Firebase

I created the project in Firebase.

I updated my firebase-tools command:

npm install -g firebase-tools

and then logged in:

firebase login

Configuring Firebase was simple. I ran:

firebase init

and it walked me through the steps.

I chose Hosting as the Firebase product I wanted and accepted the option for the public folder to be my local folder called public. As I already had created the project online, I was able to select it and it configured the .firebaserc and firebase.json for me. Finally as a last option, it asked if I already had a index.html as it would helpfully create or overwrite it. I overwrote my blank index.html and it also created a 404.html page for me.

Coding the page

I edited the created index.html. I removed all the JavaScript, changed the title element, and updated the text to say "Liquid Hot Magma".

It wasn't pretty, but it was a start.

The next step was to get a Dr. Evil gif I liked.

Curl

I used curl to download the gif I liked best. I could have used the browser and saved the file that way, but I like using the command line.

As an example, this command will download a copy of example.com directly into the location from where it is run and the copy will be named example.html.

curl https://example.com > example.html

I then added the img tag for the gif to my index.html.

I could have stopped here, it was a working page. But I decided on adding more whimsy.

Adding whimsy

I used Coolers to generate a suitable Lisa Frank esque pallette. I checked the contrast of all the colors with Hex Naw because I like to make sure things are accessible.

Once I had my colors, I started playing with the generated CSS from Firebase.

I was quickly able to make the gif appear like it was a poloroid photo on a beige background.

This also would have been fine, but I decided to add MORE whimsy.

Adding more whimsy

I looked around and found examples of lava lamp code. I thought having lava along the page would tie in nicely with the gif.

I added the javascript directly to the page in a script tag block. I played the CSS of the page until I was happy with the colors.

The gif was on top of the canvas element with the lava blobs. I wanted the lava blobs as the background.

I quickly looked this up as I didn't remember how to do it.

I came across several blog posts and forum posts on how to center a div on top of a element. This is when I was like "Oh yeah, totally absolutely position the div and update z-index!"

The trick to centering abosolutely positioned divs, is to set the left afttribute to 50% and have a negative margin half of the width of the thing you are trying to center. So in my case, the Dr. Evil gif is 480 pixels wide, so I set the left margin to negative 240 pixels.

#photo{
    position: absolute;
    left: 50%;
    margin-left: -240px;
    z-index: 100;
}

Now things were looking really awesome. I pulled the CSS and JavaScript out into their own files and updated my 404 page to use them.

Deploy

Being that this page wasn't using any preprocessors or libraries, I was able to check my progress by opening the file in my browser. I ran accessiblilty checkers against it, and made sure it would work anywhere.

The last thing I had to do, was to deploy it. Deploying my code was super easy.

firebase deploy

I did end up deploying it several times as each time I was happy with it I wanted to share my progress with my friends.

Last thing I did, was to point my firebase app to my custom domain. The only tricky part is when adding multiple A records in the DNS section, there is a little plus sign next to the IP box. You must click this to add another IP to the same A record.

And that was it. Within a few hours my SSL certs were generated and my site was live.

Why something silly?

Simple, because it makes me giggle and laugh, I actually finish it.