DEV Community: kevinLearnsToCode

How to Treat Your Followers

kevinLearnsToCode — Mon, 23 Jan 2023 04:53:14 +0000

Hello loyal blog readers,

How are you both doing? So today's blog is going to focus on how I'm dealing with "followers" for the social media app that I'm creating. Before I started on the app, I already understood that followers are created by making a join table between two users - "the follower" and the "user_they_follow". There were a variety of articles I was able to find on the internet that walked me through how to create that relationship in my Follow model - this one serves as a good example (https://betterprogramming.pub/how-to-create-a-follow-feature-in-rails-by-aliasing-associations-30d63edee284) - but I'm going to focus on some ways you can treat your followers after you've created that basic relationship.

Since most people on social media are obsessed with seeing how many followers they have at any given time, I knew I could just leave this important information sitting in the backend. I needed to get those details displayed on the page so that the mythical people that are using my can brag to each other about their followers. So, I needed to create some methods. Method #1 was pretty straightforward - I wanted to display how many followers each user has on their homepage.

For this I just needed to create a simple method in the User model:

def total_followers
    self.followers.length
end

Here I'm just taking current user and accessing all of the followers they have through the has_many relationship and then grabbing the total number of those followers using .length. I then add total_followers to the user_serializer attributes, and display user.total_followers on the front and I have a super straightforward way to satisfy the narcissists on the app.

I created an equally simple approach to total up the number of people a user is following with method #2:

def total_users_you_follow
    self.users_they_follow.length
end

Now, it's not enough for people to just know how many people are following them - they also want to know who is following them. So, for this I went back to my user model and created method #3:

def list_followers
    self.followers.map do |follower|
        follower.username
    end
end

In this instance, I'm taking the current user and I map through all of the followers and return an array of all of the usernames of those followers. Now, later on, I might want to pass on more than the names and perhaps set up a new serializer so that I can actually send along more follower data to display, but since this project has to be turned in in two days, I'm just gonna handle the names for now. I posted the names as a string by posting the following to the page user.list_followers.toString().

Again, I just had to slightly alter things to gather the same info for who the users are following and method #4:

def list_users_you_follow
    self.users_they_follow.map do |followed|
        followed.username
    end
end

OK, that was all working, but I still had one more issue I wanted to resolve. Each user page has a "Follow me" button that when clicked sends the info to the backend and enters the user_id for both the follower and who they're following in the follows table, but, at the moment there is no indication on the front end that anything has happened. So I want to set up a ternary to display "Follow me" if the current user doesn't follow the person whose page they're viewing and "You Follow" if they do not follow that person. So... how do I implement this?

My first thought was another method since I was on a roll with those, but then I realized I could further utilize a couple of the methods I'd just written.

In the UserPage.js component, I declared a new boolean variable:

let alreadyFollow = false

In the component, I already have a variable called userPageInfo that contains all of the into for the user whose page it is. So I can use the list_followers method to grab all of the followers for that user and then search through them:

 userPageInfo.list_followers.forEach((fol) => {

I could then just compare each follower username to the username of who is currently logged in

        if (fol === user.username)

and then if I find a match I simply change the already follow variable to true. Seems easy enough. Let's check to see if it works.

        TypeError: Cannot read properties of undefined 
        (reading 'forEach')

Come on!! Why didn't that work? Oh... I just realized that the Userpage that I'm currently on is a user without any followers yet, so the forEach is trying to map through nothing and hitting the error. I can fix this!... I hope.

I just have to wrap the forEach loop in another if statement and I will once again call on one of the methods I've already written.

 if (userPageInfo.total_followers > 0)

So now, the forEach will only run if the User has followers and if not, the alreadyFollow boolean will stay false as desired. Let's check it out...

Success!! So here's final version of the if statement, forEach loop.

if (userPageInfo.total_followers > 0) {
    userPageInfo.list_followers.forEach((fol) => {
        if (fol === user.username) {
            alreadyFollow = true
            console.log(alreadyFollow)
        }
    })
}

And here is the ternary I use to put the correct follow button on the page:

<h5>
  {alreadyFollow ? <button> You Follow 
  {userPageInfo.username} </button>
  : <button onClick={handleFollow}>Follow 
  {userPageInfo.username}</button>}
</h5>

Perfect. So now everybody knows who's following who and I'll leave it to them to figure out why.

How to Use Salt to Prevent Rainbows from Stealing All Your Stuff

kevinLearnsToCode — Thu, 05 Jan 2023 07:41:57 +0000

So are you ones of those people that likes to use the name of your dog, the month you were born or your favorite color as your password? Well, then you probably aren't super into secure passwords, but maybe if you read this blog your life will change forever when I tell you about amazing things like salt and rainbow tables!! OK, that's highly doubtful, but I have to write about something and I thought the fact that salt and rainbows are two key words in password encryption was vaguely amusing so here we go.

What's a Rainbow Table?

When you think of a rainbow, what's the most frightening thing that comes to mind? Is it a movie about a young girl who gets caught in a tornado and is attacked by a witch and giant flying monkeys that you first watched when you were four years old? Or maybe it's stories of small men with vast hordes of gold who live at the end of rainbows and like to play tricks on children? Both of those are pretty good guesses, but today I'm going to go over how something called a rainbow table is used by cyber criminals to steal things from people.

A rainbow table is a tool that people can use to crack passwords on the internet. Thankfully, passwords on the internet are not stored the way you write because if you just put in an 8 letter word that requires one capital letter it would be way too easy to hack. Instead, the passwords are encrypted by taking what you write and turning it into a hash. Hashing takes the specific characters that are written - possibly a simple word - and puts then through a coding blender to make a random jumble of characters that are extremely difficult to reverse engineer.

For example the VNC Hash program turns 'badpass' into 'DAD3B1EB680AD902'

Just like with a blender, it's tough to turn that hash back into '12345'. However, cyber criminals work very hard to figure out how to hack these hashed passwords. Rainbow tables take large numbers of hashes and run them through a dataset and then continue putting the hashes through multiple reduction stages until the tables contain hash values for each plain text character.

Hackers then compare the rainbow table's list of potential hashes to hashed passwords in the database. If the hackers find the correct hash, they can then crack the authentication process without ever even knowing what the original password was. And that would be super annoying for tons of people... I mean, maybe not as annoying as being carried away by a flying monkey, but it would still suck.

Salt to the Rescue

Luckily, there's another term that you'd think has nothing to do with cybersecurity that is employed to try and prevent rainbow tables from working for hackers - salt. That's right salt isn't just useful for giving some flavor to your Nana's incredibly bland soup, it's also a key ingredient in keeping your passwords safe.

Remember earlier when I discussed how programs use hashes to make passwords more secure? Well, adding salt can offer significantly increased complexity to hashes. For example, here is an example of a SHA256 salted hash that turns '12345' into '5994471abb01112afcc18159f6cc74b4f511b99806da59b3caf5a9c173cacfc5'

Salt is something that is added by cryptography programs so that every password hash is unique no matter how lame the actual password you entered was. So even if your password is "password" salt will make it difficult for hackers to get into your account... even if you probably deserve to get hacked in that case.

Getting homework done while dealing with your children: A warning for parents in school.

kevinLearnsToCode — Tue, 06 Dec 2022 07:51:10 +0000

I'm not going to lie. I made four different attempts at the title of this blog post and I still don't think it's very good. I tried to make it as clear as possible what my topic is, but I think that whenever people see "parents" and "homework" and "school" in the same sentence they're going to assume I'm talking about the children of these parents...but not today people!

In this post, I'd like to share an insight comparing my previous experiences in school to my current experience being back in school while having young children: Everything is different!!

Obviously, I knew that this time around would be a very different experience and I was prepared for that, but I don't think I quite realized how utterly useless many of previous approaches to school would be. Luckily, my kids are nine and six and in school during the days so I'm not completely screwed, but, as you may know, school only goes from Monday to Friday.

At the end of my first week back in school, I thought "I'm going to buckle down and get a bunch of work done this weekend." I'm guessing that thought must have been some sort of relic from my experiences in college twenty years ago when, if I was behind on work going into the weekend, I'd only go to parties on Friday and Saturday night and try to get some work done during the rest of the weekend. Wow. The sacrifices I used to make. Now, if I'd been thinking logically about my current situation, I would have realized that these days the weekends are a TERRIBLE time to get work done. The weekends are always about the kids. I'm taking then to soccer games and birthday parties and playgrounds and if that isn't happening then we're playing board games or reading books or playing pretend. When is there time to do homework?

And it's not just weekends that are different. I'm in school from September to January so there's all the holidays to deal with too. We've had Halloween and Thanksgiving and now we have both Christmas and Hanukkah celebrations this month and it's very difficult to get much work done during any of it. Also, I don't want to miss out on these experience with my kids because I know they're getting older and soon they aren't going to want to spend as much time with me.

Now, what have I learned from these experiences? I've learned the importance of staying focused during the school day and trying to be as efficient as possible with my work. I've also learned that sometimes you just have to put your kids first... and if that results in my blog not being quite as organized as I want it to be some weeks then that's just something I'm going to have to deal with.

The Little Things Add Up

kevinLearnsToCode — Fri, 11 Nov 2022 22:49:22 +0000

The first week of learning a new computer language is always the toughest for me. I guess that makes sense. The first few days of learning something new are challenging in many things in life. However, when it comes to programming, the aspect that I find the most difficult early on is not usually the big overarching ideas that I'm trying to wrap my brain around. Instead, I find my biggest problem are all of the little mistakes that I make that keep me from getting to even work on the big ideas.

For example, here was a tiny error that I made during my first days of learning React.js that cost me way too much time to debug. This was time that I could have been using to work on the concept of components, props, state and effect. Instead, I spent that time trying to determine what bug was in my code that was causing none of it to run at all? Here's the error:

TypeError: items.map is not a function

And here was where the error referred me to:

const mappedItems = items.map(player =>

What did it mean that .map is not a function? Map is a method just like filter and forEach. And I used them learning javascript and I used it exactly the right way in my code this time and now it suddenly isn't working? Why is React conspiring against me?!

And technically, I was correct. There was NOTHING wrong with the way the code the error was referring me to was written. So after too many minutes of looking over the code and searching through examples to make sure I'd used map correctly, I turned to Google and copied in the error.

"TypeError: map is not a function" occurs when we call the map() method on an object that is not an array. To solve the error, console. log the value you're calling the map() method on" Well, I'm a step ahead of you Google! I already put in a console.log right after I pulled the items from the JSON and it told me that items IS an array of objects. So I ask again - WHY IS REACT CONSPIRING AGAINST ME?!

So I don't want to bore you with all the details, but after some more console.logs I did eventually discover the error. When I pulled the items from the database, it WAS an array of objects, but then when I put it in state, I wanted the state to start off empty so I wrote the following:

const [items, setItems] = useState("")

And there was my problem! In useState I set items to an empty string. And instead I needed to write this:

const [items, setItems] = useState([])

and set it an empty array... TWO CHARACTERS that cost me WAY too much time.

But the saddest part? I made the same mistake AGAIN three days later! And those two characters had seemed like such a simple mistake in the midst of learning far more complex concepts that I hadn't bothered to write it down in my notes of what to look out for. So it took me ANOTHER ten minutes to remember the issue and resolve the problem a second time.

So what's the moral of this sad tale? Don't gloss over the tiny mistakes you make when you're learning something complex because it could very well be those itty bitty mistakes that cost you a bunch of debugging time later.

Woof-Woof Lab

kevinLearnsToCode — Tue, 25 Oct 2022 06:49:23 +0000

Hello Flatiron Cohort members,

Come take a stroll into my psyche and see how I deal with labs. The lab I will be working on today is... phase-1-woof-woof-js-practice! I know you’re all excited about it. For anyone outside of the cohort that is reading this... first, you should stop and find something better to do... but if you insist on continuing you should know that this is one of a series of labs that involve communicating with an API (technically a JSON in this instance) to grab some data, render it to the page and then manipulate it in some way. I’ve already done several of these labs so I’m sure I’ll breeze through this one and make no mistakes because that’s how my coding experience has gone so far.

Oh wait, it never goes like that? OK, buckle up everybody.

Step 1: I’m supposed to familiarize myself with the JSON data. Nice. It’ll be tough to screw this up: ten dogs with names, images and a true false boolean statement about whether they’re good dogs or not. Nailed it.

Step 2: Use a fetch to get the data from the JSON and use the #dog-bar div to attach the dogs’ names with a span. OK, first fetch and get the info…

function fetchPups(URL){
fetch(URL)
.then(resp => resp.json())
.then(pups => {
console.log(pups)
})
}

That worked! Got all the dog info and logged it into the console. So now I have to do something with the data...

.then(pups => renderPups(pups))

function renderPups(pups){
pups.forEach(displayPupNames)
}

And for my displayPupNames function...I'm going to grab the dog-bar with pupDiv, create a span with pupName, get the names in there with textcontent and then append the names to the div as follows:

function displayPupNames(pup){
const pupDiv = document.getElementById('dog-bar')
const pupName = document.createElement('span')
pupName.textContent = pup.Name
pupDiv.append(pupName)

And it didn't work!!! No names. Why is this not working?! All of this looks right. Let me put in a console.log(pup) and see if it's getting the data.

It's getting the data. What the hell?! It has to be something little. AHA!!! I had pup.Name instead of pup.name. Last time I made a mistake like this I couldn't figure out what was going wrong for 30 minutes and eventually had to take my dogs on a long walk to keep my sanity. But this time I found it in under two minutes suckers! The moral of the story: If you keep making the same mistakes, it eventual becomes easier to find them.

Onto Step 3: So now I need to set it up so that if you click on a dog's name, the rest of the details about the dog appear in the middle of the page. So I'm going to want an event listener and another function.

pupName.addEventListener('click', (e) => {
showPupDetails(pup)

function showPupDetails(pup) {
const pupInfo = document.getElementById('dog-info');
const pupNameInDetails = document.createElement('h2');
const pupImage = document.createElement('img');
const pupIsGoodButton = document.createElement('button');
pupNameInDetails.textContent = pup.name;
pupImage.src = pup.image;
pupImage.alt = pup.name

pupInfo.append(pupImage, pupNameInDetails, pupIsGoodButton)
}

OK. This looks good. I have a click for each name, then I grab the div where I want it all to go, create some elements, put in the info I need and append it... so what'd I screw up this time?

Don't worry, ladies and gentlemen. I did screw up screw up something.

So when I click on a dog name, all of the info for that dog: name, image and good/bad dog button all appear in the middle as I'd hoped. However, when I click on a different dog name all of that info appears underneath the first name. And then that keeps happening on down the page. Crap.

Is this e.preventDefault()?

No. I checked. It is not. That's for submit.

I don't know if I've seen this error before... so time to google.

Guys, I'm going skip over all of the googling because it was pretty damn boring but the answer was pupInfo.textContent = "". Basically, I have to clear out the old info before I put any new info in. And it had to go somewhere before I append the details. Isn't this blog amazing?!!

One last thing for Step 3. I have to get some text inside my button so I need an if-else statement to check the boolean info...

if (pup.isGoodDog === true) {
pupIsGoodButton.textContent = "Good Dog!";
}
else {pupIsGoodButton.textContent = "Bad Dog!";
}

Yes!! That sucker worked on the first try. Now, onto-

Step 4: When a user clicks on the button it should change from good dog/bad dog. Sounds like I'll need another event listener and another if-else... and I'll need some way to check whether the dog status is good or bad.

I think I'm going to create a global variable called pupStatus and I will assign values in my previous if-else. So-

if (pup.isGoodDog === true) {
pupStatus = "good";
else pupStatus = "bad";

And then I'll do the event listener-

pupIsGoodButton.addEventListener('click', (e) =>

just another click so that's pretty straightforward. And now my new if-else statement will play with my pupStatus variable.

if (pupStatus === "good") {
    pupIsGoodButton.textContent = "Bad Dog!";
    pupStatus = "bad";
}
else {
    pupIsGoodButton.textContent = "Good Dog!";
    pupStatus = "good";
}

})

So I'm changing both the text and the pup status so that you can hammer that button till your heart's content and it'll change from good to bad and back again in am almost hypnotic way.

This all makes sense... doesn't it?

You're damn right it does! Worked perfectly. Is there probably an easier way to do that? I'm sure. And will my future self look back at this and laugh at my simpleness. I doubt it. I don't see future me being that much of a dick... but hopefully, he's a better coder.

Thanks for reading everybody!

My First Coding Blog

kevinLearnsToCode — Wed, 21 Sep 2022 06:09:20 +0000

Hey everybody!

Everybody? Right. Like I have a huge following for my DEV blog. Let me try again.

Hey fellow cohort members!

So I decided to just pick a lab and write about the process of completing it for my first blog. Very exciting.

And the lucky lab is... Phase 1 Review Strings Lab!!!

Since this is review of things I should have already learned in the prework, I'm just going to fork the lab, clone it, open it in VSC, take a look at index.test.js and then go from there.

OK. So the test indicates I'll need a current user, a few different welcome messages and.... yeah, I'm just gonna make life easy and run learn test before I write any code and see exactly what they're looking for.

10 failed tests! Great start.

So, the first failed test is "currentUser is not defined". That one's easy enough.

const currentUser = "Kevin Price";

My own name... the vanity.

learn test.

Alright. One passing test. Let me see if I can knock a couple of tests out in a row. I don't need this blog to be ten pages long.

Looking over the failed tests I need a welcomeMessage that includes currentUser and an exclamation point. Easy enough.

const welcomeMessage = "Welcome to Flatbook, " + currentUser + "!";

...should I have used interpolation? I think I probably should have used interpolation. But, it's just review... Let's just run learn test again and see what happens!

HA! Four passing tests! Suck it interpolation!

Six more tests to go. Let's see what's next.

excitedWelcomeMessage. All Caps. Contains currentUser. Exclamation point. How about?

const excitedWelcomeMessage = "WELCOME TO FLATBOOK, " + currentUser + "!";

Let's see!

Six tests passing! Not bad, but it looks like there's something wrong with the code I just put in.

Ohhhh. The currentUser name is also supposed to be capitalized. Wait. I know this. There's an easy way to do this with a string... do I keep trying to remember or just google it? Life is short. I'm googling.

toUpperCase!! Yep. That was it. OK so now do I need to do a separate const for the uppercase name? This is where I'm regretting not using interpolation. Or can I just attach it directly to the...

const excitedWelcomeMessage = "WELCOME TO FLATBOOK, " + currentUser.toUpperCase() + "!";

HAHAHAHAHA!! Seven tests passed! Now let's see what these last three tests are.

shortGreeting and just the first initial of the currentUser name. OK. So... can I just treat currentUser like an array? Don't strings usually behave like arrays? Right? Seems a bit too easy, but...

const shortGreeting = "Welcome, " + currentUser[0] + "!";

10 passing!!!! Yes. Never a doubt.

Oh. And I now notice that the lab actually walks you through the process... and they wanted me to use interpolation. Oh, and I was supposed to use slice for getting the first initial. Apparently those would have made my code more flexible. Oh well. Maybe next time!