Personal Dilemma

You Can Do This!
1

Hello,

I have just finished the lessons part of the front end libraries section, and I have just started the project portion of the course. I was looking though the updated projects of FCC 7.0 Update on the 7th Edition freeCodeCamp Curriculum and I was interested in the Learn React by Building a Flappy Bird Game. (When I was looking into it I just finished the React portion of the lessons and was going into Redux.)

I was testing it out and I thought of experimenting with the jump height and drop rate (and maybe the spacing of the poles if what I got was different from what I was aiming for) to increase the possibility of success of clearing the pole.

When I opened up the inspector, I was surprised from what I saw. Over 1500 lines of code, with about 500 of them just listing all different kind of cache’s (Things started to make sense to me around line 700, and it felt like all of the UI code was from 1000 - 1300 ), I read through the entire code and was lost most of the time. I tried to find what I was looking for, but I couldn’t find anything that might have lead me to it.

My dilemma is, did I take off more than I could handle at my level, or am I in bigger trouble then I thought not understanding about half of the code and not being able to find what I was looking for? Also, was I wrong at being shocked at how many lines of code there was? (Especially since we are supposed to be able to write this game after finishing the lessons)

2

I’ve been in this situation before. My first website for a business had a multitude of features, way more than I could have handled at the time.
It wasn’t pretty, it wasn’t fast, but I rose to the challenge. And you will too.
Remember, one big professional looking project is better 10 mini projects.

1 Like
3

if you want to look at the code, instead of looking at the project and use the inspector, look at the code in the repository, you don’t see the react code with the inspector

3 Likes
4

I seriously dont think thats a good idea. This approach of trying to teach something by making games is just unnecesessarily complex and just stupid. My advice is that you should continue on the lessons and build projects, leave the games to C#

5

it’s a different way to teach and learn.
games are also projects, and they are something that can be created with these languages.

After you do it here it doesn’t mean that you have to go out there and create other games
it’s a learning experience

2 Likes
6

@Imstupidpleasehelp:

Thanks for the encouragement

Also, I like the name you chose for yourself

@ilenia:

Where would I find that?

@divyanshtiwari:

I wasn’t trying to create the game from scratch, I just wanted to modify some of the perimeters. On an off note, people always recommend to build games like “Tetris” and “Battleship” with JavaScript, so I don’t think building games out of JavaScript library languages is out of line here.

Also, I agree with @ieahleenabout having games is a good way to learn the language. It keeps people interested while learning and that helps the learning process all together

7

How did you inspect the source? Are you sure you are not looking at the webpack build output? (i.e. anything with a .chunk on the file name).

The total line count should be about 400 or something in total (component+helpers). You can view the original source code in the Sources tab.

As far as I can tell this is the repo

1 Like
8

@lasjorg:

I went to “inspect element” and looked at all the code that was under the “inspect” tab. I don’t remember seeing any .chunk elements.

Thanks for the link

9

The approach of using the inspector to reverse engineer a given site/web-app only goes so far. Large and complex web apps will have tons of code, which could even be minified and be almost unreadable to the average programmer.

This doesn’t mean the programmers actually wrote all that and are some code wizards, rather that just means there probably was some tooling used to develop the site from what the programmers actually wrote, and what ended up in your inspect panel.

Checkout the actual source (as suggested above) and see if you understand that. Checking minified source is tough regardless of your experience level :slight_smile:

3 Likes
10

@bradtaniguchi:

I didn’t read it in the element panel, that thing is impossible to read lol, I copied all of the code and pasted it in Virtual Studios, magnified it and read it from there.

That makes me feel better. When reading the code I was wondering when did we ever cover this, even after I was pass the “Redux-React” portion of the lessons.

I did go to the link provided and after looking though some stuff and getting to know the file system a little, I found the src code and was able to read and understand it decently.
(Yeah! I am not as stupid as I thought I was :nerd_face:)

11

Great work!

Some tools convert the original syntax into legacy/old syntax, so that old browsers can understand it. This can lead to a lot of confusion, because there will be old syntax most beginners do not understand, because they only learned new syntax so far.