Research Page Feature Updates (Aug-2020) about epiclab.github.io HOT 18 OPEN

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.

from epiclab.github.io.

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.

from epiclab.github.io.

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

from epiclab.github.io.

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.

from epiclab.github.io.

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.

from epiclab.github.io.

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.

from epiclab.github.io.

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?

from epiclab.github.io.

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)?

from epiclab.github.io.

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.

from epiclab.github.io.

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?

from epiclab.github.io.

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.

from epiclab.github.io.

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.

from epiclab.github.io.

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

Desktop view:

Mobile view:

from epiclab.github.io.

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.

from epiclab.github.io.

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.

from epiclab.github.io.

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.

from epiclab.github.io.

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?

from epiclab.github.io.

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.

from epiclab.github.io.