26. Making the blog: responsiveness and deployment

Hello there,

Now that the site is up and running, I feel the need to jump into something else, find another problem and solve it. But I have to honor my better choices. Holding a log, or a personal documentation of how I solved problems related to development, is one of those good choices.

Experience shows that this is my way of learning.

As I was mentioning in a previous post, I ran in a few issues while developing the blog.

Making the site responsive

I implemented a new backend and frontend, which did not feel that complicated as making the site responsive. I understood after the did was done that I approached the procedure from the less advantageous side, I basically did what I was used with while working on simpler applications : created the frontend, felt my way towards a pleasing frontend and only then did I start working on the responsiveness.

It turns out, the most efficient way would be to develop an application with responsiveness and accessibility in mind: develop the frontend for small screens first, make sure that it works as desired and then add elements on top of that. Me, on the other hand, I build the frontend on a medium-sized screen and tried to make it fit in smaller and smaller screens. This means that I had to eliminate elements and adjust all the remaining ones to each other and to the remaining space.

Initially I had only one style sheet, which became giant in no time. So I decided to truncated it, create a separate style sheet for each element and keep a general sheet that styles elements present on all pages (header, nav, footer):

Each of the sheets contains these media queries : 

/* Medium devices (larger phones and small tablets, 476px to 768px) 
*/ @media (min-width: 476px) and (max-width: 768px) {}
 
/* Large devices (tablets, 769px to 1024px) 
*/ @media (min-width: 769px) and (max-width: 1024px){} 

/* Extra large devices (small desktops, 1025px to 1440px) 
*/ @media (min-width: 1025px) and (max-width: 1440px) {} 

/* Ultra large devices (large desktops and monitors, 1441px and up) 
*/ @media (min-width: 1441px) {}  

I arrived at these numbers by trying and asking my (by now) friend ChatGPT. By the way, ChatGPT is very helpful, I manage to understand the issues I am facing better and to solve them.

Once I added the media queries to each of the pages and continually tested each modification, I managed to arrive at a presentable, responsive version of the site.

Deploying the site

This is not the first time I deploy a site, even it this and those past are personal projects. So I was confident and probably had high expectations from myself : that the deployment would go as smooth as in the past.

Introspective detour : I still connect the failure of a function or an application as a personal failure. The feeling of not being smart enough does hit me in those moments of struggle when no matter the amount of troubleshooting I am stuck. But if I persevere and just step over those feeling as if over a dead body, I always arrive at a solution. It’s good to remember this desperate Victoria, says courageous Victoria. 😊

Why deploying was complicated ?

Deploying a Node application, with an Express backend and a database, is not as simple as deploying a singe page site. This blog is also a Node js application with server-side logic, database connections, and live processes.

I tried deploying the side using Back4App. I struggled quite a bit to understand the Docker part of the deployment, adding the Docker file and then creating a container, setting up the DNS settings for my custom domain and waiting for it to propagate. The whole thing took 1 week. Then it stopped working. On the Back4App dashboard, I saw a notification saying that my project was on hold, I needed to upgrade my access. I wanted my app to go live, so I did- $5/month. I was charged, and the notification disappeared, after a few hours the app was again blocked.

I could not figure out why and contacted the Support. The support team dangled the carrot in front of me for a week, asking the same questions I had answered already, and provided no help. On top of that, I noticed that my access was downgraded back to simple user.

WTF? I requested my account to b deleted and removed my app.

Things went much smoother with Vercel

Using Vercel turned out to be easy. I had to create a vercel.json in the root of my project :

{ "version": 2, 
"builds": [ 
{ "src": "server.js", 
"use": "@vercel/node" } ], 
"routes": 
[ { "src": "/(.*)", 
"dest": "/server.js" } ] }

Made sure that the Express app is correctly pointing to the views directory :

// Set the views directory explicitly using an absolute path 
app.set('views', path.join(__dirname, 'views')); 

// Set the view engine (e.g., EJS, Pug, Handlebars, etc.) 
app.set('view engine', 'ejs');

And that was mostly it, I created a new project on the Vercel Dashboard and followed the instructions for deployment.

As you’ll see soon, building this application was a very useful exercise for the next one, this one has a React frontend, a backend and frontend folders which communicate between each other. It was interesting to learn how to deploy them. For someone like me, someone who just scratched the surface when it comes to coding, someone who has to say “oh, this is possible” a lot, someone who does not have that intuitive understanding that I have when it comes to human languages, so I need guidance like a blind person does -well you get the point-for someone like that to be able to build a blog from ground up and make it available on the internet is amazing!

It feels good to be learning and building something 😃