{"id":2358,"date":"2010-04-02T18:23:08","date_gmt":"2010-04-03T01:23:08","guid":{"rendered":"http:\/\/multimedia.cx\/eggs\/?p=2358"},"modified":"2010-04-02T18:23:08","modified_gmt":"2010-04-03T01:23:08","slug":"an-improved-web-frontend","status":"publish","type":"post","link":"https:\/\/multimedia.cx\/eggs\/an-improved-web-frontend\/","title":{"rendered":"An Improved Web Frontend"},"content":{"rendered":"<p>I learned basic HTML tags circa 1995 and my knowledge of web presentation never really advanced beyond that. For the most part, I didn&#8217;t really need to care. I had <a href=\"http:\/\/wordpress.org\/\">WordPress<\/a> and <a href=\"http:\/\/www.mediawiki.org\/\">MediaWiki<\/a> to take care of my more sophisticated CMS needs. Then along came <a href=\"http:\/\/fate.multimedia.cx\/\">FATE<\/a>. My lack of prowess regarding modern web presentation became quite the liability.<\/p>\n<p>I&#8217;ve been resisting updating this skillset for some time since it just seems, well&#8230; I&#8217;ll just go ahead and say it: Web programming feels beneath me. Come on, I do low-level stuff, performance-minded C and ASM, you know: &#8220;real&#8221; programming. The <a href=\"http:\/\/www.quirksmode.org\/blog\/archives\/2009\/11\/apple_is_not_ev.html\">QuirksMode blog phrased it best<\/a>:<\/p>\n<blockquote><p>\nThey dismiss Web technologies as toys for children. JavaScript is just this little language that cannot possibly compare to real technologies such as the one they&#8217;re using. HTML is too simple. Real programmers don&#8217;t do that stuff. As to Web developers, they are just glorified pixel-pushers that should in no circumstance be taken seriously.\n<\/p><\/blockquote>\n<p>That pretty much summed up my sentiment (for context, in must be noted that the author of that post was railing against that this mindset). However, my old way wasn&#8217;t working and I needed a new way forward. Fortunately, a breakthrough came when<a href=\"http:\/\/multimedia.cx\/eggs\/ramping-up-on-javascript\/\"> I discovered Google&#8217;s visualization library<\/a>. I was able to invoke Google&#8217;s widget in my web page which would in turn call a script on my server which would provide some table for charting. What a relief: I wouldn&#8217;t have to do a lot of heavy lifting myself. The rework wasn&#8217;t perfect but it was a start.<\/p>\n<p>With <a href=\"http:\/\/multimedia.cx\/eggs\/my-own-offline-rss-reader\/\">my offline RSS reader project<\/a>, I find myself requiring a more sophisticated web presentation again. As you might imagine, this is what the whole thing looks like so far:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2010\/04\/feeds-plain-html.png\" alt=\"\" title=\"Plain HTML\" width=\"355\" height=\"303\" class=\"aligncenter size-full wp-image-2359\" srcset=\"https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2010\/04\/feeds-plain-html.png 355w, https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2010\/04\/feeds-plain-html-300x256.png 300w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><br \/>\n<\/center><br \/>\n<!--more--><br \/>\nThat required some tedious intermingling of Python code and HTML markup. If there is one overriding theme I have learned about sane web programming over the past year or 2, it would be that if I&#8217;m intermingling code and presentation, I&#8217;m doing something very wrong. And comparing what I have accomplished in PHP vs. what I know to be possible in PHP (like WordPress and MediaWiki), I have little reason to doubt that I&#8217;m doing something very wrong.<\/p>\n<p>It makes sense: The big reason that FATE frontend development is at such a standstill is that I dread having to implement and test changes in the massive index.php file, even to change just one of those links in the list at the top. The pervasive theme in web programming is that the presentation and code need to be separate. Precisely <em>how<\/em> these things need to be separated remains a subject of debate.<\/p>\n<p>The prevailing sentiment is that web applications should use a paradigm called <a href=\"http:\/\/en.wikipedia.org\/wiki\/Model\u2013view\u2013controller\">Model-View-Controller (MVC)<\/a>. All basic descriptions you can find regarding this topic all sound quite reasonable. But much like object oriented programming or &#8212; I suspect &#8212; any other programming paradigm &#8212; no 2 web frameworks share the same idea about exactly how to implement it.<\/p>\n<p>Look, web frameworks suck. In fact, I have another whole blog post already written discussing that very topic. But I want to remain solution-oriented with this post.<\/p>\n<p>I can totally get behind the idea of calling pre-made widgets which call my custom data sources. To that end, I&#8217;m auditioning the <a href=\"http:\/\/developer.yahoo.com\/yui\/\">Yahoo web UI widgets (YUI)<\/a> for this little project.<\/p>\n<p>There, much better:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2010\/04\/feeds-improved-javascript.png\" alt=\"\" title=\"Improved presentation using YUI JavaScript widgets\" width=\"444\" height=\"382\" class=\"aligncenter size-full wp-image-2360\" srcset=\"https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2010\/04\/feeds-improved-javascript.png 444w, https:\/\/multimedia.cx\/eggs\/wp-content\/uploads\/2010\/04\/feeds-improved-javascript-300x258.png 300w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><br \/>\n<\/center><\/p>\n<p>Well, at least a <em>little<\/em> better. You have to give it that much. One static page can cleanly transition between the feeds index as well as index pages for individual feeds, and back again. Plus, there&#8217;s that whole sorting thing built in. And the data is all served up via JSON which is incredibly easy to do on the server side.<\/p>\n<p>My offline RSS reader is almost ready for (my) use. But this basic research portends good things for FATE.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learning beans about post-1995 web programming<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-2358","post","type-post","status-publish","format-standard","hentry","category-programming"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/2358","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=2358"}],"version-history":[{"count":3,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/2358\/revisions"}],"predecessor-version":[{"id":2363,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/posts\/2358\/revisions\/2363"}],"wp:attachment":[{"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/media?parent=2358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/categories?post=2358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.cx\/eggs\/wp-json\/wp\/v2\/tags?post=2358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}