developersdo / opensource

🔦 Discover the open source ecosystem related to the Dominican Republic!

Dominican Open Source is an initiative to gather all possible public data about projects and their contributors related to the Dominican Republic in GitHub using the GraphQL API.

Want to join?

There are different ways to participate in this local effort:

• You can include your GitHub users by adding the term “Dominican” to your profile's location. (Note: Dominicana is also accepted)
• You can improve the code of the public website or the scraper.
• And if you don't code you can check the grammar, the UX, the graphic design, report bugs - it is up to you ;)

Development

If you want to run this project locally you will need: NodeJS 8+. After git-cloning this project do:

Note: If you just want to develop the website then skip step 3 and 4.

1. npm install
2. Copy config/default.json to config/development.json.
3. Generate a GitHub personal access token.
4. Add your GitHub personal access token to config/development.json (this file is git-ignored).
5. npm run serve and open http://localhost:8080/opensource

That's it! Happy coding.

Scripts

• npm run scrape – scrape for all GitHub users and repos as configured.
  • npm run scrape -- --only=users – scrape for all GitHub repos.
  • npm run scrape -- --only=repos – scrape for all GitHub users.
• npm run generate-data – generate GitHub users and repos for front-end usage.
  • npm run generate-data -- --only users – generate JSON data for users.
  • npm run generate-data -- --only repos – generate JSON data for repos.
• npm run sequelize – to use sequelize, pass cli args as follow: npm run sequelize -- db:migrate.
  • npm run sequelize -- db:migrate – Run all pending database migrations.
  • npm run sequelize -- db:migrate:undo – Rollback last database migration.
  • npm run sequelize -- db:migrate:undo:all – Rollback all database migrations.
• npm run sequelize:debug – to use sequelize in debug mode.
• npm run refresh – to run the scraper and generate frontend data.
• npm run build – to run static assets for production usage.

Deployment

The deployment is done by CirceCI which listen to pushes in master branch, then build website assets and finally pushes the site into gh-pages branch. All details are specified at .circleci/config.yml.

With ♥︎ from all contributors.

opensource's Issues

Add the position number in the card

That would be cool if the position number is added to the card, this will give us a better idea how much repositories there are before ours. What I suggest is something like:

Filter developers by name

Requirements

• May depend on #10

Tasks

• Create or reuse the Filter component at src/client/components/filter/Filter.js (more details on creating at #10).
• Developers should be filtered by name or login fields.
• Add the Filter into src/client/components/repositories/popular/Popular.js and src/client/components/repositories/recently-joined/RecentlyJoined.js where it will filter both lists.

Resos.json genera una masa cantidad de información

La data en JSON pesa aprox. 2MB, esto es una petición fuerte para los usuarios.

Lo mejor sería reducir el JSON a la cantidad que se mostrará al inicio (ejemplo 9), y ya luego ir cargando con un sistema de paginado dinámico, los demás datos.

https://developersdo.github.io/opensource/data/repos.json

Add thousands separator to stats

El Above the Fold, está demasiado grande. Se debe reducir

Handle long tag list in repo cards.

Some repository cards in some resolutions they will overflow and put the extra content above. The desired is to disable the wrapping and make it look more aceptable. We could hide the extra in the same line. Any suggestions are more than welcome!

Optimize Images

Properly formatting and compressing images can save many bytes of data.

Compressing and resizing https://avatars3.githubusercontent.com/u/439839?v=4 could save 257.2KiB (98% reduction).
Compressing and resizing https://avatars2.githubusercontent.com/u/20671846?v=4 could save 52.9KiB (98% reduction).
Compressing and resizing https://avatars3.githubusercontent.com/u/4788817?v=4 could save 28.8KiB (97% reduction).
Compressing and resizing https://avatars3.githubusercontent.com/u/1163358?v=4 could save 27.9KiB (97% reduction).
Compressing and resizing https://avatars2.githubusercontent.com/u/773158?v=4 could save 22.6KiB (97% reduction).
Compressing and resizing https://avatars2.githubusercontent.com/u/2547751?v=4 could save 22.4KiB (97% reduction).
Compressing and resizing https://avatars0.githubusercontent.com/u/1013337?v=4 could save 22KiB (97% reduction).
Compressing and resizing https://avatars1.githubusercontent.com/u/10523232?v=4 could save 16.6KiB (96% reduction).
Compressing and resizing https://avatars3.githubusercontent.com/u/15680836?v=4 could save 5.2KiB (93% reduction).

Improve popular repositories positioning

Currently we are determining popular repositories by their stargazers. That said, if two or more repositories has the same amount of stargazers then all of them will have the same position. For example:

Those positioning can be confusing, therefore, we would like to use more data points to determine repositories popularity. The new order should be determined by:

1. stargazers desc.
2. forks desc.
3. watchers desc.
4. name asc.

Things to do:

• Implement the new ordering logic (here).
• Change the positioning logic and assign each repo their unique position (here).

Create CLI script for scraper

Currently we have 3 NPM scripts for scraping purposes. However no script files exists. We would like to create a script files that support the three current actions for the scraper:

1. scrape – scrape everything.
2. scrape --only=users – scrape users only.
3. scrape --only=repos – scrape repos only.

Tasks:

• Create a script file at: src/server/scripts/scrape.js.
• Follow this guide to add the proper shebang directive and setup permissions only. Do not add a bin entry.
• The script file should support the options --only and only one of two values are accepted: users or repos. When that CLI option is specified, then only the specified set will be scraped.
• Replace the 3 current NPM scripts (scrape, scrape:users and scrape:repos) with one script: scrape which will execute our new cli script defined at: src/server/scripts/scrape.js.

Strange behavior with the pagination when you navigate between pages

Infinite scroller component do jump on scroll

We are using react-list. However, scrolling in any size cause the scroll to jump. See screencast:

---

We would like to find another alternative for infinite scroll. It can be another library, or another technique (pagination or load more button).

Add page title for each page components

We currently have a few page component that needs to set a page title.

Tasks:

• Install https://github.com/gaearon/react-document-title (yarn add react-document-title)
• Remove the title tag from src/client/index.html.
• Wrap output of src/client/components/repositories/popular/Popular.js with DocumentTitle and set title to: Popular Repositories – Dominican Open Source.
• Wrap output of src/client/components/repositories/trending/Trending.js with DocumentTitle and set title to: Trending Repositories – Dominican Open Source.
• Wrap output of src/client/components/repositories/new/New.js with DocumentTitle and set title to: New Repositories – Dominican Open Source.
• Wrap output of src/client/components/developers/popular/Popular.js with DocumentTitle and set title to: Popular Developers – Dominican Open Source.
• Wrap output of src/client/components/developers/recently-joined/RecentlyJoined.js with DocumentTitle and set title to: Recently Joined Developers – Dominican Open Source.
• Wrap output of src/client/components/developers/about/About.js with DocumentTitle and set title to: About and Statistics – Dominican Open Source.

About - Problemas Responsive

Se debe mejorar el responsive

Al ver en pantalla de Iphone 6, y tantos otros dispositiovos el contenido se descuadra

About - Texto pegado

Feature Request: Detectar entre caracteres especiales y no especiales en la busqueda

Por ejemplo, que las personas con el nombre josé en github salgan cuando se busca jose (sin tilde)

Avatar is too big for its presentation

Avatars are too big for them presentation. You might cropping them down for a itsy-bitsy size?

Prevent page to be zoomable

When viewing the website in a small device it can be zoomed by double tap or pinching out. We would to prevent that.

Thia should suffice: https://stackoverflow.com/a/4472910/439427

Tasks

• Modify src/client/index.html and add proper meta tag.

I getting a blank page, when I tried to do click on 'New' menu

TypeError: Cannot read property 'githubUrl' of undefined
    at u (app.js:1)
    at beginWork (vendor.js:11)
    at i (vendor.js:11)

Check the README file for typos

We would like for someone to read and double check the README.md file for typos and submit the changes.

The README.md file can be read edited directly following this link: https://github.com/developersdo/opensource/edit/develop/README.md

For some reason this autocomplete isn't work

Titulo del repositorio, debe ser clickeable

Create CLI script for generator

Currently we have a single NPM script for data generation purposes. However no script files exists. We would like to create a script files that replace the data generation process.

Tasks:

• Create a script file at: src/server/scripts/generate-data.js.
• Follow this guide to add the proper shebang directive and setup permissions only. Do not add a bin entry.
• The script file should support a --only option and only one of two values are accepted: users or repos. When that CLI option is specified, then only the specified set will be generated.
• Replace the current single NPM script (generate, scrape:users and scrape:repos) with one script: generate-data which will execute our new cli script defined at: src/server/scripts/generate-data.js.

Feature: add pagination to popular repos

As a user, I would like to view all popular repositories. I want to navigate the repos as pages.

• Add a footer with pagination (done #5).
• Navigate to desired page of repos (done #5).
• Show 9 pages at once (4 previous if any, 4 next if any).

Note: we don't want to sync the route or alter the URL / location.

Implement an automated deployment system

I do not know the current deployment process of this project but it seems not to be automated that is why I suggest using some tool such as travis-ci or deployhq which offer unlimited deployments to open sources projects.

Add a logo and favicons

El responsive se rompe en muchos elementos y el nombre de la persona, desaparece.

Blank page on firefox 54

Console error : TypeError: access to strict mode caller function is censored.

Leverage browser caching for the following cacheable resources:

Set this links up with caching expiration.

https://avatars0.githubusercontent.com/u/1013337?v=4 (5 minutes)
https://avatars1.githubusercontent.com/u/10523232?v=4 (5 minutes)
https://avatars2.githubusercontent.com/u/20671846?v=4 (5 minutes)
https://avatars2.githubusercontent.com/u/2547751?v=4 (5 minutes)
https://avatars2.githubusercontent.com/u/773158?v=4 (5 minutes)
https://avatars3.githubusercontent.com/u/1163358?v=4 (5 minutes)
https://avatars3.githubusercontent.com/u/15680836?v=4 (5 minutes)
https://avatars3.githubusercontent.com/u/439839?v=4 (5 minutes)
https://avatars3.githubusercontent.com/u/4788817?v=4 (5 minutes)
https://developersdo.github.io/opensource/app.js?8f533965e18cc0b0159b (10 minutes)
https://developersdo.github.io/opensource/data/repos.json (10 minutes)
https://developersdo.github.io/opensource/data/users.json (10 minutes)
https://developersdo.github.io/…pensource/vendor.js?8f533965e18cc0b0159b (10 minutes)
https://www.google-analytics.com/analytics.js (2 hours)

Create history for users

We would like to track some changes for users when the scrape runs.

Tasks:

• Create a migration scripts using yarn sequelize -- migration:create.
• Define the table users_history to be similar to users except for the field scrapedAt.
• During scraper execution detect any kind of change made. If a change was detected then create a record into users_history containing the now old version of the users, the createdAt field will be current date to keep the history time.

The "Popular developers" section looks bad when the window width is 1051px

Refactor page components

We would like to better organize page components.

Tasks

• Put all page components into src/client/pages.
• Rename all page component into their full name.

Add user and repo history

We would like to prepare the current code to support history of changes for users and repo.

Tasks:

• Create history for users (see issue).
• Create history for repos (see issue).

Important: this issue should be worked as separate tasks.

Fix text color of languages in RepositoryCard compnent

Create history for repos

We would like to track some changes for repos when the scrape runs.

Tasks:

• Create a migration script using yarn sequelize -- migration:create --name repo-changes.
• Define the table repo_changes to be similar to repos except for the field scrapedAt.
• During scraper execution detect any kind of change made. If a change was detected then create a record into repo_changes containing the now old version of the repo, the createdAt field will be current date to keep the history time.

Card number duplicated

If you scroll down too fast something happens with the position numbers and appear duplicates

Add the position number to the card in the "Popular developers" section

Same as #9

Show a sandwich menu on small device.

Why reason the header menu is getting hide? This shouldn't be hide on mobile. You can put this menu into a such as sandwich menu?

Los tags deben ser clickeables

Para la facilidad usabilidad y experiencia de los usuarios, es recomendable que al hacer clic en uno de los tags, realice el filtro.

User that change their login (username) cause undesired side effects

GitHub allow users to change their login (username). While doing this, GitHub retain repos with the old username, when accessed, GitHub does a 301 redirect.

However, here we need to identify users by their unique id and not their volatile login name.

I'm getting a Javascript error from the console

I'm getting a poor performace when I use PageSpeed Insights tool

The menu is not visible on tablets or cell phones

Desktop - Good

---

Tablet - Bad

---

Cell Phone - Bad

Tasks:

• On medium and small device display a sandwich style menu. Please take a look at: http://materializecss.com/mobile.html

Take care about these combination of colors. Never put a clear color on to another shining color. It's illegible.

Filter repositories by name or username

Sometimes we want to find a specific repository or all the repositories of a user but the only way at this moment is walking through all pages until we find it but this is time-consuming and is not an easy way, so I suggest adding a search by repository name or username.

Tasks

• Create a Filter component at src/client/components/filter/Filter.js
• The Filter component will have a text input (as shown in the image below).
• The Filter should follow the styles by http://materializecss.com
• The filter will be apply as soon as the user type.
• Add the Filter into src/client/components/repositories/popular/Popular.js and src/client/components/repositories/new/New.js where it will filter both lists.
• Repositories should be filtered by name or description fields. When the filter begins with @ then repositories should be filtered by user.name or user.login.
• Both Popular.js and New.js will have a note to indicate that a filter can be applied by owners using @ (as shown in the image below)

Track outbound links

We would like to track outbound links using react-ga.

Add the comma separator to the count

Handle repos changes such as name renaming

Currently, the scraper identify repos by their name user/repo, but if a repo name changes then we will be adding the same repo twice, and thrice, and so on...

• We need to identify repos by their GitHub ids.
• We need to store their GitHub ids.

Titulo de cada card, se rompe en móvil

Se rompe el titulo en movil, se pega mucho los tags, en enlace de github se corta, recomiendo que baje abajo.

(https://user-images.githubusercontent.com/1808624/32076138-e771ae60-ba6c-11e7-824e-c12acf764f14.jpg)

Add page description

We need to add a page description. <3 SEO friendly.

Tasks

• Add a <meta name="description" content=""> tag into src/client/index.html.
• Set the meta's content attribute to Initiative to gather all possible public data about projects related to the Dominican Republic in GitHub using the GraphQL API.