Plot twist

1/12/18

“The more I learn, the more I realize how much I don’t know.”

I think Albert Einstein must have been studying Web Development.

Advertisements

magic…

1/7/18

I have spent about two hours trying to trace and fully understand the inner workings of createStore() when it calls a Reducer. Specifically, how does the Reducer keep track of the current state? I am at a point in my school lesson where I am starting to learn about how to dispatch an action from a component and update the store. Well, in the default code that was given to me that function was in the store.js file, which has a callback calling the Reducer, and even though the app was working I didn’t know why it was working. How was the Reducer using the most up-to-date app state? Was the createStore function sending the state to the Reducer?

I found my answer in the Redux documentation, but that isn’t the point of this blog post. It got me thinking about something. Sometimes I feel like I ask my mentor and my fellow classmates weird abstract questions that nobody else is asking. Usually technical stuff about why things work. Like, why and how does createStore() work, for example. Sometimes these things just work, like magic. It makes me feel like they are grasping the concepts quicker than I am, but I was thinking more about that tonight and came to a different conclusion.

I think a lot of aspiring developers, and even accomplished developers, are ok with just letting the magic happen; accepting that some of the things just … work. I asked my mentor about the Reducer and how it gets the state. He said that the initialState was getting updated.

It sounded good. It made sense. I mean, I was setting state=initialState after all. So we signed out and I went on to practice some more. I decided to log the initialState at several different points in the Reducer, and guess what. It stayed the same every time! The initialState was not being updated. My mentor was … wrong? How could it be.

Well then I became very curious! I opened CodePen and started playing around with some code and I started reading some docs about React, Redux, and various JavaScript things like object.Assign. Eventually, I figured it out. It has to do with the syntax of the createStore function and ES6 Default parameters.

Now that I’ve done this research I probably won’t ever forget how that specific part of Redux works. Why are others ok with the magic? I’m way too curious to settle for that! Plus, if I actually understand it then I don’t need to rely on my memory. If I get stuck, I just work through it step by step and as long as I understand it then I can figure it out. I think they call that troubleshooting ; )

I’ll leave you with this fun interesting video: how did Jordan Walke come up with React?

if action.type = actions.ADD_POST

1/4/18

Yep. I’m learning Redux now; just started yesterday. Before yesterday all I knew about Redux is that it somehow managed the app state- that’s it. Now, I can painfully stumble my way through setting up an action, dispatching it, configuring a reducer, and *crosses fingers* update the store. I think that is a pretty big hurdle I got over with just one day of studying! It’s not pretty or graceful, but I can get it to work. *adds Redux to my toolbox*

Well, it’s 2018, happy new year! I’m back from Jakarta and I’m hanging out in sunny Arizona while the rest of the US is frozen. So, that’s pretty cool. I go back to Seattle in a couple weeks, where I’ll start my job hunt. I’ll probably be targeting React Developer roles. I am still in school though, and I still have a daunting amount of work ahead of me. I have a lot of spare time right now though, because my wife is currently watching our son while I’m off fighting dragons studying and job hunting. I am going to use this time to cruise through as much school work as possible. Hopefully I can turn it into a coffee-frenzied coding marathon!

I have made one React app so far. It is a number guessing game. You can check it out on Netlify.

Super props! A React roadmap for beginners

12/3/17

The last two and a half weeks has been a freakin’ whirlwind!! Baby Anthony has needed our attention almost all day! I shouldn’t be shocked, but I’m a new Dad; I didn’t know what to expect. I knew I would be busy and exhausted but nothing can prepare a new parent properly. It has to be experienced to understand.

I have barely touched any code, but I did manage to learn the fundamentals of React. It took me three days, working around the baby’s schedule. I roughly estimate the total hours to learn it, was about 12. Below is my roadmap. It took me from complete beginner up to being able to code a React component from scratch with minimal reference, style it inline, add some JavaScript interactions, init and update state, and then mount it to the DOM.

  1. Start with this article. It’s not perfect. There are some typos and it’s a little bit long-winded sometimes. Try to see past the flaws though. It explains the concept well. It was simple enough to understand and get me going in the right direction. You should open an online code editor, such as CodePen for example, and code along. If you do choose CodePen, you will need to add Babel, React, and React-DOM within your pen settings.
  2. Next, work through this interactive online lab.
  3. Read through some of the official React documentation. Start with “Hello World” and end after “State and Lifecycle.” You could go through the rest, but I stopped there. I was just trying to learn the minimal amount to get me started on my React journey. Go back and finish the documentation when you’re ready. I recommend this official documentation for one important reason. That is the “law of the land.” I have found that, like everything else computer related, there are multiple ways to get things done with React and that is evident when reading multiple tutorials. Bookmark it for quick access and reference it often. Reactjs.org will keep their docs up to date and will also provide best practice advice.
  4. Some more reading material:
    1. https://edgecoders.com/learning-react-js-is-easier-than-you-think-fbd6dc4d935a
    2. https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76
    3. https://edgecoders.com/so-you-want-to-learn-react-js-a78801d3cd4d

There! That should get you feeling confident with the fundamentals and hopefully hungry for more React knowledge!

It’s a boy!

11/15/17

I havent touched any code for maybe around ten days. It’s for a good reason though. My son was born last week! Anthony arrived on November 8th at 2:50am. Prior to that, I was very busy packing all of my belongings into storage and making my way to Jakarta, where I’m residing for six weeks.

Taking care of Baby A has been challenging. We’re new parents. The first three nights were chaos and my wife and I both felt like crying right along with Anthony! Now though, on day eight, life is much easier. Still challenging at times but at least we can get him to nurse and sleep well. We’re getting into a good routine now. And we were actually able to get out of the apartment today! We went in shifts. I watched him while my wife went to the mall for a couple hours in the morning and she watched him while I went to the gym in the evening.

Hopefully I can get back to my school material soon. I feel like I am losing some skills that I worked so hard at learning! So I’m feeling a bit stressed about that. I was watching a JavaScript tutorial while walking on the treadmill today, just to get a quick refresher. How nerdy is that? I think most people watch movies or music videos, or something like that, while on the treadmill. Me? Nah. Give me a techie tutorial any day!

Anyways, not much code related news to share. Just life stuff, which is not within the scope of my blog so I will keep it to a minimum. *peace sign emoji*

The CSS Framework Rabbit Hole

10/31/17

Happy Halloween!

I went down the CSS Framework rabbit hole tonight. I went on a hunt for a Bootstrap alternative that is 1) lightweight, 2) uses “em” in its media queries, 3) has a decent color palette selection, 4)  syntax that is intuitive and easy to remember, and 5) has control over the grid gutters. I couldn’t find one. I looked at about 25 different frameworks. Did you know there are over 100 of them?

Many of the frameworks had poor documentation and some had good documentation but no examples- and some were only a GitHub page with a couple lines in the description. If I’m searching for a framework to try out, I don’t want to clone a bunch of repos and try out each one individually. I want pretty pictures and code samples!

Foundation came close. It’s a pretty solid framework. It has lots of features and it uses “em” in its media queries. It only has the basic color options though, like the same ones in Bootstrap. I’m not a big fan of the form design either.

I think I landed on a possible plan. I am still mulling it over though. At the moment, I’m leaning towards Yahoo’s Pure CSS Framework. I haven’t actually played with it yet, but their grid system looks quite nice. The framework is minimal, yet still has some good features. However, to add the grid it takes an additional CSS file. Not a big deal, but it would be nice to get it all in one file for convenience. So, I’m thinking I could go with Pure’s grid system and then just grab the modules from Bootstrap that I want. That’s one option, out of many.

Not that Bootstrap is bad. It’s great actually, and I basically went full circle during my search today. Meaning, after I looked at all of the different frameworks I went back to Bootstrap’s webpage and compared my findings. I think it’s the most popular CSS Framework for a reason. It really is one of the best most complete and easiest to learn. Best is too subjective, but I’d still say the top 3 frameworks are Bootstrap, Materialize, and Foundation. I have a tendency to rebel against the most trendy things in life, such as Bootstrap, which is the reason I went off in search of another framework I think.

I have the same issues with Materialize as I do Bootstrap. I don’t ever use all of their features, so the download ends up being unnecessarily bloated. On the other hand, having easy access to all their features is nice. Also, the media queries use px instead of em. Otherwise, their fantastic.

It’s a tough decision. Do I go with light weight and minimal features with a modern grid system that I like, or more features than I need and an outdated grid system? Hhmmmm.

That question actually lead me down another path tonight. I wanted to form my own opinion on the CSS file size controversy. Right now, the default Bootstrap 4 minified CSS file is 125KB. There is a lot of talk online about how that is a ‘monolithic’ file. That’s a quote actually. I actually read that somewhere in my research tonight. But it’s not though, even for a cellphone. Consider this, back in 2003 3G was running at about 200 kilobits\sec at peak. That is about 25KB\sec. It would take about five seconds for that Bootstrap file to download. Now, yeah, that feels like forever when you’re staring at your screen, but it’s not 2003. Ok, so let’s fast forward to 2012, when PCWorld ran a test. They found that 3G was ranging from 590 to 3840 kilobits\sec depending on the carrier. At 590kb it would take about two seconds for that Bootstrap file to download. Additionally, that test looked at 4G as well. In 2012, 4G speed was ranging between 2810 – 9120kb, and at the lowest 4G speed the file would download in a little under half of a second. Should I still be concerned about using a framework that fits in a 125KB file, in late 2017? That’s not even mentioning that a popular system like Bootstrap is likely already on the device. So I don’t know; I’m gonna have to analyze it a bit more and sleep on it. ¯\_(ツ)_/¯

But with all that said, in the interest of becoming a better developer and broadening my knowledge, I am going to dig into all three of them, and Pure, and learn how to work with their core functionalities. In the end I am predicting I’ll stick with what I know, Bootstrap, or go with Foundation.

I’ll end with some reading material and a cool CSS compiler I found:

 

School Update

10/23/17

I’ve been extremely busy. Not just with school but life outside of school as well. My wife and I are preparing for our first baby. He’s due on November 20th, so I’ve been getting ready for that. He’s not even here yet and he’s already keeping me up at night! haa!

I should’ve been done with school by now, to be honest, but working full time and balancing school life and the rest of my life is very difficult. It’s ok though, it’s getting done! Progress is made every week.

For example, I finished my server-side final project. It is a fully functional job website. You can check it out here: https://infinite-garden-26914.herokuapp.com/. The instructors at Thinkful.com really liked it and gave me some great feedback. It should make for a solid portfolio project.

Moving on to React now!