Ninja Space Content Tech Blog

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.

 

AB Testing on Buying a Domain From Godaddy vs Netlify

September 14, 2021
I found something interesting this past week.

Last month, I bought a domain name via Netlify because I've been deploying my front end React apps there during bootcamp and decided to do something different with domain buying. Earlier this year in January 2021, I also bought another domain name but this was through Godaddy. I didn't think much of it. I buy almost all of my domains through Godaddy because that's what I've been doing for over a decade as I'm comfortable with their interface.

Even though my January 2021 domain that I bought through Godaddy has been live for 8 months and the Netifly domain has only been live for 1 month, my Netifly domain has been properly indexed already and showing up in Google search queries way faster than my other domain from Godaddy. The cost for me was actually cheaper through Netlify too!

I have a few theories on why this is happening.

First off, I built my own database for the Netifly domain, whereas I was pulling data from a public API for the Godaddy domain. Right there, was very key. I have unique content displaying for my Netlify website.

Secondly, any domain that I buy through Netlify, if I'm hosting it there, comes automatically with a secure socket layer. I didn't have to buy extra for SSL. Therefore, my Netlify site is secure from the get-go via https whereas the January domain purchase is not. Godaddy charges me extra for SSL certs so I usually avoid buying one unless my revenue justifies it.

Lastly, I was hosting through Godaddy's shared hosting which could be a very bad thing if I'm sharing the same IP address with another site that belongs to someone else that was marked as spam. That could affect my rankings and the way Google indexes my website.

I'm very happy with how my newer site is indexing in Google's search engine and can't wait to share any new findings. I highly recommend trying Netlify out if you're torn between using Godaddy or Netlify to buy your domain and plan on deploying a React app.
 

Integrating Google Adsense in a React App

August 17, 2021
For several years, I've been embedding Google Adsense on my websites to earn revenue. Part of the process is when I'm adding ads to a new site that I've just launched, I would need to add that site under settings for my Google Adsense account and wait for a review.

My Steps
  1. Go to your Google Adsense account and on the left side, select "Sites." 
  2. Go ahead and add a site here. Embed your code with your publisher ID in the head section of your website.
  3. Then, request Google Adsense to review it. 
  4. You will see this message: "Getting your site ready to show ads Please bear with us! This usually takes a few days, but in some cases can take up to 2 weeks. We'll notify you as soon as we've run some checks on your site. Make sure you don't remove your site and resubmit it because this can delay the process. In the meantime, place the code on every page you want ads to appear. After our checks are complete, your site will be ready to show ads. Remember to go to Ads and choose the ad formats you want to show"
  5. Now, this is the part that you'll need to be patient for awhile. When you check the console of your React App, you'll see this red error in the console "Failed to load resource: the server responded with a status of 403 ()" but don't fret, just be patient. It's because Google Adsense hasn't approved your request yet. When it has approved it, it will go away. 
I'll update this post to let you know how long this particular request took to approve.

Sept 14, 2021 Update: 
I was denied for Adsense for this website for not having enough content! I'm going to follow my own advice when I said, "Don't fret". I was successful with other websites that I've built for so I can make this work in a few months. Here was my denied message below from Google.

"We’ve found some policy violations on your site which means your site isn’t ready to show ads yet. Valuable Inventory: Not enough content It's important for a site displaying AdSense to offer significant value to the user by providing unique and relevant content, and not to place ads on auto-generated pages or pages with little to no original content. This may include, but is not limited to:
  • copying portions of text content from other sources
  • websites dedicated to embedded videos from other hosts
  • websites with gibberish content that makes no sense or seems auto-generated
  • templated or pre-generated websites that provide duplicate content to users."
Best advice is to just keep writing original content.
 

G4 Property Configuration for Google Analytics

August 10, 2021
I went into my Google Analytics today to create a new property for a new website that I've just deployed yesterday and new properties are now automatically G4 (new for Google Analytics)! The original Google Analytics still remain if you've configured a property way before this new set-up. However, you're not going to be able to find the tracking info that you're familiar with in the new set-up. 

Usually after I've created a new property, I can find my tracking code under "Tracking Info" but I couldn't find it with the new property set-up. I went back to an old property and I can see that right away since those were configured way before this.

The reason why I can't find a "Tracking Info" option for the new property that I have just set up is because the way that Google Analytics is set up now is tracked through tags! You can still use existing UA codes for the older properties and sites but for these new configurations now with G4 (Google Analytics 4), they don't supply a UA code. You just embed the gtag code.


How to find to your code with G4
As mentioned, new Google Analytics properties are set up with G4, which use gtag. To find your gtag code with the new G4 property config, go to 'Admin' just like before. But instead of looking for 'Tracking Info" (since it won't exist on the new interface), go to 'Data Streams'.


Then click "Add stream" and add your site URL and info. It will give you Tagging instructions. Find the "Global site tag (gtag.js)" and it'll have the Global site tag (gtag.js) - Google Analytics there.

Copy and paste that gtag script into the head section of your website. Then, deploy the site with this tag. You should see your site tracked on your dashboard after visiting it. The fastest way to check if it is tracking properly is after you've deployed the site with the gtag, go on your website URL in the browser and view the 'Realtime overview' dashboard. You should see that visit show up immediately (maybe within 2 seconds). It's pretty simple but it was a shock to me at first because I was so used to seeing that "Tracking Info" link for over a decade of my life. 

See my screenshot of my real-time dashboard of the Google Analytics property that I have just set up this morning.

Read about the differences that I've noticed between Google Analytics UA and Google Analytics G4 via this blog link.

 

Bootstrap and React Update

August 9, 2021
I'm looking up documentation on React-Bootstrap this morning and I noticed there's an addition in the npm install command. 
It is now:  npm install react-bootstrap@next bootstrap@5.0.2

Before, the documentation didn't mention the "@next part" nor the "@5.0.2". Then, in my main index.js file, I still imported the following at the top:
import 'bootstrap/dist/css/bootstrap.min.css';

It works the same. I am a big fan of the accordian component from bootstrap. So to use that, I just need to import the following at the top of the file where I'm using the component:  import Accordion from 'react-bootstrap/Accordion' and then copy and paste the snippet from bootstrap's official doc.
 

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.