firstcontributions/firstcontributions.github.io

Web app for First Contributions

firstcontributions.github.io's Issues

Fix the falling social share unit tests

I notice that the social sharing unit tests are failed after the changes done at de62ac6

🐞 Problem
rel attribute is missing from the test snaps

🎯 Goal
Make unit tests passed

💡 Possible solutions
Adding rel attribute for the anchor tag in LinkedIn and twitter test snaps.
Check changes here

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in the comments section of the pull request.
• Celebrate your contribution to this project. 🎉

Add graph based projects

Add a few graph-based and graph visualization libraries.

• Plotly

• Networkx

• Igraph

• D3

Support for GitLab

I would like to add projects that are hosted on GitLab, (not just .com, but also other instances as well, e.g. https://code.ungleich.ch).

Instead of githubLink, it could be projectLink. Not sure what all is needed to make this happen.

const projectList = [
  {
    name: 'React',
    imageSrc: 'https://camo.githubusercontent.com/22045498095171997ccf6a9554672519b9f67898/68747470733a2f2f63646e2e776f726c64766563746f726c6f676f2e636f6d2f6c6f676f732f72656163742e737667',
    githubLink: 'https://github.com/facebook/react/contribute',
    description: 'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
    tags: ['JavaScript', 'UI', 'Web App'],
  },

[ . . . TRUNCATED . . . ]

Source: https://github.com/firstcontributions/firstcontributions.github.io/blob/source/src/components/ProjectList/listOfProjects.js

creating containers folder in src

🐞 Problem
I propose if index.css and index.js can be moved to containers folder after creating containers foler

🎯 Goal
It is to organize files better

📋 Steps to solve the problem
Move index.css and index.js to containers folder

Change component type of LinkButton

The LinkButton component is a dumb one so it is better to change it to a functional component.

Compilation Error "Can't resolve './Google'"

🐞 Problem
Take the latest version of the source branch code and run the build command, results in compilation error
Module not found: Error: Can't resolve './Google' in:\Projects\firstcontributions.github.io\src\components\SocialShare'

🎯 Goal
To fix the compilation error so that the solution can be executed.

💡 Possible solutions
PR #41 a few days back removed the Google+ JSX file and the component reference but it looks like missed removing the import statement, causing a build error.
Remove the import statement to solve the compilation error.

Navbar icon hover UI / UX

🐞 Problem
@MungaiKeren mentioned this in the firstcontributions tutorial project issue#44497. The hover effects aren't appealing and are hard to see.

🎯 Goal

• Create a more appealing experience when hovering over the Navbar icons.

💡 Possible solutions

• Remove grey background hover effect
• Toggle between white and grey when hovering.

📋 Steps to solve the problem

• Modify Navbar.css

CircuitVerse card does not load Image

🐞 Problem
CircuitVerse card only displays the alt message and does not load Image

🎯 Goal
Improve UI by simply displaying image properly.

💡 Possible solutions
locate source folder in src/components/ProjectList/listOfProjects.js and update image.

Customizing the Navbar by adding icons to links

🐞 Problem
The header and navbar aren't very detailed in design terms.

🎯 Goal
Adding Icons beside the links to twitter, github and slack.

Improve Readme

Have content in the Readme to suit the project better

🐞 Problem
Currently, we have default Readme generated by Create React App. As much as this is useful, we can have a Readme that's tailored to this project that helps contributors and users better.

🎯 Goal
Have a cool , awesome Readme

💡 Possible solutions
Let's have a discussion about what makes a Readme effective. What we need for this project etc

📋 Steps to solve the problem

• Comment down below the things you'd like to have (or be removed) in the Readme.
• Vote on things you like or those you find useful
• Submit pull requests to address the things we decide on.

SimplQ card image does not load

🐞 Problem

The SimplQ card on the website looks like this:

🎯 Goal

Properly display SimplQ card

💡 Possible solutions

Update the SimplQ image source in src/components/ProjectList/listOfProjects.js

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Branch for GitHub Pages not being updated with new projects

@Roshanjossey, @sara-02 this was pushed, but the gh-pages branch does not look like it has been updated.

Originally posted by @oxr463 in #40 (comment)

Adding Flutter in Projects

Adding flutter for Android and ios app development
🐞 Problem

🎯 Goal

💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add opensourcedesign to project list

Here's a link to beginner level issues in opensourcedesign https://github.com/opensourcedesign/opensourcedesign.github.io/issues?q=is%3Aissue+is%3Aopen+label%3A%22starter+issue%22

You can figure out how to do this by going to #1

Wrong image sources

🐞 Problem

Some of the objects listed in src/components/ProjectList/listOfProjects.js have an incorrect image source.
For example, the CircuitVerse card on the website looks like this:

So far, I have noticed the following project cards with the same issue:

• aprenda-go-com-testes

🎯 Goal

Properly display projects cards

💡 Possible solutions

It seems the problem is caused by linking a GitHub page rather than an image.
For example, the CircuitVerse object in listOfProjects.js has its imageSrc property set to https://github.com/CircuitVerse/CircuitVerse/blob/master/app/assets/images/CircuitVerse.png, which is a link to this:

A solution to this problem would be to replace the incorrect image sources with each image's raw.githubusercontent.com URL.

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add Conda Project to the project list

As a followup on the PR firstcontributions/first-contributions#19582, we can add the Conda project to the list of projects.

• Possible tags like ML, Python, Builds , package manager etc.
• Link to the github org: https://github.com/conda
• Link to logo: https://conda.io/en/latest/_images/conda_logo.svg

CONTRIBUTING.md file lacking instructions

I was following the CONTRIBUTING.md file to be able to make a contribution to the project. When I got to the "Running the Project" section and ran the command "yarn install", after following the previous steps, it did not work and said "command not found." This is obviously because I need to have yarn installed before I can run this command.

🐞 Problem

I would like to propose adding a line stating that the user must have yarn installed and maybe some links on where they can do that.

🎯 Goal

It's important to me because as a first timer I encountered this issue but knew how I would solve it. However, folks who are still new to coding/contributing might not know this and feel stuck.

It will let them know that they need to have yarn installed before running the command.

💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add projects to project list

It'd be awesome to have a lot more suggested projects

🐞 Problem
Currently we have only a bunch of projects in project suggestions

🎯 Goal
Have a lot of project suggestions from diverse domains, languages, frameworks

💡 Possible solutions
Add new projects.
We maintain the list of projects at https://github.com/firstcontributions/firstcontributions.github.io/blob/source/src/components/ProjectList/listOfProjects.js
Change this file and add details of new project. Make sure you add all fields like other projects you see there

You just have to add and entry similar to the followig

{
    name: 'Qute Browser',
    imageSrc: 'https://avatars1.githubusercontent.com/u/21955151?s=200&v=4',
    githubLink:
      'https://github.com/qutebrowser/qutebrowser',
    description: 'A keyboard-driven, vim-like browser based on PyQt5',
    tags: ['Python','Qt','pyqt5','Vim','Browser','qtWebEngine','web']
  },

Don't know any projects you wanna add? Check out https://github.com/MunGell/awesome-for-beginners where there's a list of a boatload of projects

📋 Steps to solve the problem

Comment below about what you've started working on.
Add, commit, push your changes
Submit a pull request and add this in comments - Addresses #
Ask for a review in comments section of pull request
Celebrate your contribution to this project 🎉

broken logo and other link error

broken logo and other link error

🐞 Problem
#fix all broken link eg:(gatsby logo link ),and many others

🎯 Goal

💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉
  what link was used (https://camo.githubusercontent.com/ac31ac54c2013850b0fb8a3a4926f4718a398fb3/68747470733a2f2f7777772e6761747362796a732e6f72672f6d6f6e6f6772616d2e737667)
  this is gatsbys logo link its is down as well as some project links

Want to Help you by Improving the UI In Your Website 🎏

🐞 Problem
I saw Your Website or I thought that I can improve its user interface, there I can make a lot of changes in it now...🎗

🎯 Goal
And this change will be very helpful for you , by changing this thing, your website will start looking user friendly, whoever will visit your website , will going to feel that what a cool website.

💡 Possible solutions
we can change the navbar styling by adding day and night theme.👌
We can change the background color in linear gradient color.
we can make changes in fonts and the styling of text.

I will be really happy if you can make this changes in the website.

Thank you.😊

additions in contributing.md

I would like to add following things in contributiong.md or create a new file for the same
1.Difference between GIT and GITHUB
2.How to clone,fork repository
3.How to create a branch and then use git push to push to repo
4.Create a PR
5.Squash commits in a single issue into one
6, Updating the forked and local repo as the updations are made in the upstream

🎯 Goal
This can be beneficial to users who are first time contributing to the repo

Errors with the logo picture links

🐞 Problem
The React, React Native, Gatsby, and Navy Linux logos are missing.

---

By clicking "Go to Project" it should be open in new tab

🐞 Problem

When I found the relevant project to contribute to or view it and I clicked on the "Go to Project" button it opens the same tab I lost the previous tab of First Contributions and it will be beneficial to open it in a new tab. Nobody is using mobile for development so it will be not much irritate on mobile too. But opening in the same tab will be much irritated.
🎯 Goal
Adding the HTML attribute which will open the project into the new tab.

Fix Images on List of Project List

🐞 Problem

Some project images under the home page doesn't exist hence doesn't load properly

🎯 Goal

Fix broken links to load proper images

💡 Possible solutions

Fix on listofprjeclistOfProjects.js file.

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add hacktoberfest hash tag to tweets

Adding hacktoberfest tag in our tweets will give it more visibility.

🎯 Goal
Reach out to more people who follows hacktoberfest tag on twitter.

💡 Possible solutions
Change twitter share link https://github.com/firstcontributions/firstcontributions.github.io/blob/source/src/components/SocialShare/Twitter.jsx#L4

from

const twitterLink = "https://twitter.com/intent/tweet?text=Yay%21%20I%20just%20made%20my%20first%20open%20source%20contribution%20with%20@1stcontribution.%20You%20can%20too%20at%20https%3A//goo.gl/66Axwe%0A&hashtags=OpenSource,CodeNewbie"

to

const twitterLink = "https://twitter.com/intent/tweet?text=Yay%21%20I%20just%20made%20my%20first%20open%20source%20contribution%20with%20@1stcontribution.%20You%20can%20too%20at%20https%3A//goo.gl/66Axwe%0A&hashtags=OpenSource,CodeNewbie,Hacktoberfest"

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Broken Teammates image

🐞 Problem
The Teammates image is broken.

🎯 Goal
The Teammates card must have a valid logo.

💡 Possible solutions
Get a new url image and change it for the current one.

📋 Steps to solve the problem

• Get a valid Teammates image as a logo.
• Change the current url for the new image url.

Add YouTube channel link

🎯 Goal
Get more people to know about the YouTube channel

💡 Possible solutions
Add a link to our Youtube channel https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ in our web app.
We have navigation links in src/components/Navbar/Navbar.jsx.

It could be placed between Slack and twitter link.

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Update logo and repo link from systers to anitab-org

Systers has moved to https://github.com/anitab-org .
Update logo and repo link in Projects section

🐞 Problem
Unaccurate logo and link

🎯 Goal
To keep this repo up to date fix the problem mentioned

Fix Casing Inconsistency In Tags.

Some of the tags are in Capital letters, some in small. I suggest we Capitalise the tags[the first letter of each word in tagset] and use make them uniform.

🎯 Goal

• Fix the upper/lower case inconsistency in tags.

• Also, add a comment at the EOF which states the casing format to be used for tags. It will be useful for future contributors.

• Add text-transform: capitalize to the tag CSS

Files to change

• https://github.com/firstcontributions/firstcontributions.github.io/blob/source/src/components/ProjectList/listOfProjects.js
• https://github.com/firstcontributions/firstcontributions.github.io/blob/source/src/components/ProjectList/css/project-cards.css#L87

logo image link is broken in Ruby Koans card

🐞 Problem
in Ruby koans card logo image link is broken

🎯 Goal
look nicer if the logo image is visible

Add projects to project list 2020

🐞 Problem

🎯 Goal

💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add an issue template

We can have the same issue template that we use in first-contributions

https://raw.githubusercontent.com/firstcontributions/first-contributions/master/.github/ISSUE_TEMPLATE.md

Redirect link

🐞 Problem

The "Get started" link

Reduce much time before redirecting
🎯 Goal

It takes much time before redirecting to the default branch

They'll have quick access to the github page
💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Broken link after clicking the Slack button

After I click the slack button , I get an error as

This link is no longer active
To join this workspace, you’ll need to ask the person who originally invited you for a new link.

🐞 Problem
Slack channel links expire after a certain amount of time .

🎯 Goal
Update the current invite link

remove archived/dead projects

🐞 Problem
Some projects are abandoned, and therefore no longer useful for inclusion in this list.
Abandon projects might have historical value, but aren't super useful to folks looking to make a contribution.

Example: https://github.com/freeCodeCamp/mail-for-good

🎯 Goal
Keep the projects list current.

💡 Possible solutions
Periodically check all projects and remove dead projects.

Maybe Github actions can do this for us 🤔

📋 Steps to solve the problem

• review the list of projects (src/components/ProjectList/listOfProjects.js)
• Open each link and see if the project is abandoned
  • this is scriptable for projects on Github since we can use the API
  • projects not on Github: we could script a check that the page at least isn't 404 or similar
• remove abandoned projects from the list

aprenda-go-com-testes card does not link to the project repo

🐞 Problem

(title)

🎯 Goal

Make the aprenda-go-com-testes project more accessible to users looking to contribute

💡 Possible solutions

In src/components/ProjectList/listOfProjects.js, the aprenda-go-com-testes object does not have a projectLink property. It does, however, have a githubLink property, so I suppose the creator of the card confused projectLink for githubLink.
This can be fixed by simply renaming the githubLink property for the object.

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add Contributing.md

Add a CONTRIBUTING.md as a tutorial for other contributors.

I can change some parts of the website UI

🐞 Problem
I recently saw your website and I found that many changes can be done on your website for example - the navbar, the icons are too big in it. The main section where all the cards are. And the footer again there were some giant icons. And I think I can make the UI of the website better.

🎯 Goal
This change can be very beneficial because right now the website looks ok but if we can change the UI then we can make it look modern.

💡 Possible solutions

1. We can change the navbar styling.
2. We can also change the main section where all cards are by increasing their width and all.
3. We can set some max width for the icons that way they will look more nicer.

I will be really happy if I can make this changes in the website.
Thank you.

[ UPDATE ] invalid or missing logos💡

I recently visited here and found that many logos ( the list is given below) are either removed by the respective owners or image links are outdated.

🐞 Problem

• Invlid logo URL used in

src/components/ProjectList/listOfProjects.js

The list is as follows

• ifme [ Line No. - 464 ]
• Game of Life [ Line No. 660 ]
• Light Table [ Line No. 541 ]

🎯 Goal

• Updated logo will have a better UI/UX and instill a professional outlook.

💡 Possible solutions

• update the list of logos at given lines numbers

Mixed passive/display <img> (src attribute)

Loading mixed (insecure) display content on a secure page shows the "Your connection to this site is not fully secured" (Chrome) / "Connection is not secure" (Firefox) message in the address bar.

🐞 Problem

The HTTP request to http://hoodiehq.github.io/hoodie-css/src/content_img/animals/low-profile-dog-3.png is the problem.

🎯 Goal

Reclaim the "Secure Connection" in the address bar.
And better safeguard from most sniffers and man-in-the-middle attacks.

💡 Possible solutions

Make the call to https://hoodiehq.github.io/hoodie-css/src/content_img/animals/low-profile-dog-3.png instead of http://hoodiehq.github.io/hoodie-css/src/content_img/animals/low-profile-dog-3.png.

Adding Hacktoberfest Tags to Facebook share

Adding tags to facebook share to have more visibility (same as #13 but for Facebook share)

🎯 Goal
Reach out to more people who follows hacktoberfest tag on facebook.

💡 Possible solutions
Change the link in https://github.com/firstcontributions/firstcontributions.github.io/blob/source/src/components/SocialShare/Facebook.jsx

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Add ifme to project list

Here's a link to beginner friendly issues in ifme https://github.com/ifmeorg/ifme/issues?q=is%3Aissue+is%3Aopen+label%3A%22beginner+friendly%22

Go through #1 to figure out how to go about doing this.

Improve general website design (small fixes)

🐞 Problem
The website is functional and does what it is meant for. However, the design could improve a lot with some simple fixes.
Some of those fixes are:

• Changing default font of cards text
• Improve Get Started button design (size, margin)
• Adjust spaces between title (Make your first..), navbar and button (spaces are not equal)
• Center navbar (this can be discussed)
• Delete the frase "the framework or language that the project is build upon" that is present in some of the cards.
• Adjust padding on projects topics on each card.
• Adding dark mode

🎯 Goal
For me, this change is important because affects the first impression about the project and the website. The design is certainly really important so that the website looks as good as possible for the user. It helps attracting him to like and use the service, and even recommend it to others.

At first sight, it could look like fonts and paddings are not that important but it does a huge difference when you enter a website and it is well spaced, with different fonts and well designed.

💡 Possible solutions

Changing mainly CSS and using some javascript to add dark mode (saving on localstorage the choice).

📋 Steps to solve the problem

• Changing default font of cards text
• Improve Get Started button design (size, margin)
• Adjust spaces between title (Make your first..), navbar and button (spaces are not equal)
• Center navbar (this can be discussed)
• Adjust padding on projects topics on each card.

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for reviews in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Should we move to `/contribute` link for all projects

Discuss the benefits and drawbacks for using repo-link/contribute provided by GitHub instead of issue filters we have.

This is the issue that suggested this change

This is the pull request that made the require changes.

This is a comment in the pull request suggesting that this might not be at the best interest of users.

@sara-02 , @gavv , @tiferet, shall we discuss and figure this out?

Fix mismatched property value in App.css

🐞 Problem
There is a mismatch in the property middle which is assigned to align-items

🎯 Goal
Clear the broken CSS style

💡 Possible solutions
Remove align-items: middle; from App.css since it isn't needed.

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in the comments section of the pull request.
• Celebrate your contribution to this project. 🎉

Fix width (and maybe height) of cards

Cards are not full width in some cases and heigth is different depending on number of tags or description length.
🐞 Problem
Full width for all cards and maybe fixed height. Need to test this last enhancement.
🎯 Goal
Looks nicer when all the cards have same size

Sorting of projects always presents the same projects presently

🐞 Problem
Currently every time you open the page, the first projects everyone sees are React, React Native and Exercism. As people most probably browse and don’t search for a specific project, that gives projects which were added later (or which are smaller and less known than React) less exposure.

🎯 Goal
The goal is to present every project on an equal footing. And to also show the variety of projects on the platform.

💡 Possible solutions
To achieve that, every time the page is loaded the order could be randomized.

What do you think @Roshanjossey @sara-02? :)

Slack link no longer active

The slack link in the website is broken.

🐞 Problem

🎯 Goal

💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

Card Header Image Link Broken

🐞 Problem

The image link for the React Native card is broken.

🎯 Goal

Fix it by replacing it with a working image URL

💡 Possible solutions

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes.
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request.
• Celebrate your contribution to this project. 🎉

padding and overlapping issue for mobile responsive design on home page

🐞 Problem

• Filter and search options are overlapping in mobile design
• card in project list require some padding in mobile design

💡 Possible solutions