drewbiecodes

[drewbiecodes]

October 15, 2018

I made it.

[drewbiecodes]

jeez it has been a while

Hey y’all.

Writing every day got a bit tedious, but I have finally come to the conclusion that it is time for me to get serious about finding my next job. I have a fair amount of experience with React, Redux, and other packages that will help me find my next job. I do realize though that finding my next job will be a bit of “luck”. I am not a React engineer. Over the last year I have been a Business Analyst, and slowly converted more and more of our projects into front-end projects. Just a few weeks ago I used our internal Github pages to host our first React project for the office and it felt amazing. It still has bugs here and there, but I made it and it’s a step in the right direction for our group and the company I feel like.

I am diving into Cracking the Coding Interview, setting up times for me to work on fun projects that I can actually do now, and seeing what I am capable of. I am nervous, anxious, and scared about looking for a new job, but I am also excited and optimistic that the next job will help me get to where I want to be in my life.

I can’t wait to see what happens in the next few months!

[drewbiecodes]

day 21: more git thing

I spent thirty minutes today trying to iron out more of this React Project, and am having some hard time focusing. I get really caught up in not knowing how to do something right away, then get distracted and start watching a Youtube video or something like that. I really wish I had a friend or someone who I could bounce ideas off of and such. 

I’ll get better. I need to.

[drewbiecodes]

day 20: freecodecamp projects

Right now, I don’t feel like learning about how to test applications when I can barely write a react component/application. Therefore, I started some projects of freecodecamp. The one I am currently making involves a npm package called marked which allows us to turn text into README file syntax to be displayed with headers, underlining, bullet points, and all that great looking page stuff. So far I drew a small markup and created the bare bone components. 

[drewbiecodes]

day 19: more testing

I am a little late to the party on this entry, but we just continued to do more testing parameters for our application and for a new component. Also learned how to write more tests than just one per component. “it” and “expect” are your best friend... and so is documentation. 

[drewbiecodes]

day 18: and we back

Today I decided to start another React Redux course with Stephen Grider (the creator of my first tutorial). The reasoning behind this move is because I can’t get the stinking Twitter API to work due to authentication, and I still feel like I need a little more foundation before I go head first into a project. I might do this class in bits and pieces so I can focus on a side project as well.

Today, we started to learn the basics of testing with React. I believe we are using Mocha, and it all comes down to three key words:

describe

to group together similar tests

it

test a single attribute of a target

expect

to make an assertion about a target

We have one test file per component and can have multiple tests per one. It’s also really cool that when we use expect, we can pretty much use plain, readable English as seen below.

To run a test, we use npm run test:watch which will show us if our test passed or failed for a certain output we wanted. Below shows the little componet we will be making to test more components. This course is more focused on Advanced topics about React and Redux which is exciting. 

More studying soon! Yayyy. Got an hour (2 Pomodoros) in today.

[drewbiecodes]

day 17: mock

Today I made a quick mock of what I want my page to look like in the end, and it could look worse.

The Comic Sans really brings everything out. I added a temporary banner to my application that can be seen in the Github push I made earlier today. I am going to have the functionality for a user to see another member’s current banner and things like that. 

I need to admit though; I feel like my productivity has gone down since I finished the course. Now that I don’t have someone to essentially hold my hand through this process it makes it a little scary. I can make the application and get things on the screen. I know that for sure. However, making it pretty really isn’t going to be my strong suit. I’ll keep pursuing it and doing my thing though!

I need to put a temporary hold on my coding spree unfortunately since I am going to Yosemite National Park tomorrow and going to be there until Sunday.

I. AM. STOKED.

[drewbiecodes]

day 16: looking up APIs

Today was a meh day since the internet was out when I got home and I spent two hours on the phone with Comcast to try to fix it. So in the end when I got it back up, I used create-react-app to get a simple boilerplate template for my react app, then installed dependencies such as Axios and Redux-React. I also looked up a lot of APIs today and just decided to go with Twitter. You can see my current progress from today on my Github. I was only able to go thirty minutes today.

[drewbiecodes]

day 15: finished my course

I finished my React-Redux course today and now I feel like I don’t have any guidance and that I need to start applying what I learned. I finished the class in my first Pomodoro, and in my second one, I finished putting a majority of my projects onto my Github account.

The real question is... What do I do now? The class kind of lit a fire under my butt and pushed me to get more and more of it done. Now that it’s done, I either need to take another course to validate and build upon what I learned, or make a small project.

I was told it’s very beneficial to remake projects or apps that have already been done for the sake of learning, and I think I’ll be doing that with Twitter. I use it way too often to complain, and if I can somehow apply what I learned in my course, I should be able to work on larger projects soon. If all else fails, I’ll take another course or retake my current course but at a faster rate.

[drewbiecodes]

day 14: redux form and sunday

Before noon on a Sunday, I was able to complete 4 Pomodoros which is equivalent to 100 minutes of studying. Not bad for a guy who only got five hours of sleep because his new neighbors won’t turn the sensitivity down on their motion detected light outside that catches shadows moving that it creates.

I’m going to try to keep these updates (or at least this one)  short just because I don’t want to condense 2 hours of learning into a Tumblr post. Here are some notes that I took during my course:

ES6 is something that will greatly reduce the amount of lines of code you will have to write

We add a “field” parameter to our components for form fields so we can get event handlers, error control, and detect if a user has touched a form field

The label and name of our component don’t have the be the same, but name is required and label is an arbitrary parameter we assign in our form

onSumbit for our form needs to deal with Redux Form side and our own side

Redux Form side deals with the validation process

Our side deals with axios and the post request to the server

Ternary expressions are super dope and so are the backtick syntax (``)

Creating an action creator, then reducer is a usual thing

I kept getting a 307 Options error on my post request, and to fix it I changed the URL from HTTP to HTTPS 

I think this is a feature to stop people from doing cross-origin attacks

Currently, have the issue of having to wait for the server to return a 200/201 code then redirecting to another path

Not quite as short as I’d like, but useful.

Update @ 10:43 PM

I finished three additional Pomodoros before taking a break for the rest of the day to eat bread and watch someone I don’t know yell at a video game on Twitch. Fun stuff. Here’s some notes from my most recent study.

Pushing our path to history allows us to jump around to different paths

Action creator, reducer, connect is life

The .then function or whatever you call it is amazing when you’re waiting for a promise to return

this.props.match.params.id is given to us by reactRouter

ownProps === this.props

Make sure the key you return in mapStateToProps is the key you use throughout your component (I learned the hard way)

deletePost wasn’t that bad

Things are starting to make sense! :D

I feel like today was a very good day for studying. I feel accomplished.

[drewbiecodes]

day 13: redux-form

Happy Saturday anyone who reads this or reads it in the future. 

We finally connected different parts of our application together by using the Link component from redux dom. It’s as easy as calling the component and saying which path do you want to redirect to. It’s also quite easy to see in the html of the page that the Link turns into an anchor tag, and React deals with it to make our app a SPA.

Today, we also started learning about Redux Form to deal with our new posts. Here’s a small chart.

First, what we did based on the documentation on their website was created a reducer from ReduxForm and put it into our combindedReducers function. Next, we identified our three pieces of state for our project, which we determined to be:

Title

Categories

Contents

We then started to create our form fields, but stopped after they mentioned we would need to create new components. About to go out and I’ll finish more later.

[drewbiecodes]

day 12: lazy friday

Second Friday of this course and this challenge, and I was only able to complete one Pomodoro so far, but hey. It’s Friday. A little bit of something is better than a whole lot of nothing. Today we started going over our new component called PostsNew that is in charge of making requests to the API to save our new posts. Here’s the guideline we created.

So far we have created the component and was able to get the GET request data from the API using our super secret key. However, since we are dealing with an object and not an array, we have to use lodash’s _.map function to create the list elements for our posts. Next (I guess this is actually a part of the guidelines now), we created our boilerplate code for PostsNew, and created the route in our main index.js file. We had to introduce another component of router called Switch since our paths were both being called. One being “/” and the other being “/posts/new”. This happened since technically both routes can be called when we go to posts new due to the slash. Switch just takes the first correct route and shows the components, so the more specific routes should go first.

Next, we will create the navigation between the pages we have without using anchor tags. That’s as far as I got so far today.

[drewbiecodes]

day 11: more reducers and actions

Today we started creating some reducers and actions for our blog project and decided to go with a dictionary instead of an array to make looking up our posts easier. We have also concluded that creating a reducer for activePosts is redundant since the Router URL just takes an ID that we can pass off pretty easily. 

We again need to use an API to do all the GET and POST requests, so we npm install reduxPromise and Axios. Axios for the API requests themselves, and reduxPromise as our middleware to deal with the asynchronous nature of our requests. I need to make a note here that our request from axios is used as the payload for our action type, which then gets automatically seen as a promise by reduxPromise that will eventually make it to our reducer than component from there.

We create our reducer in index.js of the reducer folder and declare our state as a dictionary instead of list. We then use lodash and play around with how we will use it at this site. The most important thing to take from this is that lodash has a method called _.mapKeys(array, ‘element’) that allows us to make a dictionary very easily.

Last but not least, our reducer links up to our postsIndex component and uses a new React Lifecycle Method called componentDidMount to basically call a function automatically after the component is done rendering. componentWillMount is another lifecycle method we could have used.

An hour of studying down (2 Pomodoros).

[drewbiecodes]

day 10: starting of the blog

Not any coding was done so far in this thirty minute Pomodoro, but I need to cut it short for now since I need to go eat then go to the gym for Bouldering League. So far we started talking about the simple blogging application we are going to make and the API we will use to post and retrieve data. Here’s how it will work.

Essentially there is an API that we send a JSON file to, and depending if we do a POST or GET request, we will post or retrieve data to view or whatever else we want with it. Documentation for the API can be found on reduxblog.herokuapp.com. And to make sure our posts can only be retrieved by us, we have a “super secret” key which we make up ourselves. The key can also be used to distinguish between different users.

Also, we are using an application called Postman to play around with the API and getting used to it before using it. Here it is if you wanna see it.

I will hopefully study more after the gym!

UPDATE 11:12 PM

Got back from the gym and decided to do another half an hour of studying. The main thing we focused on in this leg of the class was how we are going to make our application into a Single Page Application (also known as a SPA) by using React-Router. Traditionally, we request data from a server, and the server returns HTML that we then display on the screen for a user. However, in this case we are intercepting this change in URL with React-Router and using Javascript to display the page on the page without ever really leaving the domain. Here’s an image of how React-Router works below.

History is a feature of React-Router and it’s purpose is to talk to the router, and in turn the router decides what is going to get displayed next in terms of components. The BrowserRouter component interacts with history, while Router looks at the URL and decides what components to show on the screen. Here’s a snippet of my code below.

And yes, I am indeed the man. We wrap it all in a div since BrowserRouter wanted only one child, and it’s pretty cool how Route can be hidden or shown based on the URL of the page.

Progress feels good fam.

[drewbiecodes]

day 9: makings things pretty

Today I was only able to study for about an hour, but dang was it cool. We finished off making our Weather Application (look at a short video I made below or wherever it posted on Tumblr) and it came out pretty well.

So first we used a react package called Sparkline Charts that make SVGs base on data we pass to it. Super simple. All we had to do was give it data, and to do that we used map which is continuing to be a blessing. Next, we refactored our code since we were copying and pasting the Sparkline code over and over again. As a consolidated component that just took state, it was simple to make it into just a function that we could call. It is a component and not a container since it doesn’t need to deal with state at all. 

We did use componentDidMount for the first time today, and essentially it automatically gets called once the component has rendered on the screen, which means our Google Maps gets called when the component is fully rendered. You can see the slight delay I believe. Lastly, we gave the pages more styling to make the map fit and boom! All done for today.

LET’S KEEP THIS ROLLINNNN’.

[drewbiecodes]

quick demo of React Weather Map app using Google Maps API.

[drewbiecodes]

day 8: redux redux and uh redux

Day 8 of my study grind and today I managed to do 75 minutes of studying. Not bad before I go to the gym. I realized I go through so much material during that time that it’s hard to remember it all, so I am using Udemy’s bookmarks to keep tab right off the back. Before I go into that though, I got to say I am proud of myself for realizing today when we had to use bind, and not getting too lost with the redux-promise middleware. Essentially, redux-promise is a gatekeeper for asynchronous calls like AJAX that waits for an action to finish before moving on to a reducer. Here’s a graph to illustrate it.

To make AJAX calls, we do not use jQuery, but instead, we are using a package called axios that we used node to install. Super easy to make a request and all we needed was to construct the URL. I am a still bit confused on connect, but I am seeing it as a way to (wait for it) connect Redux state and with React views. Got to remember that we need to always connect our reducers to our reducer root. Coming back to our promises that Redux brings into play, it is super convenient seeing how the middleware deconstructs the promise for us instead of us having to deal with the asynchronous calls not coming in at a consistent time. 

One of the most important things I learned was that we never want to manipulate state directly. We want to use setState, or created an entire new instance of our state, such as using concat or `...` instead of push.

Still a bit confused about actions, reducers, and containers, but I am understanding it a bit more every day!