STA Presentation

I haven’t been doing a very good job at updating my blog lately. I spent a few weeks during late-March/early-April working on my STA Presentation. I was selected to present with a few other STAs this year and picked the Immigration History website as my topic since I put so much time into it this semester. I feel like it was such a great personal experience for me to experience this whole process; planning a slideshow about my project and practicing in front of so many people in order to polish my delivery. I’ll leave a few pictures of my slides below.

Unfortunately, due to personal circumstances, I couldn’t attend the final STA presentation in person, I ended up going to the video STA set and recording myself. Not to be a show off, but I feel like I looked cooler than anyone else when they showed me on the screen.

IH – Client Meeting and Next Steps

In preparation for the meeting with Dr. Hsu on Wednesday, I made the Glossary page look really nice. It looks just like Jac’s design now.

The meeting went pretty good, Dr. Hsu seems to really like the work we’ve done for her. She was pleasantly surprised when I explained how the Glossary works, by auto-generating the in-line buttons. She originally had the impression that she was going to have to manually create every entry, which would’ve been a lot of work. I also taught her how to enter new words into the Glossary and how to use the synonym functionality that we built in; this way the Glossary will capture alternate versions of a term, like “alien” and “aliens”.

One great piece of feedback that she had was that the page looked a little too crowded. We found a paragraph that actually had the word ‘citizenship’ 4 different times in-line. I decided to keep it at a maximum of 1 in-line link per term per text node, which meant all I had to do was modify my regex a little. Hopefully It’ll be enough to make it look way better.

The main thing left to do is the front page, which still looks pretty much like it did last year. Dr. Hsu gave us a few requests on what pictures and text to use for the ‘Teach’ section. For the ‘Learn’ section she had an idea that I thought was pretty interesting, to have a ‘Trending topics’ section where students can easily access the most relevant lesson plans. In order to make this happen, and make it easy for our clients to change the trending lessons over time, I decided to add a boolean attribute to the Lesson plans on WordPress. This way, all Dr. Hsu will have to do is click it on or off in order to change the Lessons that are featured in the front page. It was interesting getting more hands-on with our “database” and learning a bit more about Advanced Custom Fields. Now all I have to do is create a cool display for the trending lessons.

IH – Glossary Page

This week I spent some time getting the full Glossary page to work in the Immigration History site. I will show a picture-by-picture story about how I did it.

The whole thing started with a blank Glossary page and a lot of backend work. Stacy helped me use RESTful api to get all the info from the WordPress page and turn it into a JS object called glossary_page.

I could loop through these in order to print all the terms and definitions we have, but a real glossary needs to be in alphabetical order. Javascript’s native sorting allowed me to get them in the right order.

After this I ran into another problem. Since some of these words have parent terms, we want these to appear right under their parent. I had to modify my algorithm so that I only print the words that are not themselves children. After this, for every word that does have children, I would print them below their parent.

The last little bit to the Glossary page was creating labels for every letter. This is mostly for design purposes. I achieved this by comparing the initial letter of our words to the next one, printing a label when a different letter showed up.

As you can see, this works pretty good. When new words show up, they will now appear in the Glossary, as well as new labels for different letters.

As for next steps, I will now work on linking the pop-up definitions to their corresponding Glossary entry. I also have a meeting with the client during my next shift. I will show her how to insert new words and how this changes the site dynamically.

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.

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.

Immigration History Website

I am still doing WordPress websites, for most of this semester I’ve been focusing most of my time in a specific site: Immigration History. It’s a website designed to help people learn and teach about the history of immigrants and immigration policies in the United States. It has info on all events and developments over the country’s history. It then has lesson plans that group the info of several related events. Throughout these last months the site has undergone a few major transformations all created by Stacy, our designers and myself. These were the original designs:

 

Later, a design for a Lesson Plan page was added. I worked on making it using a tab design like the one that I did for RBTL, where one tab would open a section and so on. However, the page was redesigned in a way that included all the content at the same time.

This is what the new design looks like.

One of the challenges with this design were getting the spacing to look just right on the page, it shouldn’t look too crowded. I spent a long time playing around with the margin and padding of every element.

Another challenge was getting the left sidebar to work right, all elements are supposed to be centered and the names of the sections you were currently at need to be bold. This meant I needed to use selectors pre-defined by WordPress on my CSS.

This left sidebar then became the primary navigation for the page, I overwrote the default behavior of the “Lesson Plans” button so that instead it displayed the sub-menu and let you choose a plan to visit. This way we got rid of the original Lesson Plans landing page from the original designs.

The timeline was, and is, the biggest challenge. We’ve been wrestling on how to display the events and dates. Eventually we got rid of the hover effect on them because it added no real functionality. We also decided to get rid of the big year markers, which displayed every 25 years and instead replaced them with the year of the current event. If more than one event lands in the same year then we display a line that “joins them up”.

We also decided to add space in between events to reflect the passage of time. This way 2 events that are 100 years apart will have more white space in between than 2 that are just a couple of years apart. I also added an elegant down arrow marker if there’s too much space in between, just to let the user know that there’s more events below.

We then completely changed the colors of the page to make it look less boring. This is what it looks like now:

I still need to work on the timeline a bit on the timeline but the page is about done. I’m excited about the next challenge that Stacy might have for me now.