DEV Community: Kevin Kirby

How I can "like" posts in my Instagram-esque rails/react/redux app

Kevin Kirby — Mon, 11 Oct 2021 04:39:25 +0000

For my final project at Flatiron School, I created a Photo Sharing app with some similarities to instagram. I utilized rails for the backend and react along with redux for the frontend.

For my backend models, I initially just had User, Post and Comment.

In deciding to add functionality to like a post, I first had to make backend changes.

In thinking relationships, users and posts can have many likes. Thus, likes belong to users and likes belong to posts. I added a like model and migration file by running the following command: rails g model Like user_id:integer post_id:integer

That gave me my model and migration file. I added these two relationship lines to my like model:

belongs_to :user belongs_to :post

Next, because of these belongs_to relationships, I added has_many :likes to both my User and Post models.

Then, I ran rake db:migrate to create the likes table in the database.

Knowing I'd need to update config/routes, I personally decided to add resources :likes nested underneath my resources :posts like so:

resources :posts do resources :likes end

Next I added a basic likes controller (I will fill this in later into this blog):

class Api::V1::LikesController < ApplicationController def create end end

I then added :likes to the attributes list of my user serializer and post serializer, both serializers being created with ActiveModel serializer.

The backend part is now done except for a few additional lines that need to go in the Likes controller. For now let's hop to what I did on the front-end, and then I'll come back to that.

So I already had a Post component, a class component to be specific, which represents how each post should look and behave.

I wanted to add a like button in the Post component so it showed right under each post.

So I added the below function, above my render function. This function will check to see if a given post, passed from props by the Posts component has no likes where the user_id of that like is equal to the the current user's id... if that is true (meaning the current user has not liked the post) I want to return an unfilled like icon, but if false (meaning the current user has liked the post) I want to return a filled like icon:

handle_likes = () => { if ( !this.props.post.likes.some( (like) => like.user_id === this.props.currentUser.id ) ) { return ( <Icon icon="fluent:heart-20-regular" width="30" height="30" className="likeButton" /> ); } else { return ( <Icon icon="fluent:heart-20-filled" width="30" height="30" className="unlikeButton" color="#dc565a" /> ); } };

I brought the icons in from Iconify and to do so just had to put this import at the top of my Post component:

import { Icon } from "@iconify/react";

And I also had to put this line in my render function's return statement, so the above function would be called on render:

{this.handle_likes()}

I then knew I wanted stuff to happen when I clicked the first icon, the unfilled like icon. Thus, I wrote the code I wanted to happen.

I knew on the click of this icon I wanted to dispatch an action to the reducer which would then later update the store. I knew I should use a reduxed-up action creator called addLike in this onClick handler and that it should take as arguments the current user's id and the post id. Here is the onClick event handler I added to the bottom of the icon:

<Icon icon="fluent:heart-20-regular" width="30" height="30" className="likeButton" onClick={() => this.props.addLike(this.props.currentUser.id, this.props.post.id) } />

Now let's add an import for this addLike action creator that I will be creating in a little, and add that action creator I'll soon be making to connect. This way our component will have as a prop a reduxed-up version of the action creator so that we can dispatch an action to the reducer when the icon is clicked:

I added these two imports:

import { addLike } from "../actions/allPosts"; import { connect } from "react-redux";

I added what will soon be the addLike action creator to the second argument of connect at the bottom of my component:

export default connect(null, { removePost, deleteLike, addLike })(Post);

Then I built this aforementioned action creator.

I decided to put this action creator in my action creators file that encompasses all the action creators for my posts, since I wanted likes of posts to be housed within individual posts within my posts part of state.

This is the addLike action creator I put together:

export const addLike = (user_id, post_id) => { return (dispatch) => { return fetch(`http://localhost:4500/api/v1/posts/${post_id}/likes`, { credentials: "include", method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(user_id), }) .then((res) => res.json()) .then((response) => dispatch({ type: "ADD_LIKE", payload: response, }) ); }; };

Above, I am first taking in the user_id and post_id that I passed from my onClick event handler in the Post component.

I'm then using thunk which allows me to return a function instead of an object and that function will have access to the stores dispatch method.

Within that function I'm doing a post fetch to the correct post's likes route, am getting a promise that resolves to a JavaScript object which is the like, and am then using the store's dispatch method to dispatch an object with a type of "ADD_LIKE" and the payload set to the like object to the reducer.

Now I'll cover the reducer part of this. The dispatch I made in the above action creator had a type of "ADD_LIKE". When my reducer for my posts sees an action come in with that type, it should take the previous state and this action, and with that it should determine a brand new value for the state. That new version of state should be returned and this will ultimately update the store.

FYI, here is what my state structure looks like at the top in the first argument of my reducer:

state = { posts: [] }

So, since I need to be able to handle an action for adding a like, I created a case in my reducer for "ADD_LIKE" that looks like this (explanation right below):

case "ADD_LIKE": let posts = [...state.posts].map((post) => { if (parseInt(post.id) === action.payload.post_id) { let updatedPost = { ...post, likes: [...post.likes, action.payload], }; return updatedPost; } else { return post; } }); return { ...state, posts: posts };

Essentially in this code I am:

-Setting a variable of posts equal to mapping through a copy of all of the posts that are currently in my posts part of state.
-For each post in the current state of posts, I'm checking to see if its post id is equal to the post_id from the like object that I sent as the payload at the end of my action creator.
-If that if statement rings true that means that means that a like happened to one of our posts.
-Since a like happened, I want this post to have the like in its like array. Thus, I create an updatedPost variable equal to an object of everything that is in this post already, but with the likes part of the post object being updated to what was already in this likes part of the object, but with the new like added in as well.
-I then return this updatedPost into the array I'm creating by mapping through all the current posts.
-Then, for all the other posts that were not liked at this time, those posts will fail the if conditional and so my else statement will just return the post itself into this array being created by .map.
-This map will then put into the posts variable an array of a bunch of posts, and one of them will have a new like within its like array.

-We then end the map statement and return an object containing what is already in the reducer's state, but set the posts key of the object equal to the posts variable that contains the array we made from mapping which will have all current posts including an updated post which is the one that was freshly liked.

To come back to the likes controller, here is what I did for that:

-I created a basic create action:
def create end

I then put a byebug in the create action, clicked the icon to like a post, and checked what params was when I hit the byebug after the post fetch was fired.

The post_id went through to params and I used the following line to create a like with the current user's id (with help of a helper method from application controller) and the post_id for the liked post:

@like = Like.create(user_id: current_user.id, post_id: params[:post_id].to_i)

I then did render json: @like to render the json object for this like, so all I had for the create action was this altogether:

def create @like = Like.create(user_id: current_user.id, post_id: params[:post_id].to_i) render json: @like end

Lastly, this is what I have for my like_params strong parameters method:

def like_params params.permit(:user_id, :post_id) end

So this is how I got the liking functionality working to update both the backend and the frontend once an unfilled like button is clicked. When I got this working, the unfilled like icon would change into a filled like icon on click, and the state in redux for the liked post would change as well.

Hope this is possibly able to help someone!

Show & hide div in JS w/ 2 clicks (how)

Kevin Kirby — Sun, 27 Jun 2021 02:17:27 +0000

I recently completed my Javascript project at Flatiron School. It is a Single Page Application with a JS frontend and a Ruby and Rails backend.

It's a song sharing site where you can see songs that have been shared, post your own songs to share, and see the genres the site has as categories along with their descriptions.

I wanted users to have functionality to see the genre info encompassed in a div, but only when they wanted to via click of a button, along with allowing users to hide the genre info by clicking the same button.

I spent a good amount of time trying to make a button that on first click would display the div of genre info, on the second click would hide the genre info, and so on and so forth. I also wanted the button's text to change depending on whether a click of it would be showing or hiding genre info.

I got like the first couple of toggles of the button working successfully to where the div would display and hide, and button text changed accordingly. However, this itself took quite a lot of code and I realized that having the functionality correctly working in the event of any number of button clicks happening would be very burdensome and lengthy the way I was originally coding it.

I did research and with that figured out a better and simpler way to toggle the div's display using Javascript. Here's how:

-First, I created one button for this in index.html like so. Just one button! Give the button an id so we can use querySelector to grab the button later:

<button type="button" id="see-genres-button">See all genres and their descriptions</button>

-Then, I created a div with an id of genre-container. When this div is displayed by click a get fetch will also happen and that will show my genres in the displayed div. This was all the html for this step:

<div id="genre-container">

Next, in index.js I wrote the following querySelectors to find both my genre container and my button for seeing and hiding genre info:

let genresContainer = document.querySelector("#genre-container"); let genresButton = document.querySelector("#see-genres-button");

-I then created a variable called showGenres in index.js and set it equal to false (explained a bit later):

let showGenres = false;

-Next, in index.js I created a hash with two key-value pairs. The keys should be the two different strings you want your button to be able to display when toggled, and the values of these keys should be the opposite toggled version of the string of its key, like so:

let buttonStates = { "See all genres and their descriptions": "Hide the genres and their descriptions", "Hide the genres and their descriptions": "See all genres and their descriptions", };

Note on the above^: The "see genres" type strings need to be typed in the above object exactly the same as how the text is typed in the button tag on the html for this to work. Thus, the 2 strings of

"See all genres and their descriptions"

are typed exactly the same as the text in my button tag a few steps above. (The reasoning for all of this will become apparent in my next explanation).

Then, I created an event listener on my genresButton like so (explanation of how this all works right below):

So how does this listener work with the above 2 variables I set? Let me explain:

-Line 94: We start a click event listener on our genres button.

-Line 95: We set showGenres equal to the opposite of showGenres. The showGenres variable was created and set to false from above this listener, but as shown, as soon as this click event listener happens, showGenres will be set from false to true (implying that it is true that we now want to show our genres).

-Line 96: We set up an if statement to see if showGenres is true.

-Line 97-98: If showGenres is true, in these lines we will set the style on the genres container to display with inline-block, you can ignore the other styles.... all that is needed here to display the genres-container div is setting the display to inline-block, the rest is extra styling of my own.

-Line 99: Based on my app, I call the getGenres function here which fetches my genres and then renders them into the genre-container div that is now displayed to the page.

-Line 100-102: Conditional logic in an else statement so that if the showGenres variable is false, I change the display of the genre-container to "none" which hides the container. Say for example, we just hopped on my site and for the first time clicked the button to show the genre info. Show genres would have been set to true then from showGenres = !showGenres;. Then the genre info displays on page. The next time we click the button for displaying/hiding, showGenres = !showGenres; will now take the showGenres variable which is now currently true and set showGenres to the opposite, thus making showGenres now equal to false. Because showGenres is now false, our else logic will run and hide the display of the genres-container. That is how this logic regarding the showGenres variable works to show the genres and hide the genres accordingly.

-Finally, Line 104:

This line is responsible for why the button text changes from the show message to the hide message. In line 104 we are using the buttonStates variable we defined above... here is the buttonStates variable again:

let buttonStates = { "See all genres and their descriptions": "Hide the genres and their descriptions", "Hide the genres and their descriptions": "See all genres and their descriptions", };

In line 104 of the above listener, we are taking the innerText of our genresButton (which starts off as "See all genres and their descriptions" from how our original html button is), and we are setting this innerText equal to the value of the key of that innerText string in the buttonStates object by doing buttonStates[genresButton.innerText]. So on the first click of the button when it originally said "See all genres and their descriptions", after the click the button will now show the value of that string's key in the buttonStates object, so the button will then display "Hide the genres and their descriptions". On the next click of the button that now says "Hide the genres and their descriptions", the button after clicked will now then show the value of that string's key in the buttonStates object, so the button will then display "See all genres and their descriptions". Now the button text will correctly change from the show message to the hide message every time it is clicked.

These steps are how I got my div displaying and hiding with the clicks of one button while that button's text correctly changed as well! Hopefully this is helpful to someone!

How I solved a harder part of my Rails hike finder/reviewer app

Kevin Kirby — Fri, 26 Mar 2021 00:34:19 +0000

I recently finished my rails project at Flatiron School. We were to create a Rails MVC content Management system app, and so I created a hike finder/reviewer app called Nail the Trail.

Nail the trail allows users to find hikes, see intel and reviews for certain hikes to enable success on-trail, create reviews for hikes, edit and delete those reviews, and more.

In envisioning the site, I wanted someone cloning into the project to be able to see many hikes, and reviews for these hikes, as soon as they got onto my site. I also of course wanted users to be able to create/see/update/delete reviews of their own.

With this goal in mind, I decided to make a complex seeds file in which I'd use a lot of faker functionality. The 3 models in my project are Hike, User, and Review - Review being the join. So, in my seed file I created 100 faker'ed hikes, 80 faker'ed users, and 600 faker'ed reviews.

I made it so the hikes were randomly distributed across 12 cities and that the user_id and hike_id for the faker'ed reviews were set to a random user's id of the 80 faker'ed users and then a random hike's id of the 100 faker'ed hikes. This turned out to be a good balance as when a user selects to see hikes in a city, they see hikes in each city and they see already left reviews for almost every hike.

One of the harder parts of my project to get working correctly was the following: Though not necessary, I strongly wanted all hikes on my site to be given an average rating out of 5 that was the average of the star_rating attribute that each of their reviews had - both already existing reviews and reviews that would be manually created. And, I wanted this average rating attribute of each hike to change correctly depending on newly created reviews, updated reviews, and deleted reviews and to actually be continually updated in the database.

I got this all working correctly after some time! Below are the steps I took to get this working.

-I made it so the hikes table had an average star rating attribute that defaulted to 0 for all the created hikes. Also, instead of creating all of my faker'ed hikes so they had some random average rating, I left that attribute out as I wanted to take the more difficult approach of making it so the average rating of hikes were solely based on the average of their reviews' ratings.

-I then tried making a method called average_rating in the Hike model that averages a hike's reviews with the thought that then when I was iterating over hikes in the hikes index view that I could then call hike.average_rating to display a hike's average rating. The logic in my method was not calculating the averages correctly and I also realized the database was not being updated with the average ratings of these hikes....each hike's average_rating attribute in the database was still 0.

-I knew there had to be a way to have the average rating of hikes, which defaults to 0 in the database, be set/changed through some process. After some time I landed on the idea of trying to use a lifecycle method to update hike instances after review instances are created for them.

-In this thinking, I tried instead having a method in the Review model called update_hikes_average where I was trying to calculate the new average rating of the hike that the current review instance was for. Then in that method, I also tried to update the hike associated with the review by updating the hike's average star rating to this new average rating.

-I then added an after_save callback to the top of my Review model with the following line of code: after_save :update_hikes_average. This line was to make sure that the update_hikes_average method would be called after each time a review was saved for a hike. I then made sure I was displaying each hike's average rating attribute in the index view for hikes.

-One of the things I saw right after this big change was great- the average_rating attribute of hikes was being updated to different numbers for different hikes in the database. I then ran rails s to hop onto my website, go through some hikes and their reviews, and do manual math to see if the average rating of hikes was being calculated correctly. What I noticed was that for some hikes I saw, the average rating of the hike was correct without factoring in decimal places, but for some other hikes the average rating for the hike was considerably off. I felt like I was closer to my overall goal, but not there yet.

-I questioned whether the problem was in my logic in the update_hikes_average method or if it was with how my seed file was arranged. I then got a recommendation to put 3 byebugs in the update_hikes_average method: one at the beginning, middle, and then end of the method. This was to check the values at each step to see if they are what I expect in hopes of narrowing down the problem.

-I created a new hike manually in the console, manually created reviews for it, and did some digging around with the 3 byebug debug recommendation. I found that the average rating calculation of a hike was not even working correctly when I manually created a hike and some reviews for that hike.... no seeding was involved in this case. This made me think that the problem was with the logic in the update_hikes_average method, not in the seeds file.

-Thus, I was certain I needed to change the logic in the update_hikes_average method. Getting the correct calculation of a hike's average rating seemed initially like something that would be rather quick, however it turned out to take me quite a long time as researched and recommended solutions were unfortunately not working correctly time and time again.

-I tried a few other ways to code the update_hikes_average method and I finally landed on code that worked for it! This code correctly calculated the average rating for hikes based on any reviews a hike was given through faker seed data and based on reviews that would be manually created for that hike in the future:
At the top of the Review model I had after_save :update_hikes_average and for the updates_hikes_average method I used this

def update_hikes_average new_avg = (self.hike.reviews.sum { |review| review.star_rating.to_f } / self.hike.reviews.count.to_f) self.hike.update(avg_star_rating: new_avg.to_f) end

-Basically, above I am setting the variable new_avg to the average rating of reviews for self's hike- self being the current review instance and self's hike being the hike that review was created for. Then, I am updating that hike's avg_star_rating attribute with what is set in the new_avg variable.

-Once this is done I made sure I was still displaying the average_star_rating attribute for hikes in the index view for hikes, so that the working average_star_rating would be displaying for hikes.

-With that working, it was simple to make it so that deleting a review of yours would also update that hike's average rating accordingly and correctly. All I did to implement this functionality was add an after_destroy callback at the top of my Review model as well, like so:

after_destroy :update_hikes_average

-I also noticed that while the average_star_rating for hikes was now working, the average star ratings were displaying as integers despite efforts to change that earlier. I instead wanted the ratings to display as floats such as 4.2, 4.5, etc.

-I did more thinking on this and troubleshooting with pry in the update_hikes_average method and that led me to an idea that popped into my head: I had the average_star_rating attribute set to an integer datatype since the beginning- why don't I change my Hikes migration file to change that attribute to a float datatype.

-That minor change, along with setting a precision value of 3 and a scale value of 2, worked to display the average rating for hikes the way I desired! This working line of code in the Hikes migration file is shown below:

t.float :avg_star_rating, default: 0, precision: 3, scale: 2

What you put for the precision value represents the total number of digits in the number, and what you put for scale represents the total number of digits following the decimal point.

At last, I had all of this working correctly and how I wanted it to! A glimpse of the result is shown below:

My Flatiron Mod 1 Project

Kevin Kirby — Thu, 25 Mar 2021 02:47:28 +0000

For my solo Mod 1 Project at Flatiron School, I needed build a CLI app to give a user full CRUD ability, allowing a user to do at least one of each of the CRUD actions. We needed to have a minimum of 3 models, including one join model.

I decided to create a Ski Ticketer app and have my models be User, Ticket, and SkiResort.

My app allows a user to do the following CRUD actions.

Create- Purchase a ski ticket to a ski resort.
Read- View a list of top ski resorts in the world (ski resort names created via Faker).
Update- Edit their name as a user.
Delete- Cancel a ski ticket they've purchased.

Here are a few things I learned from this project:

-Drawing out what the user would see when physically navigating your app can be very helpful for creating the structure of it.

-It's helpful to think of the next step every time you are working on a new method in a CLI app. For example, every time you ask a user a question you have to put a gets.chomp in which will collect the user's input and then you have to do some procedure or routine with that input that represents the feature the user wants. In a CLI app, you have to ask for user input a lot.

-I got better at deleting the db & schema and then remigrating & reseeding when the database got corrupted, as this was something I had to do quite frequently. After doing this, everything will be good and then you'll have data you can test again.

-The SQL logger is a helpful thing to turn on because it shows you what SQL is being run as you write Active Record queries.

-I also learned how to allow a user to exit from the CLI program. This was as simple as setting an elsif statement in a given menu method for the case that the user's selection is a specific number, and then below the if statement you simply type exit!

To install and run this program:

-Fork and clone the repository at this link: https://github.com/kkirby16/mod-1-project

-Open up the terminal in this program and run bundle install in it.

-Next, run rake db:migrate and rake db:seed to create and populate the database.

-Then, run ruby bin/run.rb in the terminal to begin the program.

Sinatra Project- ActiveRecord Validation/Rack Flash insights!

Kevin Kirby — Fri, 27 Nov 2020 21:28:25 +0000

I recently completed my Sinatra MVC CRUD project at Flatiron School. I created a Study Session Tracker website.

This website has login, signup and logout functionality for users. The website allows users to create study lists for a topic (ex. Ruby, Javascript, etc.) that they forsee they'll be studying. The user can then create completed study sessions they've done that go onto a specific study list for a topic. They can also edit and delete these study sessions.

I also added into my project ActiveRecord validations and display of validation failures in the views to users.

The flow I took to set up ActiveRecord validations as well as Rack Flash to display failure messages to users was:

-Put gem "rack-flash3" in the gem file and then run bundle install.
-Require "sinatra" and require "rack-flash" in the controllers in which you want to validate user input.
-Put enable :sessions in the configure block of your ApplicationController and use Rack::Flash under the class definition of the controllers in which you want to validate user input.
-Put specific ActiveRecord validations in the models for certain model attributes you'd like to validate user input for.

The above steps will get you ready to validate user input.

From here, to further demonstrate how an ActiveRecord validation works, I'll walk you through a challenge I was having in this project in finding and implementing a certain validation.

One of the challenges I was having was to get an ActiveRecord validation that'd make it so a user could not create multiple study lists with the same exact topic. I didn't want a user to be able to have multiple study lists titled "Ruby" for instance, but instead I wanted all of a user's study lists to have unique names (ex: Ruby, Javascript, React).

Once the steps prior had been set up, this is the code I wrote in my StudyListsController and my StudyList model to get this validation working:

Line 5 in the StudyList Model is the model validation that I used for this. The ActiveRecord validates_uniqueness_of validation, along with the scope parameter that follows, validate whether the value of the specified attributes are unique based on a scope parameter.

According to my model associations, a study list belongs to a user, thus, each study list created has a user_id foreign key associated with it. Since study lists have access to their user_id, I used the user_id as the scope parameter.

validates_uniqueness_of :topic, scope: :user_id

This code is basically making it so that a topic can only be used once for a particular user_id when a new study list is being created.

The above picture of code for the post "/studylists" route, my controller action that creates new study lists for users, works to properly implement the validation like so:

-I first make a new study list with the user input for topic that I have gotten from the params hash, along with setting user_id equal to the current user's id (the current_user variable comes from a helper method that finds the current user). I use .new so that the study list is not saved to the database yet, because I want this data to have been validated before it would possibly hit the database.

-Then I have an if @studylist.save. If @studylist saves, this means that the input I received in the params hash from the user passed the validations on the StudyList model. If any of the validations on the StudyList model fail, .save is cancelled and will return false, and thus will not save @studylist to the database.

-The code after the else is what will happen if @studylist is not saved. A flash message is a way to let your users know what happened after an action they took on your website. I set flash[:message] to the message I want the user to see. This way they will know exactly how to correctly create a new study list.

-In this else statement I also redirect them to the form for creating a new study list. This way, if their new study list submission fails, the page they are on with the fill-in form immediately reloads and then on the page they see the error message that I set flash[:message] to.

-The final part I implemented for this validation was to make sure that users would see the error message I set flash[:message] to, in case of the validation on the model failing. The extra bit of code I put in my view file that has the form for a new study list was the following from line 16-18:

This code displays the flash[:message] you defined to the user when applicable. The flash message will then stay there until the user goes to another page.

ActiveRecord validations are great for keeping bad data out of your database. Rack Flash, when used in conjunction with these ActiveRecord validations, is great for helping you to display informative messages to users based on their actions.

I hope these insights on my recent experience using ActiveRecord validations and Rack Flash might be able to help someone in some way!

A few coding efficiency tips from a beginner!

Kevin Kirby — Tue, 03 Mar 2020 00:59:06 +0000

I'm currently studying at Flatiron School, and I'm often striving to learn ways to be more efficient while coding.

Below are a few ways to do so! Some of these I've been using, and some I am trying to get in the habit of using.

Allow your computer to delete words much faster when you hold delete.

To do this on a Mac, go to system preferences, keyboard, and pull the levers for ‘key repeat’ and ‘delay until repeat’ all the way to the right side. When holding delete to delete code, you won't have to wait near as long as before.

Make trackpad speed as fast as Mac allows, or even faster!

I’m a believer that the faster your mouse pointer travels, the more distance you cover in a period of time, and thus, you can get more tasks done on your computer in that period of time.

Using the fastest Mac-provided trackpad speed is something I was enjoying for a while. Then, I wanted to turn the speed up a few more notches, and with a quick google search, found there is a way to increase the trackpad speed even faster than the Mac-provided speed by using a terminal command. I made my trackpad speed even faster with this and feel that it has helped my productivity even more.

The fastest Mac-provided trackpad speed is 3.0. I have my current trackpad speed set at 8.0 thanks to this terminal trick.

A quick google search of the following will lead you down a path to figure this out: “make trackpad speed faster than mac allows using terminal”.

Have “end” automatically typed for you when needed while in VSCODE in Ruby.

This is enabled by an extension called Endwise in Ruby. This extension saves a lot of time since instead of typing 'end' when you need to, this extension automatically puts needed ends where they should be as soon as you press enter to go to the next line.

In VSCODE, just click the icon that resembles blocks on the left, type in endwise and click install to get this extension.

Have your Ruby code automatically formatted correctly in VCSCODE.

Rufo is an extension that automatically correctly formats your code for you. I love this extension as it saves me time and headspace, and keeps my code looking nice and organized.

Option-click in VSCODE to edit multiple areas of a file at once.

This key command is super easy and allows you to place a visible cursor in many specific spots of your code in VSCODE. Then once you start typing, the content that you're typing is written into all of those cursor locations at once. This can save a lot of time if you have a lot of similar variable names or keywords that you want to change at the same time.

Option up arrow/down arrow in VSCODE

If you place your cursor in front of a VSCODE line and then hold the option key and the up or down arrow, you can quickly move that line of code your cursor is on to higher or lower lines.

Spectacle Window Manager for Mac

Spectacle Window Manager is a free Window Manager I just downloaded that seems like it will be great. A window manager is basically a tool that helps you place multiple windows in different parts of your screen and can intelligently remember how you prefer your screen to be set up.

These save valuable time when doing tasks so that you don’t have to change screens and search for other windows that you also need to be using, but instead you can have it all neatly laid out right in front of you.

My Journey Into Software Engineering

Kevin Kirby — Mon, 24 Feb 2020 22:38:30 +0000

For the last several years, I was doing sales and sales development work. That said, I never really felt I wanted sales or sales development to be the 'be all end all' for me. Instead I saw it more as a stepping stone. Thus, I recently grew to be no longer fulfilled with it.

I knew it was time for me to make a career change.

Doing software sales for the last couple years had given me some exposure to the work that software engineers do, peaking my interest and curiosity about it. In the software products I sold and the websites of their companies, I’d see imperfections I wanted to be able to change. I’d think of features often that would make the user’s experience easier or more efficient. I had all these ideas and I wanted to know how to implement them to both sharpen the image of the companies I worked for, as well as make a more positive impact on users and ultimately the world. This was a big reason behind why I wanted to look into software engineering.

Sales development for me was temporary, but the transferrable skills I gained from it are lasting and valuable to software engineering: some of these being fine-tuned communication skills, a growth mindset, coachability, perseverance through an 'emotional rollercoaster' environment, customer-focus, time and task management, and more.

I’ve also always had an inner feeling I wanted to do software engineering. I’ve always loved solving problems, loved technology, and the internet. I love typing and I can type 100+ wpm. Additionally, I know that my personality is an introverted, detail-oriented, and logical personality type. With in-depth research I have found that my specific personality type is one of the best fits for software engineering.

When I decided to quit my last sales development job, one of the people I immediately told that I was leaving was a coworker who helped me get the job via a referral. He was actually a software engineer and I told him I was quitting since I wanted to change careers. He said that we should grab lunch and he also asked what career I wanted to go into. I said I'd of course like to grab lunch, and the inner feelings mentioned above came out when I told him that software engineering was one of the most viable career options I was considering. He was excited to hear that and said he would give me all sorts of insight about software engineering. He also mentioned how the transition he made into software engineering was the best decision of his life. I felt like this moment and timing was meant to be.

He mentored me and encouraged me about software engineering and I had other software engineers coincidentally come into my life at that time, who did the same. It all felt as if it was meant to be happening for me at this time.

Additionally, in this journey I stumbled across an amazing video posted by one of the world's leading high performance coaches, who I follow on Instagram, where he said this: "Whatever your big goal is in life, whatever sets your soul on fire, whatever passion you have, recognize that that is a GIFT that you are meant to protect, to fulfill, and to manifest."

That quote stuck with me. When I read this, I knew it was time for me to jump into software engineering to follow that passion I feel for it. Ultimately, I decided to make the jump into the software engineering industry by joining Flatiron School.