From Front Desk to Front End p.30 Dictionary App More CSS + Reading Eloquent JS

Photo by Ian Turnell from Pexels. I'm just flowing down the river of being a life-learner, lol!

Hi, I'm Tauri! I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am looking for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects! Thank you for reading!

My current project is building this API UI interface with Front End Mentor. I am also reading through Eloquent JS by Marjin Haverbeke, which has been amazing so far! The job search and application process is taking a lot of my time and energy outside of work so unfortunately I'm not able to spend as much time on these as I truly like, but a little every day has still been some satisfying progress! 💪✨

Sat 4/15/23

I had to spend some extra time to figure out my nav issue. When comparing it to a similar nav I created for my Rogue Pickings project, the things that stood out to me were that I had a single container element wrapped around everything, then only put content-wrappers around separate regions that I needed to be flexy within the main area. So I removed the additional content-wrapper I had around the header objects, and this allowed me to properly the center the content with body and main content-wrapper without smooshing it into the center. Then the header being flex-flow: row wrap; allowed me to justify-content: space-between; the logo + the settings section across the top of my page. Phew, much better! 💦 30 mins.

Sun 4/16/23

I had some extra time on my hands today. Usually I work on apply for jobs 7 days a week, and this takes up the time I have at home to sit in front of my comp and only weekdays do I set aside time to work on my own projects. I've been experiencing a nerve issue down my leg for the past month that has been very annoying and at times really disheartening, so honestly a lot of the rest of that time is devoted to stretching, getting massages and Cranio Sacral Therapy treatments, and trying to make sure I'm NOT sitting too much. Today I also scheduled some time to do some Qi Gong with my girlfriend as a low impact form of exercise that will help calm my nerves down (as opposed to all other exercise which aggravates it), so I with that on my day sched I knew I could work around it with some extra work. Happily, my nerve thing is absolutely getting better so I am very relieved about that. 🌞
All this to say, I cracked open Eloquent JavaScript by Marjin Haverbeke again!
I love her writing, and right away in the intro she quotes Ursula K. Le Guin which is ✨. It's a great quote too:

When action grows unprofitable, gather information; when information grows unprofitable, sleep.

• Ursula K. Le Guin, The Left Hand of Darkness

In the first chapter, I explored some fun material that I added to what I already know about JS:

• I was re-introduced to the concept of bits and how JS utilizes 64 of them, vastly increasing the amount of whole numbers that we can represent and some of the bits are utilized to indicate sign of a number (+/-) and the decimal place to access non-whole numbers as well.
• I was reminded of the JS operator for remainder (also called modulo which is fun). There are not many occasions I've encountered for this as a front end dev, but just good to know.
• I was also reminded of about the special number JS has NaN that comes up when you try to divide 0/0 and Infinity-Infinity. Since this is a nonsensical computation, (NaN == NaN) would result in false.

I also learned some things that will be of use to me that
Started to put into a new notes section for myself, finally experimenting with Obsidian which uses Markdown language so I know I'll be comfortable there after having written this blog on CodeNewbie for so long:

Using special characters in strings:

• Within a string, a / allows you to escape the character meaning whatever comes after the slash will be a special character. Using an n after a slash will trigger a new line in JS.
• A t after a backslash means tab
• Escaping the character also allows you to use quotes within your quote marks or tics that you're using to indicate a string
• If you want a backslash to appear in your string, use two // and only the first will be collapsed.

Phew, it took me about two hours just to get through the intro and the first chapter. And I know I have to reread the last two sections of the first chapter in order to really ensure I'm getting the full value from them. I'll return to this with a fresh brain soon.
This was honestly a pretty funny way to spend this extra chunk of time I found myself with. I don't know when exactly that will happen again, but I will return to this book when I find them so my updates on this will be erratic but eventual lol.

Mon 4/17/23:

Ok, we're back on Eloquent JS just so I can get the full value of Chapter 1 before moving onto other things this week.
First of note is the difference between unary, binary, and ternary operators which are sometimes referred to in this way so I'm taking note.

• The unary operators operate on a single value, and the ones discussed in this chapter are - when used in such a way as to change a value from positive to negative (or an already negative value to positive) as well as typeof which operates on a single value to tell you if it is a number or string.
• Most of the operators are binary, operating on two values, like >= or === or && and || where the last two compare Boolean values
• the only ternary operator is the conditional operator written like console.log(true ? 1 : 2); // → 1 which operates on 3 values, including the Boolean value at the beginning which dictates which will value will result. If it's true it'll console the middle value between the three (1) and if false the value on the right (2).

Then I wanted to pay attention to some peculiarities of the && ||. I am here for those peculiarities bc they will come up when creating complex programs!

When using the || logical operator:

• the value on the left will be attempted to convert to Boolean and if it's a normal string or number it'll assume that as true and return that value. NaN and null cannot be converted so will read as false and return the value on the right. 0 and an empty string will also convert to false.
• This is useful for trouble shooting! "If you have a value that might be empty, you can put || after it with a replacement value. If the initial value can be converted to false, you’ll get the replacement instead."

When using the && operator:

• "The && operator works similarly but the other way around. When the value to its left is something that converts to false, it returns that value, and otherwise it returns the value on its right."

Regarding both:

• short-circuit evaluation plays on the fact that these logical operators will only evaluate the value on the right IF NECESSARY. So if you have true || X it'll go to X regardless of how perilous it is for your program doesn't matter bc it's not evaluated, and if false && X is played out it will return X.

This all made a lot more sense on a second reading. Sometimes you just get mushy when learning new things, ya know? Esp if you're day is also filled with work, job applications, etc. So just come back fresh instead of berrating yourself and it'll come a lot easier! And easier still if you at least scanned the material for that initial exposure.

Today in code, I adjusted the search bar styles by adjusting the background color and border. On the suggestion of a page I read in passing (I believe from StackOverflow) I put the magnifying glass inside the search bar by using it as an background to the search-input. That doesn't sit quite right with me tho bc I believe the image is a section that cannot be typed over when I've seen it before. Like for LinkedIn:

Like this is just weird:

30 mins

Tue 4/18/23:

I solved this issue by keeping the magnifying glass pic as a separate element, and smooshing it alongside my search bar with the same background. Using border-radius to target only specific corners of my search-input and the image allowed me to create a seamless bar where the image doesn't get overriden as you type into it. I adjusted a lot of margins and paddings to bring it all together, and I'd say it's not looking too shabby!

Design comp on the left, mine on the right.

I chose the exact gray as defined by the rectangle setting the shape of the search bar in the Figma design comp so I'm not sure why mine is darker. 30 mins

In Eloquent JS today for 30 mins, I learned some new vocab!

• let, const, and var are called bindings and Marjin likens them to tentacles that "grasp" values in JS so they can be used by the program.
• conditional execution in a program is created with if statements

Under exploratory material I learned:

• Within a browser "there are functions there are functions to interact with the currently loaded website and to read mouse and keyboard input." This is part of the environment of a program, including any defined variables.

I am only noting things here that are additional to the foundation in JS that I already have, so lot of the second chapter was review for me. The material introduced loops with some keywords I have not used: while and do. I primarily used for and for of loops, so I'm excited to review this more tomorrow!

Wed 4/19/23:

Ok! So we're back on loops:

• so while loops can allow you to create conditions in an expression to be tested first then executed
• do loops are tested after the program runs, usually with conditions set by a while expression so the more accurate name would be do...while loop for usage sake, and this means it will execute at least once then test after. This was made most clear to me by this explanation on TutorialGateway!
• the only difference between while loops and for loops is that all of the conditions related to the state of the loop can be put within the initial parentheses, creating a more concise statement! At least 2 semi-colons are required for a for loop, dividing up 3 different expressions, usually one to set the initial binding, one to check the state of the condition, then followed by one to update the initial state. I spent some time on the exercises on the end. I'm going to try again at the second exercise tomorrow to make sure I'm understanding what I can do with these loops.

In code today, I added a colors partial so I could assign variables to the colors and make it easier to add them throughout the code. In doing so, I decided to try out the lighter gray I got from the design comp for the vertical line between the dropdown and dark mode toggle on the search bar and it looks better. And I updated the color of the pronunciation. There's a larger gap than I want between the search bar and h1 so gotta toodle with that more tomorrow. 30 mins

Thursday 4/20/23:

Today I styled my “word” and my “part of speech” div classes for mobile with lots of flexy stuff, margin adjustment, etc. 30 mins

Friday 4/21/23:

I started working on the styles of my "meaning" sections next. Had to adjust the width of the area, font colors, etc. I was going to look up how to adjust the bullet colors, but in DevTools I could identify them as li::marker so I just styled that! Figuring out how to add more spacing between the bullet and the text was a little trickier, so I looked that up and found a good source on W3 Docs. I realized my divs weren't automatically stretching as I switched between screen sizes, so I changed my max-widths to min-widths and that's been much better. I'll set a max-width for my desktop styles so I can keep it within the range that looks good, but that's it. 30 mins