Telescope 1.8 Release

Release 1.8 for telescope is quite of a special one, because GitHub was down in our scheduled release time. According to our experienced professor, this is the first time he has ever seen GitHub down like this. I assume I'm lucky to see this in my first year of open-source.

Therefore, we did the PR review through video call. It was surprisingly efficient. We fixed our PRs and tried to get them passed to 1.8 release.

---

The issue I want to talk about is add the avatar component. The plan for avatar is to integrate with GitHub so that we can get users' profile picture. Before that, we still need a temporary avatar to replace the blank circle like the below picture.

Pedro suggested the avatar component from evergreen. But Dave wanted to stick with what we have, which is material-UI, there is also avatar component from material-UI.

However, material-Ui avatar component only provide a circle, it doesn't generate initials with the given name value, we'll need to generate it by ourselves. Therefore, my task is to wrap the material-UI avatar component with customize functionalities.

We want to make our avatar component to accept author name or image value. Image value is preferred, but if there is no image value, we'll take name value instead, and generate the initials for the avatar.

I want to talk about how to generate initials. I checked evergreen's avatar component code, it actually generates initials by the first 2 words in the name. It might work for most cases since most people have 1 word for first name and 1 word for last name (e.g. Piper Chapman). However, there are still some people having more than 2 words in there name, it could be a long first name with multiple words, or middle name.

The other problem is, should we use space or hyphen to separate the words in a name? This is a comment I got in my PR. Personally, I'd use space instead of hyphen. Hyphen is more like linking words to one part of name.

My initials generator code looks like this,

const initials = name.split(' ')
                     .map((splitName, i, arr) =>
                     i === 0 || i + 1 === arr.length ? 
                     splitName[0].toUpperCase() : null)
                     .join('');

This generator will separate words in names by space, and ignore the words other than first name and last name. splitName represents the current value, i represents the index of it, and arr represent the whole array of splitted names. i === 0 takes care of the first word of the name, and i + 1 === arr.length takes care of the last word of the name. For example, my friend Abu from OSD600 has 5 words in his name (Abu Zayed Kazi Masudan Nabi). His initials will be AN, instead of AZ. And for me, my name is Yuan-Hsi Lee, there is a hyphen in my first name to link 2 syllables, therefore, my initials will be YL instead of YH.

Above are how the name initials avatar look like.

The other PR which is related with this one is to centre the initials text. Somehow, this font makes the text slightly toward the top. Thanks to Anton, Ilya and Minh's help, the puzzle is solved and the solution is made.

Comments

[Anwar]

So cool, thanks for giving us an insight of the review process!

I was wondering while searching for Telescope open source projects, which one are you talking about? Do you have any public URL?

[Yuan-Hsi Lee]

Thanks for the comment! This GitHub repo is the Telescope project that I've been talking about :) Feel free to file a bug or join our discussion or pick up an issue to work on! We also have a Slack channel if you're interested