19
\$\begingroup\$

Updates:


If you are just here to get the code for the widget, you can skip down to the bottom of this post.


Hello! Over the past week, I have been working on a little project of mine to improve the leaderboard snippet that is widely used across PPCG. The original snippet was developed by Martin Ender, a long-time PPCG user who just left the site some months ago. Unfortunately, that also means that the snippet is not very well maintained anymore, and that the implementation has now changed across the site.

I wanted to create a new/improved snippet to build on Martin's previous creation. There are a few issues with Martin's snippet:

  • Due to a CSS issue, sometimes leaderboard values overlap and become hard to read.

  • The current leaderboard is not very attractive when it comes to styling. It remains with a plain, Times New Roman font which is not very inviting to users.

  • Probably most importantly, it seems that many of the leaderboard snippets on somewhat popular questions have ultimately broken due to a rate limit on the Stack Exchange API. That's unfortunate because it means future readers cannot read the leaderboard until the limited period is over.

So there were a few issues with that snippet, unfortunately.


A new and improved widget

Enter the PPCG Leaderboard Widget. This is a new Stack Snippet designed to replace the somewhat broken previous leaderboard snippet. Here are the features:

  • A simple, modern design using the Segoe UI font for increased readability and attractiveness.

  • CSS with media queries to account for any browser width, so that text does not overlap.

  • Multiple links for each answer including the author, a permalink to the answer, and a link to the programming language used (if provided by the user).

  • A multiple-regex parser to cover more title cases, as supposed to the limitations of one large regex.

  • A Stack App was created for this utility so that the API rate limit is now 2,000 instead of 300. This will allow for many more people to see the leaderboard daily.

  • Optimized scripting for faster loading in the UI.


Answer title parsing

The widget can parse many common formats of answer titles. The following are just some of the examples:

Language, number bytes
Language, number
Language - number bytes
Language (number)
Language (foobar compiler), number bytes
Language, <struct-through numbers> + <some number> = number bytes

You can also linkify any of the language names - those are parsed and included as links in the leaderboard. One major invalid case would be:

Language number bytes

This is because the parser in its current state does not know where the language name ends, due to the fact that language names can have numbers in them.


Implementation details and credits

In an effort to keep every widget up-to-date, I am providing the widget via an iframe. This means that no matter when you included the widget in your post, the widget will always be up-to-date and including the latest features. I tested the iframe'd widget versus an in-house widget (all of the code in one snippet as supposed to via a frame), and no performance difference was noticed (both widgets loaded at the same speed).

I'd like to also credit Martin Ender in this post. His snippet was the complete inspiration for this project, and his method for recursively fetching the answers from each page of answers was implemented in the new snippet.


Contributing

You can view the source code for the project here. If you want to make any suggestions, go ahead and leave a comment or answer here and I'll be happy to work with you to get your suggestion implemented.


The widget

As promised, here is the widget:

<iframe src="https://xmikee1.github.io/ppcg-leaderboard/?id={{QUESTION ID}}" width="100%" height="100%" style="border: none;">Oops, your browser is too old to view this content! Please upgrade to a newer version of your browser that supports HTML5.</iframe><style>html,body{margin:0;padding:0;height:100%;overflow:hidden}</style>

Replace {{QUESTION ID}} with the ID of the question you'd like to set up a leaderboard for. The program is licensed under the MIT license - please make sure you are informed on that before modifying the program.

I hope you will find this widget useful. Feel free to leave a comment or an answer, and thanks for reading!

\$\endgroup\$
11
\$\begingroup\$

First of all, we appreciate the effort. I have some concerns, though:

I'm not sure that having the snippet hosted externally and using an iframe is a good idea. The reason is that having the code be a copy/paste snippet allows it to work without adding a dependency on an external site that may or may not continue to be maintained.

A possible mitigation or solution to this is that someone besides you should have access to update the source code of your snippet. The moderators of this site, for example.

This doesn't remove the dependency on repl.it, but it does remove the dependency on your remaining active.

\$\endgroup\$
  • \$\begingroup\$ I'm definitely going to be moving to GitHub soon, and I'll make the repo a team effort (and include moderators on the project if they so widh). \$\endgroup\$ – connectyourcharger Apr 26 at 19:25
  • 1
    \$\begingroup\$ @connectyourcharger The repl.it dependency can be easily moved to Github Pages, since everything in client-side. btw, <pre> is a block element, you should use <code> instead for inline code. \$\endgroup\$ – RedClover Apr 27 at 11:57
7
\$\begingroup\$

Previous issues fixed!

Some other thoughts though:

  • Perhaps split the two leaderboards into two tabs for ease of access? Scrolling all the way to the second leaderboard is rather annoying.
  • Winners by language should be sorted by language name rather than byte count
  • When the question is not tagged perhaps "Score" would be a better descriptor for the final column instead of "Byte Count"
  • A position column (like 1st, 2nd, 3rd etc.) would be good.
\$\endgroup\$
  • \$\begingroup\$ Very interesting with that first one. It could be an issue with one of the titles (like it not being formatted correctly). I'm going to add some console.log calls to make it easier to debug. Will report back shortly... \$\endgroup\$ – connectyourcharger Apr 26 at 10:32
  • \$\begingroup\$ Aha! The contender appears to be this question, as it is not a standard question title format. I just added a simple try/catch block so that the answer is not included in the table. Simple fix, thanks for noticing :) \$\endgroup\$ – connectyourcharger Apr 26 at 10:36
  • \$\begingroup\$ As for the Hello World question, we'll have to see about that. It may just be a bug in the recursive fetching. \$\endgroup\$ – connectyourcharger Apr 26 at 10:47
  • 1
    \$\begingroup\$ I found the issue with the Hello World question, I'll implement a fix later. Thanks for pointing it out! \$\endgroup\$ – connectyourcharger Apr 26 at 10:59
  • \$\begingroup\$ Fixed! It was a simple bug with recursion. See this. \$\endgroup\$ – connectyourcharger Apr 26 at 22:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .