This week went busier than any other in my internship so far. Since the start of the week till the very end I was constantly involved with one task or another.
Having finished the final interface as per the previous design, I began wrapping up by adding the final touches. Since this year the competition I am developing the interface for is being held online I had to make some changes to one of the interfaces from last years design to incorporate an extra piece of information that came in the form of a pdf attachment and a video link.
Initially, I implemented both of these by adding a button for each but after consultation with Dr. Shawn, I was told to remove the buttons to keep the UI as clean as possible. As a substitute for buttons, I added a double click event and a long click custom directive to allow the user to download and store the pdf along with opening the YouTube link easily.
This was a bit problematic, however, and I had to go through several mechanisms to implement both of these before settling on the final product. Some of the methods had an incompatibility issue across different browsers, and others would open the links as a popup, thereby requesting the user for permission to open up instead of opening by default.
After researching online I came across a handy trick that created an empty anchor tag, attached the pdf blob to said anchor tag, and then focused on the tag without assigning it to any DOM element outside the scope of the particular function involved, thus allowing automatic opening of the link and download of the pdf without requesting any additional permissions.
Another cross browser compatibility issue I encountered was when I was trying to decide which adapter to use as a storage platform for our database. This is because pouchdb by default stores data in the IndexedDB of the browser, which has different storage limits from browser to browser. I thus tried to incorporate a function in my applications created life cycle hook to check how much data is available in the IndexedDB of the browser but because the Javascript method I was calling was not supported in some browsers, they would not proceed past that line of code and throw in a simple error instead.
I had to use Javascipts Try and Catch to make use of promises and errors to allow cross browser functionality for our application. I implemented this same strategy later on in the week as well when trying to make two separate API calls one after another.
By the end of the week I had finalized the UI and added all needed functionality and did basic error testing and this coming week I hope to fix all errors as early on as possible so that I may proceed with the Electron and Cordova applications.
Categories: Experiential
0 Comments