epiclab / epiclab.github.io Goto Github PK

Per the instructions on the popper.js package:

This package has been deprecated

Author message:
You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1

Therefore, @popperjs/core needs to replace popper.js in the package.json file. Any bugs or issues that appear due to the newer API should also be resolved prior to accepting the update PR.

Although Bootstrap is built to be responsive, additional components and features must also be designed to be mobile-friendly and responsive. To address the responsive restrictions created by small viewports and screens on mobile browsers, we need to address the following:

1. The banner image (background-image: url('media/sarma_group.jpg')) on the Home page currently scales towards the middle when the horizontal window width is reduced, but does not scale in the vertical direction. To make this banner handle the screen sizes inherent to mobile browsers, we need to scale in both directions when the height of the window is less than 600px and the width is less than 800px.

2. The EPICLab logo (https://github.com/EPICLab.png) is automatically generated based on the logo associated with the EPICLab GitHub organization. But it does not currently scale in either horizontal or vertical directions. Similar to the banner image, when the window height is less than 600px and/or the width is less than 800px the logo should begin scaling down in size. However, we need to make sure that the aspect ratio of the logo remains locked to the same 1:1 ratio.

3. The title links for items on the Publication page are meant to transition to having a link icon (via the CSS class="fas fa-link") and being clickable hyperlinks on hover. However, on mobile browsers neither the icon effect or hyperlinks are available.

The following items need to be updated:

1. Fix URL and title of Sarma Research Lab (https://sarmaresearch.github.io/) to EPICLab (https://epiclab.github.io/) in header of People and Research pages.
2. Create a more compact layout for each individual on the People page, including a spot for a profile picture; think "responsive web design" for this process.
3. Pull each users' GitHub avatar picture into the new profile picture spot (see this article for how to get the avatar picture: StackOverflow: Get GitHub avatar from email or name).
4. Create a Former Students section on People page, and add additional fields to these profiles so that we can list the degree they received (PhD/MS/BS), as well as the job title and company they are now located at (which could be an actual company, or a graduate school for some former students).
5. Update Copyright from 2019 to 2020 on all pages containing the footer.

The default web design standard for links is that they be shown as blue text, which becomes a darker blue and underlined on hover (to suggest that mouse actions such as clicking are possible on that text). The Nielsen Norman Group (of Nielsen's 10 Usability Heuristics fame) has a good article, "Guidelines for Visualizing Links", that discusses design best practices for links.

There are currently several different link visualization designs being used throughout the EPICLab.github.io site, including:

• Button links that change text color when the mouse is hovered.
  

• External links that adhere to the default blue text that changes color and underlined on hover.

• Document links that do not indicate clickability until you hover, at which point a link icon appears.

We need to develop a unified standard for how we visually communicate links throughout the website. This issue is an expansion of some discussion found in #26.

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

The following items need to be updated:

1. Update the Alumni section of the People page to include the current role/employer, and year of graduation, for each of the former students (similar to information included on https://web.engr.oregonstate.edu/~sarmaa/students/). For example:

   Shane McKee
   MS, Oregon State University (2016)
   Software Engineer, Intel
   

2. Update the Current Graduate Students section of the People page to include current status:

• Caius Brindescu has graduated and should be moved to the Alumni section, and his current role should be listed as Technical Staff, Etleap.
• Marjan Adeli has graduated and should be moved to the Alumni section, but no current role should be shown.
• Manideepa Saginatham has graduated and should be moved to the Alumni section, but no current role should be shown.
• Jillian Emard should be moved to the Alumni section, and her current status should be verified with Anita.
• Umme Ayda Mannan should be added and her status should be listed as PhD Candidate, Oregon State University. Her GitHub username is unknown, so please verify both her GitHub username and which URL should be linked to her listing on the website (i.e. all current students have links to their own websites, their GitHub profile page, or a LinkedIn profile).
• Turgay Caglar should be added and his current role should be listed as MS Student, Oregon State University. His GitHub username is @cglrtrgy, but he does not have a GitHub profile picture which can be pulled in (so the EPICLab logo should be used instead).

3. Update the Current Undergraduate Students section of the People page to include current status:

• Evie May should be moved to the Alumni section, and her current status should be verified with Anita.
• Catherine Stevens should be added to the Current Undergraduate Students section, and her status should be listed as Undergraduate Researcher, Oregon State University. Her profile picture should be pulled from her GitHub profile, however, she is not currently added as a member of the EPICLab GitHub organization and her username is unknown.

3. Add all of the previous lab members, as listed on https://web.engr.oregonstate.edu/~sarmaa/students/, to the Alumni section. Order them according to their graduation year (i.e. 2020 graduates at the top and the rest in descending order).

Profile pictures on the People page were introduced in #6. However, flexbox appears to not be correctly configured for preserving the aspect ratio of the images.

For example, the first image is the EPICLab.github.io/people page open full-screen on my MacOS laptop and the profile images are stretching in the y-axis (height):

The second image is the same page, but with the Developer Console open. Because of the extra pane being open, the available space for flexbox to scale content is less and the images appear to have a proper aspect ratio:

There is a good article on StackOverflow, "Maintain image aspect ratio when changing height", which describes how to resolve this type of issue using CSS and flexbox.

The following items need to be added:

1. Style all links (<a> tag) to display the Font Awesome link icon for both :hover and :focus states. Afterwards, remove the static link icons that currently display next to each paper on the Publications page. (Related article: CSS Basics: Styling Links Like a Boss)
2. Update footer to be similar height as the navbar on all pages (i.e. height: 56 px;), except on the Home page.
3. Update footer positioning to remain at the bottom of the browser window when content is not enough, and to push downwards when content is more than can be displayed in the browser window; this design is typically called a "sticky footer". (Related article: Stick Footer, Five Ways).
4. Update profile picture and name to be links to individual websites for each lab member on the People page. For visual consistency between people that do have individual websites and those that don't, links should forgo the typical underlined blue text styling and instead only provide the :hover and :focus effects described above.
5. Update People page to include larger profile pictures (i.e. height: 262 px; width: 262 px;), reduced text size and positioned below profile picture (i.e. font-size: 1rem; font-weight: 400; line-height: 1.5;), and set a photo gallery style layout similar to the design of the CMU STRUDEL people page.
6. Update People page to include additional sections for Faculty, Current Graduate Students, Current Undergraduate Students, and rename the Former Students section into Alumni.

The following items need to be updated:

1. For each graduate alumni (MS or PhD) shown in the Alumni section of the People page, add a hyperlink called Thesis below the other affiliation and degree information. These hyperlinks should link to the thesis document associated with the degree listed next to their name.

   For students that graduated at Oregon State University, the ScholarsArchive@OSU has all thesis documents available and can be searched using the author name (e.g. searching for Marjan Adeli). The link should use the Citeable URL in order to have a permanent link to the document (e.g. the link for Marjan Adeli should be: https://ir.library.oregonstate.edu/concern/graduate_thesis_or_dissertations/5x21tn40d).

   For students that graduated at University of Nebraska, Lincoln there are two different websites depending on the degree. For MS thesis, use: https://digitalcommons.unl.edu/opentheses/. For PhD dissertations, use: https://digitalcommons.unl.edu/dissertations/. For example, the link for Sandeep Kuttal should be: https://digitalcommons.unl.edu/dissertations/AAI3632730.

2. Update the layout of the Home page to include a split content pane, in which the left side contains the explanation of the EPIC acronym from EPICLab, and the right contains a news feed for our lab. See the following design wireframe for reference:
   

3. For the news feed on the Home page, use Vertical Carousal News Feed code snippets to implement a scrolling timeline of news updates. The base for the EPICLab website is based on a minimal Bootstrap layout, so including additional Bootstrap code should be easier than implementing an entirely new component. The news feed should be consistent with the following design and include the scrolling functionality presented in the Vertical Carousal News Feed preview:
   

The Publications page is expected to host links to the official publication, but non-institution affiliated visitors are often barred from accessing these publications due to publishers' paywall-restrictions. However, preprint versions of the publications can be hosted under most academic publishers' preprint policies.

Our current publication listings appear in the following format:

In order to accommodate preprint links (as well as providing additional reference information and awards indicators) we will switch to the following format for all publications (therefore, this format supersedes the format described in #16):

{{Venue Acronym}}  {{Publication Title}}
                   {{Author(s)}}
                   {{Venue Name}} ({{Venue Acronym}}), {{Publisher}}, {{Year}}.
                   {{Awards}}
                   {{DOI}} · {{PDF}} · {{Slides}} · {{Video}} · {{Poster}} · {{Tool}} · {{Data}}

As an example, the "A Tale from the Trenches: Cognitive Biases and Software Development" publication would appear as:

ICSE 2020    A Tale from the Trenches: Cognitive Biases and Software Development
         Souti Chattopadhyay, Nicholas Nelson, Audrey Au, Natalia Morales, Christopher Sanchez,
         Rahul Pandita, and Anita Sarma
         International Conference on Software Engineering (ICSE), ACM, 2020.
         🏆 ACM SIGSOFT Distinguished Paper Award
         DOI · PDF · Video · Data

Any field not available for a given publication should not be displayed (except for DOI, which should always be included and converted to a link when the DOI becomes available for a publication). Remember that authors names should conform to Chicago Citation Style, in the format of {{First Name}} {{Last Name}}, and that author links should be to the People page for current EPICLab members.

The following items need to be added:

1. The format of publications on the Publications page should be updated to use the following format:

   {{Title}}
   {{Authors}}
   {{Conference Proceeding/Journal}}, {{Issue/Edition}}, {{Pages}}, {{Year}}.

2. The publications currently listed on the Publications page are in a modified version of Vancouver Citation Style. However, the use of initials for author first names is problematic: (1) authors with common last names are more difficult to disambiguate, and (2) searches based on author name are less likely to match when only last name and first initial are used. Therefore, we should switch to using the Chicago Citation Style, and modify it to use {{First Name}} {{Last Name}} format for all author names.

   The full names of authors can be found by opening the respective links of publications shown on https://web.engr.oregonstate.edu/~sarmaa/publications/.

3. For all current EPICLab members listed as authors on the Publications page, a hyperlink to the People page should be added to the author name.

4. For all non-EPICLab authors (either collaborators or alumni) listed on the Publications page, a hyperlink to their respective professional website should be added to the author name. No professional website may exist for some authors, in which case no hyperlink is needed.

   The following collaborators website can be added for the current publications shown on the Publications page:

   • Chris Sanchez - http://people.oregonstate.edu/~sancchri/
   • Rahul Pandita - http://rahulpandita.me/
   • Danny Dig - http://dig.cs.illinois.edu/

5. Add all missing publications from https://web.engr.oregonstate.edu/~sarmaa/publications/ that were published after 2009. In particular, we do not want to include Anita's publications that were published while she was a PhD student/Postdoc (since those are not strictly academic contributions from EPICLab). In particular, any overlapping publications shown on the website of the Software Design and Collaboration Laboratory (SDCL) @ University of California, Irvine (link) should not be included.

Currently, a few publications on the Publications page have sub-pages which are linked from the publication title. These sub-pages containing brief information about the publication (e.g. title, authors, abstract) along with links to artifacts (e.g. coding schemas, interview scripts, anonymized datasets, etc.). They are currently maintained in separate repositories on the EPICLab GitHub organization. The site contents for these pages needs to be merged into the main EPICLab.github.io repository, and the separate repositories retired.

The following sites require migration:

Since these URLs serve as permanent DOI links, and are listed within the associated publications themselves, we need to redirect these URLs to point to the new locations once migrated.

Originally posted by @nelsonni in #28 (comment)