Ninja Space Content Blog

During my coding bootcamp, we were using Heroku with heroku-18 on a free version. However, Heroku is changing things. Last November, Heroku eliminated the free version and heroku-18 is now deprecated and will reach end-of-life on April 30, 2023! 

All of my databases and API end points were down for a month because I was hosting all of them on Heroku via their now deprecated free version. 

Below are my outlined steps that I took to upgrade my heroku-18 to heroku-22 and subscribe to their lowest tier plan, Eco Dynos. For my Steps #1 - #5, I followed the steps from Heroku, which you can view from this link: https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack, with a couple of modifications because of the way my app was already set up. They recommend you doing a test first which you should, but I didn't do it. It's not a money-making API and I'm solely just keeping it for my portfolio so I skipped the test and went straight to upgrading. In a real workplace situation, I would never skip the test. 

Steps:

1. I went into my folder where my app sits on my computer and opened it up in VSC.
2. In the command line, I typed the following to upgrade to heroku-22: heroku stack:set heroku-22 -a 
3. After that was successful, in my command line within the app in VSC, I typed: git commit --allow-empty -m "Upgrading to heroku-22"
4. Then, I pushed it to heroku master for deployment with this command: git push heroku master
5. Unlike the instructions, I had originally deployed this with heroku master and not heroku main. Yours might be different. Then, I typed in the command line: heroku info to make sure it is listing heroku-22 for Stack and it did.
6. Then, I logged into my Heroku Account via their website and now went through the app to add the postgres add on for an additional $5 per month so that I can use my database and also subscribed to the Eco Dynos plan for $5 a month under the "Resources" section. Good bye, money. 
7. After adding my postgres package to the heroku under my plan, I now have to seed the data onto heroku on the command line. Uniquely for me, it is: heroku run npm run seed because I had set up my app this way and I use Node.
8. To test that my postgres add on has been done successfully, I did a query on the Dataclips interface from Heroku and saw data when I did a query like this: select * from activities; because one of my tables is named 'activities'. Great, saw data on Dataclips via Heroku! However, I could not see anything on my API end point URL. I was racking my brain for like 25 minutes because I knew I added the Eco Dynos subscription and so I went back to my Heroku Log-in and under the "Resources" section and noticed that it didn't automatically toggle it to the right to turn it on!
   
   So, remember that you still have to go make sure it is turned on and toggled to the right side. After I did that, my API ends point worked again. JSON never looked so beautiful. All done!

Pro

There is one pro from this heroku-18 deprecation. There is a lot of APIs that I created and don't care to keep up with so when heroku-18 deprecates and all of my app names under those disappear, it is just cleaning out the trash for me. I'm only concerned with 2 sets APIs and I finished deploying the first one today with the upgrade and subscription (see my 8 steps above).

Con

The con from all of this change is I'm going to have invest and pay the $5 per month (I chose the cheapest plan called Eco and Basic) for the APIs that I want to still work on and also the additional $5 a month on top of that for the postgres database add on. 

Cost

It is going to take cost me $120 for this server and database to run on Heroku per year but since it is my main full stack portfolio piece, I'd like to keep it up on Heroku for now.

It took a good full 2 hours for me to read the documentation on upgrading, subscribing and adding on today on Heroku and to also go through my 8 steps above. I'm still a noob so it takes me longer than a pro, but I know if I decide to still do this for my second database, it'll be faster the next time around. I'm going to wait on the second one as I want to improve some elements beforehand before forking out more money.

At the start of this blog post, all of my API end points were down but now I can happily say that one set is working again. 

:) 

Eating Ramen Efficiently:

Recently, Google Analytics is always showing a top banner to remind Google Analytics users that UA (Universal Analytics) is going away on July 1, 2023 and we'll need to embed the G4 code instead. 

The Google Analytics banner message says: "Universal Analytics will no longer process new data in standard properties beginning July 1, 2023. Prepare now by setting up and switching over to a Google Analytics 4 property." Now, it's still over a year away from today's post before UA goes away but I'm starting to add the G4 code to the head of my site whenever I'm already having to go into the files to update something on any of my websites so that I can start to compare and contrast the differences of the reports.

I've already added the new G4 code to at least 5 of my websites. First off, I quickly noticed that there are less options for reports on the left side menu for G4 reporting but maybe that's a good thing because I didn't and still don't always use every sub-menu feature of Universal Analytics. Here are other differences that I noticed:

Realtime Reporting Differences
Another obvious difference right off the bat between the two versions is Realtime Reporting. Realtime Reporting for the G4 shows more users on my site at any given time than UA Reporting. I think that's because they are keeping the time frame the user enters a page wider for that report. For instance, I may see 3 users on real time reporting on G4 while I would only see 1 for the UA code on realtime; and I'm opening both side by side at the same time so it's been interesting. I particularly like the map of my realtime users of the G4 Realtime dashboard! It's wonderful!

Reporting on the Current Day
While I like that the G4 Realtime Reporting is reflecting cool features and showing a larger number of realtime count than the UA Reporting realtime count, if I were to want to go into an overview of today's analytics, G4 doesn't seem as accurate as the UA for that. There would be mornings where I'd go in to see how many users have gone to my sites today and there could be 20 users reflected on the UA reports but only 3 for the G4 reports. I'm assuming it's taking longer for G4 to pull today's number up to the minute. Maybe this will get better as we get closer to 2023. We'll see.

Do I like G4 better than UA?
Thus far, I think I do like G4 better. I think keeping realtime user count for any user within a wider timeframe is good. Many times if I see a realtime user is currently on my site from Google Analytics, I would refrain from publishing an edit until I see that count to 0. I don't wait until in the middle of the night to publish an edit for many of my sites because sometimes my content needs to be updated to reflect accuracy on event details. So keeping that range wider is reducing the possibility that a user is landing on my site while I'm in the middle of a publish and therefore, reduces errors for them.

I'll definitely add more to this if I've discovered anything more that I wish could be better or any other Pros and Cons.

Fun T-shirts:

To find all git files in your machine type the following in the terminal: find . -name .git -type d -prune

Shortcut: Click F2 and then change the variable name and click 'enter' to change all variables that is the same as what you selected before hitting F2.

Things I didn't remember to do when trying to create my server and database from memory:

1. Install nodemon by: npm install nodemon --save-dev
2. To pull variable from .env after configing is process.env
3. After creating the database name in psql. \c [database name] to make sure you're in that database to create new tables.
4. Type \d [table name] to see schema that you've just created.
5. PSQL is very strict. Must have a space after the table name like so for inserting data: INSERT INTO people (firstname, lastname) VALUES ('firstTest', 'lastTest');
6. When updating PSQL database, make sure to use single quotes. Double quotes won't work. Example: UPDATE people SET firstname='James', lastname='Taylor' WHERE id=1;

Suggested Work Accessory:
A good laptop stand can give you a better angle for Zoom calls and avoid that double chin look.

I haven't finished my Angular tutorial yet but I'm going to have to shift gears here and start learning GraphQL. It's been said that it's a great alternative to Rest API as you only need one end point to get data for a group of tables in your database. You implement GraphQL in the back-end of your project. I haven't started coding in it but what I always do is watch a lot of YouTube videos and documents to narrow down the resource(s) that I need to look back to. Here are my notes.

PROS for GraphQL from watching Pedro Youtube:

• You only need one end point to get data from a group of tables which is /graphql
• You can query to receive only the data you need.
• GraphQL is strongly-typed.
• You can utilize the GraphiQL to test a query in the browser and try the end point
• If using PostgreSQL, you will need to use pg-promise library so there is familiarity if you're used to PostgreSQL.
• You won't need a body parser?!
• Gets rid of REST
• You don't have to make many calls. Just 1 for data you're looking for even if it's nested information

CONS for GraphQL: