Cats Coding

Github is a great tool for someone looking to host portfolio projects. They allow you to host your front-end HTML/CSS/JS apps on their servers using Github Pages. You can refer to Deploying React Apps to Github Pages for more info on that. It's pretty simple and you should use it as much as possible to host your front-end-only apps.  But, for more complex applications, it might not be enough. As part of the Complete React Developler 2020 Course on Udemy , I had the client and backend server code all wrapped up into one application. The back-end had to connect to a Stripe test server for credit card processing. It's a real-life scenario for an e-commerce website, something a bit much for what Github offers in terms of hosting. Enter Heroku!  Heroku is perfect for someone building applications with multiple layers of complexity. They are pretty complete with what platforms they support, and they have various pricing options. If you're going for FREE, you get what you pay for

Github has this great feature where you can host SPAs (Single Page Applications) for free. You can make calls to firebase, pull in json files and have other external integrations. There are limitations, such as react-router and related packages do not work. But static and relatively simple html, css, and javascript sites can be hosted without issues. So, how do we do this?  Well, it's pretty simple. 1. CREATE A GITHUB PROJECT REPOSITORY Once you create a new Github project that will hold your code, you will need the HTTPS or SSH link. You can get this by clicking the Clone or Download" button. Copy that link for step #2. 2. LINK YOUR LOCAL FOLDER TO GITHUB PROJECT REPOSITORY Usually, when working in a group, most companies require an SSH key for linking to Github. Here, we are independent and really only use HTTPS for linking to Github repositories. In case you don't already have GIT For Windows installed, here is the link. This will install all the git comman

In creating this blog, I selected Blogger's Contempo theme because it seemed the least distracting and best suited to my needs. All the other themes had a lot going on; they were a little too busy for my taste. One thing that bothered me about the Contempo theme was the way the background just cut's off as you scroll down the blog feed. The theme allows you to control the height with an exact value, but that wasn't enough for me. I wanted to either have the background repeat for the length of the blogger page, or have the background image static as the blogger feed scrolls over it. I chose to make it static. Here's what you have to do to make this change. 1. Go to your blogger and click on Theme and then click on the Customize button. 2. Remove the background image, no need for any additional bandwidth costs. 3. Go to Advanced -> Add CSS, and past the code below. The goal is to hide the Contempo blog's photo layover design so you can control the bo

In my adventures with React redux-saga, I've had to repeat the same process to create a new action, and there were a few occasions where I fumbled -- either I missed a step or did something out of sequence. As a result, I documented the process, step by step, so that in the future I don't waste time. I even created a small application to validate my instructions. I learned React with Redux-Saga in the Complete React Developer in 2020 Course on Udemy . I highly recommend this course. ( Note: Udemy usually has Flash sales for their courses that bring them all to under $20. This one is totally worth the investment.) To explain the process of creating a new reux-saga action, I will use a specific feature - the order search feature. It has a few parts: Upon a user's sign in, the user's orders will be fetched and presented. When a user signs out, the list of orders is reset. An admin can search for orders by a user's email. Note: If you want to skip this exp