wwcodecolorado/scrollodex

A fun place for women who code members to add and display their business cards.

scrollodex's Issues

make the card grid look better

This should be done in cardsDisplay.scss.

See if you can make the cards be displayed nicer as the grid/page gets filled up.

Maybe we need flexbox instead?

Fix the extra card parastou rendering

Add license info to project

Add a License file to the project and link in the CONTRIBUTING.md file.

Might have to research which license is best: http://www.gnu.org/licenses/license-list.en.html

Otherwise, we can use https://choosealicense.com/licenses/mit/ or https://en.wikipedia.org/wiki/MIT_License

Let us know if you have Qs!

Fix console react warnings

Fix console react warnings :

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
render @ react-dom.development.js:29670
./src/index.js @ index.js:8
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of JamesKCard. See https://reactjs.org/link/warning-keys for more information.
at div
at JamesKCard (http://localhost:3000/static/js/bundle.js:2088:82)
at div
at div
at CardsDisplay (http://localhost:3000/static/js/bundle.js:4416:73)
at div
at App
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
validateExplicitKey @ react-jsx-dev-runtime.development.js:1078
validateChildKeys @ react-jsx-dev-runtime.development.js:1105
jsxWithValidation @ react-jsx-dev-runtime.development.js:1276
JamesKCard @ JamesKCard.jsx:22
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:8
options.factory @ react refresh:6
webpack_require @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:86 Warning: Invalid DOM property class. Did you mean className?
at a
at div
at div
at CassandrasCard
at div
at div
at CardsDisplay (http://localhost:3000/static/js/bundle.js:4416:73)
at div
at App

Create header component

add Scrollodex to Women Who Code OS site

Go to https://github.com/WomenWhoCode/hacktoberfest21 and update frontend.markdown and list our github Scrollodex project under a Beginner Friendly Repositories header

Use https://womenwhocode.github.io/hacktoberfest21/mobile/ as a reference :).

Design input for footer component

Description

Design input for footer component
Does the footer meet brand guidelines? Are there any opportunities to improve the design?

Screenshots

Files

https://github.com/wwcodecolorado/scrollodex/tree/main/src/Components/Footer

Tasks

• identify areas of improvement for the design of the footer component
• Address found improvements

Create a RESOURCES.md

Intended to be a space with guides/ resources to learn or understand a concept related to this project better.

Add your favorite resource !

Examples:

• How to use git [link]
• How to contribute to open source [link]
• Best practices for react projects [link]
• learning SCSS [link]
• Your fave react tutorial
• Best ARIA resources to make your project accessible

Create a data model and database file for extensibility

By using a data model and database file contributors can add their details to the file, add images to an img folder and add styling to an individual className. This will reduce the number of files and static imports.

create readme with instructions for newbies

create issues for contributors

create your 'light-mode' card

Hey, y'all! This is the issue you want to use to create your first initial business card 👯‍♀️ ! Stick to 'light mode' colors in this one. Follow /src/cards/exampleCard/ as an example!

Create design mock-ups for the the whole Scrollodex project

Do you have a particular vision for this project? We'd love to see it! Plan and design out as much or as little if you want, if there is time new issues will be created to bring your vision to life. Attached to this are our inspirations:

Provide screenshots of your design in the design folder in the repo, and url links to your design on the PR.

If there are multiple contributors interested in mocking out the design, we will have our community vote on the best one to implement.

Address React Warning Invalid DOM property

Description

The project currently has a react warning on load. Warning: Invalid DOM property class. Did you mean className ?

Files

chumleyCard.jsx

How to Reproduce

• Open dev tools, open console tab to see warning.

Screenshot(s)

Tasks

• Address cause of warning

create a PR template :)

netlify deployment

Add favicon and app title

Fix this so it says Scrollodox instead of React App (and includes a fun favicon)!

Add .vscode directory to .gitignore

Add .vscode directory to .gitignore and delete folder from the version control.

Add new designs for project buttons

Description

The main buttons could use designer input and and update to the .btn-main class and we could use a secondary button (think "cancel" for a form or modal).
Changes should follow brand styling guide

Screenshots

Files

https://github.com/wwcodecolorado/scrollodex/blob/main/src/Components/Buttons.scss

Tasks

• Add new btn-main styling
• add btn-secondary styling

Add a 'dark-mode' to your card ( from issue #4)

Hey, y'all! For this issue take your card to the 'dark side' with a dark color theme. Add a trigger ( such as a button or hover) so we can see from light to dark change. Spooky animations are welcome 🕷️🕷️🕷️🕷️

Add pizzaz to your card!

Animation, CSS/SCSS effects galore!

Or just update your hyperlinks to be cute buttons that color change when you hover on them etc

Create a logo for Scrollodex

Incorrect external linking on some cards

The external links on two cards do not link correctly. It appears that if you don't have the https:// at the beginning of the URL it is trying to go to https://scrollodex.netlify.app/your-entered-link.com instead of just your-entered-link.com

Cards with issues:

• Rachel Thomas @rachael-t
• Chay McCormick @chay-chay

create a function to sort the cards alphabetically

cards can be sorted by github user or card file name.
(and reverse alphabetically!) and a button to initiate the sort.

bonus: randomize the card order!

Add descriptive alt text to your headshot

Description

Write a descriptive alt text for your own headshot, only if your card is completed.

Alt text is a succinct description for an image that will be announced to a screen reader users. It should describe the image as well as any relevant context of the image. Alt text of headshots is unique. While "Headshot of Jenn" does meet the guideline of having alt text for images, it is repetitive (since it is right next to a heading of the same name) and does not give a screen reader user a similar experience to a sighted user.

Example:
"Headshot of Jenn" could be replaced with "White women with shoulder length brown hair smiling and standing outside"

Alt text of a headshot is unique in that it could include information about an individuals identity. Because of this it is most appropriate for the individual pictured write the alt text themselves. Read more in resources below.

Files

Cards Folder

To Reproduce

If this issue is describing a bug, include some steps to reproduce the behavior.

Tasks

• Add a descriptive alt text to your own card
• Add a descriptive alt text for Ada Lovelace example card (not here to write her own)

Resources

Headshot Alt text example in the wild! Click ALT on the image of the tweet to see alt text.
Blog: The case for describing race in alternative text attributes
Web Aim email thread discussion on the topic

start a contact form component

This can just be the skeleton of a form in a source file.

You don't have to worry about navigation to this form yet, or have it actually accept submissions yet.

Let me know if you have questions.

Reference for creating this contact us form :

• front end: https://frontendstudygroup.github.io/contact
• code: https://github.com/frontendstudygroup/frontendstudygroup.github.io/tree/master/src/components/ContactUs

Add badges info to readme

Badges:
https://lgtm.com/help/lgtm/adding-badges-to-project-readme-files
https://shields.io/

We are hosted on netlify, lets try to add their badge

add your fave resource to RESOURCES.md

Add your favorite learning resource!

Examples:

• How to use git [link]
• How to contribute to open source [link]
• Best practices for react projects [link]
• learning SCSS [link]
• Your fave react tutorial
• how to find good first issues to contribute to in OS projects
• etc

Address Contrast Failures in sort buttons

Description

The sort buttons at the top of the page, Initial, Alphabetical and Randomize do not meet contrast minimums.

Files

Button implementation
scss for buttons

Screenshots

Tasks

• Change styling of these button to meet contrast guidelines and match new style guide

Notes:

Women Who Code Teal is #0077D7F

Check out RESOURCES.md for more accessibility resources and how to use the Wave Extension on the codebase.

Create a CREDITS.md

Create a markdown file called CREDITS.md at root, it will be used by all contributors and maintainers to sign off and put our names which link to our github profiles.

Create a footer component

Design and create a footer for our project. You can keep it simple and display something like:

Scrollodex 2021

You can use this project as a reference for footer:

• site: https://frontendstudygroup.github.io/
• code: https://github.com/frontendstudygroup/frontendstudygroup.github.io/tree/master/src/components/Footer

Align Scrollodex to new WWCode brand guidelines.

Ask @jischr for brand details.

remove example card

Let's remove the example card so we don't have a random stock photo in our scrollodex.

add your name to the CREDITS.md

once it's created please add your name and where you're from to this markdown and link it to your github profile ! :)

ex.

Ada Lovelace <-(github link) London, England

NOTE: You must complete another issue and get that merged into this repo before you can add your name to the credits.

Address Lack of Landmarks

Description

The project does not meet best practice or WCAG AA when it comes to landmarks. This is an accessibility concern since screen reader users often use landmarks to navigate a page.

This can be addressed by using semantic html such as <main> or with an aria role attribute<role="main">
See resources below for more on ways to address this

How to visualize page structure with Wave

1. install wave web accessibility evaluation tool browser extension
2. run tool (on Mac cmd + shift + u)
3. within summary sidebar, select structure tab

Tasks

• All text content should be with in a landmark
• There should be atleast one main landmark

Resources

ARIA Landmarks Example
WAI-ARIA Docs on main role
Deque Checklist on Landmarks

add a CODE_OF_CONDUCT.md

Add the file to root.

Use these resources below to write it out:

Formatting/ content guide:

• https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md

Content should reflect our HQ COC as well:

• https://www.womenwhocode.com/codeofconduct

Speed up image loading

The images are loading slowly on the app. Some ideas could be:

• optimize images/file size to speed things up
• figure out alternative image hosting/storage idea

Address skipped heading level

Description

The project currently skips from H1 to and H3. This does not meet WCAG and could causing a confusing navigation for screenreader users.

How to visualize page structure with Wave

1. install wave web accessibility evaluation tool browser extension
2. run tool (on Mac cmd + shift + u)
3. within summary sidebar, select structure tab
4. Note the Orange alert concerning skipped heading level

Screenshot(s)

Tasks

• Address the skipped heading level
• Ensure fix does not change styling

Resources

Deque Heading Order

create an about page/ component