{"id":1345,"date":"2020-11-16T15:45:08","date_gmt":"2020-11-16T13:45:08","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=1345"},"modified":"2023-12-20T14:26:58","modified_gmt":"2023-12-20T12:26:58","slug":"searchable","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/searchable\/","title":{"rendered":"Searchable Widget – Automatic links for Wikipedia, YouTube and Google"},"content":{"rendered":"

Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight jQuery-CSS solution populates the icon links automatically, all you have to do is add the searchable<\/em> class to the HTML tag.<\/strong><\/p>\n

Live Demo<\/a><\/h2>\n

\"search<\/p>\n

<\/p>\n

HTML<\/h2>\n

Just as I said above, you can add the searchable<\/em> class to any HTML item: list items, divs, paragraphs, or as the example below shows, to inline span tags<\/a>:<\/p>\n

<p<\/span>><\/span>Look for <span<\/span> class<\/span>=\"searchable\"<\/span>><\/span>Pranx.com<\/span<\/span>><\/span> for great online pranks.<\/p<\/span>><\/span>\n<\/pre>\n
JavaScript<\/h2>\n
The JavaScript is using jQuery to parse the document and render the searchable items. It adds svg icons with three links to search the text on Wikipedia, YouTube and Google. Using the same technique you can set up new search icons, for example Reddit, LinkediIn and others.<\/p>\n
Our search links<\/a> will stop working if one of these websites changes its search page or how they encode and pass the query to that. We have to keep our eyes open and check for broken links<\/a>.<\/p>\n
$<\/span>(document<\/span>).ready<\/span>(function() {\n    $<\/span>(\".searchable<\/span>\").each<\/span>(function() {\n        var txt =<\/span> $<\/span>(this<\/span>).text<\/span>();\n        var append =<\/span> '<a href=\"https:\/\/www.google.com\/search?q='<\/span> +<\/span> txt.replaceAll<\/span>(\" \",\"+\") +<\/span> '\" target=\"_blank\" title=\"Search on Google\" rel=\"external nofollow\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\"  viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\"><path style=\"fill:#FBBB00;\" d=\"M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256 c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456 C103.821,274.792,107.225,292.797,113.47,309.408z\"\/><path style=\"fill:#518EF8;\" d=\"M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451 c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535 c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z\"\/><path style=\"fill:#28B446;\" d=\"M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512 c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771 c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z\"\/><path style=\"fill:#F14336;\" d=\"M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012 c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0 C318.115,0,375.068,22.126,419.404,58.936z\"\/><\/svg><\/a>'<\/span>\n        $<\/span>(this<\/span>).append<\/span>(append);\n        append =<\/span> '<a href=\"https:\/\/youtube.com\/results?search_query='<\/span> +<\/span> txt.replaceAll<\/span>(\" \",\"+\") +<\/span> '\" target=\"_blank\"  title=\"Watch on YouTube\" rel=\"external nofollow\"><svg enable-background=\"new 0 0 24 24\" height=\"512\" viewBox=\"0 0 24 24\" width=\"512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m.522 17.874c.49 1.738 1.989 2.056 2.089 2.117 2.467.672 16.295.674 18.799 0 1.715-.496 2.03-2.017 2.089-2.117.653-3.474.696-8.003-.03-11.945l.03.196c-.49-1.738-1.989-2.056-2.089-2.117-2.434-.661-16.298-.686-18.799 0-1.715.497-2.03 2.017-2.089 2.117-.699 3.651-.734 7.84 0 11.749zm9.086-2.223v-7.293l6.266 3.652z\" fill=\"#e53935\"\/><\/svg><\/a>'<\/span>\n        $<\/span>(this<\/span>).append<\/span>(append);\n        append =<\/span> '<a href=\"https:\/\/en.wikipedia.org\/wiki\/Special:Search?search='<\/span> +<\/span> txt.replaceAll<\/span>(\" \",\"+\") +<\/span> '\" target=\"_blank\"  title=\"Search on Wikipedia\" rel=\"external nofollow\"><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 315.459 315.459\" style=\"enable-background:new 0 0 315.459 315.459;\" xml:space=\"preserve\"> <path  style=\"fill:#36c;\" d=\"M307.459,45.862h-66.126c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8h16.761 c0.045,0.041-50.677,132.866-50.677,132.866l-27.326-61.454c0,0,35.881-71.219,36.01-71.413h7.565c4.4,0,8-3.6,8-8V53.862 c0-4.4-3.6-8-8-8H174.54c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8h6.849c-0.3,0.98-16.555,37.044-16.555,37.044 s-15.433-34.574-16.419-37.044h1.718c4.401,0,8-3.6,8-8V53.862c0-4.4-3.599-8-8-8H98.008c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8 h6.98c1.36,2.028,35.811,77.526,38.443,83.907l-22.452,49.196c-12.889-30.053-43.79-102.504-54.261-130.565 c-0.382-0.999-0.66-1.829-0.876-2.538H80.33c4.4,0,8-3.6,8-8V53.862c0-4.4-3.6-8-8-8H8c-4.4,0-8,3.6-8,8v10.047c0,4.4,3.6,8,8,8 h12.595c0.693,0.781,28.766,69.079,42.392,101.024c12.59,29.512,25.607,60.028,34.033,81.874c0.016,0.043,0.033,0.085,0.05,0.127 c1.476,3.626,5.965,14.662,15.778,14.662c8.42,0,13.691-8.221,16.924-14.404c0.029-0.056,0.06-0.115,0.088-0.173 c6.779-13.828,19.025-41.102,28.636-62.762c12.628,30.43,21.469,51.357,26.318,62.3c1.603,3.645,6.48,14.738,16.227,14.739h0.002 c9.475,0,14.553-10.642,16.221-14.138c0.061-0.128,0.117-0.257,0.172-0.388c17.086-41.74,67.248-167.921,67.753-169.191 c0.038-0.097,0.075-0.194,0.109-0.293c1.742-4.978,4.058-8.708,7.048-11.376c0.891-0.787,2.012-1.449,3.327-2.002h11.786 c4.4,0,8-3.6,8-8V53.862C315.459,49.462,311.859,45.862,307.459,45.862z\"\/><\/svg><\/a>'<\/span>\n        $<\/span>(this<\/span>).append<\/span>(append);\n    });\n});\n<\/pre>\n
CSS<\/h2>\n
The styles are the part you most likely will adjust to match your template<\/a>.<\/p>\n
.searchable<\/span> {\n    display<\/span>: block<\/span>;\n    padding<\/span>: 0<\/span> 2px<\/span><\/span>;\n    position<\/span>: relative<\/span>;\n    cursor<\/span>: pointer<\/span>;\n    border-bottom<\/span>: 1px<\/span><\/span> solid<\/span> #7194db<\/span>;\n}\n.searchable<\/span>:hover<\/span> {\n    background<\/span>: #eef4ff<\/span>;\n}\nspan<\/span>.searchable<\/span> {\n    display<\/span>: inline-block<\/span>;\n    padding-right<\/span>: 100px<\/span><\/span>;\n    font-weight<\/span>: bold<\/span>;\n    color<\/span>: #3a5896<\/span>;\n}\nli<\/span>.searchable<\/span> {display<\/span>: list-item<\/span>}\n.searchable<\/span> a<\/span> {\n    display<\/span>: inline-block<\/span>;\n    opacity<\/span>: 0.7<\/span>;\n    position<\/span>: absolute<\/span>;\n    right<\/span>: 5px<\/span><\/span>;\n    top<\/span>: 2px<\/span><\/span>;\n    padding<\/span>: 0<\/span> 5px<\/span><\/span>;\n    left<\/span>: auto<\/span>;\n}\n.searchable<\/span> a<\/span>:nth-child<\/span>(2) {    right<\/span>: 35px<\/span><\/span>;    }\n.searchable<\/span> a<\/span>:nth-child<\/span>(3) {    right<\/span>: 65px<\/span><\/span>;    }\n.searchable<\/span> a<\/span>:nth-child<\/span>(4) {    right<\/span>: 95px<\/span><\/span>;    }\n.searchable<\/span> a<\/span>:nth-child<\/span>(5) {    right<\/span>: 125px<\/span><\/span>;   }\n.searchable<\/span> a<\/span>:hover<\/span> {opacity<\/span>: 1<\/span>}\n.searchable<\/span> a<\/span> svg {height<\/span>: 20px<\/span><\/span>;width<\/span>: 20px<\/span><\/span>}\n<\/pre>\n
The Result<\/h2>\n
The end result should look like this if the setup was correct. See the live demo<\/a> if you don’t believe it.<\/p>\n
\"searchable<\/p>\n","protected":false},"excerpt":{"rendered":"
Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight jQuery-CSS solution populates the icon links automatically, all you have to do is add the searchable class to the HTML tag. Live Demo<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,5,6],"tags":[],"class_list":["post-1345","post","type-post","status-publish","format-standard","hentry","category-articles","category-freebies","category-javascript","category-jquery"],"yoast_head":"\nSearchable Widget - Automatic links for Wikipedia, Youtube and Google<\/title>\n<meta name=\"description\" content=\"Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight JS populates the icon links\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/searchable\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Searchable Widget - Automatic links for Wikipedia, Youtube and Google\" \/>\n<meta property=\"og:description\" content=\"Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight JS populates the icon links\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/searchable\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-16T13:45:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T12:26:58+00:00\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/searchable\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/searchable\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Searchable Widget – Automatic links for Wikipedia, YouTube and Google\",\"datePublished\":\"2020-11-16T13:45:08+00:00\",\"dateModified\":\"2023-12-20T12:26:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/searchable\/\"},\"wordCount\":207,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"Articles\",\"Freebies\",\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/searchable\/\",\"url\":\"https:\/\/html-online.com\/articles\/searchable\/\",\"name\":\"Searchable Widget - Automatic links for Wikipedia, Youtube and Google\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2020-11-16T13:45:08+00:00\",\"dateModified\":\"2023-12-20T12:26:58+00:00\",\"description\":\"Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight JS populates the icon links\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/searchable\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/searchable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/searchable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Searchable Widget – Automatic links for Wikipedia, YouTube and Google\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Searchable Widget - Automatic links for Wikipedia, Youtube and Google","description":"Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight JS populates the icon links","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/searchable\/","og_locale":"en_GB","og_type":"article","og_title":"Searchable Widget - Automatic links for Wikipedia, Youtube and Google","og_description":"Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight JS populates the icon links","og_url":"https:\/\/html-online.com\/articles\/searchable\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2020-11-16T13:45:08+00:00","article_modified_time":"2023-12-20T12:26:58+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/searchable\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/searchable\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Searchable Widget – Automatic links for Wikipedia, YouTube and Google","datePublished":"2020-11-16T13:45:08+00:00","dateModified":"2023-12-20T12:26:58+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/searchable\/"},"wordCount":207,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["Articles","Freebies","JavaScript","jQuery"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/searchable\/","url":"https:\/\/html-online.com\/articles\/searchable\/","name":"Searchable Widget - Automatic links for Wikipedia, Youtube and Google","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2020-11-16T13:45:08+00:00","dateModified":"2023-12-20T12:26:58+00:00","description":"Let your visitors easily look up any text on Wikipedia, or search for it on YouTube and Google. This lightweight JS populates the icon links","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/searchable\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/searchable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/searchable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Searchable Widget – Automatic links for Wikipedia, YouTube and Google"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=1345"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1345\/revisions"}],"predecessor-version":[{"id":2007,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/1345\/revisions\/2007"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}