{"id":3807,"date":"2014-03-21T11:18:19","date_gmt":"2014-03-21T18:18:19","guid":{"rendered":"http:\/\/blog.cloudfour.com\/?p=3807"},"modified":"2023-02-15T14:30:43","modified_gmt":"2023-02-15T22:30:43","slug":"hideshowpassword-2","status":"publish","type":"post","link":"https:\/\/cloudfour.com\/thinks\/hideshowpassword-2\/","title":{"rendered":"What&#8217;s New in hideShowPassword 2"},"content":{"rendered":"<p>Last June, we released <a href=\"http:\/\/blog.cloudfour.com\/hide-show-passwords-plugin\/\">our hideShowPassword plugin<\/a> for improving the experience of password-entry (particularly on mobile devices). As of this writing, it&#8217;s our most-starred and most-forked project <a href=\"https:\/\/github.com\/cloudfour\/hideShowPassword\">on GitHub<\/a>.<\/p>\n<p style=\"background:#f6f6f6;border:1px solid #ccc;border-radius:0.25em;clear:both;\"><img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2014\/03\/hsp2-demo-narrow.gif\" alt=\" \" style=\"border:0;display:block;margin:0 auto;\" \/><\/p>\n<p>We&#8217;ve released a handful of incremental and bug-fix updates since then, but today we&#8217;re shipping <a href=\"http:\/\/cloudfour.github.io\/hideShowPassword\/\">a full-fledged Version 2<\/a> with several noteworthy improvements.<\/p>\n<h2>Simpler Usage<\/h2>\n<p>The plugin&#8217;s &#8220;inner toggle&#8221; feature tended to steal the show, yet its syntax was verbose:<\/p>\n<pre aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">$(selector).hideShowPassword(<span class=\"hljs-literal\">true<\/span>, { <span class=\"hljs-attr\">innerToggle<\/span>: <span class=\"hljs-literal\">true<\/span> });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We now support a simpler, shorthand syntax for enabling the inner toggle:<\/p>\n<pre aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">$(selector).hideShowPassword(<span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-literal\">true<\/span>);\n\n<span class=\"hljs-comment\">\/\/ enable toggle but hide till input focus:<\/span>\n$(selector).hideShowPassword(<span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-string\">'focus'<\/span>);\n\n<span class=\"hljs-comment\">\/\/ using shorthand method:<\/span>\n$(selector).showPassword(<span class=\"hljs-string\">'focus'<\/span>);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Improved Accessibility<\/h2>\n<p>My personal favorite feature is the improved accessibility of the inner toggle button. Some changes we made based on real-world feedback:<\/p>\n<ul>\n<li>The toggle button element is now a <code>&lt;button&gt;<\/code> by default (it was previously a <code>&lt;div&gt;<\/code>).<\/li>\n<li>Several <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/ARIA_Techniques\/Using_the_button_role\">accessibility attributes<\/a> have been added to better communicate the purpose and state of the button to assistive devices.<\/li>\n<li>The toggle should now be keyboard-accessible, with space and enter key events attached where necessary.<\/li>\n<\/ul>\n<p>We understand every project&#8217;s different, and you may need to tweak some of these new properties. Luckily, Version 2 also includes&#8230;<\/p>\n<h2>Overhauled Options<\/h2>\n<p>Just about anything we <em>could<\/em> make an option, we have. There are so many new options, we had to re-organize the options object to accommodate them all. <a href=\"https:\/\/github.com\/cloudfour\/hideShowPassword#options\">See the full list here<\/a>.<\/p>\n<h2>Built For jQuery <del>and Zepto<\/del><\/h2>\n<p>Version 1 of hideShowPassword supported Zepto, but we&#8217;ve decided to simplify the plugin&#8217;s dependencies by only supporting jQuery from here on out. This makes sense to us for a few reasons:<\/p>\n<ul>\n<li>Zepto&#8217;s <a href=\"http:\/\/zeptojs.com\/#data\">data module<\/a> was required, necessitating a custom build of Zepto to work at all.<\/li>\n<li>The plugin&#8217;s inner toggle features could be unpredictable given Zepto&#8217;s simpler width and height calculation methods.<\/li>\n<li>Zepto <a href=\"https:\/\/github.com\/madrobby\/zepto\/pull\/342\">does not support AMD<\/a>, and likely never will. We introduced AMD support to hideShowPassword in our first minor update <a href=\"https:\/\/github.com\/cloudfour\/hideShowPassword\/issues\/4\">based on developer feedback<\/a>.<\/li>\n<li>While Zepto&#8217;s modest file size remains an attractive feature, its performance once loaded <a href=\"http:\/\/zurb.com\/article\/1293\/why-we-dropped-zepto\">may not be so competitive<\/a>.<\/li>\n<\/ul>\n<h2>Get It Now!<\/h2>\n<p>All the aforementioned improvements (plus more fixes and tweaks) are available <a href=\"https:\/\/github.com\/cloudfour\/hideShowPassword\">right now on GitHub<\/a> (which is also a great place to <a href=\"https:\/\/github.com\/cloudfour\/hideShowPassword\">report issues or request features<\/a>). <a href=\"http:\/\/cloudfour.github.io\/hideShowPassword\/\">Check out the live demo<\/a> if you remain unconvinced.<\/p>\n<p>If you use the plugin in a project, please <a href=\"mailto:info@cloudfour.com\">drop us a line<\/a> and let us know. We&#8217;d love to hear about it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last June, we released our hideShowPassword plugin for improving the experience of password-entry (particularly on mobile devices). As of this writing, it&#8217;s our most-starred and most-forked project on GitHub. We&#8217;ve released a handful of incremental and bug-fix updates since then, but today we&#8217;re shipping a full-fledged Version 2 with several noteworthy improvements. Simpler Usage The [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[240,3],"tags":[185,81,186,191],"class_list":["post-3807","post","type-post","status-publish","format-standard","hentry","category-javascript","category-mobile-web","tag-hideshowpassword","tag-javascript","tag-jquery","tag-zepto"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/3807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/comments?post=3807"}],"version-history":[{"count":0,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/3807\/revisions"}],"wp:attachment":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media?parent=3807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/categories?post=3807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/tags?post=3807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}