
Show HN: I created a Github profile widget (learning to code) - thewriter
https://github.com/surbhioberoi/github-widget
======
lepunk
Nice job! One suggestion from a person who developed widgets used on lots of
sites: You are appending general styles (like styling the a tag, ".container"
which is a popular class name) to the containing document's body. This is bad
practice, since it will alter all the links on the containing page. Consider
using namespaced classes (like .github-widget-link) or build your own iframe
and apply the styling there

------
NKCSS
Small tip to get some more performance; never repeat your selectors.

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

    
    
       var stats = $('.stats') 
    

and use the variable. Especially when using class selectors.

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>');
      }
    

Consider:

    
    
      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>');
      }

~~~
egeozcan
A humble suggestion for more readability (warning: opinionated):

    
    
        const reposInfoHTML = repos
          .map(repo =>
            `<div class="container">
    
               <div class="item names">
                 <div>
                   <a href="${repo.repoUrl}">${repo.name}</a>
                 </div>
               </div>
    
               <div class="item language">
                 <div>${repo.language || "Unknown"}</div>
               </div>
    
               <div class="item stars">
                 <div>&#9733;${repo.stars}</div>
               </div>
    
             </div>`);
        $(".repositories").append(reposInfoHTML.join(''));

~~~
NKCSS
Much more readable, but I'd advise against using const, because the javascript
won't work on IE < 11.

------
maaaats
That's surprisingly readable for someone having coded less than a year.
Granted, it's only about a 100 lines so not that much complexity, but still
separated into smaller, readable functions.

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?

~~~
thewriter
Thanks, it still has some formatting issues and can be better. I try my best.

------
mbrock
Cool!

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.

~~~
thewriter
Thanks, good to learn about this, will make changes to the code to reflect
this.

------
wassago
Next task (upping the skill level): Remove jQuery as a dependancy.

~~~
vtempest
Bad programming advice. jQuery uses best practices for many utility functions.
Developers should not have to reinvent the wheel or code every basic call from
scratch in every project. Don't act like using pre-built common frameworks is
somehow a bad idea for ideal programming. They are reliable and faster, its
one less issue to worry of what could be wrong.

~~~
flukus
Jquery's biggest feature was working around browser incompatibilities. This is
much less vital now than it used to be.

If you aren't getting a lot of use out of the features it provides then you
are better off without such a heavyweight dependency.

------
awalGarg
Nice, good job! :) Would you like to share since how long you have been
learning to code and how's your experience been?

~~~
thewriter
Hi, it's been 10 months since I began coding and I absolutely love it. :)

~~~
wyclif
It would be cool if you could share how you went about learning and what
resources you used; thanks!

~~~
thewriter
Yes, I do write about how I learned and created something. Here's the link to
my medium profile.
[https://medium.com/@thesurbhioberoi](https://medium.com/@thesurbhioberoi)

~~~
wyclif
Oh, I see now you already covered some of this here:
[http://surbhioberoi.com/how-building-html5-canvas-games-
help...](http://surbhioberoi.com/how-building-html5-canvas-games-helped-me-
learn-programming/)

------
LukaszB
Well done!

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.

------
Ichaelus
Small note: "Last active 0 days ago" would be nice to be written as "today" :)

------
pacomerh
Good stuff.

Tip: Rather than repeating .append several times, concatenate your result in a
variable, then at the end append the complete result. That way you just make
one append call (performance). Referring to:
[https://github.com/surbhioberoi/github-
widget/blob/master/sr...](https://github.com/surbhioberoi/github-
widget/blob/master/src/widget.js#L53-L57)

------
mundanevoice
Looks cool. Couple of pointers:

\- 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/](http://underscorejs.org/)

------
shubhamjain
Nice work. :) This reminds me of an ID card generator I made for Orkut profile
using PHP and its GD library. It was a 200 Lines of hack job when I didn't
even understand the concept of breaking code into functions. Sadly, I used to
feel so embarrassed by my old code that I thought it was a good idea to erase
it; wish I hadn't. :(

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

------
gbraad
Nice!

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?

------
hndl
Nice project! Kudos for sticking to the learning bit -- being motivated
without external forces is harder than most people think.

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.

------
spdustin
Brava! Very clean and thoughtful architecture, especially impressive given
your short history with code, and that humbles me, an "old guy" compared to
most of the readers here. Well done.

------
kxxoling
Lepture have created a similar one before: [https://github.com/lepture/github-
cards](https://github.com/lepture/github-cards)

------
ing33k
looks good !

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

~~~
tdvorak
GitHub API and JSONP support is a nice way, how to play with those data in
browsers.

I wanted to have a GitHub timeline on my personal website, instead of the
Twitter timeline. After some hacking, I came out with this:
[https://github.com/todvora/gh-events-widget](https://github.com/todvora/gh-
events-widget)

------
parr0t
As someone who is also learning to code and has been for about 18 months,
great job :)

------
janvdberg
Cool! Can someone create the same for Hacker News profiles (to embed on my
site)? :)

------
rplnt
Why is this at the top of HN now?

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%, ...

~~~
dang
There's nothing wrong with posting a learning project as a Show HN. There's a
long tradition of doing so, and in this case the submission title made it
super clear.

I'm afraid it's your comment that's out of line. I don't think you intended it
this way (and we appreciate your concern for the quality of HN), but in this
context it comes across as squashing someone for their work, which combined
with the automatic upvotes that negative comments sadly get, gives a rude and
unpleasant impression of this community. Who would want to be part of a place
that disses beginners?

~~~
Chris2048
I interpreted this post as being addressed to HN upvoters, not the poster.

wrt "dissing beginners", the post explicitly says: "Not to take anything away
from the effort that went into creating this".

The reason posts like this are upvoted is to protect discourse from the neg-
police.

~~~
dang
Implying that upvotes weren't legitimate _is_ taking something away from the
post, so saying one isn't doing that just adds incongruence.

~~~
rplnt
I was actually implying that the submission was not upvoted solely because of
its content. Because, let's be frank, the content is not worth to be the top
submission on HN when compared to what one can usually find there. Even the
"learning" angle does not cut it.

And it's not getting anything away from the post, rather from the praise it
got. The post itself is perfectly fine (and as such I didn't flag it).

------
throwawaykjkjkj
To the author: good work! Stop reading here please.

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 :)

~~~
Chris2048
Can you provide a bit more context to what you mean?

~~~
throwawaykjkjkj
\- A friend of mine once made an experience: He sent his CV applying for a not
gender biased kind of job. No answer. Then he sent an equivalent CV but
pretending to be a fairly attractive female (with a cool photo) applying for
the same job. Few days later 'she' was asked for an interview.

\- I have another friend that is responsible for HR on a small business (not
rocket science kind of job). While bachelor he used to select possible hires
by photo. His boss was aware of it and wouldn't oppose, treating it as a kind
of 'perk' for my friend..

TLDR: Humans seem to be more helpful to potential attractive mates.

~~~
dang
This is inflammatory and off-topic. Another word for that is trolling. Please
don't post like this here.

------
machbio
Its sad that Github alone has become the indicator of your coding prowess,
what if I have moved to another repository ?

~~~
LukeB_UK
Then create a widget for that.

------
wildster
Your blog has lovely CSS.

------
rajeshwadhwani
looks good!

------
bechampion
Good Stuff!

~~~
thewriter
Thank you

