{"id":23165,"date":"2014-12-15T13:07:44","date_gmt":"2014-12-15T11:07:44","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=23165"},"modified":"2014-12-15T13:07:44","modified_gmt":"2014-12-15T11:07:44","slug":"focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/","title":{"rendered":"focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page"},"content":{"rendered":"<!-- google_ad_section_start -->\n<p><a href=\"https:\/\/github.com\/zzarcon\/focusable\">focusable<\/a> &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23166\" data-permalink=\"https:\/\/mamchenkov.net\/wordpress\/2014\/12\/15\/focusable-set-a-spotlight-focus-on-dom-element-adding-a-overlay-layer-to-the-rest-of-the-page\/focusable\/\" data-orig-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?fit=475%2C491&amp;ssl=1\" data-orig-size=\"475,491\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"focusable\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?fit=475%2C491&amp;ssl=1\" class=\"aligncenter size-full wp-image-23166\" src=\"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/12\/focusable.gif?resize=475%2C491&#038;ssl=1\" alt=\"focusable\" width=\"475\" height=\"491\" \/><\/a><\/p>\n<!-- google_ad_section_end -->\n","protected":false},"excerpt":{"rendered":"<!-- google_ad_section_start -->\n<p>focusable &#8211; set a spotlight focus on DOM element adding a overlay layer to the rest of the page<\/p>\n<!-- google_ad_section_end -->\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"focusable - set a spotlight focus on DOM element adding a overlay layer to the rest of the page #WebDev","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},"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1330],"keyring_services":[],"class_list":["post-23165","post","type-post","status-publish","format-link","hentry","category-general","category-programming","category-technology","category-web-work","tag-web-development","post_format-post-format-link"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":8933,"url":"https:\/\/mamchenkov.net\/wordpress\/2005\/05\/05\/sleeping-beauty\/","url_meta":{"origin":23165,"position":0},"title":"Sleeping beauty","author":"Leonid Mamchenkov","date":"May 5, 2005","format":false,"excerpt":"One of the things Maxim got from me is his ability to sleep with semiopen eyes. Sometimes they are wide open, sometimes they are open just a tiny bit. Can you see a light reflection in his eye on this picture? Well, that's a tiny bit open eye... On the\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18895,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/12\/01\/oridomi-fold-dom-elements-like-paper\/","url_meta":{"origin":23165,"position":1},"title":"OriDomi &#8211; fold DOM elements like paper","author":"Leonid Mamchenkov","date":"December 1, 2013","format":"link","excerpt":"OriDomi - fold DOM elements like paper","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22474,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/09\/03\/page-monitor-capture-webpage-and-diff-the-dom-change-with-phantomjs\/","url_meta":{"origin":23165,"position":2},"title":"page-monitor &#8211; capture webpage and diff the dom change with phantomjs","author":"Leonid Mamchenkov","date":"September 3, 2014","format":"link","excerpt":"page-monitor - capture webpage and diff the dom change with phantomjs","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"page-monitor","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2014\/09\/page-monitor-500x495.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":21887,"url":"https:\/\/mamchenkov.net\/wordpress\/2014\/05\/30\/jsaction-a-tiny-event-delegation-library\/","url_meta":{"origin":23165,"position":3},"title":"JsAction &#8211; a tiny event delegation library","author":"Leonid Mamchenkov","date":"May 30, 2014","format":"link","excerpt":"JsAction - a tiny event delegation library JsAction is a tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action. The traditional way of adding an event handler is to obtain a reference to the node and\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25997,"url":"https:\/\/mamchenkov.net\/wordpress\/2016\/04\/04\/share-your-public-keys-easily-with-github\/","url_meta":{"origin":23165,"position":4},"title":"Share your public keys easily with GitHub","author":"Leonid Mamchenkov","date":"April 4, 2016","format":false,"excerpt":"Here's a handy thing that I didn't know about - you can easily share your public keys by adding them to your GitHub account and then accessing the URL of the form https:\/\/github.com\/YOUR_USERNAME.keys . \u00a0What you get is a plain text response with all your public keys, ready to be\u2026","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18624,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/09\/23\/simperium-cross-platform-data-layer\/","url_meta":{"origin":23165,"position":5},"title":"Simperium &#8211; cross-platform data layer","author":"Leonid Mamchenkov","date":"September 23, 2013","format":"link","excerpt":"Simperium - cross-platform data layer","rel":"","context":"In &quot;All&quot;","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/23165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=23165"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/23165\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=23165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=23165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=23165"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=23165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}