Ninja Space Content Tech Blog

Upgrading From heroku-18 to heroku-22 and Subscribing to Eco Dynos Plan

December 20, 2022
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!
    How to turn Eco Dynos on for Heroku upgrade
    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:
 

Pros and Cons of G4 from Google Analytics Versus Universal Analytics (UA)

April 9, 2022
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:
 

How to Reset the ADT Doorbell by yourself

January 4, 2022
Here are the Steps that I learned from an ADT technician by watching him service an ADT doorbell that I was having trouble with:
  1. Hit the Reset button in the back of the ADT doorbell with a pen or pointy pencil until you hear a ding (usually about 10 seconds).
  2. Go to the Computer and log into the Pulse ADT website (https://portal.adtpulse.com) and enter your account information. Go to "SYSTEMS". Click the "Manage Device" button and select the right device.
  3. Enter the 8 digit pin.
  4. Click on the ADT Doorbell (not the reset button) where a normal user would. The instructions online says to do it for 5 seconds but the technician did it in front of me and he only pressed it quickly and it worked. This will cause the camera to blink in green continuously.
  5. Go back to the computer to watch it process and sync the device to your account. Within a minute, it should be synced up now.
Verbal notes shared by the technician:
  • When you lose electricity, the battery life on the ADT doorbell device only lasts for 1 hour, at least my device version is this way! So, charge up using the USB cord as quickly as possible.
  • Technician says charging it for 6 hours should fully charge the doorbell via the USB plug.
  • If the ADT doorbell ever breaks and as long as we're a paying ADT customer, they will replace the ADT doorbell with a newer ADT doorbell for free.
  • They don't service new Ring doorbells under ADT anymore so if you had one from ADT, you got lucky. They are only selling and installing brand new ADT doorbells now, not Ring doorbells. They will help with an existing one if the Ring device was installed under the ADT plan previously. 
Related Doorbell Devices:

 

MISC: Useful Commands, Keys and Notes

October 16, 2021
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.
 

My GraphQL Study

October 16, 2021
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:
  • You'll be required to install a few additional libraries and add more folders and files like schema or import schema from the graphql library
Differences for GraphQL versus Rest API that stood out to me:
  • Instead of using req.body or req.send, you use resolve. You send your queries with resolve and don't need to create database adapters except to create your table.
  • npm install express-graphql graphql
  • This doesn't work anymore: const expressGraphQL = require('express-graphql'); Replace it with  const expressGraphQL = require('express-graphql').graphqlHTTP
  • This is an example of a query using GraphiQL: 
    query {
     person(id: "1") {
      id
      firstname
      lastname
      emails {
       id
       email
       primary
      }
     }
    }
    

This a great resource to read on starting up the files: https://medium.com/codingthesmartway-com-blog/creating-a-graphql-server-with-node-js-and-express-f6dddc5320e1

If your stack includes PostgreSQL, this is a great GraphQL article: https://blog.cloudboost.io/postgresql-and-graphql-2da30c6cde26

Journal:
October 16, 2021 at 2:21PM: I spent a good couple hours looking at 3 Youtube videos about GraphQL and a few readings from online so I'm ready to create a new project and utilize GraphQL for the first time. I'll build my server with Express first.

 

About Ninja Space Content


Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a JavaScript coding bootcamp and graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a small commission from each sale.
Work Station Accessories