STA Work Blog

This week I took a little break from Immigration History to work on some small fixes to department sites on Cascade. This whole thing started when a few people in charge emailed Suloni because they were having trouble editing or fixing their sites. It took me 1 shift to quickly fix all their problems but this led to a discussion with Suloni about our Cascade documentation. It took a big effort from other STAs and myself to produce a document with instruction on how to do almost everything on Cascade, and then put all that info into the LAITS website. This guide has not gained as much traction among the department admins as we originally hoped. In an effort to improve it, I volunteered to look over all the pages that we already have online and find any possible mistakes.

One of the most common issues we get is “I’m retiring, how do I give my replacement access to Cascade?”. We already have instructions that help you do that, but I notices that the link to change your password was broken. I spent some of my last shift making instructions to do that and adding them to the site and fixing the link.

I’ll spend a portion of my time for the next weeks checking the remainder of the guide for mistakes.

project: Summer Online Courses Postcard
Client /Prof:
completion status: Started Feb 5, 2019
staff guidance: Suloni, Myra
STA team members: n/a
description/plans: create a mailer to inform about summer online courses
To be completed: Feb 8, 2019

Past designs:

New design options:

project: Mellon Scholar Photoshop Flyer
Client /Prof: Mia Carter
completion status: Started
staff guidance: Suloni, Tate
STA team members: Chloe
description/plans:
To be completed: 

https://docs.google.com/document/d/1zVTbTAjzfuu7HF5FjEP-G83k1K7FvSRpiMO_qTIQjcA/edit

Immigration History Glossary

Since I came back this semester I’ve been focusing most of my time on Immigration History. More specifically, I’ve been putting some work into the Glossary that the client asked for us to make. This has been a very interesting project so far and I’ll quickly take you through all the steps it took for me to make it.

First of all, I had to find a way to identify our glossary words on any given page of the site. Originally I thought that JS methods such as innerHTML and regex functionality would make it very simple but I quickly found out otherwise. Apparently if you try to select and replace words that way all your HTML will flatten when you replace, this means any links or buttons will turn into just text. I found a more complicated approach to identify these words using Nodes. Using a recursive function I can traverse the nodes in a page one by one, calling it again on elements and replacing on pure text nodes. This took me a couple of shifts to code and debug, but when my red links finally appeared on the page I was so happy.

After that I made some HTML to insert next to the link, which would be the pop-up definition for a word. The looks were pretty rough since I didn’t have a mock-up but they fulfilled their purpose. Whenever the user clicks on a link, the display attribute on the divs changes and therefore the definition appears.

This approach was good but several things could be improved. Ideally, only one definition will be on the page at once. Also, they should never overlap. I fixed this by using focus instead of clicks to display the pop-ups. Finally, the looks could be better. Jac took some time to mock-up a better design, which I implemented.

I also notices that the positioning of the pop-ups was not working very well. For links too close to the right or left edge of the page, the pop-up would be cut off. Also, for links inside the timeline portion of the page, the pop-up would be covered by other elements.

At this point, I had to change my approach. Instead of inserting the pop-up HTML when I find the corresponding word, I needed to create it dynamically when the link was clicked. This way I can append it to the body and then absolute position it by doing some calculations so that it will always be visible.

I think these look really good, they work on small screens and on mobile.

Some next steps for this project: All this time I’ve been focusing on the pop-ups and neglecting to make the actual Glossary page, which will include all the words in alphabetical order. Ideally, the big blue titles on each pop-up will link to that big glossary and scroll down to that specific word.

Today I was able to display the search bar, it is not displaying tags yet.

You can filter by category.

And by contained text in the title or the transcript of the podcast.

Mainly been working on vlabs! Not much has changed since last week, but I have made quite of a bit of progress.

Additionally, Stacy gave me feedback on my site, so I’ll be editing it again before I send it back.

I’ve also trained Clarissa in Canvasser, and plan on doing the same for Olivia and Sanika soon.