Bloody Google-fingers and infinite loops ☠️
These past two weeks I think I’ve probably done as many Google-searches as I normally do in a few months(!). So many questions, so much typing! React and JSX is super fun and very logic, but there are parts that don’t seem to sink in as easily as others…
I can’t even count the number of times that I created an infinite loop and got my browser to 💥, or waiting for values that never appear to change in asynchronous state-functions. 🐌
However, somehow I managed to create a couple of new sites anyway! 🏆 I’ll have a little demo-section in the bottom of this post. 🤗
This week I’ve had the honors of reviewing two of my classmates’ projects. Let’s just say, it’s just as insightful as writing your own code, except that you don’t have to write a single curly bracket yourself. Win-win!
Here are some of my learnings from those code reviews 💁♀️:
“What does ~ mean in CSS?”
In short, it’s a way of reaching the next <> on the same level (as in not a child) in your code. Read a nicely put explanation on StackOverflow 👉 here, or the 💥FULL💥 explanation on w3 👉 here.
“What does scroll-behavior: smooth do in CSS?”
So my classmate Agnes used this in a really nice way for her survey-project. When having answered one question, the page would scroll down to the next smoooothly, instead of jumping down there. (This wont affect the scrolling one does with the mouse. Took me about 3 readings of the article below to learn that. 😌😬) Read more about smooth scrolling 👉 here.
“What does !! mean in JavaScript?”
It converts an object to a boolean value, ie. true/false. If the object value is set to 0, null, undefined or similar, it would be turned into ‘false’, otherwise it would be ‘true’.
Remember it by “bang, bang you’re boolean” — Gus 💥
“How do I view my unpublished page on my phone without deploying it?”
So this was a great tip by my classmate Axel. If you want to see your localhost-web page on your phone, make sure you’re on the same wifi as the computer, and navigate to a path that consists of your local IP-address + the port used for localhost. Read full article 👉 here.
For example, if I was serving on
localhost:8080and my local IP address is 123.45.67.890, on my mobile device’s browser I would navigate tohttp://123.45.67.890:8080
My single biggest question of this week, though, has been:
“How do I pass data from a child component to its parent?”
MAN, have I struggled with this. I’m not even sure it stuck to my knowledge-base yet 🤯🤯. (Redux- SEND HELP!) But for now, this article has been SO helpful, and it would be a crime to not share it:
Demo-time!
A Happy thoughts-site shared with my classmates
This was the project that I’ve had most fun with so far during this bootcamp. The task was to build a thought-sharing site, where we display thoughts from an API, create a form to send new thoughts with a POST-request, and also create the ability to like other people’s thoughts. Can I just say there are thoughts in there for everything… 🌈
Connecting last week’s survey-site to a database
This was a real breakthrough for me. I was seriously disappointed when we built the survey site and I learned that we wouldn’t be able to collect the input anywhere. So disappointed that I couldn’t let go of the thought of finding a solution for it. AND I DID! It might not be that advanced technically, but for me it was huge. I’m so proud of myself for finding Firebase, connecting multiple dots to be able to implement it and for keeping focus to finalize.
The resources I used was this youtube-clip, on how to connect Firebase to a contact form, and this article to connect it all to React. 🌟
Some final words.. CAN’T WAIT til we start learning Redux 💣
