wildan3105 / github-langs Goto Github PK

Current behavior:
Currently, github API only provide null value from an unknown language of repository. It's not fancy at all to display.

Expected behavior:
Change null to unknown and make special behavior on statement if null language has the highest value like : 'Wow, you are a mystery man!', 'Wow, you like the mystery language', etc.

For the statement code, please take a look into this : statement

Current behavior:
The bug happens when you click the link in the bar graph to a language that uses non url friendly characters such as # in the language c#. This makes the link to the repos page of the user incorrect and not showing any of the repos that actually use that language.

Expected behavior:
Without the bug the link to the list of repos would be correct and use the right url encoding.
For example https://github.com/username?tab=repositories&type=&language=C# would be https://github.com/eliassjogreen?tab=repositories&type=&language=C%23. To fix this simply turn the string for the language into a url friendly string.

Steps to reproduce:
To reproduce this you can simply go to a user with for example a c# project and click on the bar for c# and go the that page, as you can see then the url will be wrong and the page will say username doesn’t have any repositories that match..

Current behavior:
Currently, programming language(s) from user's repo only displayed as text, each with the amount of the repo(s). Output that passed from controllers are an object which consist of programming language and its amount, e.g :

{"javascript":30, "HTML":20, "go":10}

Expected behavior:
This feature will show vertical graph that dinamically display programming language based on repo. We can use library like d3.js or chart.js or even Google Chart. Any libraries welcome as long as the output follow the image below :

Current behavior:
Inconsistency display of word 'language stats' when toggling bar graph color

Expected behavior:
The word 'language stats' should show all the time and with the correct and suitable position.

Steps to reproduce:
Check for user, then toggling the bar graph color

Current behavior:
Getting error message when Toggle color of Chart

Expected behavior:
No error message

Steps to reproduce:
Toggle color of the chart

Fixed it in #71

Current behavior:
Results are shown like this :

Expected behavior:
It would be good to show the amount of unique language(s) accross repo(s) of github's account. I made a simple sketch of it :

I think it's more clean and informative. Or maybe we could add the icon of repo and language (?) Suggestions are welcome.

Current behavior:
Site looks great, but as always some UI improvements can be done.

Expected behavior:
Clean, functional UI.

Current behavior:
When homepage rendered, the footer position is good, like this :

But when search is done, the footer covered the chart horizontal axis title like this :

Expected behavior:
Footer would not cover the chart horizontal-axis title and always displayed below of that title.

Current behavior:
There is no distinction between personal account or organizational account when we browse for user's account.

Expected behavior:
It should be show the type of account on result, whether personal / organization

Steps to reproduce:
Browse the repos for specific account (not unknown)

Current behavior:
For the user that has no repo, it display chart only with layout (no value) like this :

Expected behavior:
Get rid of that chart layout.

Current behavior:
It's so messy. Look at the image below :

Expected behavior:
All elements displayed well. The search bar, fork me button, message, the chart of languages and footer. Well displayed with no conflicts. One last thing : just remove Language(s) that following by the details because it already displayed by the chart.js

Current behavior:
The current 404 page looks ugly. Really ugly!

Expected behavior:
If somebody takes the time to make it look better, that would be appreciated 😄

Current behavior:
So far it's quite good for a search-based website. The results shown in a graph, then could be saved in a jpeg file.

Expected behavior:
But the research is never done. Any improvements welcome ! Let's discuss here first to see what would be the next UI improvement for this site.

Current behavior:
Because of previouse PRs, the screen now seems not very good, especially near the forkme button. Take a look at this :

Expected behavior:
Vertical scrollbar is okay, but help me fix the issue with forkme button so it will be at top-right and there is no space with border.

Current behavior:

Expected behavior:
Only show single avatar and better handling on hover vertical bar of user that has more languages > 20, move the footer position back at the bottom-center and title page didn't work

Current behavior:
We don't know if the user we search is usual user or organization. Based on the github API, the categorization is divided into User and Organization. Sample data follows :

{
...
  "type": "User",
...
}

And if the user we search is organization, the value of type is Organization.

Expected behavior:
From the above statement, I'd like to add feature to display a badge for organization. The badge could be displayed next to the user's avatar. And when we hover to that badge, it will show an organization's name

Current behavior:
Some npm package is no longer maintained or stable.

Expected behavior:
Update npm package to the latest/stable version so it won't be vulnerable.

Steps to reproduce:
See package.json file.

Current behavior:
Because of many PRs merged but style not concerned, the buttons look like not fancy like this :

Expected behavior:
Make button toggle and save side by side, adding an icon for each button with standard bootstrap would be good :) Make sure the elements won't overlap (buttons and caption, e.g check with account like google and see what happen) Any helps will be much appreciated !

P.S : Please comment below if you would like to solve this issue so others don't unintentionally spend time on fixing something that may not end up getting merged. Thanks!

Current behavior:
Currnet toggle button is static, which means not animated when switching chart type (colorful / white).

Expected behavior:
It would be better to use animated toggle button, example using bootstrap: bootstrap toggle Please also note to pay attention to the size and shape of the animated toggle button so it does not oversize compared to the download button next to the animated toggle button.

Current behavior:

Saving the chart as an image is without a filename and an extension

Expected behavior:
A file with the extension .jpg

Steps to reproduce:

Search some user and save image

Fixed it in #71

Current behavior:
Footer : DISCLAIMER : THIS SITE IS A FAN MADE AND NOT AFFILIATED WITH GITHUB.

Expected behavior:
Include copyright & year and disclaimer

Steps to reproduce:
Check on the website.

Current behavior:
It is impossible to use all ES2017 features for this project at the moment. For example, it is impossible to use async/await combo (https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9) to deal with callback hell problem in controller.js.

Expected behavior:
As developer, I want to develop project in most efficient and bug-free way. Some of ES2017 features boost productivity significantly.

The easiest solution would be moving project to some already existing and well configured boilerplate for Node.JS Express + Babel, e.g. https://github.com/vmasto/express-babel. Other way is to require Node.JS >= 7.6, which has async/await, for this project (which is not perfect in my eyes, bcz right now I am able to run project in Node.JS 7.3 without problems).

Current behavior:
Saved chart is named by chart.jpg

Expected behavior:
It would be better to name the chart based on username

Steps to reproduce:
Browse for user, then save/download the chart

Current behavior:
This is typically my own-local-machine/network problem. I can't set up a correct proxy configuration in order to get axios works. This is my code to run axios behind proxy (still not working) :

const axios = require('axios');
const proxy = {
  host: 'host',
  port: 8080,
  auth: {
    username: 'wildansn',
    password: 485474857485
  }
}

axios.get('http://wildan.us', proxy)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

So I always got err result instead of res.

Expected behavior:
I would very appreciate someone help me out about this, or reference same/related issue from external link/thread/stack overflow. Thanks!

Current behavior:
Currently, the graph shown with a single color like this :

Expected behavior:
A toggle button positioned next to graph would be nice to switch the vertical bar color from white to colorful based on language. I still have no idea how to put color for each language because github does not provide API for language color. Maybe create a json file contains language-name and associated-color? Or use existing repo like github-color. Any suggestions are welcome :)

This is also related to pull #55 and #54

P.S : Please comment below if you would like to solve this issue so others don't unintentionally spend time on fixing something that may not end up getting merged. Thanks!

Current behavior:
The readme says that you should have a .env file with something like this

CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret

but in /lib/controllers.js the code says

const client_id = process.env.client_id;
const client_secret = process.env.client_secret;

Expected behavior:
Should be all caps or lower case in order to match

Current behavior:
Error codes spread in several file & format. No standard error is found.

Expected behavior:
Create a dedicated error codes type.

Steps to reproduce:
File to watch:

• lib/app.js in line 8, should check if process.env.ENV is set
• lib/controller.js in line 15, should read error types from dedicated file

Current behavior:
User need to know if the system is working. But right now, there is no sign to display that system is fetching data through API

Expected behavior:
Add loading button while fetching the API. Any images are welcome, but I prefer the simple one like this

Current behavior:
Related to this #43, also please change the position of badge of organization's account, because the current conditions is :

Expected behavior:
The expected result of badge position is :

And modify result become like this :

And tidy up the lib/public/screen.css because it's little bit messy. Any help would be much appreciated!

P.S : Please comment below if you would like to solve this issue so others don't unintentionally spend time on fixing something that may not end up getting merged. Thanks!

Current behavior:
Current style of the website is very standard. It's even too simple for this kind of website.

Expected behavior:
Any UI improvements are welcome ! You can add emoji (if it's good) i.e if the repo more than 100, you can beautify the footer, and other things.

Current behavior:
As you know, this app (so far) could be run only with the npm.

Expected behavior:
Since containerization is a trend now, an alternative to run the app within Docker is really good. So, feel free to configure this app to run within Docker and update the README.md based on that.

Current behavior:
Only a few supportive statements

Expected behavior:
Should be more to enrich copywritings

Steps to reproduce:
Browse for someone's repo

Current behavior:
Site is Github Language Checker

Expected behavior:
Show current account & type in site title. Example : Github Language Checker | Github - Organization

Steps to reproduce:
Check on the website, search for some account(s)

Current behavior:
There's no logo for this site Github Language Checker

Expected behavior:
It should be good and awesome if we have a nice and simple logo for this project.

Steps to reproduce:
This issue is only an initiative. Any suggestions are welcome. Let's discuss!

Current behavior:
Right now, the whole views (except some js files) handled by views/layouts/main.handlebars. It would be good to separate the header, footer, and body for the sake of maintainability.

Expected behavior:
Separate the views based on function to display. My thoughts are we could separated into header footer, and body. Also, I do not see the views/index.handlebars handle something (?). I just render it and use default layout which is views/layouts/main because I'm new to handlebars view engine, so any help would be very appreciated :)

Current behavior:
It is nearly impossible to test this application by using conventional tools, because it is 95% GUI, so there are no tests at all. There is such tool as https://github.com/Huddle/PhantomCSS that could be used for screenshot testing, which will help make this project stable.

Expected behavior:
It would be easy to check screenshots for anomalies (e.g. missing labels or wrong text), if screenshot testing process was included in npm run test.

Current behavior:
Hover over unknown bar throws error

Expected behavior:
Show stats for unknown languages

Steps to reproduce:

1. Visit https://githublangs.herokuapp.com/?username=masquel
2. hover over unknown chart bar
3. open console. There will be error.

Chart.bundle.min.js:10 Uncaught TypeError: Cannot read property 'r' of null 
at new r (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js:10:3924)

Current behavior:
All emojis and response statements are found in lib/controller.js. This made the controlloer little bit dirty.

Expected behavior:
Create dedicated file to hold all emojis and statements.

Current behavior:
When displaying result from organization, emoticons & badge are overposition each other.

Expected behavior:
Dynamic position : when displaying result from personal account & organization account so the badge (if any, for organization only) and emoticons are not overposition each other.

Steps to reproduce:
Compare result from personal & organization account.

Current behavior:
Currently, hovering over bars in the chart shows a tooltip with the name of the corresponding language and the number of its repos.

Suggested behavior:
Can we make the bars clickable? Whenever a bar is clicked it opens up the user's profile filtering only the repos for that specific language.

For instance, if I click on the JavaScript bar in my profile I would be redirected to my profile filtering only the JavaScript repos I have.

The URL structure should be something like this:

`https://github.com/${username}?tab=repositories&type=&language=${language}`

Current behavior:
Some language names are not showing under their respective bars in the chart.
However, when I hover on the bars, the tooltip show the language name normally.

Expected behavior:
They should be displayed below the bars as well.

Current behavior:
Some elements were overlapped if accessed from a smartphone, picture below :

Expected behavior:
Fork me button should not overlap with the header, and footer displayed full

Current behavior:
There are many js file in this project. The ones that follow the ES6 standards and eslint are in the lib directory (app.js and controller.js), but some files in lib/public/js are not following those rules.

Expected behavior:
Convert the code style in lib/public/js directory to use ES6 standards and test it with eslint style which defined in .eslintrc.json without reduce any functionality of those codes (make the code run faster if you could!)

Current behavior:
This is the latest view if we search for username's repo :

Expected behavior:
Like a normally switch button, it should show the condition like ON/OFF. So it would be better to change the style of the button and when it pressed, it will change the text (default is COLORFUL) so either the text is COLORFUL/WHITE. The reference style is attached below :

Bootstrap useful link about toggle button : bootstrap toggle button

P.S : Please comment below if you would like to solve this issue so others don't unintentionally spend time on fixing something that may not end up getting merged. Thanks!

Current behavior:
The style of the website is inside a style tag in the head

Expected behavior:
It would be better to have it in another file

Current behavior:
Based on the API call : https://api.github.com/users/${username}/repos?client_id=${client_id}&client_secret=${client_secret}&per_page=100, it only display 100 repos on a single page. User that has more than 100 repo will not be able to get the actual result. To do so, it should add parameter page=2 and so on (page=3..) until the result of the nth page is less than 100 to the API call.

Expected behavior:
Display the actual amount of user's repo, regarding how many repos he/she may has.

Current behavior:
Unknown language is actually sum up of unknown language & fork repository. But now we only display it as unknown repository

Expected behavior:
It will be better if we could display it as Unknown (forked repository) so other will know that the repository may contain forked repository (not only unknown programming language).

Steps to reproduce:
Search for user with unknown repository language and check if he/she had forked repository.

Current behavior:
The current CI test script is passing at all times, even if it should not.

Expected behavior:
The CI test should fail if there are code style violations.

The current test command is trying to auto-fix any errors. So it will not report anything in most cases.

eslint --fix lib/*.js index.js

Current behavior:
There is no external action after user knew their language statistics.

Expected behavior:
User could share their language statistics result through facebook and twitter.

Steps to reproduce:
Make a new js file, placed in lib/public/js and add share and tweet button in views/partials/body.

Current behavior:
All endpoint urls are defined and called inside lib/controller.js.

Expected behavior:
It should be stored in a config file.