Week 11: Optimisation and new 'My restorations'

This week started the final stretch where we begun optimising and finessing code/elements.  Based on feedback, we also took another look at how 'My restorations' worked.

Home page

Now that the Trove API calls and adding the images to the Home page works, I looked at how we could make the API calls run faster as it is quite slow.  Each image is retrieved with a separate API call based on a relevant keyword search limited to 50 results.  As I curated the images we used to illustrate each website, I could limit the API calls to return only the number of results required to included the image needed.  I went through each query, found which number the desired image was in the list, and then changed the API call to reflect only that number of results.  For some calls, that meant reducing the query from 50 results to 2 results and overall, this improved the loading speed of this page.  It was a bit tedious but worthwhile.  After I had completed it I spoke to another student of this course who suggested creating a list on Trove with only the desired images to call but as I had already refined our queries, I added this to the 'if there's time list' and left it at that for the time being.

It seems like there is often a 'better' way to do things, best practice, easy, optimised, etc, that I don't discover until I have spent hours using trial and error and stack overflow to just get it to work.  This can be really frustrating.  It is definitely rewarding to figure something out yourself and get something that hasn't worked after hours and hours of trying to finally work.  But, it is hard to accept a 'better' way to do something that is different to the way I figured out because of the time involved.

This week in 'PHP'

I added the logout function to all pages in the nav which meant re-saving all the pages as.php, not .html to make this work.


Working panel - HTML Editor
In response to feedback received I changed the HTML editor (and CSS editor) to wrap text so users don't have to scroll sideways to view long lines of code.

This is a feature of the ACE Editor and only required the addition of one line:
    aceEditor.getSession().setUseWrapMode(true);

My restorations

This week we changed how my restorations worked in response to adding modules last week.  I realised that by adding modules, it became confusing how users access these modules.

Previous flow:
Home (choose website) > Website page (displaying modules) > Working Panel > My restorations (displays saved websites).

To access the second module, a user would have to return to the Home page and reselect the website as we did not provide navigation links to each website.

New flow:
Home (choose website) > Working Panel (module 1) > My restorations (dynamically displays websites and modules indicating which modules have been started).

To accomplish this I did the following:

• Got rid of individual website pages and replaced them with individual html file with only the website module information (ie not head or body, just a div)
• Created a plunkr to test using Javascript to add html snippets to a page based on hardcoded variables
• Created an AngularJS repeater function to add divs with IDs to the 'My restorations' page so there is an empty, targetable div on the page for each website
• Make the Javascript work with PHP variables to tell when a module has been saved or not.

Using PHP variables in Javascript

To use the PHP variables in javascript, they need to be converted, e.g. var cricket = <?php echo (json_encode($cricket_start)); ?>;.  Where ‘cricket’ is a new Javascript variable and ‘$cricket_start’ is a variable in PHP that we need access to.  The syntax for converting variables was easily found using a Google search but the javascript file did not work as expected when added to the top of a modules.js file.  Knowing that the hardcoded variables worked, I knew it was the variables, not the Javascript that was the problem. The simple fix for this turned out to be converting the variables in a script tag on the my_restorations.php page rather than the modules.js file.