Week 5 (completed)

Week 5 is over! Almost at the half way mark of the program. This week we learned redux-react. Redux is a state management tool that can be used with React and Angular. At the beginning of the week, when our instructor introduced Redux to us. I understood it conceptually i.e. on a high level basis. As we started to work on our lab though, it turned into a different story. I think this was due to how the “work flow” (or should i say code flow) is structured. Setting up redux AKA mapping dispatch and states to props can be overwhelming . It seems daunting and confusing at first because of the initial set up but once you practice and use it, it gets easier and easier.

Important take-away from this week with Redux:
Redux is helpful when you have a large application with many components calling/using the same state. Think twitter, facebook, or a large social blog site. E.g. CRUD functions can be call from multiple area of a website. Websites divided into several different components. No problem! Redux will help you by sending different states to any components you want (just make sure to map it first!) Always remember to set up an initial state then set your rootReducer or Reducer state to the initial state. From there you can call on that state from any components you want. Then you can change the state from any components but make sure you have set up your functions (in this case ‘actions’) in your actions area and map it to your props. Your actions can contain multiple functions/actions that you can send to various components. The actions will tell the reducer to make a copy of the original state, modify that new state and set as a completely new state! WOW!!!

Another important take away from redux is thunk. Thunk is use to fetchData() i.e. API call. At least that’s what I think it does. What thunk does is it creates an action creator that DOES NOT create an object but rather returns a function. Since we are using it with Redux, which only likes plain objects, thunk allows redux to do this. Essentially, it’s just a function that is returned by another function. E.g.
function getUser(){
return function(){
return fetch('/current_user'):
};
};

Redux actions with thunk usually comes in triplets. I.e. Begin, Success, Failure. Begin is the beginning action item which allows redux to fetchData and show loading state of that data. Success is when the fetch is complete and the payload is set and ready to be render/display. Failure is an error catch, in case the GET call fails or server is down; Failure action will handle that state accordingly.

Concepts to improve on:
You guess it! That’s right! If you are thinking to yourself “hmm his definition of thunk seems like it comes straight from a text book or something similar” Well you are somewhat correct! It was 50/50. Conceptually, I think I understand what thunk does and what it can do but I feel like I need to practice and use it more to see the benefits of using thunk/redux when I am writing an API GET calls. That’s it for me this week! ~SOOSH OUT!! YEET!! P.S. I think that sign off is here to stay.

Advertisements

Week 4 (completed)

Week 4 was a very productive week, but the reoccurring theme seems to be whenever my understanding of a concept seems to somewhat solidifies, we move onto a new concept.

What I learned this week:
React Switch and Router – Switch and Router can render a new state of your web app without actually taking you to a new page. That is probably the simplest way I can define it in terms that makes sense to me. It also works hand in hand Redirect, Link and Navlink. Redirect can help ‘redirect’ you to a page that you want to display/render. While Link and Navlink works similarly, Link is mostly used for actual links when you are using an API GET request. Navlink is used as a nav bar to render states or move between menus without redirecting the user to a different page.
I also learned how Axios and how it can call an GET request from an API then use that data to display/renders info on our web app.

Concepts I struggled with this week:
I was struggling with a lot of syntax errors this week. E.g. using fetchdata() inside a useEffect() but then forget that I am able to use fetchData() outside of useEffect().

That is all I have for this week. It was a productive week but I have been pretty busy due to a minor fender bender I had during the beginning of last week. Consequently, I have to deal with the other party insurance claim adjuster representative..person…guy…whatever! It’s late and I am schleepy again. ~Soosh out!

Week 3 (completed)

Week 3 was our personal project week, so no new concepts were introduced but it did require us to utilize all the previous concepts that we have learned. At first, I thought it was kind of uneventful and mellow but come to think of it, it was actually a critical week. It not only reaffirmed the choice that I made in attending a bootcamp. It also reaffirmed that I am heading in the right career/life direction. I was sleep deprived but happy. I stayed up every night until 1 AM just to code. I keep making excuses like “after I finish this part I’ll definitely go to sleep” or “just 15-30 more minutes” It was such a good feeling, I was obsessed with my project. I know it wasn’t the best or the most complex but it was extremely fun to work on. Here is a screen shot of it down below:

I got the idea for the game after looking up a tutorial for a simple Rock, Paper, Scissors game. I thought to myself “Pokemon is just a fancier Rock, Paper, Scissors. Why don’t I just add some sprites from my previous lab projects and make it pretty with some CSS”. It turned out better than I expected, and I have to thank the amazing super smash bros background for that. The functions in the project was half from tutorial and half mine. The user input (the elemental buttons) codes were mine, with the assistance from my camp’s TA as well.

Concepts that I have learned from week 3:
I didn’t learn any new concepts from week 3 but working on the project really solidifies my understanding of HTML, CSS and Javascript. I learned that you can just create one function that can select a different indexes from an array and use the value in that index. Here is the code snippet:
setUserChoice = (idx) => { this.setState({ playerAsh: this.state.pokemons[idx] }) }
This is the code that helped me understand how to create a user input for player Ash (the actual user on the right) to select one of the three pokemon inside the array to battle.
I also learned a cool CSS trick that can help me move and position things around the page. Here’s the code for that! objectYouWantToPosition {
position: absolute (or relative);
right (or left): XXpx; top (or bottom: XXpx;
}

Another cool JS function that I’ve learned this week from practicing is
array.map(x=>x * 2)
To be fair I did learned this before but it didn’t stick but now it did (go figured lol). With that code, we can essentially turn the index to any other number without changing the original array! WOWWOWOW! What an age to be alive!??!? Ok I’m done. Good night!

Week 2 (completed)

I will post a short recap of week 2 due to this being technically week 3. I can’t believe we covered a language, React, within 1 week. I’m not sure how to feel about learning something like React in just 5 days but I managed to understand a few concepts. I mostly understood the concept of components, props, and states. I am still struggling to learn hooks and the benefits of using it.

React as a language act as a virtual DOM and use components to break down big chunks of functions, then export and import data via components. “Visually” it looks like this
Our main “App.js” => pass components we set => Return () or render our web page to visually display all the components that we have imported from ComponentA, ComponentB, etc. ComponentA could be a table written in HTML and has another component inside of it. The component inside ComponentA can be an array imported from another component called ComponentData, then ComponentData could have another component inside of it as well, so on and so forth. This makes building a website with different functions more manageable. React uses a JSX syntax that is similar to JS which gets compiled by Babel. Babel then takes React code and compiles into ES5 or ES6 to make it more universal for different browsers

Props are how data gets passed into React components. E.g. a React component called Sushi with a prop called name that is being passed, with a value called “Uni”
<Sushi name="Uni" />
Here’s a component filled with more than 1 prop.
let firstSushi = "Uni";
let secondSushi = "Otoro";
<Sushi className = "sushi" quantity = {4} name = {firstSushi + "and" + secondSushi}/>;

One important take away with React is its data-flow. One way flow from parent to child, that is read-only. If you want to communicate something to a parent component then you will need to have a function that will pass the function to the child component. If something happens within the child component, calling the function alerts the parent-component about the child component.

State is the primary method of storing data in a component and use to keep track of data in a component. A state-change trigger React to re-render components to display accurate data change. If something visual is being changed, it belongs in the state. Value and on change are used in two way binding to accurate display data change. I.e.,
State = { text: ‘’ }
handleChange = (event) => {
this.setState({
text: event.target.value
});
};

Hooks let you use state and other React features without writing a class. That’s the definition directly from reactjs.org. Currently, I only understand how to use a State Hook which is display below.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div&gt;
      <p&gt;You clicked {count} times</p&gt;
      <button onClick={() =&gt; setCount(count + 1)}&gt;
        Click me
      </button&gt;
    </div&gt;
  );
}

The example component will have two states, count and setCount. Whenever you click on the button “Click Me” it will change your setCount by +1 then displayed your count times via prop {count}. That is all I have on hooks for now, like I mentioned. Not sure what are the benefits of using hooks vs. this.state. Alrighty, that is all I have for week 2 recap. See ya next time! ~Soosh signing off…nope! That still sounds ridiculous AF.

Week 1

“The mind, once stretched by a new idea, never returns to its original dimensions.”

― Ralph Waldo Emerson

Cheesy quote? Maybe. Did I google it? Mos def. It’s just that after reading my first post again, it reminded me of this quote. I’m surprised that I remember this quote for some odd reason. I remember the first time discovering it when I was at the dental office. I was laying down on one of those reclinable dental chairs and I saw a framed picture of a desert/sand dunes with this quote as a caption. I thought to myself “weird flex dentist lady but ok” It was actually interesting to read my first post again before writing this one. It was interesting in many ways. First, what I found difficult at that time seems easier now but not because I have gained more skills or knowledge with HTML and CSS. There are still plenty of syntaxes and concepts left for me to explore. I am comparing apples and oranges here but I think HTML & CSS is easier when you compare them to Javascript because JS as language, gives you the ability to do a lot more, therefore, more to learn..and fail (for once I am ok with that) but the possibilities are endless.

I’m rambling again. I have to remember why I started writing this post and this blog in the first place. End goal is to see how far I’ve come. So let’s focus on the concepts that I have learned or didn’t learn..Ok more like struggled with. I like to think that I retained some information..

Useful things that I have learned so far (from broad to specific things, e.g. concepts, labs, methods, functions, etc.):

Objects and Class: This first week really solidifies my understanding of object oriented programming. I kinda-sorta grasped the concept when I was learning C# back in college but not really you know? OOP as a whole/big picture can be oversimplify by the formula A=B=C therefore A=C (ok not really but for now this is the simplest way I can explain it). My favorite lab that goes along with this has to be the RPG lab! I mean cmon..

RPG Lab: I love this lab for obvs reasons!
Prompt: First, create a Monster classAdd properties for Health, Strength and GoldAdd a constructor to initialize our valuesAdd a method to print out the Monster’s health, strength, name and goldCreate a Monster and print out that Monster’s stats.
Next, create a Boss class that inherits from the Monster classAdd a property to the Boss class called ExperiencePointsAdd a method to the Boss class called Heal that heals the Boss to full healthCreate a Boss and print out that Boss’s statsSet the health of the Boss to 0(zero). Next call the Heal method on our Boss and then print out the stats again.

Solutions/Code:
class Monster { constructor(name, health, strength, gold) {
super(name, health, strength, gold)
this.name = name;
this.health = health;
this.strength = strength;
this.gold = gold;
this.monster = monster; }
printStats() {
console.log(`The ${this.name} has ${this.health} health, ${this.strength} strength, and is worth ${this.gold} gold`); }}
let Demon = new Monster("Demon", 9000, 2500, 9000)Demon.printStats();

class Boss extends Monster { constructor(name, health, strength, gold, exp) { super(name, health, strength, gold);
this.exp = exp;
this.fullhealth = health; //this.fullhealth property is set to equal the original boss's health }
heal() { this.health = this.fullhealth; }}
let monster0 = new Boss("Demon Lord", 666666, 666666, 666666, 666666)monster0.printStats()monster0.health = 0;monster0.printStats()monster0.heal()monster0.printStats()


Arrays: I freakin’ love arrays! I never thought I’d say this but I actually find it very useful. For some reason I couldn’t grasp the array concept with C# but I get it with JS! Also maybe at the time I was learning Arrays along with Matrixes, and C# is less forgiving than JS. Arrays is more than just a list. It’s a list that you can use in a function to do specific things! Which bring me to my next favorite lab!

Fav (Array) Lab & Solutions: I like this problem for many different reasons. The first reason is the premise of the prompt. The second reason because it uses an array in a function. The last reason is because it taught me how to write my first and VERY basic algorithm! i iS dA sMaRt GuY..durr. Jokes aside, below is the prompt and solution.

prompt: Learning to code around your full time job is taking over your life. You realize that in order to make significant steps quickly, it would help to go to a coding bootcamp. You decide that rather than leaving work totally, you will request a sabbatical so that you can go back to work post-bootcamp and be paid while you look for your next role.
You need to approach your boss. Her decision will be based on three parameters:
val = your value to the organisation, happ = her happiness level at the time of asking The number of letters from ‘sabbatical’ that are present in string ‘x’. Note that if x contains three instances of the letter ‘l’, that still scores three points, even though there is only one in the word sabbatical. If the sum of the three parameters (as described above) is > 22, return // ‘Sabbatical! Boom!’, else return ‘Back to your desk, boy.’.


solution:
const letters = ["a", "b", "c", "t", "i", "l", "s"];
function sabb(text, val, happ) {
let counter = 0; for (let letter of text.toLowerCase()) {
if (letters.includes(letter)) { counter++ }
sum = val + happ + counter; } if (sum > 22)
console.log('Sabbatical! Boom!')
else return console.log('Back to your desk, boy')}

* // ============== Test Case ===================// *///
sabb('What do you mean I cant learn to code??', 8, 9);
sabb('Can I have a sabbatical?', 5, 5) = 'Sabbatical! Boom!'
sabb('Why are you shouting?', 7, 2) = 'Back to your desk, boy.'
sabb('What do you mean I cant learn to code??', 8, 9) = 'Sabbatical! Boom!'
sabb('Please calm down', 9, 1) = 'Back to your desk, boy.'

Concepts or “Tings” I hate/struggled with:
Document Object Model: DOM is DUMB. Ok jokes aside, Document Object Model is ridiculous and tedious. I get that this is how people code most web apps 10 years ago and to be honest 4 days ago I thought it was the only way to code. I mean that is the basic concept of building web pages/apps. I just didn’t know how difficult it would be. There are just so many concepts you have to piece together in order to make it work. I’m glad to know that React can help ease this pain (thank you ‘early’ facebook! Not the now fb where you steal people’s info) I’m excited to be learning React in the upcoming week! From what I know so far about React is that it is a library that can help build a user interface a lot easier than the DOM.

Alright. That’s all I have for Week 1. Time to turn in and get ready for Week 2, which starts at 9 AM tomorrow! ~Soosh out!
P.s. I’m still working on a better sign off

The Adventure Starts

I’ve never known how to start intros and also because I have no experience with blogging so I will just dive right in and talk about the purpose of this blog, who I am, and what to expect from this as a reader. Honestly, I’m not sure who my audience would be (maybe friends and family?) as this blog is purely intended for my own personal use. This will be a reflection on my experience at Redwood Code Academy and web/software development journey.

I recently quit my job as a project manager/consultant at a Software As A Service (SaaS) company to pursue a career in web/software development. Don’t be fool by the title, it sounds more impressive than it really is. The majority of my work was mindless, repetitive tasks. I felt that I was wasting my life there, one spreadsheet at a time. Days turned into weeks, weeks into months. Finally, one day I decided to start coding again for shiz n gigz. That day reignited something in me, it made me realized why I dropped out of CS at CSLUB and pursued an IS degree at CSUF. The truth is that I’ve always enjoyed coding but the CS degree required really high math and science (Calc 2/3 and Physics 2/3) which I’ve failed a couple of times, which forced me to pursue the next closest thing to a CS degree, Information Systems. I remember struggling in an Intro to C# class but I thoroughly enjoyed it.

Eventually, my after work coding started to creep its way into my actual work hours, and that’s the moment I knew that I should quit and pursue this full time and find a career in software development. After many weeks of researching between self-taught vs community college vs coding camp. I decided to go with a coding camp for various reasons. Specifically, I decided to go with Redwood Code Academy for both professional and personal reasons. The professional reason is due to the stacks or languages they offer, C# and .Net. While, the personal reason is for their staff, especially their director, Karim. He treated me like I was a real person and really believed that I can benefit from a coding camp due to my previous technical background.

The full immersive program starts tomorrow ( or today at 10 AM) I am both nervous and excited for it. Even though, I have been attending the prep courses this past week. I do want to keep track and input what concepts I have/had difficulties with. I figured why wait until the actual program starts, the sooner you (or I) start it, the better!

Difficult concepts:
The concepts or issues that I’ve had during the prep courses were: resizing images with CSS, how to display block content horizontally, and centering texts vertically.

Solutions:

  1. Resize an image with CSS:
    There are many ways to resize an image with CSS but the most important thing is to define it as a class or an ID in order to select and stylize it with CSS.
  2. How to display block or similar content horizontally:
    I can encompass similar content within a container and define it as a class. Then, declare those content as its own individual classes then stylize it with CSS. Specifically, have them “float: left” or I can use “display: in-line block” — Will expand on this when I am less sleepy and have more time.
  3. Centering texts vertically:
    To center texts vertically (from the top and bottom) I would need to use stylize the class and its content with CSS by using “padding-top: xxPx” or “padding-bottom: xxPX” depending on the situation. — Will also expand on this.

Going forward, I will be tracking my progression in this formula. I will list the difficult concepts then solutions that I have found for it. What I hope to gain from this is a deeper understanding of the concepts I have difficulties with and if I can come up with better solutions later on. I also hope to increase my creative writing skills and I REALLY want to make this blog a bit funnier (or entertaining) but since I am new to blogging I’m not quite sure how to do it. If you know me IRL then you know that I am a bit of a goofball but when it comes to blogging or writing in general I tend to be more serious. That’s it for now, long day ahead tomorrow.