Tag: class scheduling

Stashing stuff in localStorage and other dev links

  1. Hiding tt-hint when using typeahead: This is useful because when using typeahead, the top hint for a query is on automatically. There’s no option to turn this off so a workaround I found online was to set the font size to 0 and turn off the visibility for the .tt-hint class.
  2. Using transitions: Since I just learned how to apply (basic) transitions, I’ll abuse them for a few weeks and then forget about them. I’ve been bad about providing feedback on actions in my web application so I’ll be applying my new found power liberally. 🙂

Image

In the latest version of CoursePicker on the web (v2), I decided to add a bit of flair to the application by mapping the building numbers to actual building names. By default, the building numbers are provided with sections and for me, it has always been a pain to find a section I’m interested in and then have to go to the UGA Campus Mapping application to find out the building details. So, I set about finding a document that contained the mapping of building numbers to the actual building names. My first hit turned up a service (I think it was Scribd) which wanted me to pay to view the list. Well, don’t be fooled into paying money for it! There’s a UGA Building Index document for free here and I used the free Nitrocloud online pdf conversion service to export the pdf to a csv file. Once I had a csv file, it was trivial to format the file into a valid JSON file. If you’re new to JSON file formats, you want to bookmark JSONLint.com and this JSON Formatter & Validator.

So, for use in my application, I was essentially loading the JSON file from my webserver on every page load and wasn’t “caching” it anywhere. Granted, my web traffic is minuscule but I want to actually learn good practices. So, today, I decided to revisit my naive implementation and rediscovered localStorage. This JSON file is fairly static so I am not too worried about the information being out of date although I may need to specify an expiration date manually (I learned that the expiration date of items in localStorage is really up to the user). There’s lscache by Pamela Fox which uses localStorage but allows you to specify expiration dates, etc. I could also use cookies to store my data, etc. 

I went with lscache because it was easy enough and it works for now. Here’s the localStorage way to store stuff:

if (localStorage.getItem("uga_buildings") === null) {
     $.getJSON("/uga_building_names.json", function(data){
          var uga_buildings = data;
          localStorage.setItem('uga_buildings', JSON.stringify(data));
     });
     console.log("stored list of uga buildings in local storage.");
}else{
     var uga_buildings = JSON.parse(localStorage.getItem("uga_buildings"));
     console.log("retrieved list of uga buildings from localStorage.");
}

The emphasized text is emphasized because you can only store strings in localStorage. So, you need to convert your object to a string (JSON.stringify) and when retrieving your object, you convert it back to the original form (JSON.parse).

You can check out the source code for CoursePicker here. As always, bug reports and pull requests are welcome! 🙂