feat: creating a footer #42

CBID2 · 2023-10-17T03:05:57Z

For an example of how to fill this template out, see this Pull Request in the Wiki.

Description

This PR creates a footer.

Fixes Issue

Closes #16

Acceptance Criteria

Under the pages folder, create a folder called components
Create a file called Footer.js
Create a footer using full with of the device
Footer showing on bottom of the page
Logo is showing in the footer
a copyright section is added below
No additional styling needed

Type of Changes

Make sure your code follows the code style of this project.
Make sure your code is up2date.
The title of the PR is the same as the title of the issue.

	Type
	🐛 Bug fix
x	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

After

Testing Steps / QA Criteria

netlify · 2023-10-17T03:06:02Z

✅ Deploy Preview for accessibility-mentor ready!

Name	Link
🔨 Latest commit	`5c82834`
🔍 Latest deploy log	https://app.netlify.com/sites/accessibility-mentor/deploys/6538ac31139f1500087008dc
😎 Deploy Preview	https://deploy-preview-42--accessibility-mentor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 Accessibility: 100 Best Practices: 100 SEO: 92 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

This reverts commit 79ad5a7.

YuriDevAT · 2023-10-18T17:12:42Z

Nice start so far @CBID2 🙂

CBID2 · 2023-10-18T17:13:50Z

Nice start so far @CBID2 🙂

Thanks @YuriDevAT! 😊 I just need to figure out a way to add the CSS 🤔

CBID2 · 2023-10-19T23:29:15Z

Hi @YuriDevAT! :) My PR is officially ready for review! :)

YuriDevAT · 2023-10-20T05:27:48Z

Nice start so far @CBID2 🙂

Thanks @YuriDevAT! 😊 I just need to figure out a way to add the CSS 🤔

Oh sorry, I missed this comment!

YuriDevAT · 2023-10-20T05:41:50Z

Can you share a screenshot with the footer showing on your screen?

I implemented it (since it wasn't already and there were no further instruction on how to implement it) by adding it to the index.js file under the <main>.

But I get a compile error because the logo was not imported right.

YuriDevAT

Thank you so much for your contribution to the project 😃 I left some comments. After making some changes I am happy to merge your PR. You are doing such a great job 🔥

Always keep in mind to test your implementation, checking, if everything is working on your side as expected. It makes PR approvals way faster. 🚀

pages/components/Footer.js

YuriDevAT · 2023-10-20T05:49:03Z

pages/components/Footer.js

+const Footer = () => {
+    return (
+        <footer style={{ width: "100%", position: "relative", bottom: "0"}}>
+            <Image src={Logo} alt="footer-logo" width={100} height={100}></Image>


Nice usage of the Image tag 😄. It can be used as a self closing tag, written as <Image src={Logo} alt="footer-logo" width={100} height={100} />, as tags for images are generally written in HTML.

YuriDevAT · 2023-10-20T05:54:54Z

pages/components/Footer.js

+const Footer = () => {
+    return (
+        <footer style={{ width: "100%", position: "relative", bottom: "0"}}>
+            <Image src={Logo} alt="footer-logo" width={100} height={100}></Image>


Image size is reforming the logo.

Correct implemention of default width and height directly on the component 👏🏽 If the ration is not known it can be calculated, or (which is not best practice but would do it for now), use height="auto" to keep the ratio of the logo.

YuriDevAT · 2023-10-20T05:59:28Z

pages/components/Footer.js

+
+const Footer = () => {
+    return (
+        <footer style={{ width: "100%", position: "relative", bottom: "0"}}>


Can you explain the usage of position here? I could not see a difference when not using it. Maybe I oversee something here.

Hi @YuriDevAT. I was struggling with moving it to the bottom position: relative; So I found this tutorial to help me.

Thanks for sharing. The tutorial is good! Is it working as expected on your side? As mentioned in the tutorial, the position attribute for the footer depends on the settings of the main component. Since you did not make any changes there I guess it will not work.

pages/components/Footer.js

CBID2 · 2023-10-22T01:28:00Z

Hi @YuriDevAT! :) I revised the file path for the image import component, but for some reason, it does not show up in the deployment. Did I do something wrong? Also, I use height ="auto" like you suggested?

YuriDevAT · 2023-10-22T04:40:23Z

Hi @YuriDevAT! :) I revised the file path for the image import component, but for some reason, it does not show up in the deployment. Did I do something wrong? Also, I use height ="auto" like you suggested?

Where did you import the footer? The logo shows up on my side with this path.

CBID2 · 2023-10-22T05:57:47Z

Hi @YuriDevAT! :) I revised the file path for the image import component, but for some reason, it does not show up in the deployment. Did I do something wrong? Also, I use height ="auto" like you suggested?

Where did you import the footer? The logo shows up on my side with this path.

I didn’t commit that line of yet @YuriDevAT. When I tried it locally, nothing showed up. For context, I did the import like this:
import Footer from “./components/Footer”

CBID2 · 2023-10-22T18:29:48Z

Hi @YuriDevAT. I managed to get the footer to show. I also added the screenshots in the Before and After section. Do you mind if I add my code to the index.js file? I know it's not required, but it would quicken the website building process. :)

YuriDevAT · 2023-10-23T04:51:44Z

Hi @YuriDevAT. I managed to get the footer to show. I also added the screenshots in the Before and After section. Do you mind if I add my code to the index.js file? I know it's not required, but it would quicken the website building process. :)

Ah, I see now where the miscommunication lies. My apologies 🙏🏽 .

Footer showing on bottom of the page

was meant to implement it for everyone to see and to check it for PR, therefore it is needed to import the footer component in the index.js file.

YuriDevAT · 2023-10-23T04:53:47Z

Hi @YuriDevAT! :) I revised the file path for the image import component, but for some reason, it does not show up in the deployment. Did I do something wrong? Also, I use height ="auto" like you suggested?

Where did you import the footer? The logo shows up on my side with this path.

I didn’t commit that line of yet @YuriDevAT. When I tried it locally, nothing showed up. For context, I did the import like this: import Footer from “./components/Footer”

It's working now, right? The logo with the original path is showing up in your local environment.

YuriDevAT

We are getting there 😄 Small adjustments, then there is only the position task left.

Hang in there 🙌🏽

YuriDevAT · 2023-10-23T04:55:35Z

pages/components/Footer.js

+      }}
+    >
+      <Image src={logo} alt="footer-logo" width={100} height="auto" />
+      <p className="copyright">


Is this class in use? If not, then it can be deleted.

YuriDevAT · 2023-10-23T04:56:56Z

pages/components/Footer.js

+        textAlign: "center",
+      }}
+    >
+      <Image src={logo} alt="footer-logo" width={100} height="auto" />


Concerning accessibility, think of a better alt text for the logo, or if alt text is even needed.

Hi @YuriDevAT! :) I think it's best to keep the alt text so it can be read by screen readers.

You are right, alt text is for being read by screen reader users, but that does not necessarily mean you should add one. Especially when it comes to logos (which does not link to anything, yet), the alt text should be left empty like this alt="".
Read this article about alt text decision tree, it is really helpful to understand the need of alt text better https://www.w3.org/WAI/tutorials/images/decision-tree/

A detailed alt text is typical and very good when it comes to images, I never saw it for logos, though. Logos are mostly used as links (like, Go To Homepage, or Go To Website when it is a logo which links to another companies website). But at the current state, the logo does not link anywhere, so no alt text needed (it will be a future issue, though, so keep your eyes open 👀 )

❗ But I like how detailed you are able to describe even a logo, this is a skill not many people have. Hopefully, you make good use of it in the future, when alt text is needed on descriptive images 🙌🏽

YuriDevAT · 2023-10-23T04:58:27Z

pages/components/Footer.js

+        margin: "auto",
+        textAlign: "center",


Isn't necessary to fulfill the AC 👇🏽

No additional styling needed

CBID2 · 2023-10-23T18:14:02Z

Hi @YuriDevAT! :) I revised the file path for the image import component, but for some reason, it does not show up in the deployment. Did I do something wrong? Also, I use height ="auto" like you suggested?

Where did you import the footer? The logo shows up on my side with this path.

I didn’t commit that line of yet @YuriDevAT. When I tried it locally, nothing showed up. For context, I did the import like this: import Footer from “./components/Footer”

It's working now, right? The logo with the original path is showing up in your local environment.

Yes

CBID2 · 2023-10-23T18:23:34Z

Hi @YuriDevAT. I forgot to mention this in my Linkedin DM. I decided to make the logo's alt text a bit more detailed. Here's what I wrote:

next to black, yellow, and blue dots is Julia's project, accessibilityfirst, written in lowercase and black and blue colors

pages/index.js

YuriDevAT

Hey you 😄 Last time revising your PR. Small adjustments but then it should be ready to go.

Please read my comments carefully and make sure you understand everything I mentioned as well as the ACs. If not, please ask me. Less code is more in this case. You will get a feeling for it soon, you will see 😎

pages/index.js

YuriDevAT · 2023-10-25T04:11:01Z

pages/components/Footer.js

+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",


Not needed. Please stick to the AC. Also discussed on LinkedIn 👇🏽

just go without position, just leave the width:100% and we are good to go 😊

Next steps 👉🏽 Remove everything except the width. Only do as much as described in the AC to get your PRs merged. The design of the footer will look nothing alike as it is now. So, all this code is going to be removed with the next ticket for the footer already, which is unnecessary work for the next contributor as well as for the maintainer mentioning this step in the ticket.

Expected output

<footer style={{ width: "100%", }} >

Wish 🙏🏽 : Please talk and explain reasoning behind your decisions for me to understand certain things better. If there are things you do not understand, ask me! This prevents unnecessary work for both of us which is very much appreciated to create a smooth work experience.

Thanks for your input with this @YuriDevAT. I was going back and forth with using Flexbox. I wanted to show of my knowledge a bit more (plus Flexbox is easier to use in my experience), but I wanted to follow the task list. Unfortunately, I went with my slightly more ambitious side. No worries, I'll definitely stick with your suggestions this time.

I know the feeling all to well 😁. But you will be able to show off your skills when we dive deeper into the code base, I promise 🤞🏽

YuriDevAT · 2023-10-25T04:12:24Z

pages/components/Footer.js

+        textAlign: "center",
+      }}
+    >
+      <Image src={logo} alt=" " width={100} height="auto" />


Please remove space between quotes:
Now: alt=" "
After: alt=""

Signed-off-by: Christine Belzie <[email protected]>

CBID2 · 2023-10-25T05:52:21Z

Hi @YuriDevAT! I read your comments carefully like you suggested and made the adjustments

YuriDevAT · 2023-10-25T14:28:05Z

You did it 🥳 Thank you so much for your contribution, @CBID2 💟

I am sooo grateful for this experience. This PR taught me a lot about myself, how I have to improve my communication skills, and that there are so many things I have to consider and work on to be a good maintainer. Thank you. Couldn't have done it without you 🙏🏽

Looking forward to your next contribution, Christine 😄

CBID2 added 2 commits October 16, 2023 22:54

feat: create footer

79ad5a7

feat: added code and logo

7657538

feat: add width

5c5683e

CBID2 marked this pull request as ready for review October 18, 2023 01:12

Revert "feat: create footer"

3e08bb4

This reverts commit 79ad5a7.

CBID2 marked this pull request as draft October 18, 2023 01:20

CBID2 added 2 commits October 17, 2023 21:22

feat: add comments here

5485bd3

feat: add export value

42ad87d

CBID2 added 5 commits October 18, 2023 19:35

feat: add CSS

1a64f93

feat: upload logo

8bd02e3

feat: imported logo

47737b8

feat: add height and width to logo

0a8825c

feat: add copyright information

f2f404a

CBID2 marked this pull request as ready for review October 19, 2023 23:28

Merge branch 'YurisCodingClub:main' into adding-a-footer

c17417f

YuriDevAT suggested changes Oct 20, 2023

View reviewed changes

CBID2 added 6 commits October 20, 2023 19:11

fix: revise import name

f215aac

fix: moved images

60e56a7

fix: revise file path for import logo

3a4e9a5

fix: revise file path for image import again

4e9b186

fix: revising the file path again

3739d91

fix: made image a self-closing tag

418a74a

YuriDevAT reviewed Oct 21, 2023

View reviewed changes

pages/components/Footer.js Outdated Show resolved Hide resolved

fix: moved logo and renamed file path

11f425c

CBID2 added 4 commits October 21, 2023 20:39

fix: revise file path

d127280

fix: moved logo.svg to a new folder

18494d6

fix: replace CSS property

c46ebfa

fix: revise height property to auto

929f806

fix: add margin and text-align center

5f78e4a

YuriDevAT suggested changes Oct 23, 2023

View reviewed changes

fix: remove extra CSS and revise alt text

d722626

feat: import footer to main page

c623715

YuriDevAT reviewed Oct 24, 2023

View reviewed changes

pages/index.js Outdated Show resolved Hide resolved

CBID2 added 2 commits October 24, 2023 19:15

fix: omit alt text

4011381

fix: improved footer's CSS

9bbda8e

YuriDevAT suggested changes Oct 25, 2023

View reviewed changes

CBID2 added 3 commits October 25, 2023 00:22

fix: went with simple CSS

7acab80

fix: remove space between the quotation marks near alt=

a1d26a3

fix: add space between imports & function for readability

5c82834

Signed-off-by: Christine Belzie <[email protected]>

YuriDevAT added the hacktoberfest-accepted Hacktoberfest contribution label Oct 25, 2023

YuriDevAT merged commit 9eaa45a into YurisCodingClub:main Oct 25, 2023

CBID2 deleted the adding-a-footer branch October 25, 2023 14:28

feat: creating a footer #42

feat: creating a footer #42

Conversation

CBID2 commented Oct 17, 2023 • edited Loading

Description

Fixes Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

netlify bot commented Oct 17, 2023 • edited Loading

✅ Deploy Preview for accessibility-mentor ready!

YuriDevAT commented Oct 18, 2023

CBID2 commented Oct 18, 2023

CBID2 commented Oct 19, 2023

YuriDevAT commented Oct 20, 2023

YuriDevAT commented Oct 20, 2023

YuriDevAT left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CBID2 commented Oct 22, 2023

YuriDevAT commented Oct 22, 2023

CBID2 commented Oct 22, 2023 • edited Loading

CBID2 commented Oct 22, 2023

YuriDevAT commented Oct 23, 2023 • edited Loading

YuriDevAT commented Oct 23, 2023

YuriDevAT left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CBID2 commented Oct 23, 2023

CBID2 commented Oct 23, 2023

YuriDevAT left a comment

Choose a reason for hiding this comment

YuriDevAT Oct 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CBID2 commented Oct 25, 2023

YuriDevAT commented Oct 25, 2023

CBID2 commented Oct 17, 2023 •

edited

Loading

netlify bot commented Oct 17, 2023 •

edited

Loading

CBID2 commented Oct 22, 2023 •

edited

Loading

YuriDevAT commented Oct 23, 2023 •

edited

Loading

YuriDevAT Oct 25, 2023 •

edited

Loading