{"id":26531,"date":"2016-05-30T21:01:49","date_gmt":"2016-05-30T13:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26531"},"modified":"2023-04-06T19:21:34","modified_gmt":"2023-04-06T11:21:34","slug":"microsoft-inclusive-design-vscode","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/","title":{"rendered":"Boost Your Design with Microsoft&#8217;s Inclusive Visual Studio Code"},"content":{"rendered":"<p><strong>Universal, <\/strong>or<strong> inclusive design<\/strong> is a new design philosophy Microsoft seems to <a target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/accessibility\/designing-inclusive-software\" rel=\"noopener\">take quite seriously<\/a> in software development recently. <strong>Inclusive design<\/strong> takes <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-design-needs\/\" rel=\"noopener\">accessible design<\/a> to the next level, as it views accessibility from a much broader perspective. When <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" rel=\"noopener\">I was testing<\/a> Microsoft\u2019s new source code editor, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/\" rel=\"noopener\">Visual Studio Code<\/a>, the question of <strong>how they implemented the theory in practice<\/strong> naturally arose in my mind.<\/p>\n<p>This post doesn\u2019t intend to be solely a description of Visual Studio Code\u2019s accessibility features, as in the official docs you can find a <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility\" rel=\"noopener\">great recap<\/a> of them, but rather aims to be a case study on what to pay attention to when you want to <strong>design an inclusive app<\/strong> in the future.<\/p>\n<p>Because we can be sure that inclusivity will soon be a requirement in both software and web design, of course not only for altruistic reasons, but because it will bring many new users to the table.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/\" class=\"ref-block__link\" title=\"Read More: Visual Studio Code: 5 Awesome Features That Make It A Frontrunner\" rel=\"bookmark\"><span class=\"screen-reader-text\">Visual Studio Code: 5 Awesome Features That Make It A Frontrunner<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/visual-studio-code-features.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-26365 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/visual-studio-code-features.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Visual Studio Code: 5 Awesome Features That Make It A Frontrunner<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tVisual Studio Code is a new a code editor from Microsoft. It has recently hit its first major...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Microsoft\u2019s 4 Principles of Inclusive Design<\/h2>\n<p>Windows Dev Center puts accessible software design <strong>inside the Usability category<\/strong>, and they also published many <a target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/accessibility\/accessibility\" rel=\"noopener\">great articles<\/a> on the topic. Microsoft\u2019s <strong>four principles of inclusive design<\/strong> (listed briefly below) are discussed <a target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/accessibility\/designing-inclusive-software\" rel=\"noopener\">in this article<\/a>.<\/p>\n<ol>\n<li>Think <strong>universal<\/strong>.<\/li>\n<li>Make it <strong>personal<\/strong>.<\/li>\n<li>Keep it <strong>simple<\/strong>.<\/li>\n<li>Create <strong>delight<\/strong>.<\/li>\n<\/ol>\n<p>If you\u2019ve read through <a target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/accessibility\/designing-inclusive-software\" rel=\"noopener\">the original article<\/a>, you will see the principles are explained in a way that\u2019s not always easy to test, using expressions like <em>\"emotional connection\"<\/em>, <em>\"evoke wonder\"<\/em>, and <em>\"magical\"<\/em>. So I\u2019d rather stay down-to-earth, remove these subjective connotations, and turn the principles into objective criteria.<\/p>\n<p>When I analyze how they are implemented in Visual Studio Code, I use them in the following sense:<\/p>\n<ol>\n<li>Think <strong>universal<\/strong>: Accessibility<\/li>\n<li>Make it <strong>personal<\/strong>: Customizability, extensibility<\/li>\n<li>Keep it <strong>simple<\/strong>: Distraction-free, logical user interface<\/li>\n<li>Create <strong>delight<\/strong>: Feature discoverability<\/li>\n<\/ol>\n<p>Of course, this is just one possible categorization, and there are <strong>many overlaps<\/strong>, for instance customizability can also be part of the \u201cCreate delight\u201d principle, but as we need something tangible, let\u2019s stick to this interpretation for now.<\/p>\n<p>While Windows Dev Center recommends these inclusive design principles to be applied for Windows 10 apps, Microsoft also dedicated its <a target=\"_blank\" href=\"https:\/\/www.microsoft.com\/design\" rel=\"noopener\">Microsoft Design<\/a> site to inclusive design.<\/p>\n<p>Although Visual Studio Code is not solely for Windows 10 but aimed to be a <strong>cross-platform software<\/strong>, we can still safely test its features against the aforementioned principles, as Microsoft clearly treats inclusive design as the software design path they want to follow in the future.<\/p>\n<h2>1st Principle: Think Universal<\/h2>\n<p>Under the <strong>\u201cThink Universal\u201d<\/strong> principle, we\u2019ll scrutinize how accessible Visual Studio Code is <strong>for diverse user groups<\/strong>, such as users of assistive technologies (whether they use them for disabilities or preference), people with limited technologies, non-native English speakers, etc.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg\" alt=\"Think Universal\" width=\"700\" height=\"538\"><\/figure>\n<h3>1. Zoom<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_zoom\" rel=\"noopener\">Zoom<\/a> can be easily performed by hitting the <span class=\"key\">Ctrl<\/span> + <span class=\"key\">=<\/span> \/ <span class=\"key\">Cmd<\/span> + <span class=\"key\">=<\/span> <em>(Mac)<\/em> keyboard shortcut for <strong>Zoom In<\/strong>, and the <span class=\"key\">Ctrl<\/span> + <span class=\"key\">\u2013<\/span> \/ <span class=\"key\">Cmd<\/span> + <span class=\"key\">\u2013<\/span> <em>(Mac)<\/em> shortcut for <strong>Zoom Out<\/strong>, and we can also access the Zoom feature via the top menu bar.<\/p>\n<p>Note, that as of the version 1.1.1, on Windows keyboards the <span class=\"key\">+<\/span> and <span class=\"key\">\u2013<\/span> signs doesn\u2019t work on the numeric keypad on the right, only on the typing (alphanumeric) keypad \u2013 which probably isn\u2019t the best for inclusivity.<\/p>\n<p>The <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_persisted-zoom-level\" rel=\"noopener\">Persisted Zoom Level<\/a> feature somewhat compensates for this, as it allows us to easily configure a <strong>persistent Zoom level<\/strong> in the User Settings (read <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" rel=\"noopener\">my pervious post<\/a> on how to do this).<\/p>\n<h3>2. High Contrast Theme<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_high-contrast-theme\" rel=\"noopener\">High contrast themes<\/a> facilitate in <strong>processing visual information<\/strong> for visually impaired users, and therefore they are an important element of accessibility.<\/p>\n<p>There\u2019s a <strong>default High  Contrast theme<\/strong> in Visual Studio Code, that you can set by clicking on the <code>File &gt; Preferences &gt; Color Theme<\/code> menu, but you can download others from the <a target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/search?term=high%20contrast%20theme&target=VSCode&sortBy=Relevance\" rel=\"noopener\">Visual Studio Code Marketplace<\/a> as well.<\/p>\n<p>Microsoft introduced High Contrast themes <a target=\"_blank\" href=\"https:\/\/support.microsoft.com\/en-us\/windows\/use-high-contrast-mode-in-windows-10-fedc744c-90ac-69df-aed5-c8a90125e696\" rel=\"noopener\">in Windows 7<\/a>, it\u2019s nice to see that they follow through with this feature.<\/p>\n<h3>3. Keyboard Navigation<\/h3>\n<p>Providing <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_keyboard-navigation\" rel=\"noopener\">keyboard navigation<\/a> is essential for people who can\u2019t use the mouse because of visual or mobility disabilities. Effective keyboard navigation entails that users <strong>can control every functionality<\/strong> of a software <strong>by using only the keyboard<\/strong>.<\/p>\n<p>Visual Studio Code nicely implements this feature, and while it has many <strong>preset key bindings<\/strong> (see the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/keybindings\" rel=\"noopener\">full list<\/a>), users can also <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/keybindings#_customizing-shortcuts\" rel=\"noopener\">customize keyboard shortcuts<\/a> with the help of a JSON-format configuration file.<\/p>\n<h3>4. Tab Navigation<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_tab-navigation\" rel=\"noopener\">Tab navigation<\/a> makes it possible to <strong>jump all over the different areas<\/strong> of Visual Studio Code.<\/p>\n<p>Currently, as of version 1.1.1, VS Code doesn\u2019t support tab navigation for all areas, for example the top menu bar is not available this way. The good news is Microsoft acknowledges the lack of this feature in the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_current-known-issues\" rel=\"noopener\">Current Known Issues<\/a> in the docs.<\/p>\n<p>During the testing, I found that the <strong>Editor<\/strong>, the <strong>Side Bar<\/strong>, the <strong>View Bar<\/strong> (see the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/codebasics#_basic-layout\" rel=\"noopener\">naming of VS Code\u2019s areas<\/a>), and all of their actions and items are accessible with the Tab key. Although Tab users can\u2019t access the functionalities of the top menu bar with their keyboard. The Command Palette <span class=\"key\">F1<\/span> can somewhat substitute for this, as all commands that can be found in the top menu can be accessed from there as well.<\/p>\n<p>An important accessibility feature of tab navigation is <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_tab-trapping\" rel=\"noopener\">tab trapping<\/a> which enables users to switch between the two functionalities of the Tab key. The  trapped Tab key makes it possible to <strong>move across the different parts of VS Code<\/strong>, while normally the Tab key <strong>adds a Tab character to the text file<\/strong> open in the Editor area. Users can switch between the two capabilities by hitting the <span class=\"key\">Ctrl<\/span> + <span class=\"key\">M<\/span> key binding.<\/p>\n<h3>5. Screen Readers<\/h3>\n<p>Of course, an accessible software needs to be fully available for <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_keyboard-navigation\" rel=\"noopener\">screen reader<\/a> users as well. The docs <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_screen-readers\" rel=\"noopener\">mention<\/a> that the VS Code dev team tested screen reader availability with the <a target=\"_blank\" href=\"https:\/\/www.nvaccess.org\/\" rel=\"noopener\">NVDA screen reader<\/a>.<\/p>\n<p>For testing, I used two other screen readers, <a target=\"_blank\" href=\"https:\/\/www.freedomscientific.com\/Products\/software\/JAWS\/\" rel=\"noopener nofollow\">JAWS<\/a> that is one of the most widely used screen reading apps, and <a target=\"_blank\" href=\"https:\/\/support.microsoft.com\/en-us\/windows\/hear-text-read-aloud-with-narrator-040f16c1-4632-b64e-110a-da4a0ac56917\" rel=\"noopener\">Microsoft Narrator<\/a> that is Windows 10\u2019s built-in screen reader.<\/p>\n<p><strong>JAWS<\/strong> read aloud all areas, commands and menus diligently, however Narrator had some smaller issues with the task. For instance, it only read the top menu items properly when I moved across them with the mouse, but not when I used the <span class=\"key\">Down<\/span> arrow on my keyboard. This, however, is rather a shortcoming of Narrator, not Visual Studio Code, so we can safely assume that visually impaired users can access all VS Code functionalities by using a more advanced screen reader app.<\/p>\n<h3>6. Debugger Accessibility<\/h3>\n<p>To make an app fully accessible and inclusive, we also need to take care about parts that probably don\u2019t come at first to our mind. In case of Visual Studio Code, the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility#_debugger-accessibility\" rel=\"noopener\">Debugger<\/a> is a good example for this. The dev team paid attention to make it inclusive as well, therefore it also supports Tab and keyboard navigation, and it\u2019s screen reader accessible.<\/p>\n<h3>7. Localization<\/h3>\n<p>Now we are ready with discussing the accessibility features VS Code lists <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/accessibility\" rel=\"noopener\">in the docs<\/a>, but there are other important things as well we need to mention when we speak about the <strong>\u201cThink Universal\u201d<\/strong> inclusive design principle. One of these is <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/locales\" rel=\"noopener\">localization<\/a>, or with other words <strong>support for foreign languages <\/strong>as <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/locales\" rel=\"noopener\">display language<\/a>, as many people in the world are not native English speakers.<\/p>\n<p>Visual Studio Code is currently localized for <strong>10 different display languages<\/strong> <em>(English, Simplified Chinese, Traditional Chinese, French, German, Italian, Japanese, Korean, Russian, Spanish)<\/em>.<\/p>\n<p>Users coming from these languages don\u2019t even have to configure their display language, as VS Code <strong>picks up the display language of the operating system by default<\/strong>. If they want to set another language as display language, they can easily <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/getstarted\/locales#_configure-language-command\" rel=\"noopener\">configure their <code>locale.json<\/code> file<\/a>.<\/p>\n<p>Probably 10 display languages are not that many, but it\u2019s also not bad if we take into consideration that VS Code is a new software, and  Microsoft will most likely support more in the future. For now, users whose language is not among the supported ones get their VS Code installed in English.<\/p>\n<h3>8. Accessible Size<\/h3>\n<p>Modern source code editors are <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/Docs\/supporting\/faq#_how-big-is-vs-code\" rel=\"noopener\">not really large<\/a>, and Microsoft has also joined this trend, as Visual Studio Code is a <strong>less than 100 MB<\/strong> download, and its disk footprint is less than 200 MB.<\/p>\n<h3>9. Cross-Platform Development<\/h3>\n<p>If we want inclusive software, of course it also need to be <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/whyvscode\" rel=\"noopener\">cross-platform<\/a> that means it needs to run on different operating systems. VS Code meets this requirement, as it supports <strong>Windows, OS X and Linux<\/strong> as well.<\/p>\n<h2>2nd Principle: Make It Personal<\/h2>\n<p><strong>\u201cMake It Personal\u201d<\/strong> is Microsoft\u2019s second principle of inclusive design, and we\u2019ll have a look at <strong>customizability<\/strong> and <strong>extensibility<\/strong> under this criterion, as I promised it before. Visual Studio Code meets both requirements so nicely that I even wrote separate posts on both of them, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" rel=\"noopener\">here on customizability<\/a>, and <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-extensions\/\" rel=\"noopener\">here on extensibility<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/make-it-personal.jpg\" alt=\"Make it Personal\" width=\"700\" height=\"336\"><\/figure>\n<p>In short, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/customizing-visual-studio-code\/\" rel=\"noopener\">customizability<\/a> is implemented with <strong>custom themes<\/strong> and <strong>modularized JSON-format configuration settings<\/strong>, while <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-extensions\/\" rel=\"noopener\">extensibility<\/a> is achieved by <strong>custom extensions<\/strong> that users can download from the <a target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/VSCode\" rel=\"noopener\">Visual Studio Code Marketplace<\/a>, or <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/Docs\/extensions\/overview#_writing-an-extension\" rel=\"noopener\">create their own<\/a> in either TypeScript or JavaScript.<\/p>\n<p>You can read more on the technical background of Visual Studio Code\u2019s approach to extensibility <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/api\" rel=\"noopener\">here<\/a>.<\/p>\n<p>Customizability is solved in a way that\u2019s ideal to tech-savvy people who are the typical users of source code editors, as a significant part of it is implemented via <strong>modularized JSON-format configuration files<\/strong>.<\/p>\n<p>This is a great solution, as the configuration options are not hidden behind a huge menu hierarchy that\u2019s hard to see through. Users, even if they are not coding experts, can <strong>easily edit their custom <code>.json<\/code> files<\/strong>, as Visual Studio Code opens the default and the custom settings in two editor panes right next to each other, allowing users to easily experiment with them.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/user-settings.jpg\" alt=\"VS Code User Settings\" width=\"700\" height=\"392\"><\/figure>\n<p>Configuration files are modularized, they come as a logically structured hierarchy of <code>.json<\/code> files, here\u2019s a list of the most important ones:<\/p>\n<ol>\n<li><code>settings.json<\/code> for <strong>custom User Settings<\/strong>, accessible via the <code>File &gt; Preferences &gt; User Settings<\/code> menu<\/li>\n<li><code>.vscode\/settings.json<\/code> for <strong>custom Workspace Settings<\/strong>, accessible via the <code>File &gt; Preferences &gt; Workpraces Settings<\/code> menu<\/li>\n<li><code>keybindings.json<\/code> for <strong>custom Key Bindings<\/strong>, accessible via the <code>File &gt; Preferences &gt; Keyboard Shortcuts<\/code> menu<\/li>\n<li><code>javascript.json<\/code>, <code>php.json<\/code>, <code>css.json<\/code>, <code>c.json<\/code>, and a bunch of other <code>.json<\/code> files for different programming languages for setting up <strong>custom User Snippets<\/strong>, accessible via the <code>File &gt; Preferences &gt; User Snippets<\/code> menu<\/li>\n<li><code>launch.json<\/code> for <strong>custom Debugger Settings<\/strong>, accessible by clicking on the gear icon on Debug View\u2019s top bar (on the left of the editor)<\/li>\n<li><code>.vscode\/locale.json<\/code> for <strong>custom Display Language settings<\/strong>, accessible by typing the <code>Configure Language<\/code> command into the Command Palette (<span class=\"key\">F1<\/span>)<\/li>\n<li><code>.vscode\/tasks.json<\/code> for <strong>custom Task Runner Settings<\/strong>, accessible by typing the <code>Configure Task Runner<\/code> command into the Command Palette (<span class=\"key\">F1<\/span>)<\/li>\n<\/ol>\n<p>I think VS Code users can hardly complain about customizability, as even listing the options was an exhaustive task.<\/p>\n<p>As configuration options are modularized, users only have to take care of those <strong>they really need<\/strong>, which helps them keep focused on the tasks they want to perform. Thus, they will be left with a more intuitive workflow.<\/p>\n<h2> 3rd Principle: Keep It Simple<\/h2>\n<p>We can meet Microsoft\u2019s <strong>Keep It Simple<\/strong> inclusive design principle in many other places in programming and design, just think about the <a target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/KISS_principle\" rel=\"noopener\">KISS<\/a> (Keep It Simple, Stupid) design principle, and the <a target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Don't_repeat_yourself\" rel=\"noopener\">DRY<\/a> (Don\u2019t Repeat Yourself)  software development principle. For this running context, we\u2019ll keep our focus on the <strong>simplicity of the user interface<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/keep-it-simple.jpg\" alt=\"Keep it Simple\" width=\"700\" height=\"367\"><\/figure>\n<p>In terms of accessibility, an easy-to-use, simple user interface is usually recommended because of users who have <a target=\"_blank\" href=\"https:\/\/www.disabled-world.com\/disability\/types\/cognitive\/\" rel=\"noopener\">cognitive and intellectual disabilities<\/a>. Since Visual Studio Code is a source code editor, it\u2019s probably not a software that\u2019s frequently used by people who have this kind of impairment, however there may be some grey areas as well.<\/p>\n<p>Simplicity is not only important because of them though, as a well-designed, logical interface can also <strong>lower the learning curve<\/strong>, and <strong>increase the speed of work<\/strong>, making a software more appealing to the general population as well.<\/p>\n<p>Visual Studio Code also <strong>leverages the well-known psyhological phenomenon, <\/strong>the <a target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Mere-exposure_effect\" rel=\"noopener\">mere-exposure effect<\/a> (or <em>familiarity phenomenon<\/em>), as it adopts a <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/codebasics\" rel=\"noopener\">basic layout<\/a> that\u2019s similar to the layout other well-known source code editors, such as Atom, use.<\/p>\n<p>From the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/codebasics\" rel=\"noopener\">docs<\/a> we can get to know that it was an endeavour Microsoft put a huge impact on:<\/p>\n<p class=\"note\">\"Like many other code editors, VS Code adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.\"<\/p>\n<p>VS Code also provides users with the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/codebasics#_side-by-side-editing\" rel=\"noopener\">Side by Side Editing<\/a> feature that can also be found in other source code editors, and it\u2019s not a coincidence, as <strong>it makes the coding process much simpler<\/strong>, and of course contributes to the \u201cKeep It Simple\u201d inclusive design principle, too.<\/p>\n<p>On top of the basic UI, Visual Studio Code has <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/visual-studio-code-features\/\" rel=\"noopener\">cool features<\/a> that\u2019s worth mentioning in an article about inclusive design, such as:<\/p>\n<ul>\n<li> <strong>Intellisense<\/strong> that provides users with suggestions based on context (the backend part that uses artificial intelligence is also a nice solution)<\/li>\n<li><strong>Peek<\/strong> (<span class=\"key\">Shift<\/span> + <span class=\"key\">F12<\/span>) that displays complete function definitions in an inline window<\/li>\n<li><strong>Command Palette<\/strong> (<span class=\"key\">F1<\/span>) that makes all commands accessible at the same place.<\/li>\n<\/ul>\n<h2>4th principle: Create Delight<\/h2>\n<p>It\u2019s not especially easy to find tangible criteria we can use to examine the <strong>\u201cCreate Delight\u201d<\/strong> inclusive design principle, so I finally settled for the criterion of <strong>feature discoverability<\/strong>, as Microsoft defined this principle the following way:<\/p>\n<p class=\"note\">\"Delightful experiences evoke wonder and discovery. Sometimes it\u2019s magical. Sometimes it\u2019s a detail that\u2019s just right. We design these moments to feel like a welcomed change in tempo. The result is an experience that has momentum and flow.\"<\/p>\n<p>This phrasing may remind many of you of <a target=\"_blank\" href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/micro-moments\/\" rel=\"noopener\">micro-moments<\/a>, one of Google\u2019s latest big thing, and therefore show how leading technology companies may come to similar conclusions when they think about how to move the industry forward.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/create-delight.jpg\" alt=\"Create Delight\" width=\"700\" height=\"348\"><\/figure>\n<p>In inclusive design, it\u2019s very important to <strong>engage users<\/strong>, and <strong>arouse their curiosity<\/strong>, that we can achieve probably the best if we <strong>help them move forward<\/strong> when they reached a certain point in their user journey. Just <strong>in the right moment<\/strong>, not before, not after.<\/p>\n<p>When we speak about <strong>feature discoverability<\/strong>, the more worldly manifestation of creating delight, it can be increased by things like <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/\" rel=\"noopener\">well-designed utility navigation<\/a>, smart documentation, and supportive information that pops up only in the right moment.<\/p>\n<p>We can find examples for all of these features in Visual Studio Code, just think about the aforementioned <strong>IntelliSense<\/strong> and <strong>Command Palette<\/strong>, but <strong>syntax highlighting<\/strong> and <strong>custom code snippets<\/strong> can also help users to make the most of the software. You need to judge for yourself whether using Visual Studio Code leaves you with the feeling of delight.<\/p>\n<p>For myself, I more or less liked the experience: the <strong>well-structured <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/Docs\" rel=\"noopener\">online documentation<\/a><\/strong>, the <strong>easy-to-navigate <a target=\"_blank\" href=\"https:\/\/marketplace.visualstudio.com\/VSCode\" rel=\"noopener\">Visual Studio Code Marketplace<\/a><\/strong>, and the <strong>custom colour themes<\/strong> that can be previewed real-time while scrolling a drop-down list (access it via the <code>File &gt; Preferences &gt; Color Theme<\/code> menu).<\/p>\n<h2>Final Words<\/h2>\n<p>As inclusive design is a new field, the technology industry is still at the experimentation phase. I think Microsoft made a significant milestone by <strong>defining the four principles of inclusive design<\/strong>.<\/p>\n<p>As we could have seen, they managed to successfully implement the theory in practice in their new source code editor, Visual Studio Code, although there are still some fields to improve, such as providing full Tab support and a <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/editor\/codebasics#_common-questions\" rel=\"noopener\">global Search and Replace feature<\/a>.<\/p>\n<p>As both accessibility and inclusivity are <strong>parts of user experience<\/strong>, it can be a good idea to learn more about them if you want to keep up with the latest industry trends. Here are resources that may help:<\/p>\n<ul>\n<li>Windows Dev Center\u2019s <a target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/design\/accessibility\/accessibility\" rel=\"noopener\">accessibility articles<\/a> <\/li>\n<li>Microsoft Design\u2019s <a target=\"_blank\" href=\"https:\/\/download.microsoft.com\/download\/B\/0\/D\/B0D4BF87-09CE-4417-8F28-D60703D672ED\/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf\" rel=\"noopener\">Inclusive Design Toolkit manual (PDF)<\/a> (downloadable)<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes accessible design to the next level, as it views accessibility from a much broader perspective. When I was testing Microsoft\u2019s new source code editor, Visual Studio Code, the question of how they implemented&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[55,3772],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Microsoft Inclusive Design in Visual Studio Code [Case Study]<\/title>\n<meta name=\"description\" content=\"Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes\" \/>\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\/microsoft-inclusive-design-vscode\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boost Your Design with Microsoft&#039;s Inclusive Visual Studio Code\" \/>\n<meta property=\"og:description\" content=\"Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/\" \/>\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-05-30T13:01:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:21:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\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=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Boost Your Design with Microsoft&#8217;s Inclusive Visual Studio Code\",\"datePublished\":\"2016-05-30T13:01:49+00:00\",\"dateModified\":\"2023-04-06T11:21:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/\"},\"wordCount\":2566,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microsoft-inclusive-design-vscode\\\/think-universal.jpg\",\"keywords\":[\"Microsoft\",\"visual studio code\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/\",\"name\":\"Microsoft Inclusive Design in Visual Studio Code [Case Study]\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microsoft-inclusive-design-vscode\\\/think-universal.jpg\",\"datePublished\":\"2016-05-30T13:01:49+00:00\",\"dateModified\":\"2023-04-06T11:21:34+00:00\",\"description\":\"Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microsoft-inclusive-design-vscode\\\/think-universal.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/microsoft-inclusive-design-vscode\\\/think-universal.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/microsoft-inclusive-design-vscode\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Boost Your Design with Microsoft&#8217;s Inclusive Visual Studio Code\"}]},{\"@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\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Microsoft Inclusive Design in Visual Studio Code [Case Study]","description":"Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes","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\/microsoft-inclusive-design-vscode\/","og_locale":"en_US","og_type":"article","og_title":"Boost Your Design with Microsoft's Inclusive Visual Studio Code","og_description":"Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes","og_url":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-05-30T13:01:49+00:00","article_modified_time":"2023-04-06T11:21:34+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Boost Your Design with Microsoft&#8217;s Inclusive Visual Studio Code","datePublished":"2016-05-30T13:01:49+00:00","dateModified":"2023-04-06T11:21:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/"},"wordCount":2566,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg","keywords":["Microsoft","visual studio code"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/","url":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/","name":"Microsoft Inclusive Design in Visual Studio Code [Case Study]","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg","datePublished":"2016-05-30T13:01:49+00:00","dateModified":"2023-04-06T11:21:34+00:00","description":"Universal, or inclusive design is a new design philosophy Microsoft seems to take quite seriously in software development recently. Inclusive design takes","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/microsoft-inclusive-design-vscode\/think-universal.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/microsoft-inclusive-design-vscode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Boost Your Design with Microsoft&#8217;s Inclusive Visual Studio Code"}]},{"@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\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6TV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26531","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\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26531"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26531\/revisions"}],"predecessor-version":[{"id":66051,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26531\/revisions\/66051"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26531"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}