Show HN: I created a Github profile widget (learning to code) (github.com)

I remember creating something similar ( not as polished as this ) at a Yahoo! Hack Day, when I was new to coding.

I think it took several years before I started doing that. Maybe the new age of having everything shared on GitHub makes one focus earlier on maintainability and readability for others?

If you're not 100% sure that the GitHub data fields (bio, name, etc) are stripped of markup, please ensure that your widget isn't vulnerable to cross-site scripting (XSS).

There are GitHub users whose bios, names, etc contain HTML fragments. The way that your code inserts those fields is likely to be vulnerable. It's better to explicitly treat the fields as text, e.g. by using jQuery's text() method.

It would be very handy to know what is a 'must have list' when implementing those kind of widgets, does anyone came across anything like this? I mean what I shall be aware in terms of XSS, security in overall and best practises.

Suggestion: you're getting a lot of good feedback here. Might be good to create issues on the project. You'll likely get some takers too.

To HN community: good to see that people here are humans. It's amazing how a cool pic can trigger so many comments and upvotes :)

- Use a tool like EsLint to lint your code. It will make it more readable and cleaner than it is right now. Maybe integrate your editor with Eslint and it will guide you to write cleaner code.

- You can use underscore templating to inject variables in the template and it will be much more cleaner and maintainable. http://underscorejs.org/

note: I haven't filed it as bug yet, as I am unsure about the reason yet. But when I user data-username="gbraad" I do not see the correct Top repositories. At the top should have been 'gauth' (with 582 stars). When using the widget I see `blog` (with 7 stars). Might be because pinned repositories has been customized?

If you need $(".stats") four times, don't repeat that four times, but do:

   var stats = $('.stats') 

End result looks good; keep on hacking :)

N.B.

Same is true for indexers (and allows you to refactor the code easier later on);

Instead of:

  for (var i = 0; i < repos.length; i++) {
    var language = repos[i].language ? repos[i].language : "Unknown";
    $(".repositories").append('<div class="container"><div class="item names"><div><a href="' + repos[i].repoUrl + '">' + repos[i].name + '</a></div></div><div class="item language"><div>' + language + '</div></div><div class="item stars"><div>&#9733;' + repos[i].stars + '</div></div></div>');
  }

  for (var i = 0; i < repos.length; i++) {
    var repo = repos[i];
    var language = repo.language ? repo.language : "Unknown";
    $(".repositories").append('<div class="container"><div class="item names"><div><a href="' + repo.repoUrl + '">' + repo.name + '</a></div></div><div class="item language"><div>' + language + '</div></div><div class="item stars"><div>&#9733;' + repo.stars + '</div></div></div>');
  }

Lesson learned : Don't delete your old creative memories even if they are ridiculous.

Do you find this idea to be that revolutionary? (I guess not as someone linked other similar project (and you downvoted him))

Do you find this project in particular to be that interesting? (Doubt it with the scope of this project)

Not to take anything away from the effort that went into creating this, but judging from the history of (Show HN) posts that reach the front page, this is HIGHLY unusual.

Also of interest is the number of emoticons /:)/ in here - 25% of comments contain one, compared to other Show HN posts with 8.3%, 6% or general posts with 1.5%, 0.5%, 0%, ...

Shhh.. it's a girl.. men are excited!