From Front Desk to Front End p.32 Discuss: Figure Elements & Accessible Toggles + Pair Programming Algo-Adventures!

Photo by Follow on Pexels

Here's a live link to my WIP project, that is now working thanks to my realizations on Tues! Check it out in mobile-size bc that's all I've been working on as of late!

Monday 5/1/23:

I had a lot of catching up to do after last week, so I didn't do any coding or job searching today (and honestly didn't really get any job searching/applying done last week).

Tuesday 5/2/23:

Now that I want to work on my dictionary web app from my desktop again, I inevitably had to pull the updated remote repo with new changes I made from my laptop AND resolve the conflicts bc there were DIFFERENT changes I had made to my desktop local version. So I cleared those up.
While sharing my project with someone, I also realized that my Github Pages repo wasn't deploying properly and was only showing the ReadMe! I was able to quickly identify that this was due to the root folder of my repo being outside of the folder used to store all of the code, including the index.html. I adjusted the structure of the folders to resolve this.
Then the rest I did for today was work on the gap between the "word" div header and the search bar. While I was struggling with this before, it became pretty quickly obvious to me that this was probably bc the search bar was located in the header element while everything else was located in the main. I moved the search bar into the main element, and was able to customize the space between them from there. 30 mins

Wednesday 5/3/23:

Finally finished my first draft of the CSS standard design in mobile by adding flexy properties to the source-area and to the footer attribution to Frontend Mentor for this challenge!
I'm so excited to have finally finished! 30 mins
Generally, adjusting for tablet and desktop styles tends to be a much easier trip from here. But even more excitingly, this means I get to start adding the CSS for the font choices and dark mode and use JS to call them in with my toggle and drop down menu!!
I've decided that I want to focus more on projects and reading Eloquent JS now that things are finally settling down from the craziness of last week. I'm very excited to be revving up again!

Thursday 5/4/23:

My girlfriend's brother is moving in with us, and much of today was dedicated to moving stuff out of the room that is going to move into. I didn't have a lot of time to code, and my brain was feeling a little fried so all I did was put in the logic of the JS function to toggle on and off dark-mode with an eventListener. My class and ID names are little bit of a mess tho and messing with them initially revealed that now is just not a good time to parse through them so I'm coming back to this.

Friday 5/5, 5/6, and Monday 5/8/23:

I made some minor styling changes during this time which I realized happened in lower sections of the design, mostly to make the backgrounds of my buttons match the change to darkmode. And I made the transform property of my .ball class ease-out, which is super handy and I learned it from CSS Tricks.
But mostly I was consolidating and renaming my classes more and more clearly bc I could NOT understand why my darkmode toggle wasn't working!

Thursday 5/11/23:

Someone heard and answered my plea for help on the Frontend Mentor Discord channel, and gave me a LOT of helpful pointers beside.
Did you know that Google Analytics are illegal in Europe without an explicit opt-in? Well anyway, I hadn't linked the Google Analytics tag from my boilerplate to my site ID# and hadn't planned on getting into that, so I removed it from my boilerplate for now and I'll maybe include in the future with an opt-in.
I had to clean up a few other things that basically I should've known better about. I was playing with declaring my variables in JS as var but input reminded me that using const or let is better so I switched to const. I had an empty alt value for one of my button image tags, but had filled in another for some weird reason so I removed that bc the images are purely decorative and not important to the content of the page.
Then we began a discussion about whether or not it was necessary to wrap all images within tags bc the input I got suggested that it should only be utilized with there is a figcaption involved. What I learned in my bootcamp was that figure was more semantic than img tags by themselves so I asked for more resources.
We also began a discussion on what makes up an accessible toggle component! She suggested using a radio button. I asked for more resources on this as well.

Friday 5/12/23

So my mentor on Frontend Mentor gave me this amazing HTML Living Standard document to reference regarding the <figure> element! This didn't clear up our difference in thought about whether or not was more semantic, which she said it was not and just added unnecessary bloat to the dom. figcaption is clearly listed as optional within the figure element to her first point. And my content would be considered "flow content" which is the umbrella term for pretty much all content on a page, with some metadata considered outside of it. And esp if it is "palpable content" that can be heard or viewed, which is a similar reference to how we used <figure> in my bootcamp to distinguish media.
The discussion about an accessible toggle component continued! She gave me another amazing resource by Kitty Giraudel which i have been devouring, and it has sent me down a rabbit hole with all her references to learn more about this! So far I feel like a <button> with the aria-pressed attribute is the most appropriate for what I am trying to achieve here, which is basically dark mode on or dark mode off, vs what dark mode on or light mode on which lends to radio buttons better. I'll include my string of references for research and conclusions on a later post when I have more time to really dig into this!

----Over the weekend I was helping my mom move into my grandma's house so I was really busy, but I managed to do some review of React.js fundamentals bc I have a mock interview with friends coming up in a few weeks and they're going to grill me! Weekends are the best time to do pure learning without pushing and I'm trying to focus creating new code to the weekdays.----

Monday 5/15/23:

I was working from my parent's home from my laptop. Previously I had updated the file structure of my repository from the Desktop bc it was drawn to my attention that only the Readme was showing from my Github link, and this is bc I had my code nested within a file within the repo. So when I pulled the repo to my laptop, it updated the file structure just fine. But I had also renamed the main folder holding the repo from just "dictionary-web-app" to "dictionary-web-app-code" SO when I tried to open it with VS code I kept getting the response that no such file exists (altho I COULD open the individual code files within it). Once I updated the file to be the same name as the repo I was pulling AND pulled again for updates I had made since then, it was all squared away and I could open up the repo file in VS code from my remote location. 💥
I labeled my Sass partials more clearly and put in comments to label the sections after getting some feedback that the darkmode styles were difficult to find in my code. I am going to post for more feedback regarding the organization of my code soon tho, bc I'm not really sure about a great way to organize this that someone else would be able to easily navigate. Right now I have partials for "general-element-properties" "colors" "fonts" and the "nav" where the nav includes styles for the nav bar itself, for the font dropdown menu, and for the darkmode toggle and then all the styles that are triggered for dark mode are beneath all of these. The nav part is what I have the most questions about - the darkmode styles for example affect the entire layout, so would you expect them there or maybe in the general-element-properties, or in its own partial? Then I am finding that my Sass watcher signals me to only call partials at the beginning of the code, so all partials will be called in first (with attention paid to the order they are called in) but does this really create a well-organized main CSS file once compiled?
I signed up to be matched with someone for Pair Programming today thru Chingu, which is an AMAZING PLACE for devs to get professional experiences at and I highly recommend! I missed entry into the ongoing voyage, but a few of my fellow Skillcrush-ers are kicking butt in the first few sprints!

Tuesday 5/16/23:

Today was a very busy day at work that ran later than usual, so I didn't have a lot of time this eve! I am launching into my job search full force again. 💪 So I prioritized doing everything I do regarding that today.
I also got paired with my partner for Paired Programming! So we both shared our schedules, and I learned how to code live together on VS Code!
Code wise, I noticed some unnecessary comments in my ReadMes for my Frontend mentor projects and I added a basic description of all processes I followed to each of them.

Wednesday 5/17/23:

I met up with my partner for Pair Programming today! We discussed what challenge we wanted to do over the coming week, and both of us agreed we would appreciate more practice with Algorithms! So we're going to use Hackerrank for algorithm practice and see how far we get starting from their most basic challenges!
We started our repo while screen sharing, we I shared with her what I just learned by downloading the VS Code Live Share Extension and starting a session within our repo! She committed and pushed our changes so now green square for me, but I certainly learned something new today about how awesome VS Code is!
I took this opportunity to review JavaScript operators, arrays, and functions!

Thursday 5/18/23:

Today my partner and I live shared in VS code and took turns pushing and pulling to our Github to work on some algorithms through Hackerrank (link in Weds)! First two were fairly straight forward, add up the sum of two numbers, then we added up the total of an array. Ok, ok, so far so good. But then the third one already was starting to get complicado! We had to compare two arrays with a triplet of numbers, the first in one set to the first in the other to see which was greater and award a pt to the winner, and onwards! Almost like rock, paper, scissors! Our loop ran too many times, our points weren't being awarded accordingly, hijinks have ensued! Check our progress so far on my partner's repo, to which I am a contributor. Frustrating, but admittedly fun and makes me wish I could set aside more time to play with algorithms!

Friday-Saturday 5/19-5/20/23:

React foundations review. 💪

Sunday 5/21/23:

JS algorithms practice with my pair programming partner!!!
Summing an array was refreshingly easy to tackle.
But then MATRICES! We were challenged to come up with the difference between a left-right diagonal across a given matrix, and a right-left diagonal across the same matrix. I've never worked with matrices, but the logic wasn't TOO hard to think out. We still needed help making sure that our loops were doing the right thing. We did our best to make several attempts, then finally acquiesced to seeking some outside guidance.
I found a solution to scrutinize from Medium, but my partner used ChatGPT to come up with an even more simplified solution that made sense to both of us! Again, you can check out our solution here on my partner's repo: partner's repo.
I'm going to make a more detailed post about our last pair programming session and how we came up and tried out different solutions next week!