{"id":25652,"date":"2016-02-23T21:25:02","date_gmt":"2016-02-23T13:25:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25652"},"modified":"2016-02-23T21:28:07","modified_gmt":"2016-02-23T13:28:07","slug":"display-w3c-data-using-web-api","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/","title":{"rendered":"How to Display W3C Specification data using its Web API"},"content":{"rendered":"

The Emmy\u00ae award winning<\/a> W3C<\/abbr> is an international standards organization for the World Wide Web. It creates new web standards and revises them constantly to keep them consistent and relevant across the globe.<\/p>\n

Browsers and websites have become standard compliant to a greater extent with time, this allows websites to render and work uniformly across all the various browsers. One of the most useful resources publicly available is the W3C Specification documentations in w3c.org<\/a>.<\/p>\n

Recently W3C made its data available through a Web API<\/a>, the project page<\/a> of which is in Github. The intro of this API from its project page is as follows:<\/p>\n

\u201cIn response to demand from developers in our community wanting to interact with W3C\u2019s data, the W3C Systems Team has developed a Web API. Through it we are making available data on Specifications, Groups, Organizations and Users.\u201d<\/em><\/p>\n

In today\u2019s post we\u2019ll see how to fetch the Specification data through the W3C API<\/strong>. You\u2019ll find the various requests you can post to fetch the Specification data and others in https:\/\/api.w3.org\/doc<\/a>, it also comes with a sandbox for each request to test the API, but you\u2019ll need an API key.<\/p>\n

Read more: <\/strong>How to Retrieve and Display Battery Status with HTML5<\/a><\/p>\n

Let\u2019s first see how to get the API key<\/strong>.<\/p>\n

    \n
  1. Login to your W3C account or create one<\/a>.<\/li>\n
  2. Then go to Manage API Keys<\/em> in your profile page. <\/li>\n
  3. Click New API Key<\/em> and give it a name to generate your key. <\/li>\n
  4. Then if you wish, you can copy-paste it into the api key<\/em> textbox at the beginning of the webpage https:\/\/api.w3.org\/doc<\/a> to test the API in the sandbox.<\/li>\n<\/ol>\n

    For this post, we\u2019ll look into the request that uses shortnames<\/em> to display the Specification URL, description and document status<\/strong>. The request looks like this:<\/p>\n

    https:\/\/api.w3.org\/Specifications\/{shortname}?apikey={apikey}&_format=json\r\n<\/pre>\n
    For example, an HTML5 spec request will be like this;<\/p>\n
    https:\/\/api.w3.org\/Specifications\/html5?apikey={apikey}&_format=json\r\n<\/pre>\n
    Now, let\u2019s focus on the HTML we\u2019ll use to display the data fetched through the API. For this I\u2019ve decided to use HTML Template<\/a>. HTML templates are used to hold HTML code that are parsed but not rendered until they\u2019re added to the page using JavaScript.<\/p>\n
    <div id=\"w3cSpecs\">\r\n    <h1>W3C SPECS<\/h1>\r\n<\/div>\r\n\r\n<Template>\r\n    <div class=\"w3cSpec\">\r\n        <h2 class=\"w3cSpecHeader\"><\/h2>     \r\n        <h3>URL<\/h3>\r\n        <a class=\"w3cSpecLink\"><\/a>\r\n        <h3>Description<\/h3>\r\n        <div class=\"w3cDescription\"><\/div>\r\n        <h3 >Latest Version Status<\/h3>\r\n        <mark class=\"status\"><\/mark>\r\n    <\/div>\r\n<\/Template>\r\n<\/pre>\n
    The template is ready. Now, onto the JavaScript  that\u2019ll be making the HTTP request and displaying the response JSON data in HTML. Here\u2019s the set of global variables we\u2019ll start with:<\/p>\n
    var shortnames = ['html5','selectors4','battery-status','fullscreen'],\r\n    xmlhttp = new XMLHttpRequest(),\r\n    w3cSpecsEle = document.querySelector('#w3cSpecs'),\r\n    templateEle = document.querySelector('Template');\r\n<\/pre>\n
    shortnames<\/code> is an array of shortnames<\/em> of the Specifications we want to display in our webpage; if you want to find the shortname<\/em> of a Specification look at its W3C URL and you\u2019ll be able to see it at the end.<\/p>\n
    However, it isn\u2019t guaranteed that you\u2019ll be able to get all<\/em> Specifications like this; there isn\u2019t a definitive list of shortnames<\/em> and Specifications that are available through the API yet.<\/p>\n
    Loop through the shortnames<\/code> array and post a HTTP request for each, and fetch the response.<\/p>\n
    for (var i=0;i<shortnames.length;i++){\r\n    xmlhttp.open('GET', 'https:\/\/api.w3.org\/Specifications\/'+shortnames[i]+'?apikey={your-api-key}&_format=json', false);\r\n    xmlhttp.send();\r\n    xmlhttp.onreadystatechange = checkRequestState();\r\n}\r\n\r\nfunction checkRequestState(){\r\n    if(xmlhttp.readyState === 4 && xmlhttp.status === 200){\r\n        var jsonResponse = JSON.parse(xmlhttp.responseText);\r\n        displaySpec(jsonResponse)\r\n    }\r\n}<\/pre>\n
    The responseText<\/code> is a JSON string and has to be parsed to get the JSON object. displaySpec<\/code> is the function that\u2019ll use the JSON data and display it in HTML.<\/p>\n
    Below is the sample JSON response text for HTML5 Specification and after the code for displaySpec<\/code>.<\/p>\n
    \"W3C<\/figure>\n
    function displaySpec(json){\r\n    if ('content' in templateEle) {\r\n        \/* get Template's content *\/\r\n        templateEleContent = templateEle.content;\r\n        \/* add spec title to h2 header *\/\r\n        w3cSpecHeader = templateEleContent.querySelector('.w3cSpecHeader');\r\n        w3cSpecHeader.textContent = json.title;\r\n        \/* add spec URL to the link  *\/\r\n        w3cSpecLink = templateEleContent.querySelector('.w3cSpecLink');\r\n        w3cSpecLink.textContent = json.shortlink;   \r\n        w3cSpecLink.href = json.shortlink;      \r\n        \/* add spec description *\/\r\n        w3cSpecDetail = templateEleContent.querySelector('.w3cDescription'); \r\n        w3cSpecDetail.innerHTML = json.description;\r\n        \/* add spec status and color it based on its value *\/\r\n        W3cSpecLatestVerStatus = templateEleContent.querySelector('mark');\r\n        var status = json._links[\"latest-version\"].title;\r\n        W3cSpecLatestVerStatus.textContent = status;\r\n        switch(status){\r\n            case 'Recommendation':\r\n                W3cSpecLatestVerStatus.className = \"recommendation\";\r\n                break;\r\n            case 'Working Draft':\r\n                W3cSpecLatestVerStatus.className = 'draft';\r\n                break;\r\n            case 'Retired':\r\n                W3cSpecLatestVerStatus.className = 'retired';\r\n                break;\r\n            case 'Candidate Recommendation':\r\n                W3cSpecLatestVerStatus.className = 'candidateRecommendation';\r\n                break;\r\n        }\r\n        \/* add copy of the Template's content to the main div *\/\r\n        w3cSpecsEle.appendChild(document.importNode(templateEleContent, true));\r\n    }\r\n    else {\/* add JS code to create the elements individually *\/ }\r\n}\r\n<\/pre>\n
    if ('content' in templateEle)<\/code> is to check if HTML Template is supported by the browser, if it isn\u2019t, create all the HTML elements in the JS itself. And when there\u2019s support, fill the HTML elements that are inside the Template\u2019s content with the respective data from JSON and finally, append a copy of Template\u2019s content to the main #w3cSpecs<\/code> div.<\/p>\n
    That\u2019s it. With a bit of CSS stylings, the output looks like this:<\/p>\n
    \"W3C<\/figure>","protected":false},"excerpt":{"rendered":"
    The Emmy\u00ae award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them constantly to keep them consistent and relevant across the globe. Browsers and websites have become standard compliant to a greater extent with time, this allows websites to render and work uniformly across…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Display W3C Specification data using its Web API - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Emmy® award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display W3C Specification data using its Web API\" \/>\n<meta property=\"og:description\" content=\"The Emmy® award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-23T13:25:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-02-23T13:28:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/display-w3c-data-using-web-api\/w3capi-json.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Display W3C Specification data using its Web API\",\"datePublished\":\"2016-02-23T13:25:02+00:00\",\"dateModified\":\"2016-02-23T13:28:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/\"},\"wordCount\":608,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/display-w3c-data-using-web-api\\\/w3capi-json.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/\",\"name\":\"How to Display W3C Specification data using its Web API - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/display-w3c-data-using-web-api\\\/w3capi-json.jpg\",\"datePublished\":\"2016-02-23T13:25:02+00:00\",\"dateModified\":\"2016-02-23T13:28:07+00:00\",\"description\":\"The Emmy® award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/display-w3c-data-using-web-api\\\/w3capi-json.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/display-w3c-data-using-web-api\\\/w3capi-json.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/display-w3c-data-using-web-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Display W3C Specification data using its Web API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Display W3C Specification data using its Web API - Hongkiat","description":"The Emmy® award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them","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:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/","og_locale":"en_US","og_type":"article","og_title":"How to Display W3C Specification data using its Web API","og_description":"The Emmy® award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them","og_url":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-02-23T13:25:02+00:00","article_modified_time":"2016-02-23T13:28:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/display-w3c-data-using-web-api\/w3capi-json.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Display W3C Specification data using its Web API","datePublished":"2016-02-23T13:25:02+00:00","dateModified":"2016-02-23T13:28:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/"},"wordCount":608,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/display-w3c-data-using-web-api\/w3capi-json.jpg","articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/","url":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/","name":"How to Display W3C Specification data using its Web API - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/display-w3c-data-using-web-api\/w3capi-json.jpg","datePublished":"2016-02-23T13:25:02+00:00","dateModified":"2016-02-23T13:28:07+00:00","description":"The Emmy® award winning W3C is an international standards organization for the World Wide Web. It creates new web standards and revises them","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/display-w3c-data-using-web-api\/w3capi-json.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/display-w3c-data-using-web-api\/w3capi-json.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/display-w3c-data-using-web-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Display W3C Specification data using its Web API"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6FK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25652"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25652\/revisions"}],"predecessor-version":[{"id":25656,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25652\/revisions\/25656"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25652"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}