{"id":1660,"date":"2009-07-22T23:07:42","date_gmt":"2009-07-23T06:07:42","guid":{"rendered":"http:\/\/multimedia.cx\/eggs\/?p=1660"},"modified":"2009-07-30T12:26:16","modified_gmt":"2009-07-30T19:26:16","slug":"ramping-up-on-javascript","status":"publish","type":"post","link":"https:\/\/multimedia.cx\/eggs\/ramping-up-on-javascript\/","title":{"rendered":"Ramping Up On JavaScript"},"content":{"rendered":"

I didn’t think I would ever have sufficient motivation to learn JavaScript, but here I am. I worked a little more on that new FATE index page<\/a> based on Google’s Visualization API<\/a>. To that end, I constructed the following plan:<\/p>\n

Part 1: Create A JSON Data Source<\/strong>
\nCreate a JSON data source, now that I figured out how to do that correctly. JSON data really is just a JavaScript data structure. It can be crazy to look at<\/a> since it necessitates packing dictionaries inside of arrays inside of dictionaries inside of arrays. (Check the examples– observe that the data structure ends with “}]}]}});”.) But in the end, the Google visualization knows what to do with it.<\/p>\n

Done.<\/em><\/p>\n

Part 2: Connect the JSON Data Source<\/strong>
\nHook the JSON data source up to the newest revision of the FATE front page, rolled out a little while ago<\/a>.<\/p>\n

Done.<\/em><\/p>\n

Part 3: Save The User’s Most Recent Sort Criteria<\/strong>
\nThe problem is that the page resets the sort criteria on a refresh. There needs to be a way to refresh the page while maintaining that criteria. This leads me to think that I should have some “refresh” button embedded in the page which asks the server for updated data using a facility I have heard of named XMLHttpRequest<\/a>. I found a simple tutorial on the matter<\/a> but was put off by the passage “Because of variations among the Web browsers, creating this object is more complicated than it need be.”<\/p>\n

Backup idea: Cookies. Using this tutorial as a guide<\/a>, set a cookie whenever the user changes either the sort column or the sort order.<\/p>\n

Done,<\/em> though I may want to revisit the XHR idea one day.<\/p>\n

Part 4: Make It Look Good<\/strong>
\nFinally, figure out how the div tag works to make the layout a little cleaner. <\/p>\n

Done.<\/em> Sort of. There are 2 div tags on the page now, one for the header and one for the table. I suppose I will soon have to learn CSS to really drag this page out of 1997.<\/p>\n

Bonus: Caching the JSON Data<\/strong>
\nIdeally, the web browser makes the JSON data request using the If-Modified-Since HTTP header. Use a sniffer to verify this. If this is true, add a table to the FATE MySQL table which contains a single column specifying the timestamp when the web config cache table was last updated. If this time is earlier than the time in the request header, respond with a 304 (not modified) HTTP code.<\/p>\n

Not done.<\/em> It seems that these requests don’t set the appropriate HTTP header, at least not in Firefox.<\/p>\n

I hope to put this page into service soon, just as soon as I can dump the rest of the existing index.php script into this new one. As usual, not elegant, but it works.<\/p>\n","protected":false},"excerpt":{"rendered":"

The new FATE index page prototype works even better now<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101],"tags":[182],"class_list":["post-1660","post","type-post","status-publish","format-standard","hentry","category-fate-server","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/1660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/comments?post=1660"}],"version-history":[{"count":9,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/1660\/revisions"}],"predecessor-version":[{"id":1679,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/1660\/revisions\/1679"}],"wp:attachment":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/media?parent=1660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/categories?post=1660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/tags?post=1660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}