Continued my work through the tutorial. I have a lot of issues with how the instructor is showing stuff. I know I am not the target audience but that combined with my growing discomfort with Figma is grinding my gears LOL. I know the tutorial is for beginners so I try to keep that in mind. That being said I am asking myself some interesting questions while I watch and I’m getting to try some things out. One of those things is using aggregation for my components. I initially messed up with the syntax for it but a quick Google search got me squared up.

TLDR;

Okay, so here are the highlights of what I did:

• JavaScript -> Read up on module exporting – MDN Docs in JavaScript. This was to better understand how I can design my file structure to support aggregation of components and re-exporting them out in a more organized manner.
• Practice -> Continued working on a 2022 React course. I battled with Figma to try and match the designs provided. Inkscape still wins out for me. It’s not even close. Struggled with documenting my bugs and the fixes so that I can refer back to them in the future. It is really hard to stay disciplined while working. It is very easy to lose yourself in the work. I guess I’m trying to be a manager and a developer at the same time. That’s not that easy.

Questions / Bugs so far

How to Re-Export / Aggregate Component modules in an index file?

I wanted to import all my individual component files into the root of the components folder and then re-export them from consumption by the App.

Resources for the answer

• export – MDN Docs
• How to export all components in index.js? – Stack Overflow

Do you Need to Name Components that will be Exported By Default?

I am working on a project and I want to use arrow functions for my function components. When I tried to name my variable and include the export default statements as well I got an error. So I just choose not to name my component and use export default () => {} as my format. I am now wondering if this is an issue and messes with debugging or the component’s displayName. IDK. I remember reading something but I can’t recall. I haven’t seen this syntax often and I am wondering why that is. Normally I would see something like this:

import React from "react";

export default function Navbar() {
  return <nav>This is the Navigation bar</nav>;
}

Or I would see something like this:

import React from "react";

const Navbar = () => {
  return <nav>This is the Navigation bar</nav>;
};

export default Navbar;

but I won’t see something like this:

import React from "react";

export default () => {
  return <nav>This is the Navigation bar</nav>;
};

How strictly should I be following a figma design?

I don’t know how strongly should I stick to the values in the Figma design. Some of the hard value might effect how responsive the site can be. Idk, maybe I am overthinking things.

How to resize <li> bullets while keeping them aligned

No answer so far. Browser differences make it unreasonable to have a consistent method to keep the default. Just change them out for a manual replacement like a ::before circle.

Also what concerns are there for accessibility if I set the list-decoration property to none for a <ul>

Not sure, I probably need to look into this to confirm LOL.

Background Shorthand syntax?

It goes: background: [color] [image] [repeat] [position]; – W3Schools – ref

Goal For Round 7 of the #100DaysofCode Challenge

This is my seventh round of the “#100daysofcode” challenge. I will be continuing my work from round five and round six into round seven. I am currently working through the book “Cracking the Coding Interview” by Gayle Laakmann McDowell. My goal is to become more familiar with algorithms and data structures. This goal was derived from my goal to better understand operating systems and key programs that I use in the terminal regularly e.g. Git. This goal was in turn derived from my desire to better understand the fundamental tools used for coding outside of popular GUIs. This in turn was derived from my desire to be a better back-end developer.

I have no idea if my path is correct but I am walking down this road anyways. Worst case scenario I learn a whole bunch of stuff that will help me out on my own personal projects.