7 ms·
Show HN: I created a Github profile widget (learning to code)
- gbraad 10y agoNice! 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?
- awalGarg 10y agoNice, good job! :) Would you like to share since how long you have been learning to code and how's your experience been?
- thewriter 10y agoHi, it's been 10 months since I began coding and I absolutely love it. :)
- wyclif 10y agoIt would be cool if you could share how you went about learning and what resources you used; thanks!
- thewriter 10y agoYes, 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 10y agoOh, I see now you already covered some of this here: http://surbhioberoi.com/how-building-html5-canvas-games-helped-me-learn-programming/ http://surbhioberoi.com/how-building-html5-canvas-games-help...
- deleted 10y ago[deleted]
- bechampion 10y agoGood Stuff!
- thewriter 10y agoThank you
- ing33k 10y agolooks good ! I remember creating something similar ( not as polished as this ) at a Yahoo! Hack Day, when I was new to coding.
- tdvorak 10y agoGitHub 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
- maaaats 10y agoThat'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 10y agoThanks, it still has some formatting issues and can be better. I try my best.
- rajeshwadhwani 10y agolooks good!
- deleted 10y ago[deleted]
- kxxoling 10y agoLepture have created a similar one before: https://github.com/lepture/github-cards https://github.com/lepture/github-cards
- spdustin 10y agoBrava! 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.
- mbrock 10y agoCool! 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 10y agoThanks, good to learn about this, will make changes to the code to reflect this.
- LukaszB 10y agoWell 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.
- wassago 10y agoNext task (upping the skill level): Remove jQuery as a dependancy.
- thewriter 10y agoYes, I want to do that. Thanks
- akagetsu01 10y agowhat is the alternative in this case?
- laacz 10y agoThere is no need for an alternative. You could go all vanilla with a polyfill for fetch.
- vtempest 10y agoBad 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 10y agoJquery'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.
- bestest 10y agoNext task — don't pollute and corrupt the global CSS, namespace your widget code.
- hndl 10y agoNice 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.
- parr0t 10y agoAs someone who is also learning to code and has been for about 18 months, great job :)
- throwawaykjkjkj 10y agoTo 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 10y agoCan you provide a bit more context to what you mean?
- throwawaykjkjkj 10y ago- 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 10y agoThis is inflammatory and off-topic. Another word for that is trolling. Please don't post like this here.
- lepunk 10y agoNice 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
- deleted 10y ago[deleted]
- mundanevoice 10y agoLooks 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/
- janvdberg 10y agoCool! Can someone create the same for Hacker News profiles (to embed on my site)? :)
- Ichaelus 10y agoSmall note: "Last active 0 days ago" would be nice to be written as "today" :)
- NKCSS 10y agoSmall 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>★' + 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>★' + repo.stars + '</div></div></div>'); }
- egeozcan 10y agoA 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>★${repo.stars}</div> </div> </div>`); $(".repositories").append(reposInfoHTML.join(''));
- NKCSS 10y agoMuch more readable, but I'd advise against using const, because the javascript won't work on IE < 11.
- pacomerh 10y agoYou can avoid having an append inside of a loop. Gather the results, and do it once after the loop
- shubhamjain 10y agoNice 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.
- rplnt 10y agoWhy 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%, ...
- swampthinker 10y agoYeah what the heck? Something seems off.
- deleted 10y ago[deleted]
- atmosx 10y agoI don't know, there are still people around here thinking that a web/mobile application can change the world ...
- frogfuzion 10y agoWhy is Trump the Republican nominee? To answer these questions, we must only look into the mirror.
- 29382393221 10y agoThe upvoting of this submission seems rigged indeed.
- dang 10y agoI looked at the data and did not see that. Assuming that voting is "rigged" on a submission just because you don't approve of it is nearly always a non sequitur. Also, please don't create many obscure throwaway accounts on HN. This forum is a community. Anonymity is fine, but users should have some consistent identity that other users can relate to. Otherwise we may as well have no usernames and no community, and that would be an entirely different forum.
- vmateixeira 10y agoAlso 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!
- maaaats 10y agoI think it's more the (learning to code) that brings out the good in people. While I wouldn't want HN to be full of Show HNs like this, it's cool to once in a while take a step back and remember where oneself began.
- wyclif 10y agoI wonder why it can't be both (a woman dev + learning how to program) instead of either/or. I suspect it's a combination of both. I don't think there's anything wrong with subs like this.
- sctb 10y agoThis is inflammatory and insulting. We ban accounts that post like this, so please don't do it again. We detached this subthread from https://news.ycombinator.com/item?id=12164429 https://news.ycombinator.com/item?id=12164429 and marked it off-topic.
- vmateixeira 10y agoI totally disagree. Inflammatory and insulting? Could you please explain? Did I hurt or offend someone? I see no one complaining here but you. If you're smart enough to open a web browser you should expect to find, recognize and accept a joke.. because you know .. you'll find lots of this in the web. And I don't really feel like I was wrong at all: If you check the thread carefully, I wasn't the only one pointing this out. I just opted to make a joke about it really. If you think oppression works well for you, then please feel free, by any means available to you, to ban my account.
- 10y ago
- crashdown 10y agoNice job! Have you looked into web components at all? Turning this into a web component would be a great idea. As someone else said, I'd also look at removing jQuery as a next step and use pure JavaScript http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/ is handy for that!
- wildster 10y agoYour blog has lovely CSS.
- deleted 10y ago[deleted]
- machbio 10y agoIts sad that Github alone has become the indicator of your coding prowess, what if I have moved to another repository ?
- LukeB_UK 10y agoThen create a widget for that.
- pacomerh 10y agoGood 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/src/widget.js#L53-L57 https://github.com/surbhioberoi/github-widget/blob/master/sr...