Javascript this week, so exciting!!! 🎺
I've been feeling a little under the weather so took it easy, I took longer and more frequent breaks and didn't keep track of my timing as much. Thankfully JS has been fun so far!
Next week is my 3-week deeper share where I'll go over the program I've decided was my best bet to Break Into Tech and why, as well as what I've been doing to maximize my program so far!
Please connect with me on LinkedIn, I'd love to hear from you!
7/20/22
Started Javascript today!! 🎆
Wasn't quite the plunge I wanted, I've been feeling a little under the weather. I took some time to print and collate the Javascript study guide provided by Skillcrush bc I love to have something physical to flip thru as reference while learning a language.
Then alls I did today was a little practice adding values to variables and logging them out to the console in sentences. {: Just look at them statements, wiao.
🎧 Flow Jams: House Scapes (no music)_
🌺 Destress Activity: had a lay down
7/21/22:
Phew turns out so far JS terminology is pretty straight forward and sounds more intimidating bc there are specialized words for already common functions when it comes to JS.
Still feeling under the weather today, so still took it easy. Just did one lesson to orient myself towards prompts, converting strings to numbers, using template literals to push them out together. So far so smooth like a snake. 🐍
🎧 Flow Jams: The Voice the show
🌺 Destress Activities: Nap, long hot shower, twilight walk, Hollow Knight
7/22/22:
Feeling better today and almost 💯!
Worked a little more on my Front End Mentor challenge today using a Skillcrush example to realize why my cards weren't wrapping! I was so focused on mobile-first that I couldn't figure out how to change from column to row from mobile > desktop, but mobile first is primarily for design decisions and deciding which sections will be flex(or grid) should start with desktop then compare to mobile! So I finally got those cards adjusting just by allowing a row wrap to squeeze the cards, just gotta make a few more tweaks to the Desktop spacing (on the left, vs mobile on the right of my page) and I get to research how to alter buttons after they've been clicked-on with just HTML/CSS!
Practice conditional statements and alerts in three different exercises with Skillcrush.
And got a little intro to the DOM today before calling it a week!
🎧 Flow Jams: The Algorithm
🌺 Neighborhood walk with my love
7/25/22:
Submitted my first Front End Mentor Challenge today! 🎉 And I got EXCELLENT feedback within 8 mins, so that was pretty awesome! Thank you Lucas! You can't see this now, but I'll get back to you tomorrow with a code and text response to your awesome feedback and inspiring counter-design that you shared!
Today in Javascript, I primarily did more practice editing styles in the dom and editing images, given a bit of code to debug, and started reviewing Events.
🎧 Flow Jams: Checking out Ariana Grande and she is a beautiful singer
🌺 Destress Activity: Watched some extra TV, digging the Netflix show Arcane
7/26/22:
Respond to feedback day! @dennistobar gave me excellent feedback and a resource last week regarding optimization! Specifically regarding when establishing a preconnection for fonts from third-parties.. Woohoo, more optimization and better user experience! If you need another excuse to look at my beautiful Unplugged Project he was referencing to.
On my Front End Mentor project solution, I learned new things from the feedback and reviewing the code of Lucas (the current top contributing member) who gave me feedback and shared such a beautiful contribution for this simple project!. He suggested giving my body element a height of "100vh" and I had never heard of vh before so I read about that on w3 and will be using that and vh from now for my body element! Observing his code also taught me how to round out just specific corners of my cards so I get that picture perfect look!
In JS today, I practiced using events and classList to call in different modes for Light and Dark mode, yes! I did a quiz on events including debugging code to solidify what I learned, and did a JS challenge to make a cat pic appear at the push of a button.
I had an issue with the second challenge and the solution code didn't appear to be working either. I'll go into this more once I hear back to maybe point out what I missed. {:
🎧 Flow Jams: Groove Armada
🌺 Destress Activity: Home facial
Top comments (7)
ARCANE! My absolute favorite show!
I have heard of vh before, but I don't know how to properly utilize it. I am definitely going to check it out. Does Frontend Mentor always give feedback?
Yay for starting JavaScript! 🎉🎉🎉
vh and vw (for width) are relative heights set relative to the viewport! It's useful for centering the body element and if you set it to 100% it'll take up the entire view port, like a full-cover landing page!
Front End Mentor is a community that's based on communal code review, so feedback is not an absolute but so far I have found it to be a very active community!
That's cool, thank you :) I'll need to check out Frontend Mentor.
Wow wow... javascript is in the house!
I see you script and seems fine for your first week. A little note:
document.querySelectoris not null-safe: the function could returnnullorundefinedand the innerHTML could be a function error, or just use.?to be a safe null use (see Optional Chaining)Another piece of advice, is create a small library of functions: I see a lot of calls of
document.querySelector, you could useJavascript isn't hard, but needs to study, especially to resolve problems or using functions to become your life a bit easier :)
See you next week :)
@dennistobar Wow, again thank you so much for taking time to look at my code and give me some pointers!!!
I can see how optional chaining would help, sometimes I unexpectedly get 'nulls' and that may be why. Am I correct in understanding that the syntax for querySelector would be
var title = document.querySelector.?("h1");I'm not really understanding at all what you mean by libraries! Would you be down to break down for me what's happening in that function? I am very intrigued, it looks like you could plug "qs" and whatever class you wanted right in to that style property manipulation which would def save me time once set!
The querySelector could return null, but you could use
?.when the next function or parameter is not expected to be null (and it's ok with that). A full descriptive article is hereLibraries?... I suggest if you use the same functions every time, everywhere, you can write a few functions as helpers to make the development in Javascript easier -and friendly.
For example, I said
qsas a shortcut todocument.querySelector, you would create another function asqsaas a shortcut todocument.querySelectorAll, and so on...If you feel lost, don't be afraid; in the next chapters or parts of your course, you will learn about functions and how to improve the readability of your javascript :)
Thank you for elaborating @dennistobar! We're still going over functions a lot, so I'm going to focus on my lessons first then certainly come back to what you're saying bc I'm all for saving time!