{"id":2496,"date":"2013-07-12T22:12:43","date_gmt":"2013-07-13T02:12:43","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=2496"},"modified":"2014-04-19T17:19:31","modified_gmt":"2014-04-19T21:19:31","slug":"keyboard-layout-analyzer-3-0-beta-release","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2013\/07\/12\/keyboard-layout-analyzer-3-0-beta-release\/","title":{"rendered":"Keyboard Layout Analyzer 3.0 Beta Release"},"content":{"rendered":"<p>I&#8217;m not completely done, there are still a hand full of new features I want to add, but I have a feeling that if I put off the update any longer, it&#8217;s never going to get posted up. So today I&#8217;m releasing the newest version of my <a href='http:\/\/patorjk.com\/keyboard-layout-analyzer\/'>Keyboard Layout Analyzer (KLA)<\/a>, which I&#8217;m dubbing version 3.0, since it&#8217;s the 3rd overhaul of the layout.<\/p>\n<p><a href=\"http:\/\/patorjk.com\/keyboard-layout-analyzer\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2013\/07\/kla.png\" alt=\"kla\" width=\"500\" height=\"297\" class=\"aligncenter size-full wp-image-2504\" srcset=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2013\/07\/kla.png 500w, https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2013\/07\/kla-300x178.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>New features:<\/p>\n<ul>\n<li>\nAnalysis results can be shared.\n<\/li>\n<li>\nCharts are interactive \/ contain hover effects.\n<\/li>\n<li>\nThere are more &#8220;Display&#8221; options in the various results sections.\n<\/li>\n<li>\nYou can turn on\/off certain keyboard data in the individual results sections.\n<\/li>\n<li>\nThe heatmap uses a more realistic heatmap visualization, has a table of key stats, and I&#8217;ve re-added in the mouse over effect (the biggest complaint in my previous version was that I took this out).\n<\/li>\n<li>\nMiscellaneous section has charts for each piece of data.\n<\/li>\n<li>\nLayouts you create can be submitted.\n<\/li>\n<\/ul>\n<p>The biggest change though is the UI. The main reason I created this version was because I thought it would be a fun project to get better familiar with <a href='http:\/\/angularjs.org\/'>AngularJS<\/a>. MV* JavaScript libraries like Angular have taken off recently because they make maintaining, updating and reusing front-end code easier. I felt the code I wrote for version 2.0 of KLA got a little spaghetti-ish at points, so this really appealed to me. <\/p>\n<p>To keep things short, I&#8217;ll go ahead and just cut to the chase: Angular lived up to its hype. It was great at giving structure to the app. The new KLA code base feels a lot more sane and the HTML is easy to follow. If you do front-end development, I&#8217;d highly recommend you try Angular out. If you need a starting point, <a href='http:\/\/www.egghead.io\/'>egghead.io<\/a> has some great tutorial videos and Dan Wahlin has a really nice <a href='http:\/\/www.youtube.com\/watch?v=i9MHigUZKEM'>AngularJS Fundamentals video<\/a>. And as a side note, even though <a href='http:\/\/docs.angularjs.org\/api'>Angular&#8217;s official documentation<\/a> is good, I wouldn&#8217;t start there. I found it to be somewhat cryptic when I first started out. It&#8217;s a good reference point after you&#8217;ve gotten your feet wet though.<\/p>\n<p>The only negative I came across with Angular was that it had a steep learning curve. I ended up having to back track a few times and re-do sections of the app because I didn&#8217;t do them the &#8220;Angular way&#8221;. Angular forces you re-think how to do certain actions and it uses some strange terminology, but once you get past all of that, it&#8217;s a pretty powerful tool.<\/p>\n<h3>Removing JK.js<\/h3>\n<p>My early days in JavaScript reminded me of an old puzzle game called <i>The 7th Guest<\/i>. In The 7th Guest, if you had trouble solving one of the puzzles, you could ask for a hint from the library. After getting 3 hints, the puzzle would be solved for you, but you&#8217;d miss the video that was shown after completing the puzzle, therefore missing a part of the game&#8217;s story. If you missed too many videos, you&#8217;d have no idea what was going on.<\/p>\n<p>When I first started learning JavaScript, I kind of felt this way about third party libraries. I didn&#8217;t mind using ones that provided UI components, but I felt I&#8217;d be missing out on something if I used jQuery. So I wrote my own jQuery-like utility library called JK.js, which I used in my personal projects. However, I no longer feel like I&#8217;d be missing out on anything by implementing low level utility functions. What I really care about is writing an app, not a library. So as I&#8217;ve been refactoring my projects, I&#8217;ve been removing JK.js and replacing it with jQuery. <\/p>\n<h3>Flatly<\/h3>\n<p>Bootstrap makes it easy to create nice looking web pages. I decided to use an awesome Bootstrap theme someone created called <a href='http:\/\/bootswatch.com\/flatly\/'>Flatly<\/a>, though I tweaked the colors a little bit. I also used an image from <a href='http:\/\/subtlepatterns.com\/shattered\/'>subtlepatterns.com<\/a> as the background to make it feel a little livelier. However, while Flat is cool looking, I worry the result may be a little <i>too flat<\/i>, so at some point I may backtrack.<\/p>\n<h3>jqPlot<\/h3>\n<p>The charts in my previous KLA versions used a modified version of PlotKit. PlotKit was a good library, but it hasn&#8217;t been maintained in years. On top of that, my modifications to it used my own JS library JK.js, which I wanted to weed out, so I knew I needed a new chart library if I was to redesign this app. I decided upon <a href='http:\/\/www.jqplot.com\/'>jqPlot<\/a> since it was jQuery-based and had a lot of great functionality. So far I&#8217;m pretty happy with it.<\/p>\n<h3>Heatmaps<\/h3>\n<p>I came across a neat visualization library for <a href='https:\/\/github.com\/pa7\/heatmap.js'>heatmaps<\/a>, so I decided to use that over the simple key-color heat maps I was creating before. Interestingly, the author of this library also has his own <a href='http:\/\/www.patrick-wied.at\/projects\/heatmap-keyboard\/'>keyboard heatmap app<\/a>. When I saw this I felt a little weird about using the library &#8211; but since the heatmap library was its own separate component, I figured it wouldn&#8217;t be too weird if I used it too. <\/p>\n<h3>Future Updates<\/h3>\n<p>I still a have more features I want to add, ones that will be more stat based, so hopefully there&#8217;ll be another update in the next 2 weeks or so. I also may update my <a href='http:\/\/patorjk.com\/typing-speed-test\/'>Typing Speed Test<\/a> to use this same type of layout (it&#8217;s in dire need of an update). If you have any feature requests let me know. Special thanks go out to Wayne D. for submitting a bunch of awesome ideas and feed back!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m not completely done, there are still a hand full of new features I want to add, but I have a feeling that if I put off the update any longer, it&#8217;s never going to get posted up. So today I&#8217;m releasing the newest version of my Keyboard Layout Analyzer (KLA), which I&#8217;m dubbing version &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2013\/07\/12\/keyboard-layout-analyzer-3-0-beta-release\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Keyboard Layout Analyzer 3.0 Beta Release<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,21,26],"tags":[],"class_list":["post-2496","post","type-post","status-publish","format-standard","hentry","category-general-news","category-javascript","category-web-apps"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/2496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=2496"}],"version-history":[{"count":17,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/2496\/revisions"}],"predecessor-version":[{"id":2842,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/2496\/revisions\/2842"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=2496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=2496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=2496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}