ossn / fixme

Easily find open source projects that are a good fit for your skills and abilities

FixMe Repo

FixMe helps contributors find open source projects that are a good fit for their skills and abilities, so that they can start contributing to open source. This platform acts as a filtering system to help people overcome that initial obstacle and find a project that is right for them. All of these projects have been vetted to ensure that they’re active, healthy, and ready for beginner contributions.

Setting up the project

This project requires Node.js version >= 8.10 and yarn

• Install dependencies
  • yarn
• Run development
  • yarn start
• Deployment
  • yarn build

!!! This project uses prettier and editorconfig so lint your code before committing and respect the editorconfig specs (or use a plugin to do it for you http://editorconfig.org/#download). !!!

This project was bootstrapped with Create React App.

fixme's Issues

Update backend URL into frontend

Blocked by #6

Document doesn't use legible font sizes for mobile

88.03% of text is too small.

Make issues sidebar scroll-able

Currently, the filters sidebar is scrollable only when you reach the end of the issues list

Steps to reproduce:

1. Got to the issues page: https://fixme.ossn.club/issues
2. Put your pointer over the filters and scroll

Expected behavior:
The filters list is scrolling

Background and foreground colors do not have a sufficient contrast ratio.

Low-contrast text is difficult or impossible for many users to read. Learn more

Failing elements on project page:

<a href="https://docs.google.com/forms/d/e/1FAIpQLSfFXvaTB9BXx7AEAmght09VcFW1Zq-lqeaKHRzjPjiczzAlrQ/viewform">in this form</a>

<span class="text-muted mt-2 small fixme-footer-moz-text">Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at mozilla.org</span>

Failing elements on main page:

<h6 class="home-about-you-title mb-2">TELL US A BIT ABOUT YOURSELF</h6>

<div class="css-1492t68">type in your favorite languages</div>

<span>our latest tweets</span>

<div class="home-twitter-tweet">Latest issue to fix for project Bootstrap! HELP! https://fixmeparser.com/issues#1825 </div>

<span class="text-muted mt-2 small fixme-footer-moz-text">Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the web for the public good. Visit us at mozilla.org</span>

Failing elements for issues page:

<span class="mb-4 align-self-start">Tue Sep 18 2018</span>

<span class="text-capitalize ml-1">moderate</span>

<span class="text-capitalize ml-1">javascript</span>

<span class="text-capitalize ml-1">Issue</span>

<code>a</code>

<code>p</code>

<span class="mb-4 align-self-start">Tue Sep 18 2018</span>

<span class="text-capitalize ml-1">moderate</span>

<span class="text-capitalize ml-1">typescript</span>

<span class="text-capitalize ml-1">enhancement</span>

<span class="mb-4 align-self-start">Tue Sep 18 2018</span>

Add .vscode directory to .gitignore

Hello There 👋
Any thoughts about git-ignoring the .vscode directory? Since the settings.json or the directory doesn't contain any specific configuration, debug or task-specific settings, isn't it good to ignore the directory from version control or having it on GitHub?

Brainstorming

P1:

Main page

• User can select to search issues based on language, expertise and time needed

Issues view

• User can select to search issues based on language, expertise and time needed
• When a user clicks on an issue he/she is forwarded to the relevant GitHub issue
• User can sort the issues by newest<>oldest, difficulty level, type, language

Project view

• When a user clicks a project he/she is FWDed to a list of issues filtered for that project only
• User has a list of projects he/she can contribute to

P2:

• P1: Metrics
• When a user clicks a project he/she is FWDed to a project view similar to the beta experiment
• Issues view: color code on the side of each issue is "a nice to have"
• Fetching and presenting github issues into our platform

Broken Images In Project

In Project Section some projects (Common Voice,Blockly) have broken image link and the alt is showing up, we should either update the links or show a placeholder image.

Document does not have a meta description

Meta descriptions may be included in search results to concisely summarize page content. Learn more

Landing page view

MVP: User can select to search issues based on language, expertise and time needed

Platform: Metrics

Projects view seems to be broken

https://screenshots.firefox.com/63h5WIkNWJQ2rlqJ/fixme.ossn.club

Search for differences between website and designs

Design images can be found here

Form elements do not have associated labels

Labels ensure that form controls are announced properly by assistive technologies, like screen readers. Learn more.

Failing Elements

<input type="checkbox" readonly="">

Failing elements on the main page

<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">

npm start run issue

when i type this "npm start run" terminal show error . kindly guide me

Tags coming on top of Project names

Tags are overwritting on top of project names:

@alexdor Maybe we can limit the number of tags we display upto 5 or something, so that the interface remains clean

Backend improvements for supporting the design

Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more

Failing Elements

<a class="nav-link" target="_blank" to="https://twitter.com/fixmeparser" href="https://twitter.com/fixmeparser">

Defer offscreen images

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more

Links to cross-origin destinations are unsafe

Add rel="noopener" or rel="noreferrer" to any external links to improve performance and prevent security vulnerabilities. Learn more

Add .huskyrc to remove warning in the latest version

Husky gives a warning to move the precommit hook to .huskyrc in the latest version , we should make the change to remove the warning.

Update Description and Readme with more info

Hello 👋
Just found out that this repo is missing some of the important things which might help new contributors understand the project better. ( I had a hard time figuring out what this repo was about)

• The description and website link of this repo is left empty
• No texts explaining what this project is or what it does

If the maintainers could help with this, that'd be of great help for new contributors 😄

Heroku buildpack error

If you have ubuntu 16+ then install heroku
sudo snap install --classic heroku

onces you have successfully installed ,
cd fixme
heroku open
domain open in your browser

https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

buildpack issue due to access or read logs

dependency issue

/fixme$ npm i
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

[email protected] install /home/ali/fixme/node_modules/node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.4/linux-x64-57_binding.node
Download complete ] - :
Binary saved to /home/ali/fixme/node_modules/node-sass/vendor/linux-x64-57/binding.node
Caching binary to /home/ali/.npm/node-sass/4.9.4/linux-x64-57_binding.node

[email protected] install /home/ali/fixme/node_modules/husky
node husky install

husky > setting up git hooks
husky > done

[email protected] postinstall /home/ali/fixme/node_modules/jss
node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"

Love JSS? You can now support us on open collective:

https://opencollective.com/jss/donate

[email protected] postinstall /home/ali/fixme/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
node lib/post_install.js

[email protected] postinstall /home/ali/fixme/node_modules/node-sass
node scripts/build.js

Binary found at /home/ali/fixme/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine

[email protected] postinstall /home/ali/fixme/node_modules/styled-components
node ./scripts/postinstall.js || exit 0

Use styled-components at work? Consider supporting our development efforts at opencollective.com/styled-components

[email protected] postinstall /home/ali/fixme
node postinstall.js

Got a problem during installation? Don't forget to report it in our repository
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-router@^4.3.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@~16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@~16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@~16.0.0 || ~16.1.0 || ~16.2.0 || ~16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@~16.0.0 || ~16.1.0 || ~16.2.0 || ~16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@~16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@~16.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@^2.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1969 packages from 1148 contributors in 1136.524s

┌───────────────────────────────────────────────────────┐
│ npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) /home/ali/.config │
└───────────────────────────────────────────────────────┘

Eliminate render-blocking resources

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more.

Push backend into production

v1 remaining issues

• Project filter on issues
• Twitter hook for fixmeparser
• A/B testing from netlify

Project listing is displaying empty tags

Project listing is displaying empty tags when the project has no tags. For example it displays something like this:

The expected behavior would be to not show any tag.

prevent showing 'closed issues' in the issues section.

User selects technology, level of difficulty, issue type and gets list of issues.
Upon clicking on a particular issue, finds its already resolved and closed. :(
So it would be better to show only current open issues.

Documentation: create the about page

Add information into the about page

• What does the platform does.
• Why do you need the platform
• How to use the platform

Issues page

• User can select to search issues based on language, expertise and time needed
• When a user clicks on an issue he/she is forwarded to the relevant GitHub issue
• User can sort the issues by newest<>oldest, difficulty level, type, language

P2:

• Issues view: color code on the side of each issue is "a nice to have"
• Fetching and presenting github issues into our platform

Fix issue filter sidebar on mobile

Issue filter sidebar isn't displayed properly on mobile.

Expected outcome

Projects page

• When a user clicks a project he/she is FWDed to a list of issues filtered for that project only
• User has a list of projects he/she can contribute to

P2:

• When a user clicks a project he/she is FWDed to a project view similar to the beta experiment

Adding post install script

Hi,

I had difficulty when installing the project because of my outdated node js. Maybe it's a good idea to add post-install script that gives suggestions on what to updates and so on

Issues counter in project tile not uniform

The issues counter in the project tiles isn't uniform i.e. some have issues written behind the counter and some have issues written below them.

Also the issues and the setup counters clutters the space. There should be some space between them to make them easily distinguishable.

Do you want to work on this issue?
Yes

QA website

Go through the website and detect issues.

Add an HFOSS filter to the UI

Add an HFOSS filter on the UI/filters list

Required information not starred for adding projects

The form to add a new project on the project page doesn't indicate whether information is required or not. Currently users can submit complete blank forms so I'm not sure if there are certain fields that can be left blank or if all fields should be filled out.

Progressive web app improvments

• User will not be prompted to Install the Web App, because manifest.json does not have a PNG icon of at least 192px. Learn more
• Website is not configured for a custom splash screen, because manifest does not have a PNG icon of at least 512px. Learn more

Build a twitter hook

Fetch tweets from @fixmeparser and show them in the landing page

Fix the "learn more" behavior

Current behavior:

Expected behavior: When you click learn more, in the main page, you page should scroll and put the "I do my magic in" in the middle of the page!

Incorrect issue count

When you look at the projects, some of the projects show 0 issues. For example, MediaWiki's issues aren't directly on GitHub but listed on a separate site instead. It looks like Fixme only uses GitHub issues to determine the issue count.

Button does not have an accessible name

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers.

Failing elements

<button type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>

Project needs a license file

We need to add the license file so to help people easily know the distributing license of the project.
Github advises having a license.md file on each and every repository. Learn more

UI/UX Improvements - Projects page

Some backgrounds in cards hinder text readability

Project tags overlap project description on hover

Navigating to the Issues page in Chrome is scrolled down a little

When you navigate to the issues page after typing a language in "I do my magic in" search bar, the scroll bar is not at the top of the page. The bug is present only in Chrome browser and I tested in Chrome, Firefox, and Edge.

Ensure text remains visible during webfont load

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more

Remove languages that we won't have issues for

STR:
Explore -> Select SASS -> No issues found

Getting error in starting the server.

I am getting error on "npm start"

   Starting the development server...

ts-loader: Using [email protected] and C:\Users\Rupesh\desktop\fixme\tsconfig.jso                                                                                                                n
Failed to compile.

C:/Users/Rupesh/desktop/fixme/src/routes/Home/components/TellUsAboutYou.tsx
(36,23): Object is possibly 'null'.
Compiling...
Failed to compile.

How to fix this ?

Change Mobile Hamburger Menu UI,

I think the facebook and other icons should be big and spaced out , also all the list items should be spaced out as well

Setup displays on project page even if setup isn't specified

Currently on the projects page for a project, it just displays "setup" when a setup time has not been specified.

Add Sass projects

It would be great to have some SASS projects since we have it as an option