Contributors List on the About Dialog #2934

TomMalbran · 2013-02-22T11:52:21Z

This pull request adds the functionality mentioned in https://trello.com/c/LmtuTQT9 adding every contributor to Brackets as github profile pictures in a grid with a link to their corresponding github profile and a title with their name. The data is also cached for 24 hours to make it load faster.

WebsiteDeveloper · 2013-02-24T10:44:12Z

seems to work good but i have a suggestion maybe you could add a loading indicator if loading is currently in progress because it looks a bit strange when there is much empty space

TomMalbran · 2013-02-24T21:07:08Z

That empty space is created by the images. The dialog shows nothing until it receive the data from Github and then it populates the dialog with all the profile images and starts loading them. It could be good to add a loading indicator, but it might be as easy or useful just for the images load.

adrocknaphobia · 2013-02-25T23:10:51Z

@TomMalbran This looks great. Thanks for taking this on. I have a few requests before we can merge:

Replace "Brackets Contributors:" with "Made with ♥ and JavaScript by:"
The loading delays are an issue. How are your jQuery / animation skills? 😄
- The dialog should contain at least 3 rows (36 entries) on load (before making the call to github). We can use an empty div with a darkened background, or an image placeholder. This should remove the jarring "pop" when the scollbar comes into view.
- Once we get the results back from github, loop over the urls and download the images. On load, swap out the empty div/placeholder with the image (preferably with a css transition on the image opacity).
- Beyond 36, start adding new images 1 by 1 as they load.
Set the cache to 2 weeks (rather than 24 hours).

TomMalbran · 2013-02-26T01:09:15Z

@adrocknaphobia Your welcome and thanks for the review.

Done.
I addressed this a bit different:
- Instead of a place holder for each image, I made the div have a min-height of 3 rows with a light grey background. I then added all the images to the div at the same time but with an on load event to make the opacity transition. This is mainly because all the information was already parsed in an array and is needed like this to cache the information and restore it easily.
- I could go with your suggestion, but I think this way has the same effect and with less added code.
- Right now I see the images load really fast, but I could also add a loading text and remove it once the images are loaded (all or just the first 36).
Done.

peterflynn · 2013-02-26T01:49:06Z

src/help/HelpCommandHandlers.js

+                data = [];
+
+                // Save only the required data for the template
+                $.each(contributorsInfo.data, function (index, element) {


Should use forEach() instead of $.each()

adrocknaphobia · 2013-02-26T01:57:18Z

@TomMalbran Your solutions looks great.Criteria of the story is met, so once this get reviewed we can merge it!

Thanks!

TomMalbran · 2013-02-26T03:10:50Z

Replaced $.each with forEach as Peter mentioned.

TuckerWhitehouse · 2013-02-27T18:36:55Z

src/help/HelpCommandHandlers.js

+        }
+
+        if (fetchData) {
+            $.getJSON(brackets.config.contributors_url + "?callback=?", function (contributorsInfo) {


Because GitHub uses the Access-Control-Allow-Origin: *, would it be better to use a regular get as opposed to a getJSON which injects an unnecessary script element into the page?

$.get(brackets.config.contributors_url, function (contributorsInfo) {

I don't see any difference in how getJSON would be any different to get, since actually getJSON is used with a dataType of JSONP. But you might know better and I could even simply make it a $.ajax with a dataType: "jsonp" setting if is a better solution.

It's actually not $.get vs $.getJSON but rather the inclusion of ?callback=?. This triggers the dataType: "jsonp" which wraps the data in a callback on the server, and then includes a script element in the page, which is a) unnecessary in this case, and b) is significantly slower.

I put together a quick test at http://jsperf.com/get-vs-getjson-vs-ajax which shows the performance hit that dataType: "jsonp" takes.

njx · 2013-02-27T19:47:26Z

Hmmm, I'm not seeing the images at all on my Mac--I see the gray background rectangle, and then the outlines of the individual images fade in, but the actual images never load. If I look in the network tab in the inspector, it doesn't even seem to be trying to fetch the images, which seems odd. Any ideas?

Regarding the gray background, I think it would look better if the images were just against the white background of the dialog--it would look weird to have gray in the spaces between them. If we need something to show that it's loading, you could just use the same small spinner we use in Find in Files--maybe just put it after the "Made with <3 and JavaScript" line, and then hide it once the images have loaded. (You could also still have the background div there at the beginning to prop open the space--just make it transparent.)

njx · 2013-02-27T19:50:33Z

Another thought--is there a reason we have to cache the data? It seems fine to just query the API each time you go into the About dialog--it's not like people will be doing it that often :)--or at least shorten the time between checks to an hour or so (two weeks seems excessive). Also, as a possibly silly point, I could imagine that a new contributor would be excited to see their name show up in the dialog after their first merge, and with the current logic they'd have to wait two weeks before it would show up.

njx · 2013-02-27T19:51:43Z

I'll try to get to a more detailed code review later today--in the meantime, it would be good if you could try to figure out why the images aren't loading (or give me a pointer as to what I should look at to debug it).

…list

TomMalbran · 2013-02-27T22:15:52Z

Sorry, I broke the code when changing from $.each to forEach, since I didnt noticed that the arguments of the functions are inverted and it should now be element, index or just element. I did tested, but probably I was using an old cached code and not the new one.
Sure, the background color came from Adam's suggestion, but since my implementation was different, I could remove the background color. I'll try to get the the loading spinner, I can now see a long enough time to make it useful. Any idea on what to do if the request fails? (usually when a user is working without internet).
Since everything is cached, I thought it would be a good idea, and it would avoid more ajax requests. But you are right, I think the main reason to check the about menu constantly is to check on which code brackets is running, but fro that you could just close the window before the information loads. And actually I started with 24 hours for that reason, so contributors could see their names fast as soon as possible, but leaving a margin of caching. So between 1 hour and nothing, maybe just no caching is better.

I'll work on that and might be able to push this changes before your next review. (Including the suggested $.get instead of $.getJSON). Thanks for the review!

…Cache removed.

njx · 2013-02-28T03:02:17Z

src/help/HelpCommandHandlers.js

+     * @private
+     * Gets a data structure that has the information for all the contributors of Brackets.
+     * The information is fetched from brackets.config.contributors_url using the github API.
+     * If more than 2 weeks have passed since the last fetch, or if cached data can't be found, 


This part of the comment is now out of date.

njx · 2013-02-28T03:31:31Z

src/help/HelpCommandHandlers.js

        Dialogs.showModalDialogUsingTemplate(Mustache.render(AboutDialogTemplate, templateVars));
+
+        // Get all the project contributors and add them to the dialog
+        _getContributorsInformation().done(function (contributorsInfo) {


I'm not sure why this is, but there seems to be a long pause before the About dialog appears now (compared to master). I don't know why that should be, because the fetch of the contributor info is asynchronous, so it shouldn't actually block the dialog from appearing. Are you seeing that at all? If so, any ideas what could be happening?

Long pause seems to be gone.

njx · 2013-02-28T03:35:16Z

Initial review complete. My only real concern is about the apparent delay before the dialog appears--let me know if you're not seeing that.

I'm going to be out at an offsite tomorrow, but I'll let the team know someone else should take a look after you've made revisions so we can get it in this sprint if possible (the sprint ends on Friday). Thanks again for working on this!

njx · 2013-02-28T03:38:59Z

Ah, I wonder if that delay could be due to the issue that @TuckerWhitehouse mentioned. If the JSONP stuff is causing a <script> tag to be inserted, that could be happening synchronously within the $.getJSON() call--perhaps that causes some sort of delay. If github.com does indeed have a cross-domain policy that makes this unnecessary, then it should be fine to switch to a direct fetch (by removing the ?callback=?).

TomMalbran · 2013-02-28T04:01:00Z

@njx Thanks for the review. I just pushed the fixes for all your comments, and yes @TuckerWhitehouse was right, it does feel faster without the JSONP stuff.

The only thing that I think is missing is maybe an error response when something went wrong. Just removing the spinner and filling the contributors space with an error message.

njx · 2013-03-01T21:19:32Z

src/help/HelpCommandHandlers.js

+    function _getContributorsInformation() {
+        var result = new $.Deferred();
+
+        $.getJSON(brackets.config.contributors_url)


This could be simplified now to just return $.getJSON(brackets.config.contributors_url), I think (in fact, you probably don't really need this function anymore).

njx · 2013-03-01T21:24:12Z

Re-reviewed. I agree we should have an error response, but I think we could go ahead and merge this without that--I can file a bug to get that in next sprint as well as clean up the other code review notice. But if you happen to be online now :), feel free to go ahead and push fixes. I'll wait a little bit before merging to see if you push any fixes.

(Also, I'm not sure what's up with the Travis failure--it looks spurious to me. If you do another push, we'll see if it fails again.)

njx · 2013-03-01T21:53:11Z

I'm going to go ahead and merge--will file a bug for the remaining issues. Thanks again for working on this.

Contributors List on the About Dialog

njx · 2013-03-01T21:56:59Z

Followup bug filed as #3012

TomMalbran added 2 commits February 22, 2013 08:39

Adding the brackets contributor list to the about dialog

9e204b9

Adding the template

ff36310

ghost assigned njx Feb 22, 2013

Use render instead of to_html

e36617e

Addressing review requests

c3eaea7

Fixing comments

0600c7f

peterflynn reviewed Feb 26, 2013
View reviewed changes

Replacing $.each with forEach

d82c112

Removed the unneeded Strings in the contributors template

0365cb0

TuckerWhitehouse reviewed Feb 27, 2013
View reviewed changes

Merge remote-tracking branch 'upstream/master' into tom/contributors-…

0fca970

…list

TomMalbran added 2 commits February 27, 2013 20:20

forEach fixed. Grey background-color removed. Loading spinner added. …

5949dd4

…Cache removed.

I need an indentation preference per project/folder

0f5c15c

njx reviewed Feb 28, 2013
View reviewed changes

Review comments fixed

fa22529

Removed unused dependency

ea93581

njx reviewed Mar 1, 2013
View reviewed changes

njx pushed a commit that referenced this pull request Mar 1, 2013

Merge pull request #2934 from TomMalbran/tom/contributors-list

d4d81e3

Contributors List on the About Dialog

njx merged commit d4d81e3 into adobe:master Mar 1, 2013

TuckerWhitehouse mentioned this pull request Mar 1, 2013

Fix About Dialog Contributors (Issue 3012 from Pull 2934) #3014

Merged

TomMalbran deleted the tom/contributors-list branch March 1, 2013 23:06

core-ai-bot mentioned this pull request Aug 29, 2021

[CLOSED] Contributors List on the About Dialog brackets-archive/bracketsIssues#2771

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contributors List on the About Dialog #2934

Contributors List on the About Dialog #2934

TomMalbran commented Feb 22, 2013

WebsiteDeveloper commented Feb 24, 2013

TomMalbran commented Feb 24, 2013

adrocknaphobia commented Feb 25, 2013

TomMalbran commented Feb 26, 2013

peterflynn Feb 26, 2013

adrocknaphobia commented Feb 26, 2013

TomMalbran commented Feb 26, 2013

TuckerWhitehouse Feb 27, 2013

TomMalbran Feb 27, 2013

TuckerWhitehouse Feb 28, 2013

njx commented Feb 27, 2013

njx commented Feb 27, 2013

njx commented Feb 27, 2013

TomMalbran commented Feb 27, 2013

njx Feb 28, 2013

njx Feb 28, 2013

njx Mar 1, 2013

njx commented Feb 28, 2013

njx commented Feb 28, 2013

TomMalbran commented Feb 28, 2013

njx Mar 1, 2013

njx commented Mar 1, 2013

njx commented Mar 1, 2013

njx commented Mar 1, 2013

Contributors List on the About Dialog #2934

Contributors List on the About Dialog #2934

Conversation

TomMalbran commented Feb 22, 2013

WebsiteDeveloper commented Feb 24, 2013

TomMalbran commented Feb 24, 2013

adrocknaphobia commented Feb 25, 2013

TomMalbran commented Feb 26, 2013

Choose a reason for hiding this comment

adrocknaphobia commented Feb 26, 2013

TomMalbran commented Feb 26, 2013

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

njx commented Feb 27, 2013

njx commented Feb 27, 2013

njx commented Feb 27, 2013

TomMalbran commented Feb 27, 2013

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

njx commented Feb 28, 2013

njx commented Feb 28, 2013

TomMalbran commented Feb 28, 2013

Choose a reason for hiding this comment

njx commented Mar 1, 2013

njx commented Mar 1, 2013

njx commented Mar 1, 2013