Please view the .zip file for Unit 6 here: Unit 6 - Google Drive

Work Done For This Unit

In this unit I implemented several JQuery libraries in my website that helped enhance its functionality and appeal to my intended audience and various personas. 

On the home page (index), I added a cool text effect using Typed.js that helps demonstrate key taglines about myself using a neat typewriter effect. It types a tagline, backspaces it, and then types the next one. There is a cycle of taglines that the user can read through in this way. This is an eye catching addition to the homepage, that lets users quickly gain an idea of who I am in a captivating way. This is helpful to users like John who are recruiting, are low on time, and quickly need a way to assess my portfolio. 

Next, when navigating between pages, I used a library called Pace.js to implement a progress bar. This helps users understand when the page has loaded all the content it needs, and when users can scroll and see all content. This is useful to users like Eric who need to develop for modern webpages, which need to let users know that their content has loaded. It helps build a good practice for page development in his future endeavours if he chooses to draw inspiration from my portfolio. 

Also on page load, I used a library called Waypoints.js to implement lazy loading when scrolling down on page elements. This was really helpful for dynamic page loading, and combines well with the progress bar library. Personas like John can benefit from this by seeing that I am mindful of data usage of each webpage, and that content is loaded dynamically only when needed (ie when the user scrolls far down enough to see it). This demonstrates that I use good development practices to recruiters like John. 

Next, on the Design page, I used an image carousel library called Owl.js that helps enhance the static images I was displaying to the user. Now, there is an image carousel with all my visual and digital art images. It automatically scrolls through the list of images horizontally every few seconds, and users can use two arrows to scroll in either direction to view the images. They can also still click on each image to get the popup with the caption as I implemented in the previous unit, which I found really nice. This helps users like Linda view my design portfolio automatically scroll, and still displays captions and popups like before. 

At the bottom of the Experiences page, I added a timeline view of my academic and experiential achievements using a library called jQuery Roadmap. It intakes information in a JSON format (which is located inside the JS file for it) and displays it in a two-page timeline that users can navigate back and forth between. This is helpful for users like John and Linda who want to see my portfolio and experiences at a glance and relative to other achievements and accomplishments. 

Lastly, I also implemented a table filtering library called Datatables.js on the Projects page that lets users filter my projects based on technology, name, etc. using a search bar. I thought this was really cool, as it's really quick and actually very functional for users like John who want to scan for technologies and experiences relevant to them or the work that their company is doing. 

Learning Outcomes

• Should be able to use JavaScript libraries (e.g. JQuery) to create dynamic pages.

• I used six different jQuery libraries in my website to help create dynamic pages.

• I used Typed.js to create dynamic typing effects on the homepage.

• I used Pace.js to create dynamic loading bars when navigating between pages.

• I used Waypoints.js to implement lazy loading for dynamic content loading on all pages.

• I used Owl.js to create a dynamically changing image carousel on the Design page.

• I used jQuery Roadmap to create a dynamic and interactive timeline view of my achievements on the Experiences page.

• I used Datatables.js to create a dynamic and interactive table filter for my Projects.

What Went Well and What Didn’t

Implementing these libraries took a little bit of a learning curve, especially understanding how to reference the CDN for each one. Some libraries I tried using for some functionalities didn’t exactly work, or were outdated, but I eventually found ones that I could use. Eventually, I landed on 6 different usages for jQuery within my application that I thought fit very well, and checked all the boxes in terms of functionality, usage and practicality for aiding personas such as John, Linda and Eric.

Outlining each of the libraries that I wanted to use in the jQuery proposal worked very well, as I was able to at least find one working option from the ones that I listed initially. It still took a lot of work to make it work appropriately, and also involved writing some extra HTML and CSS to accommodate for incorporating them. I realized how important and useful jQuery is, especially when you don’t have to reinvent the wheel. Using others' work and incorporating it into your own pages is extremely useful, and really helps when others have creative and artistic visions that you aren't able to develop yourself straight off the bat. They give a good starting point to learn from and build upon.

Next time, I would spend more time on CSS to make each element fit nicer within the webpage. I could have tried a little harder to make some of the native jQuery elements work better with my webpage, such as the back and forth arrows on the image carousel on the Design page.

References

• I used jQuery | Typing Plugins - GeeksforGeeks to learn about implementing Typed.js

• I used PACE — Automatic page load progress bars to learn about implementing Pace.js

• I used jquery-waypoints - npm to learn about implementing Waypoints.js

• I used Owl Carousel to learn about implementing Owl.js

• I used GitHub - stefanomarra/jquery-roadmap: Simple timeline plugin for jQuery to learn about implementing JQuery Roadmap

• I used DataTables | Javascript table library to learn about implementing Datatables.js