I learned a lot from making my website. This is great! I changed the front end and back end. The front end is getting closer to being my PWA goal, and the back end uses great technology like Docker, Nodejs, and Postgres. And to submit blogs to my website, I have a desktop application where I can write new blogs and post them!

Front-end Changes

Anyway, I updated my website in a variety of ways.  I updated the styling to be more user-friendly (I hope) and more attractive (I hope again).  I did not think there was much use for my profile picture, so I chucked it out.  I did ask a friend for critique, and he said the main page should not show a link that has the blog name and date posted, but it should also show some kind of preview\*.  So that got chucked, and I replaced the links with a card-like inspired display of the blogs.

Not completely original, I agree but it looks better now than before with the links.  I did try some orignality, by not adding any drop shadow but putting a darker color outline around the card.  I like that effect. I also had every odd blog card styled.  I like this more.  There is a pattern to the blog website.

I also put the navigation bar permanently on the bottom regardless if viewed on mobile or desktop.  I chose to stick the navigation bar to the bottom of the screen, because I am experimenting how to make a blog more mobile friendly.  So it is either a push for my website to be viewed on mobile, or I am just recognizing that mobiles are just being used so much more.  Two of the icons in the navigation bar got some animations to add more flair.  I could add more animations later.

Now, I came across an issue that I might need changing.  The way a user would navigate to a blog and back is a bit of a JavaScript trick.  The intent for my blog website is to be single page.  How do I manage a lot of text content while staying a single page?  Just add in a some JavaScript DOM manipulation here and there.  I am not using any front-end frameworks, because I do not think that my small and meager website merits any use of them.  The JavaScript is click on the box, see the blog.  Click on the home or back button to go home.  Easy.

You can see the code here.

What is lib and hljs?  I am glad you asked. lib is just a super-mini library that I use for my purposes, and hljs is actually a library. hljs is pretty common I’m sure. I am using hljs because my blog is a technical blog, so that might as well be used.

If you look at my code I am also using the history.pushState() web API. This is how I achieve my “back” trick. I push the history state to include an API ending, which by coincedence is the same API ending to get a blog from my database.

In a non-technical way, when a user hits on a blog card, it takes them to the blog. The URL changes to show a page change, without actually changing pages. If the user hits the back button, then the URL changes and a forced refresh happens. The forced refresh shows an illusion that it was a page change to actually get to the home screen.

I probably need to change this, because this does not seem too entirely mobile friendly in my opinion. I will see in the future what I think about it.

back-end changes

The website’s backend is now converted over to the Docker Daemon.  I previously talked about that in a blog. I want the Docker Daemon to run my website, because Docker just seems so flippin’ cool. Especially the Postgres docker image, I’ll talk about that in a moment.

The first iteration of using the Docker daemon used big images, and the current iteration uses smaller images. I noticed that the size difference was considerable. When I deployed the lite version of my website, I made sure to take some notes on image sizes. Behold!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

ORIGINAL BACKEND
server_gme_server - 723 MB
db_gme_database - 289 MB
postgres - 289 MB
node - 676 MB

TOTAL 1977 MB ~ 2 GB

NEW LITE BACKEND
server_gme_server - 126 MB
db_gme_database - 39.5 MB
postgres - 39.5 MB
node - 68.1 MB

TOTAL 273.1 MB

SAVINGS
13.8% of original size!
86.1% of savings!

Now what did I do? The new version is 13.8% of original size! First, I decided to use the alpine docker images. That made sense. They are definitely a lot smaller than the original images. But I think there was another key thing that contributed to the savings on space. My new server_gme_server image is 17% of original size! Now a lot of that trimming may have come from switching node versions. But I also realized that my whole node_modules and was being added to my server_gme_server image! That could definitely save some more space. So here is what I did. I added a .dockerignore file to ignore the node_modules folder. Last, I added the next few lines to the Dockerfile for the server image build.

1
2
3
4
5
6
7
8

# Install any needed packages specified in package.json
# Be sure to run the production build
RUN npm install
RUN npm run prod:make

# Get rid of all dependencies and only install prod
RUN rm -rf ./node_modules/
RUN npm install --only=production

So I first install all the dependencies to run the npm run prod:make command. The prod:make npm script runs a rollup process and it uglifies the CSS. I then remove all the node modules and then I only install the production modules. As I was testing this out, I noticed that about 600 modules were installed with all, and about 100 were installed with production. Whew! Now I don’t have 500 modules sitting around doing nothing.

I am using a Postgres Docker image to hold my data. Postgres Docker image is super easy to set up! I say it is super easy, because I tried to do the same with a Mongo image, and the Mongo image was hard. Check it out! To setup the Docker image, all I needed to do was set some environment variables upon build of the image and drop a seed file in a specific spot. Starting the image would seed the database and the enable authentication with the provided environment variables.

I tried getting the two image services to work together in one docker-compose.yml.  It just does not want to work for me. It seems to work for so many other people. What happens is either a refused connection, because the database setup finishes after my server setup finishes, or credentials do not match up. Beats me! I will probably figure this out sometime. I tried doing the same with the Mongo image to the same results. To provision a temporary solution, I make a docker network and attach the two services separately using their own docker-compose.yml files.

blogger

So that I could have easier access to post blogs, I also made a custom blogger out of Electronjs. This would essentially be the administration side of my blog. It was simple, I used ToastUI for the text editor and JSON Web Tokens for security.

ToastUI is great because I could send markdown to my database. I am also seeing how nifty and great this tool is. I would definitely use it in the future!

I need some security if I am going to setup a REST API to post blogs to the database. So I set up an authentication process. I first send a token password to the server requesting a token. The server verifies the token password, then it encrypts the token password with a secret server phrase as the token. Once the token is received, then I can send a blog to the server with the token and a database post password. I hope that is secure haha…

notes