{"id":832,"date":"2010-04-12T12:55:51","date_gmt":"2010-04-12T12:55:51","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/?p=832"},"modified":"2018-01-03T19:36:33","modified_gmt":"2018-01-03T19:36:33","slug":"kthoom","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2010\/04\/12\/kthoom\/","title":{"rendered":"kthoom!"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" style=\"float:right\" src=\"http:\/\/codedread.com\/clipart\/kthoom.svgz\" alt=\"The kthoom logo\"><\/img>Sometimes I get an idea and I just have to see it through to a point where it will let my brain go.  At work Thursday we were all slobbering over <a href=\"http:\/\/nuthatch.com\/blog\/\">Steve's<\/a> iPad and someone brought up how cool the <a href=\"http:\/\/marvel.com\/news\/comicstories.11835.download_the_official_marvel_comics_ipad_app\">Marvel app<\/a> is.  I had to admit it was much nicer than any piece of software I'd used for viewing comics before on my laptop.<\/p>\n<p>In the meantime, I've been carefully watching WebKit creep <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=32624\">closer<\/a> and <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=36567\">closer<\/a> to implementing the <a href=\"http:\/\/www.w3.org\/TR\/FileAPI\/\">W3C File API<\/a> (Go Kinuko!).  Something I've been eagerly waiting for more browsers to do so you can open up local files in <a href=\"https:\/\/github.com\/SVG-Edit\/svgedit\">SVG-edit<\/a>.<\/p>\n<p>And then it hit me. <!--more--><\/p>\n<p>Why not a comic book reader done directly in the browser?<\/p>\n<p>In case you don't know, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Comic_Book_Archive_file\">comic book archive files<\/a> are just ZIP or RAR files containing JPEG images.  Browsers can handle images.  Some browsers can now handle opening local files.  Even binary ones.  So theoretically you could write unzip\/unrar in pure JavaScript, extract the JPEGs, turn them into data: URIs and shove them into an &#60;image&#62; element.  You can even do the unzipping in a separate thread using <a href=\"http:\/\/www.whatwg.org\/specs\/web-workers\/current-work\/\">Web Workers<\/a>.<\/p>\n<p>Theoretically.<\/p>\n<p><a href=\"https:\/\/github.com\/codedread\/kthoom\">kthoom<\/a> was how far I was able to get in a weekend.<\/p>\n<p>Some limitations:<\/p>\n<ul>\n<li>Unzipping is slow.  None of the code has been optimized yet and I'm probably doing a lot of really stupid things.<\/li>\n<li>Only supports CBZ files, not CBR files at the moment - I am accepting patches <b>(Update: Support for CBR and CBT were added later!)<\/b><\/li>\n<li>Unzipping is <em>really<\/em> slow.  I need to provide visual progress reporting from the Web Worker thread, I know.<\/li>\n<li>kthoom will crash Firefox 3.6 about half the time.  Firefox nightly (3.7) seems to handle it just fine.  I opened <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=558621\">this bug<\/a>.<\/li>\n<li>Did I mention that unzipping is slow?<\/li>\n<\/ul>\n<p>If I'm honest, this was really an exercise to see just how easy\/hard it would be to do something like this in the browser - and to get some hands-on experience with Web Workers.  And hey, I'm not the <a href=\"http:\/\/jsxgraph.uni-bayreuth.de\/wp\/\">first<\/a> or even <a href=\"http:\/\/github.com\/tlrobinson\/zipjs\">second<\/a> person to think of doing unzip\/deflate in JavaScript either.<\/p>\n<p>It was my first experience writing JavaScript to handle binary files.  It was fun.  It took a weekend.  <\/p>\n<p>Some essential tools:  Firebug, a hex editor, pen &#38; paper, a clear mind, patience.<\/p>\n<p>Now swinging my attention back to stuff I should be working on...<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes I get an idea and I just have to see it through to a point where it will let my brain go. At work Thursday we were all slobbering over Steve&#8217;s iPad and someone brought up how cool the Marvel app is. I had to admit it was much nicer than any piece of [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,43,25,11,28],"tags":[72,99,192],"class_list":["post-832","post","type-post","status-publish","format-standard","hentry","category-javascript","category-ria","category-software","category-technology","category-web","tag-comics","tag-html5","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":18,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/832\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}