Web Development at TTI

I took on a web developer role at the Texas A&M Transportation Institute (TTI) during the summer of 2019. My main responsibilities in the role were to develop interactive tools on the websites of two research projects concerning roadside vegetation. TTI works on research very closely related to civil engineering, and the projects I was responsible for were no different.

About TTI

TTI is a transportation research organisation located at the Texas A&M RELLIS campus. TTI is home to many research projects led by the staff developing solutions to transportation challenges.

With expertise in areas such as engineering, planning, economics, policy, public engagement, landscape architecture, environmental sciences, computer science and the social sciences, TTI researchers serve as objective transportation experts. They provide a resource to local, state and national agencies and groups, helping them solve transportation challenges and make informed decisions.


The Goal

I aim to get a feel of the working environment in the field of product and technology development through this work experience.

TTI works on research very closely related to civil engineering, and the projects I was responsible for were no different. The main goals for the duration of my work was to take over and finish the existing NCHRP 14-40 project and to start implementing NCHRP 14-41, a new project.

NCHRP 14-40

I took over the project that a fellow member of the Aggie Coding Club worked on before graduating. The is part of a research paper and hosts a road mix calculator. The web tool calculates the amount of road mix required for a specified area, generating a report with the results.

The calculator had a reactive modal that would clone depending on the number of core mixes specified. Although each cloned modal had a unique id, all the child elements had the same id. This meant that only the original modal would work, while none of the cloned modals would initiate the calculator as expected.

To solve this, I modified the jQuery code to select the element's id in relation to the parent in all applicable areas. Instead of just selecting $("#form-input") it would look for $("#form-input", "#parent"). This meant the calculator would pop up on the right page, and it would automatically fill the correct form inputs with the calculations as expected.

The other main focus of this project was the PDF generation with jsPDF. Initially, the PDF generation consisted of taking screen captures of each section of the calculator and generating a PDF with all those captures. It was less than ideal as the text was small, messy and no text could be selected.

After reading up on the jsPDF documentation, I wrote a script that would take each input and radio field on each section of the calculator and match it with its label element (the question asked by the calculator). Using text height and page height, the code formats the information in a clear and concise way. By the request of my supervisor, questions of the same type were put in tables with jsPDF-AutoTable.

Below is a comparison of what the generated PDF looks like before and after. Small style fixes were also done to the main project website.


NCHRP 14-41

A week into the first project, I was assigned a new . My supervisor wanted an interactive tool that would recommend roadside vegetation control methods using the criteria selected by the user. The tool would read from a relational database with responsive dropdown choices.

The main website for the project was templated basically done modifying the homepage, images and website details. My supervisor recommended the use of React to implement the responsive tool with the relational database. Having never worked with React before, it was quite a learning experience. React documentation and video tutorials were very helpful in the process. You can read more about that here.

Below is a snapshot of the web tool. The script populates the dropdowns from a CSV database file using a library called Papaparse. When all dropdowns are selected, React finds the matching results and displays the information as a list of cards.


What I Learnt

This experience gave me full confidence in working with HTML/CSS and Javascript. The exposure to many Javascript frameworks and libraries like jQuery, React, and jsPDF helped me understand how to work with any new Javascript tool.

In addition to technical skills, I also gained more insight into the daily responsibilities of a web developer. I really enjoyed the learning process and seeing visible results of my code.