{"id":1528,"date":"2012-02-02T20:06:27","date_gmt":"2012-02-03T00:06:27","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=1528"},"modified":"2014-01-25T17:47:15","modified_gmt":"2014-01-25T21:47:15","slug":"new-keyboard-layout-analyzer-preview","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2012\/02\/02\/new-keyboard-layout-analyzer-preview\/","title":{"rendered":"New Keyboard Layout Analyzer (Preview)"},"content":{"rendered":"<p>You can now try out a preview version of the new <a href=\"http:\/\/patorjk.com\/keyboard-layout-analyzer\/preview\">Keyboard Layout Analyzer<\/a>. I completely re-did it from scratch. I know I&#8217;ve done that <a href=\"https:\/\/patorjk.com\/blog\/2009\/07\/07\/new-keyboard-layout-analyzer-less-lines-of-code\/\">before<\/a>, but I&#8217;ve learned a lot about JavaScript and HTML5 over the past two years and thought the application would be best served with a fresh start. Below you can see a screen capture of the new configuration page.<\/p>\n<div class=\"wp-caption aligncenter\" style=\"width: 510px\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/patorjk.com\/images\/blog-2012\/kla-2012-s1.png\" width=\"500\" height=\"250\" class=\"size-full wp-image-1100\" \/><\/p>\n<p class=\"wp-caption-text\">Configuration Tab<\/p>\n<\/div>\n<p>The biggest problem with the previous Analyzer was that it didn&#8217;t have the best configuration options. And even then, the top-based tab interface led to a lot of people not even noticing that configuration options existed. My main goal was to make configuration much more intuitive and flexible. <\/p>\n<p>The previous Analyzer also assumed keys to be atomic and wouldn&#8217;t let you mix and match characters from different keys. For English keyboards this was mostly fine, but when I started learning about Foreign layouts and specialized layouts like the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Dvorak_Simplified_Keyboard#Programmer_Dvorak\">Programmer Dvorak<\/a>, I realized I&#8217;d made a fatal mistake. The old code centered around atomic keys and even used image icons for the configuration display. For this version, I decided to draw the keyboard on a canvas element and to allow keys to mix and match characters. Theoretically, the new setup could even analyze unusual layouts like the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Maltron\">Maltron<\/a> layout, but I haven&#8217;t yet created Keyboard Maps for that layout, nor have done much testing in that area (though it&#8217;s a goal).<\/p>\n<p>I also tried to make the app look more visually appealing and to provide a better user experience. The old layout was kind of amateurish looking, a number of people didn&#8217;t utilize the top-based tabbed interface, and the amount of scrolling you had to do on the output page made it easy to miss interesting information &#8211; not to mention that I was using pie charts, which are notoriously bad at presenting this type of information (I had a decent number of people email me asking me to switch to bar charts). I tried my best at making something that was reasonably ok looking, and I hope the new side-tabs making navigating the information easier.<\/p>\n<p>I&#8217;ve recently taken on a lot at work, so that has slowed me down quite a bit, but I hope to finish off the rest of the output sections in the coming month. If you find any bugs or have any suggestions please let me know!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can now try out a preview version of the new Keyboard Layout Analyzer. I completely re-did it from scratch. I know I&#8217;ve done that before, but I&#8217;ve learned a lot about JavaScript and HTML5 over the past two years and thought the application would be best served with a fresh start. Below you can &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2012\/02\/02\/new-keyboard-layout-analyzer-preview\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">New Keyboard Layout Analyzer (Preview)<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,26,32],"tags":[],"class_list":["post-1528","post","type-post","status-publish","format-standard","hentry","category-general-news","category-web-apps","category-web-development"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/1528","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=1528"}],"version-history":[{"count":28,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/1528\/revisions"}],"predecessor-version":[{"id":1558,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/1528\/revisions\/1558"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=1528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=1528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}