Research Page Feature Updates (Aug-2020)

[nelsonni]

The Research page contains cards for each of the research areas actively being researched by EPICLab members. The following updates need to be made to them:

1. Update the titles of the cards to reflect the actual research areas:
   • Privacy & Security
   • Inclusivity
   • OSS Communities
   • Developer Cognition
   • ??? (need to be discussed/confirmed in group meeting)
2. Create linked pages for each research area, which contain the following:
   • Description of research area (e.g. an example from CMU STRUDEL)
   • Recent publications for that research area (with links to the papers)
   • Students involved in that area of research (with links to their People page profiles)
3. Update the stock photos at the top of each card to be relevant to each particular research area.
4. The Last updated 3 mins ago at the bottom of each card needs to be configured to dynamically update when any new content or changes are made to the page for that particular research area. This will definitely require code written in JavaScript in order to dynamically pull and display this type of information (possibly grabbing the timestamp from GitHub for each research area page?).

[audreyau]

For Task 2, where do I find the description, publications, and students? Or should I create a description and try to look through the publications and students for correlations with the research areas?

[nelsonni]

For both Task 1 & 2 there is missing information that will need to be filled in during an EPICLab group meeting. Since the next one is scheduled for tomorrow, I will add this to the agenda and update this issue with more information after that. In the meantime, you can start researching how to accomplish Task 4.

[audreyau]

for Task 4, is it necessary that we do a timestamp (e.g. Last updated 3 hours ago)? Can we just update the date when the file is changed (e.g. Last updated 8/11/20)?

[nelsonni]

That is actually not a timestamp, but a duration between the timestamp of the last change and the current time. This appears complicated, but there are several date and time libraries that make this an easy problem to solve. For example, the Luxon library provides the ability to do math with DateTime objects. Look at the diff method to see that in JavaScript you could write something like:

var timestamp = DateTime.fromISO('*last_update_timestamp*');
var now = DateTime.local();
var delta = timestamp.diff(now, ['months', 'days', 'hours']).toObject();

console.log(delta); //=> { months: 16, days: 19, hours: 0.75 }

This project uses Node.js as the platform, so follow the Luxon - Node installation instructions for pulling it into the project in order to use it.

[audreyau]

I'm a little lost on the Luxon - Node installation. Do I enter those commands into my terminal, a html file, or a javascript file?

[nelsonni]

The installation commands for Luxon - Node are npm commands that need to be executed in a terminal from within the EPICLab.github.io project directory. If you don't have npm installed as a command on your system, you will want to follow the Downloading and installing Node.js and npm instructions.

[audreyau]

I've been trying to do the Javascript duration code, but now when I run my code

const{ DateTime } = require("luxon"); var timestamp = DateTime.fromISO('2020-05-25T09:45'); timestamp.diffNow(['months', 'days']).toObject()

on Node.js through the terminal, nothing happens. There is no output or error message.

[audreyau]

Is having something like this good for the previous high school students section?

Desktop view:

Mobile view:

[nelsonni]

That design for High School Interns looks good.

I don't believe you can run JavaScript code within the terminal, since it requires an environment to be running. If you want to see how JavaScript works in a basic page, it must be embedded into a .html page (specifically within a <script>//javascript_code</script> tag). This time feature requires dynamic code, so it's a bit of a different process than writing static content onto the website. As an example, if you look at Research (L123-L125) you'll see:

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

These lines are pulling in JavaScript code, which are stored in those jquery.min.js and bootstrap.bundle.min.js files. If you mimic a basic version of those files, you can probably get started that way.

[audreyau]

One more thing for today!
Is this format okay for the individual research pages?

[nelsonni]

Looks good to me. But hopefully the Research Members names are hyperlinks to their profiles on the People page, and the Recent Publications titles are hyperlinks to their listings on the Publications page.

[audreyau]

Are these photos okay for the new research cards? Do you know when the descriptions will be ready?

Also, I've been trying to create the javascript duration code through html, but I keep getting an empty output. I've looked up tutorials, but Luxon seems to be uncommon. There was only one YouTube tutorial, and it didn't help very much.

[nelsonni]

Those images are very generic, and therefore don't do a good job of conveying the type of research being conducted within each research area. We can ask the graduate student leads for each area to decide on the most appropriate image. However, in order to make sure that the images all fit well together, we need to provide each lead a set of possible images that would fit with the design. Although we discussed the descriptions in the group meeting on Wednesday, we will have to follow up with each lead to make sure those descriptions get written in a timely manner.

Let me take a look at the duration problem and see if I can quickly add code to your changes branch. I'll also reach out to each of the student leads to get their descriptions and image selections started. Might take a few days to get responses, since everyone is gearing up for paper submission deadlines. I'll add updates to this issue when I have them.

[audreyau]

Perfect! Thank you so much. For now, I'll leave the last updated as a date.

I'm adding publications to the individual research pages. Is this format okay?

Should we keep the pop-up link icon? The problem is that sometimes there isn't enough room on that line for the icon, so there will be a line break.

[nelsonni]

The format of recent publications looks good. However, we want to have some way of indicating that those publications are clickable links. Your question brings up a larger design discussion, which I'm breaking off from this issue and adding to #27.

[nelsonni]

First, I need to acknowledge that my recommendation to look at the vendor/jquery/jquery.min.js and vendor/bootstrap/js/bootstrap.bundle.min.js wasn't as helpful as I had hoped. Both of those files are minified, which makes them exceedingly unreadable and not meant for humans.

If you pull the code from commit 8898798 that was added to your changes branch, you will find that I added luxon.min.js (which is also minified) so that we can use the Luxon library. The way to import Luxon and the custom timestamp.js file (which includes a timeSince() function) would be to add the following lines within the <header> tag of any .html files:

<script src="vendor/luxon/luxon.min.js"></script>
<script type="text/javascript" src="js/timestamp.js"></script>

An instance of using of that timeSince() function can be found at the bottom of the research.html page, which says:

<script type="text/javascript">
  document.getElementById("usable-privacy-&-security").innerText = timeSince('2020-05-25T09:45');
  document.getElementById("inclusivity-in-software-engineering").innerText = timeSince('2020-08-14T09:45');
  document.getElementById("human-factors-in-development-environments").innerText = timeSince('2020-08-12T09:45');
</script>

I didn't dive into figuring out how to read the actual update timestamps from each of those individual research area pages, but this commit signifies a starting point for you to explore.

Note: I had a problem being able to see the JavaScript dynamic elements when loading the local research.html file into Firefox, which gave me an Error: CORS request not HTTP message. I had to read through the MDN: CORSRequestNotHttp article to find out that I needed to go into about:config and temporarily disable the privacy.file_unique_origin preference.

[eviemayy]

graduate student leads for each area to decide on the most appropriate image

was this done over the summer? Or should I bring this up at Wednesday's meeting?

[nelsonni]

graduate student leads for each area to decide on the most appropriate image

was this done over the summer? Or should I bring this up at Wednesday's meeting?

This was not completed, so bringing it up during Wednesday's meeting is a good idea.