Final touch questions

[fromITzerotoIThero]

W.,

I need your advice :)

1. Where would you better store PNG images with mockups for PortfolioSlider?

   • would you go for src/assets or rather public/assets?
   • I decided to explore it a bit, and since it seems not to be a simple answer and so as not to overthink it, I decided to ask you

2. Home-page button - I've just realized it'd be very useful - where would you place it?

   • MenuDesktop - right next to the other menu entries or on the opposite side (top left corner of the website)?
   • MenuMobile - would you make it a separate button on the opposite side of the Hamburger or would you only add it inside of the Flyout?

[piotrwicijowski]

I think for both questions any option would work, so it's more a matter of personal preference, but if I were to make a decision myself:

1. I would go for src/assets
2. On the desktop I would think that top left would work just fine, and for mobile I would add it only to the flyout.

[fromITzerotoIThero]

Thank you! Nice to know I had the same preference as you! ;)

[fromITzerotoIThero]

W.,

I've created and added a HomeButton to MenuDesktop and it raised a couple of questions in my head:

1. How to make the HomeButton scroll back to the top of the page when I'm still on home page?

   • I did it with the use of the id navigation, it works
   • yet it feels weird to see this /#home in URL
   • should I leave it like that or would you suggest a different approach?

2. HomeButton styles:

   • I made the HomeButton display in top left corner
   • I reckon it looks good, yet I'm not sure how to style it on very large screens (>1600px)
   • I made it move slightly to the middle (like the rest of navigation), but do you think it actually looks good?

3. HomeButton nesting:

   • in order to avoid adding excessive containers, I decide it to nest it as a direct child of of MenuDesktop container_external
   • yet that way it's outside of <nav> elements
   • would you consider it a crime or would you advise me not to bother at all?

4. Commit frequency:

   • I'm trying to follow the rule of frequent commits
   • but say I make a tiny change in source code like the one with fixing paths in index.js like we did yesterday
   • is it good practice to make it a separate commit (and cause it to make this 'snapshot' of the whole source code)
   • or is it wiser to add it to an upcoming larger commit like the one I did with adding HomeButton to MenuDesktop?

If you think any of these considerations of mine irrelavant or unimportant right now, we can give them a status of: TBCSDTL (ToBeContinuedSometimeDownTheLine ;)

[piotrwicijowski]

1. That's ok, I don't think that anyone but you and me would notice this
2. Looks good to me
3. Don't bother, unfortunately the "semantic html" more often than not works only in theory, and sometimes to get the correct layout, styling or behavior, we need to tweak the structure of the html that goes against the purity of those semantic rules. And such is life. As long as you are trying to keep those rules in mind, and try to apply them whenever it makes sense and does not cause a lot of headaches, having some exceptions is ok.
4. My suggestion is to make many small commits. Git is smart enough that this is not a problem, and besides if you would have your "dirty and frequent changes" in a separate branch, then you would not have the feeling that you are creating a mess, because that mess is contained only in your branch, and a merge is a clear indicator that "here all of the related changes are bundled together". So to keep it short: create branch, do many commits there, and once the functionality is done, merge (or PR) it. But I understand that for this small website this workflow would be too cumbersome, so just commit to master.

[fromITzerotoIThero]

Oh W., thank you, thank you, thank you! I take it to make programmer's heart!!!

[fromITzerotoIThero]

W.,

another issue came up.

I was trying to add transition on MenuMobileFlyout:

• I've managed to conditionally add active class to it
• but I don't know why the transtion doesn't occur...
• I'd also love to hear your opinion on whether the transition should be set only on opacity or rather the Flyout should 'fly out' from the right ;)

[piotrwicijowski]

Have you pushed the latest changes? I don't see you adding conditionally the active class

[fromITzerotoIThero]

That's what I was trying to check, whether i forgot to push it (no commits to be made in my source code locally).

And that's when I noticed these interesting tabs down below in source control side panel and I clicked on GitLens Commit Graph and...

W.!

It looks like it's browsing through all of the commits I've ever made, and I have no idea how to stop it (the internet didn't give me any solution 😢).

[fromITzerotoIThero]

Anyways (nevermind this Commit Graph even if it's eating up resources XP), I did forget to push the very last commit with the conditional active class, I pushed it to origin :)

[piotrwicijowski]

When it comes to the Menu, then I don't know where did you push it or which one are you using. I can see that you made a separate directory called ideas - is it somewhere there? And if so, are you using it in the app? I can see that it is a bit of a mess, and it is hard for me to tell which components are used, and which not, since they are called the same

[piotrwicijowski]

And regarding the Commit Graph - sorry, no clue, I don't use it myself

[fromITzerotoIThero]

No, no, ideas folder is indeed a mess, but none of the components from there are used in App.js (checked last date of commits in ideas to be 2 weeks ago) 😋

The changes were pushed to master, the commit message being Try to add transition on showing MenuMobileFlyout, there's a screenshot.

With:

• my master being up-to-date with origin
• no commits to make in source control

the website currently renders as in the screenshot.

But we can drop it for now, ProjectPage is more urgent now and maybe the solution will just come to me 😉

[piotrwicijowski]

Oh, I see it now, thanks. Yeah, let's focus on the project page. I think I know what is going on, but I don't know how to fix it yet.

[fromITzerotoIThero]

Alright! I'll be working on ProjectPage and if it wears me out, I might look into this flyout transition for fun ;)

[fromITzerotoIThero]

Or actually, we can even drop it altogether, it works the Flyout works fine even without it 🙃

[fromITzerotoIThero]

W.,

a really weird issue just came up and I can't find a remedy for it on the net.

Currently I'm in the process of building project pages and for that purpose I've created a couple of different components. The trouble is, I can't import the needed component in pages files...

• it's shown in this printscreen
• and in the photo taken (I wanted to show you the appearing dropdown without ProjectPage and ProjectPageLayout)
• I wanted to import ProjectPage (not ProjectPageLayout, I just didn't want to take another photo, but it works just the same when I try to import ProjectPage) in IBOSPage.jsx.
• ProjectPage & ProjectPageLayout are not empty directories, double checked

[fromITzerotoIThero]

In the meantime I started building IBOSPage without the need for importing any components, it might even be a better approach with the mind-boggling number of projects that I have 😂

[piotrwicijowski]

From what I understand you want to import ProjectPage into IBOSPage. Does the following not work for you?

import ProjectPage from '../../components/ProjectPage/ProjectPage';

[fromITzerotoIThero]

Yay! It actually works :) It still doesn't appear in the dropdown for some reason, but it works :) Thanks!

[piotrwicijowski]

And are you using the IBOSPage anywhere? Sometimes if you don't use a component anywhere the autocomplete gets confused.

[fromITzerotoIThero]

I do, the only thing I would identify as special when it comes down to IBOSPage (that uses ProjectPage) is that the only place where it's imported is the router config in index.js. It's specified a child route, as in here (and then rendered with the use of <Outlet /> component from React Router DOM):

{
        path: '/portfolio',
        element: <ProjectPageLayout />,
        errorElement: <ErrorPage />,
        children: [
            {
                path: 'ibos',
                element: <IBOSPage />,
                errorElement: <ErrorPage />,
            },
        ],
    },

[piotrwicijowski]

Well, when I pulled from master that part in routes was not changed to IBOSPage and the autocomplete did not work, and when I changed it to IBOSPage then it started to work for me

[fromITzerotoIThero]

I've just pushed the latest changes, website works fine for me, but autocomplete is still broken, maybe it's some issue with my VSCode? Anyways, what's important works! :) Thx!!!

[piotrwicijowski]

Also, on a side topic - I know that we have been using Issues for ad-hoc conversations, but I just realized that GitHub has a dedicated functionality called Discussions - you can enable it in the project settings. If you feel adventurous, you can turn it on and try it out.

[fromITzerotoIThero]

Hohoho! I love adventures! I'm on my way to Discussions ;D