<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Logan Zimmerman</title>
    <description>The latest articles on Forem by Logan Zimmerman (@loganzimm4).</description>
    <link>https://forem.com/loganzimm4</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F862011%2Fa9a322e9-4db3-4ae1-a820-4917d4d7c7ca.jpeg</url>
      <title>Forem: Logan Zimmerman</title>
      <link>https://forem.com/loganzimm4</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/loganzimm4"/>
    <language>en</language>
    <item>
      <title>My Time at Flatiron School</title>
      <dc:creator>Logan Zimmerman</dc:creator>
      <pubDate>Fri, 15 Jul 2022 17:54:09 +0000</pubDate>
      <link>https://forem.com/loganzimm4/my-time-at-flatiron-school-2mlh</link>
      <guid>https://forem.com/loganzimm4/my-time-at-flatiron-school-2mlh</guid>
      <description>&lt;p&gt;It has been both a long and a very short 15 weeks coming. As of today I have officially graduated the 15 week Software Engineering bootcamp, and although I don't know everything nor do I think I can walk into a job and know what I am doing immediately, I am miles ahead of where I was a short time ago. &lt;/p&gt;

&lt;p&gt;When I first started this program I had never seen any code. Coding was completely foreign to me and it all started because I enjoyed video games and building desktop gaming pcs and thought that my intrigue with computers would hold up well in working with under the hood programming and learning how computers and applications work. That may have been the smartest decision I have made to date. I learned Javascript, React, Ruby and Rails languages in these past 15 weeks and I now have the knowledge to build a full stack application with a custom backend API and fully customized React front end. That's an impressive jump in 15 short weeks.&lt;/p&gt;

&lt;p&gt;Starting with Javascript and React in the first 6 weeks, I think was the initial spark for me. Learning about functions and callback functions and working with the DOM to manipulate and create a smooth and seamless user experience was a true joy for me. I love being able to create simple buttons and then have an endless possibility of what you can do with them. I also personally really enjoyed working with React as it seemed so much easier to handle than basic Javascript alone and being able to create functions or components and automatically see them appear on the screen is rewarding too. I learned very quickly in the coding world you have to take the small wins when they come, or the failures will drown you.&lt;/p&gt;

&lt;p&gt;One of my favorite things with front ends is the immense amount of support and external styling libraries they contain. Using libraries such as Material UI, Semantic UI, Bootstrap, etc. to style my pages without all the grunt work of coding hundred of lines of CSS is breathtakingly simple and makes it so easy to create the front end you have imagined in your head. &lt;/p&gt;

&lt;p&gt;After the 6 weeks of front end work we made an abrupt shift to Ruby and Ruby on Rails. This change was slightly jarring after spending so long just focusing on one main coding language, but was necessary in both preparing me and my cohort mates for the real world, as well as getting in all of the information to become full stack developer in our short timespan. Ruby was not inherently difficult for me. I think the hardest part was taking myself out of the Javascript frame of mind and to stop thinking about things like mouse/click functions, component rendering and things of that nature. There had to me a reset to start thinking in a "database population" frame of mind to start thinking about models and controllers and serializers and model relationships to get the desired data to populate your front end the way you wanted to be able to access it. &lt;/p&gt;

&lt;p&gt;Being able to populate your database the way that you want it to with seed data and serializers was the best part. You can manipulate your data the way you want it to populate before it even makes it to your front end, to make your life much easier while manipulating that data on your user side. &lt;/p&gt;

&lt;p&gt;After all of these 12 weeks put together, we were set free for the final three weeks of the program to build our capstone projects for graduation. No partners, no guidelines just you, your computer, and your imagination with a small set of things to make sure you accomplish like populating your seeds with complex data, having at least two has_many_through relationship in your backend, using React Routing, and a few others. We were sent off with our new-found knowledge to create a full stack application that could showcase all of our abilities, and boy did we showcase our abilities.&lt;/p&gt;

&lt;p&gt;Through my time at Flatiron school I have learned so much, met some amazing people, and was gifted one of the best instructors I could have possibly asked for. Is it stressful? Yes. Is it expensive? Less than a four year degree, but still yes. Despite all of the strife, anxiety, and financial burden of a bootcamp, it was absolutely worth it and I would recommend Flatiron to absolutely anyone interested in pursuing a career in coding. Pick it up, get started, and see if it's for you. If it is for you, then Flatiron will definitely help you hone the necessary skills for the industry and you'll have the opportunity to pursue a life long career and hopefully meet some amazing people on the way, as I was so lucky to do. Good luck on your journey and, as always, happy coding!! &lt;/p&gt;

</description>
      <category>ruby</category>
      <category>rails</category>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>An Intro with Custom Serializers to Manipulate Data Output</title>
      <dc:creator>Logan Zimmerman</dc:creator>
      <pubDate>Mon, 27 Jun 2022 16:48:38 +0000</pubDate>
      <link>https://forem.com/loganzimm4/a-personal-journey-with-custom-serializers-49od</link>
      <guid>https://forem.com/loganzimm4/a-personal-journey-with-custom-serializers-49od</guid>
      <description>&lt;p&gt;My personal journey with custom serializers has been an interesting one. In my 15 week coding bootcamp, in the 4th phase, we had a code challenge where we are tested on the material that we had been taught the prior week and a half. In my code challenge there was one thing that I forgot and ultimately held me back from passing on my first of two attempts; Custom Serializers. &lt;/p&gt;

&lt;p&gt;A custom serializer, is a version of a traditional serializer that you can just create for certain scenarios or display purposes that you may have. Creating a custom serializer with Ruby on Rails is as simple as  the command&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;rails g serializer /YourSerializerName/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A custom serializer works in the exact same way that any other serializer might, just with the caveat that you specifically call the serializer on a method, instead of importing the serializer and using it as a blanket on all the methods in a controller. Such as…&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def index 
    bears = Bear.all
    render json: bears, serializer: CustomBearSerializer, status: :ok
end 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is actually quite simple to add into your methods, but there is a lot of power that you can give your custom serializer. You could use it to display associated data with each hash that you render from your ruby application, you can change the format that it displays in, or even change the data output itself, either adding more data to a specific output or displaying less data for another. Like this!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;BearSerializer

attributes: :name, :weight, :packname
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let’s say this is the basic serializer you are using to display your data in your output or input. No matter which method you decide to create, it will output your data with this information. But what if when you ask for a specific bear by id, you just wanted to add a list of that bears cubs? Well, then you would need a custom serializer to invoke on that show method! Which would look a little something like this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CustomBearSerializer

attributes: :name, :weight, :packname

has_many :cubs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Assuming you have a Bear and Cub relationship and models established, This custom serializer above is all you need to add the list of cubs to your output, now let’s go add that serializer to our show method like we did in the index example before!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def show
    bear = Bear.find(params[:id])
    render json: bear, serializer: CustomBearSerializer, status: 200
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There we go! Now when we call the show method by calling for a specific bear by id number, it will also render the list of cubs that belong to that bear. Since this custom serializer was only called on that one show method, that will be the only time that the data includes the list of cubs!&lt;/p&gt;

&lt;p&gt;This was a very basic version of custom serializers, but they will be very useful to you when coding with rails to get your data to render the exact way that you want it to for each situation. After my strange hiccup with this rails topic, I hope this helps you to have a better understanding of the concept, whoever may be reading this. Practice and toy around with it and see what you can get to display in your own code! Good luck and, as always, happy coding!!&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>rails</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Active Record Associations: Simplified</title>
      <dc:creator>Logan Zimmerman</dc:creator>
      <pubDate>Fri, 03 Jun 2022 12:46:47 +0000</pubDate>
      <link>https://forem.com/loganzimm4/active-record-associations-simplified-57lf</link>
      <guid>https://forem.com/loganzimm4/active-record-associations-simplified-57lf</guid>
      <description>&lt;p&gt;When learning Ruby, I felt a little too confident through learning about methods, hashes and all of the other basic commands and functions of Ruby. That was, until I began to learn about active record. Active record is an incredibly helpful and necessary piece of learning Ruby to create your backend database and being able to fetch and communicate with your backend from your front end application. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Active Record?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Active Record is an ORM, which stands for Object Relational Mapping. ORM's are used to make fetching and representing data easier, and it saves us the time of writing out our own ORM which is always a plus!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Active Record Macros&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Moving along to Active Record associations, these are commands held within active record. These commands create connections or links between your Ruby methods. These associations are as follows...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;belongs_to :method
has_many :method
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These two associations will cover almost all of the associations you will do in Ruby. A simple example of how to use these would be if you had two methods, one that carried the functionality for a tv and it's channels. You only have one tv, but the tv has many channels. So it would look something like this...&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TV&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;has_many :Channels
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Channels&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;belongs_to :TV
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This functionality would be built out for a one-to-many relationship. The other relationship you will see is a many-to-many relationship. In, this example we will use video games and their respective players. One game may have many players, but one player may have many games. In this instance, the associations would look like this...&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Player&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;has_many :games
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Game&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;has_many :players
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When it comes to learning something, it is always better to take it slow. As I learned these associations, I spent a lot of time working with just the belongs_to because it was the easiest to remember. It's one to one, so the simplest number of ideas to have swirling in your head at one time. One-to-many relationships were next and they are both really simple&lt;/p&gt;

&lt;p&gt;I soon after moved to using the one to many relationship and even at times was using the "one to many, through" relationship. in which two methods would have the "has_many" with a third method that has the "belongs_to" method to each of the first two. This becomes more complicated, but is again essential to the understanding of Active Record in Ruby. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Has many -&amp;gt; Through&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Lastly to show the "has_many, through" relationship. This is when three or more methods are associated with each other with at least two main methods and a third that belongs to both. It is easiest to think of a triangle form for this hierarchy. Two main methods at the top side by side, both with a line drawn downward to the single method below. The method below has two belongs_to associations to the ones above it, and the two methods above have a "has_many" relationship with the single method below. &lt;/p&gt;

&lt;p&gt;The "has_many through" association would be used in this situation to link the two upper methods. So before the association, the two upper methods both have many of the lower method, but they don't interact or have access to the data in each other. so in this case we could use this...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;has_many :games, through: :players
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a simple example but in this case, we are saying that this unnamed method, has many games because it is routed through the players method, which already has access to the games method. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Active Record is not entirely difficult or hard to learn, but it is still a vital piece of learning how to code with Ruby. Unless it is replaced by something once we move on to Rails, then I would assume we will be using this methodology for a good long time. I hope this helps, even just a little, someone who is struggling to understand or wants a better grasp on Active Record associations. &lt;/p&gt;

&lt;p&gt;Happy Coding!!!&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>activerecord</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>A beginners first look at useState()</title>
      <dc:creator>Logan Zimmerman</dc:creator>
      <pubDate>Fri, 13 May 2022 14:26:43 +0000</pubDate>
      <link>https://forem.com/loganzimm4/a-beginners-first-look-at-usestate-kag</link>
      <guid>https://forem.com/loganzimm4/a-beginners-first-look-at-usestate-kag</guid>
      <description>&lt;p&gt;When first learning javascript, you may want to know how to make certain things happen when somebody clicks a button perhaps, or even mouses over a specific point on your web page. After learning that this is done with addEventListeners, in my case, I moved on to react.js and ignorantly assumed you would use the same functionality for user interaction. Instead of an addEventListener, React has it's own function for user interactivity called useState(). &lt;/p&gt;

&lt;p&gt;useState may be one of the most useful functions, which is called a "hook", that allows you to plug into different functionality in your code to be able to change the state of that code. &lt;/p&gt;

&lt;p&gt;For instance, if you were coding out a button and decided you wanted the button to change it's inner text with an onClick function, this could be done by simply setting a state of...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const [isClicked, setIsClicked] = useState(false)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, I have created a state for whether or not the button has been clicked and then a setter function (setIsClicked) to alter that state. To actually change the button, you would create a handle click function that would change the state...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const handleClick = () =&amp;gt; {
    setIsClicked(isClicked =&amp;gt; !isClicked)
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This callback function simply calling the setter function, and inside of the setter function, we changing the boolean of the state, so since we initially set our useState to false, it will now be true. However, there is one more step to completing our process of setting up useState.&lt;/p&gt;

&lt;p&gt;Next we have to set our button to an if statement and in our case we are going to use a ternary, which is just a more minimal version of an if, else statement. So let's code that ternary...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{isClicked ? &amp;lt;button&amp;gt;In Cart&amp;lt;/button&amp;gt; : &amp;lt;button&amp;gt;Add To Cart&amp;lt;/button&amp;gt; }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In our ternary we simply wrote that if the button had been clicked (if our state switched to true) then we would want our button to display "In Cart". If the state hadn't changed and was still false, the button would contain the text, "Add To Cart". &lt;/p&gt;

&lt;p&gt;This is a very simple and easy way to set up state in react. It can look scary and believe me, it was scary for me to at first, but it's one of those things that with time you will begin to understand it more, just know anytime you have a piece of code you want your user to be able to interact with, useState will be your go to. &lt;/p&gt;

&lt;p&gt;You can see why useState is so important because your web application could have dozens of points for user interactivity. &lt;/p&gt;

&lt;p&gt;Aside from buttons, useState can also be used to change things such as search bars, inputs, displaying database or api information, mouseover events and a whole list of others. useState is an extremely efficient and powerful hook in react.js which is why it is so crucial to learn. So put in some practice with it and get that web application rolling!&lt;/p&gt;

&lt;p&gt;Oh! and happy coding!&lt;/p&gt;

</description>
      <category>react</category>
      <category>usestate</category>
      <category>jsx</category>
    </item>
  </channel>
</rss>
