Ninja Space Content Blog

I started learning JavaScript in July 2020 and had been using strictly CSS to style my own apps but I've decided to take a stab at bootstrap with React Bootstrap. There's a learning curve and at first, I thought, it'd just be faster if I style all of this myself with CSS. However, I know that in a lot of job descriptions, bootstrap comes up in the tech stack as a preferred skill to have. After working with it, I realized, it could save me a lot of time making sure everything is formatted correctly if I am focusing on just functionality. Here's what I learned and some tips from my personal development.

Things to make sure not to miss when utilizing React Bootstrap for my App were the following:

1. Add

   import 'bootstrap/dist/css/bootstrap.min.css';

   to my main index.js of my src folder.
2. Then, import the individual components in the files that I am utilizing the React Bootstrap for. For instance, if I am using the Form component and the Button within that Form, I would need to import both Form and Button. Just importing Form will throw an error if you're also utilizing the Button as well inside of it. To show an example, these are what I imported at the top:

   import Button from 'react-bootstrap/Button';
   import Form from 'react-bootstrap/Form';

3. Instead of using the Nav feature, using an Accordion is a good option. To read more about the Accordion component you can use from React Bootstrap, go to: https://react-bootstrap.github.io/components/accordion/
4. I really like using the Carousel component from React Boostrap. It is so easy to use and makes it easy to add something interactive that makes the design of your page more exciting. See Carousel options here: https://react-bootstrap.github.io/components/carousel/

After you're set up and ready to implement whichever code you're interested in within the list of react bootstrap components, take note of the variants as this will allow you to utilized their existing list of styles. As default, the buttons are blue but you can change this if you input the appropriate variant you'd like to use.

I'm currently working on building a postgres database for a new project and wanted to get what I have so far deployed on Heroku. Something has changed since I've last deployed a database(db) project on Heroku, which was only 2 months ago!

When I tried to seed my data on Heroku after doing a git push, I kept getting this error in my terminal "UnhandledPromiseRejectionWarning: error: no pg_hba.conf entry for host"..."SSL off". This was an error that I've never encountered before.

After a quick Google, I found that someone also had the same issue on stack overflow. It's definitely related to ssl. See more on the stack overflow link. Since I am working with node, I've found the Heroku documentation regarding this and it was very thorough. See Heroku's main resource on postgres ssl issue: https://devcenter.heroku.com/articles/heroku-postgresql#heroku-postgres-ssl.

If you're also working on a postgres database with node. Here's the exact thing I had to model after below:

const { Client } = require('pg');

const client = new Client({
 connectionString: process.env.DATABASE_URL,
 ssl: {
 rejectUnauthorized: false
 }
});

client.connect();

Note that this is the code you will need to deploy with for Heroku only. For development, make sure the connection string is set locally. It will cause errors when you use the model code above for developing but don't worry, use the snippet for Heroku deployment. The key thing is for deployment, you need to add the ssl: {rejectUnauthorized: false} for Heroku. After I've deployed on Heroku, I ran my seed data and saw that my seed data was successfully shown on my deployed link. I commented out the model snippet and then, just have my connection string to my localhost again while I'm developing. I hope this helps you!

I recently deployed one of my websites on Godaddy's shared web hosting and decided to use one of their third party integrations called Installatron that's under their Cpanel. It has been a nightmare to get it working, even though it seems like the easiest thing to integrate.

I have talked to over 5 different tech support reps from Godaddy via their chat tool and it seems like the chat gets timed out or something because like every 30 or 45 minutes, I get a new tech support person. It's a pain and it's like I'm stuck in a loop. First, they said I have to use an email address that is linked to the domain so I did that. Then, they said, I should try using a different email address and I tried that. And then, they said they have limited resources to integrating this tech because it's a third party. If it is this difficult to figure out, I really think they shouldn't list Installatron as a solution under their Cpanel. 

After a few weeks of not getting this figured out because the last Godaddy tech support person totally ghosted me, today, I've decided to give up completely. I uninstalled it and feel relieved.

I suggest finding another way to create a Contact Us form. I ended up using a Node library called Nodemailer.

I had an interview with one of the big six companies earlier today. When I say 'big six', I'm referring to one of the following: Amazon, Facebook, Google, Netflix, Apple or Microsoft. I'm not going to tell you which one because I signed an NDA and I want to go further and don't want to jinx anything by telling you the exact one. I'll let you guess!

The company had me do 4 interviews in one day and because we're still in a pandemic, it was done remotely. Normally, they would have me come to their office for these back-to-back interviews but I was thankfully able to do this all from my home via video conferencing.

I've never been interviewed by a big six company before so this was a very unique and intense interview day. I'm pretty exhausted from the mental stress of doing this but I understand why they do it. They want to make sure they get the right candidate for the job. They're the best tech companies because of the people they hire.

There were technical parts and behavioral parts to the questions they were asking me. Each interview was 50 - 1 hour long. I had 30 minute breaks after the first two and only a 15 minute break between my third and fourth interview. After the near 5 hour process, I was really beat.

Before the first interview started, I was so nervous. With four interviews in one day with 6 different people, I was questioning why I am putting myself through this mental anguish when I felt that I wasn't ready yet. I started doing the chicken dance around the house to get my nerves out before my interview process started. It didn't seem to be working.

I jumped up and down and started doing chants while swinging my arms in crazy motions. I really thought I was losing my mind. I've never been so nervous for an interview before. I just graduated from a coding bootcamp in Dec 2020 and doing a carrier shift. It was humbling to meet my interviewers, who are so advanced in their careers and you can just tell that they are all so intelligent.

All in all, even if I don't get the job (which they said I would find out whether I do or not next week), I know what I need to work on to increase my chances of getting hired. If you're actively interviewing like me, hang in there. Make sure you're finding the job that fits your exact skillset.

Here are the steps that I took to deploy my React App today: 

1. First sign up for a free AWS account
2. Create a new app in AWS Beanstalk
3. Use git to bundle my source according to instructions here: $ git archive -v -o myapp.zip --format=zip HEAD
4. One thing that I noticed that AWS Beanstalk looks for to run the files in there server.js (back-end) and client folder (front-end). So I'll need to make some changes. Example: my server file should be named server.js and not "index.js" like I have now. Also, they run the server on PORT 8081. So if you've configured your PORT to 4000 or whatever in your file, you'll need do a configuration change or I'm just going to try to change it in my file directly.
5. (Still in process to deploy -- stay tuned)