{"id":1385,"date":"2012-08-16T00:00:00","date_gmt":"2012-08-16T00:00:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/rapid-prototyping-the-mvc-working-model\/"},"modified":"2021-05-17T18:34:58","modified_gmt":"2021-05-17T18:34:58","slug":"rapid-prototyping-the-mvc-working-model","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/rapid-prototyping-the-mvc-working-model\/","title":{"rendered":"Rapid Prototyping, the MVC Working Model"},"content":{"rendered":"<div id=\"pretty\">\n<p class=\"start\">In just about every industry, rapid prototyping is described as &#8220;A group of techniques used to quickly produce a <strong>working model<\/strong>&#8220;, and web development should be no different. Rapid prototyping allows developers to quickly communicate and collaborate on the product they are creating while investing minimal resources. When used effectively, a prototype can provide structure to a project, ensuring that the development team and the customer are working towards the same vision and goal. <\/p>\n<h2>Tools of the trade <\/h2>\n<p>Rapid prototyping in web development is a swiftly growing practice. Developers and designers are utilizing techniques such as wire framing, story boarding, and mood boards to communicate the user experience to their audience and clients. As a result, specialty prototyping tools have become integrated into design process. <\/p>\n<p>Of course, prototyping tools don&#8217;t have to be hi-tech; they range from the simplistic pen and stencil wire-frame to dedicated software like SketchFlow, and Balsamiq mockups. Regardless of their sophistication, these tools effectively produce visuals for team and customer collaboration, but which exist <em>outside<\/em> of the native environment of the web. <\/p>\n<h2>Incomplete experiences <\/h2>\n<p>Simple wireframes are a great start, and while more advanced tools like SketchFlow provide additional user interactivity, they don&#8217;t necessarily produce a true &#8220;working model&#8221;. The web and it&#8217;s multitude of viewing devices is a highly versatile and quickly evolving platform, and attempting to provide a working model from mockups or wireframes is a significant challenge. <\/p>\n<p>Traditional wireframes fail to communicate several key experiences including: <\/p>\n<ul>\n<li>Device rotation &amp; multiple device resolutions and snap. Experiences created for responsive design would require numerous wireframes.  <\/li>\n<li>User context; experiences will vary from large to small displays.  <\/li>\n<li>Input capabilities, which can vary from desktop to mobile.  <\/li>\n<li>Application flow, which not all prototyping tools can simulate. <\/li>\n<\/ul>\n<h2>Coded Wireframes with ASP.NET MVC <\/h2>\n<p>Coded wireframes can solve many of the issues with traditional wireframes. Using ASP.NET MVC and a few open source frameworks, we can achieve our goal of a working model that is displayed natively in the browser. While ASP.NET MVC probably isn&#8217;t the first tool that jumps to mind when considering a prototyping toolset, it is actually ideal for coded wireframes; it is extremely flexible (thanks to NuGet package manager), and also gives us full control over the HTML rendered. <\/p>\n<p>With that in mind, let&#8217;s look at a few tools that, when combined with ASP.NET MVC, allow us to easily create rich, functional prototypes. <\/p>\n<h2>Generating placeholder content <\/h2>\n<p>To start with, we should discuss <a href=\"http:\/\/nuget.org\/packages\/Prototyping_MVC\">Prototyping for MVC<\/a> &#8211; an open source tool that I created specifically for rapid prototyping with ASP.NET MVC. Prototyping for MVC is a collection of HTML helpers that rely on the <a href=\"http:\/\/code.google.com\/p\/nlipsum\/\">NLIpsum generator<\/a> to create Lorem Ipsum (a Latin placeholder text). These Lorem Ipsum strings can either be generated with or without surrounding HTML tags and are highly configurable via fluent API. In addition to Lorem Ipsum, the HTML helpers can also create placeholder images via the Placehold.it web service, using a wrapper which calls the URL needed to generate the placeholder image. By combining these fantastic resources into a tool that organizes their API calls as a simple set of HTML helper methods, prototyping in MVC feels like a natural part of ASP.NET MVC development. <\/p>\n<p>Installing Prototyping for MVC is done by adding the <strong>Prototyping_MVC<\/strong> package from the NuGet package manager or command line. <\/p>\n<h2>Generating text <\/h2>\n<p>Once the package has been installed, add a reference to the top of any view with a &#8220;using&#8221; directive: <\/p>\n<ul>\n<li>\/\/Lorem Ipsum helpers  <\/li>\n<li>@using Prototyping.Ipsum  <\/li>\n<li>@using Prototyping.Placeholdit <\/li>\n<\/ul>\n<p>The HTML helper is given a new set of extension methods for generating Lorem Ipsum. The methods represent the tag that the placeholder text will be contained in: &#8220;h1&#8221;, &#8220;h2&#8221;, &#8220;p&#8221;, &#8220;ul&#8221; and more. Additional methods for creating just text are included for when surrounding tags are not required: &#8220;Words&#8221; and &#8220;Paragraphs&#8221;. Each method is fully configurable by passing parameters, and full method chaining is also supported for creating sequences of elements off of one method call: <\/p>\n<pre class=\"lang:c# theme:vs2012\">@{\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;\/\/Paragraph of Ipsum text surrounded by &lt;p&gt; tags\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p()\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;\/\/Two words of Ipsum surrounded by an &lt;h1&gt; tag\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h1()\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;\/\/Configurable HTML example\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;\/\/Paragraph with the attribute class=\"fancy\"\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p(htmlAttributes: new { @class = \"fancy\" })\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;\/\/h2 tag, with the attribute data-special=\"true\"\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h2(5, new { data_special = \"true\" }) \n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;\/\/Method chaining with fluent api\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h1().p().h2().p().h3().ol(10, 3, true)\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;} <\/pre>\n<h2>Generating Images <\/h2>\n<p>The &#8220;Placehold&#8221; method generates placeholder images of custom dimension, color and overlay text. The method calls the Placehold.it service, which accepts a URL like &#8220;http:\/\/placehold.it\/300&#215;400&#8221; and unsurprisingly, returns an image with the dimensions 300 x 400 pixels. To even further simplify the usage of this service the method wraps it all nicely into an HTML helper with parameters for customization. For example: <\/p>\n<pre class=\"lang:c# theme:vs2012\">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@*An image 300w x 400h*@\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Placehold(300, 400)\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@*An image blue image with placeholder text*@\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Placehold(300, 400, \"image text\", \"003366\") <\/pre>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-placeholdit-39ce54fe-5ae2-44e8-bc79-089682349385.PNG\" alt=\"1541-placeholdit-39ce54fe-5ae2-44e8-bc79\" \/><\/p>\n<p class=\"caption\">Image placeholders <\/p>\n<h2>Generating Wireframes <\/h2>\n<p>Next, Foundation Framework is a CSS and HTML responsive design framework built by Zurb, and it provides a great wire framing platform. Foundation was designed for HTML wireframes, and so its sketch-like styling conveys the sense that what you are creating is a prototype, while it&#8217;s completely customizable CSS overrides make it easy to convert to production-ready designs. Foundation includes all of the basic elements for websites and applications: tabs, modal dialogs, and image slider, buttons, form elements and more. As I&#8217;m sure you can imagine, a powerful framework such as Foundation not only aides the prototyping process, but also makes the transition from wireframe to finished product a snap. <\/p>\n<p>Foundation is an open source project that aims to be platform independent, and while it can be downloaded as plain HTML, CSS and JavaScript, platform-specific versions are also available for Ruby, WordPress, and ASP.NET MVC. I&#8217;ve taken the responsibility of packaging the ASP.NET MVC port of Foundation, and it i shared on NuGet for easy installation. <\/p>\n<div class=\"note\">\n<p class=\"note\">A full write up and tutorial of Responsive Design using Foundation with Asp.Net MVC can be found <a href=\"http:\/\/www.simple-talk.com\/dotnet\/asp.net\/responsive-design-using-foundation-with-asp.net-mvc\/\">here on Simple-Talk<\/a>. <\/p>\n<\/div>\n<h2>Foundation in Action <\/h2>\n<p>Foundation&#8217;s responsive grid makes short work of difficult layouts that will work across a wide scope of devices and, for fined grained control, the grid supports nesting, mobile visibility classes, and source ordering. These features will ensure that your wireframe is functional and presentable on most, if not all devices. <\/p>\n<p>The example below shows a two column page with left navigation, placeholders fill out the wireframe: <\/p>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"row\"&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"three columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;h5&gt;Navigation&lt;\/h5&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().dl(links: true, dlAttributes: new { @class = \"tabs vertical\" })\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"nine columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;h1&gt;Some content&lt;\/h1&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;\/div&gt; <\/pre>\n<p>Foundation also supports mobile wireframes via mobile-specific CSS classes. By default the grid will stack vertically on mobile devices but, for cases where a grid on mobile is needed, a four column grid is available. In the spirit of responsive design, the mobile grid classes are added to already existing elements and will simply take effect at mobile resolutions. <\/p>\n<p>The example below shows a grid layout of three \/ nine on the desktop and a one \/ three layout on mobile: <\/p>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"row\"&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"three phone-one columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h2().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"nine phone-three columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h1().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<p>In addition to a mobile grid, visibility classes are provided for controlling the display of particular elements at specific resolutions, or based on device capability. For example, we can show or hide different navigation types depending on the user&#8217;s context. Visibility classes give a great starting point for targeting specific resolutions, and more targeted media-queries can be developed as the design is tested and iterated through: <\/p>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"row show-on-phones\"&gt;\n&#160;&#160;&#160;&#160;&lt;select id=\"mobileNav\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=\"#\"&gt;Menu...&lt;\/option&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=\"#\"&gt;@Html.Ipsum().Words(2)&lt;\/option&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=\"#\"&gt;@Html.Ipsum().Words(2)&lt;\/option&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=\"#\"&gt;@Html.Ipsum().Words(2)&lt;\/option&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;option value=\"#\"&gt;@Html.Ipsum().Words(2)&lt;\/option&gt;\n&#160;&#160;&#160;&#160;&lt;\/select&gt;\n&lt;\/div&gt;\n&lt;div class=\"row\"&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"three columns hide-on-phones\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;h5&gt;Navigation&lt;\/h5&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().dl(links: true, dlAttributes: new { @class = \"tabs vertical\" })\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"nine columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h1().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;\/div&gt; <\/pre>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-nav-example-543ed12a-b66e-4699-9d06-f0e4f1c30572.PNG\" alt=\"1541-nav-example-543ed12a-b66e-4699-9d06\" \/><\/p>\n<p class=\"caption\">Desktop navigation <\/p>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-nav-example-mobile-94bf960b-a624-4d92-9c18-5d667e722faf.PNG\" alt=\"1541-nav-example-mobile-94bf960b-a624-4d\" \/><\/p>\n<p class=\"caption\">Mobile Navigation <\/p>\n<h2>Putting it all together <\/h2>\n<p>These tools are powerful in their own right, but combining Prototyping for MVC and Foundation provides a fairly complete platform for the working model. Prototyping for MVC&#8217;s methods streamline the creation of placeholder text and images, and Foundation&#8217;s highly organized grid increases code readability, making layouts easy to manipulate. Sections of layout can even be moved via drag and drop or cut and paste without the worry of leaving improper HTML markup. <\/p>\n<p>Some examples: <\/p>\n<h3><strong>Left navigation<\/strong><strong>:<\/strong> <\/h3>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"row\"&gt;\n&#160;&#160;&#160;&#160;&lt;!-- Left Nav --&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"three columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;h5&gt;Navigation&lt;\/h5&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().dl(links: true, dlAttributes: new { @class = \"tabs vertical\" })\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&#160;&#160;&#160;&#160;&lt;!-- Content --&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"nine columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h1().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;\/div&gt; <\/pre>\n<h3><strong>Right navigation<\/strong><strong>:<\/strong> <\/h3>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"row\"&gt;\n&#160;&#160;&#160;&#160;&lt;!-- Content--&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"three columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h1().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&#160;&#160;&#160;&#160;&lt;!-- Right Nav --&gt;\n&#160;&#160;&#160;&#160;&lt;div class=\"nine columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;h5&gt;Navigation&lt;\/h5&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().dl(links: true, dlAttributes: new { @class = \"tabs vertical\" })\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;\/div&gt; <\/pre>\n<p>Element widths can also be changed with ease by changing the CSS class of an element. <\/p>\n<h3>Two elements of equal width: <\/h3>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"six columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h2()\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Placehold(300, 300)\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;div class=\"six columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h2()\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Placehold(600, 300)\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt; <\/pre>\n<h3>Two elements golden ratio: <\/h3>\n<pre class=\"lang:xhtml theme:github\">&lt;div class=\"four columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h2()\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Placehold(300, 300)\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt;\n&lt;div class=\"eight columns\"&gt;\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().h2()\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Placehold(600, 300)\n&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;@Html.Ipsum().p()\n&#160;&#160;&#160;&#160;&lt;\/div&gt; <\/pre>\n<p>Since the process of making changes to the prototype is greatly simplified, faster iteration is possible. Customers are then able to see a prototype working in its native environment, make suggestions, and see results much quicker. In addition, since we are dealing with a working model, application flow is also clearly understood, allowing user experience problems to be identified and dealt with early on. <\/p>\n<p>The images below show an example of application flow using rapid prototyping: <\/p>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-appFlow-1-5840ea80-7843-489f-bf0f-f3b82bb0fafc.PNG\" alt=\"1541-appFlow-1-5840ea80-7843-489f-bf0f-f\" \/><\/p>\n<p class=\"caption\">Application home &#8211; RSVP App. <\/p>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-appFlow-2-logon-ff049280-8a95-41f7-b207-92747c3f3a5f.PNG\" alt=\"1541-appFlow-2-logon-ff049280-8a95-41f7-\" \/><\/p>\n<p class=\"caption\">Log On Modal <\/p>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-appFlow-3-4e921644-258b-4b48-80b8-c96ab6065a3f.PNG\" alt=\"1541-appFlow-3-4e921644-258b-4b48-80b8-c\" \/><\/p>\n<p class=\"caption\">Details View <\/p>\n<p class=\"illustration\"><img decoding=\"async\" src=\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/imported\/1541-appFlow-4-a5d6ec13-5bde-45a7-9d1a-404446454583.PNG\" alt=\"1541-appFlow-4-a5d6ec13-5bde-45a7-9d1a-4\" \/><\/p>\n<p class=\"caption\">RSVP Success <\/p>\n<h2>Conclusion <\/h2>\n<p>Rapid prototyping can and should be an essential part of the development process; with just a few NuGet packages, ASP.NET MVC is transformed into a powerful rapid prototyping tool. Prototyping for MVC&#8217;s condensed markup combined with the organized grid system of Foundation simplifies the process, allowing us to iterate faster <em>and more effectively<\/em>. <\/p>\n<p>By moving the prototype into its intended native environment we can communicate a working model that is far more representative of the final product and relevant on all devices, and thus more valuable to you. <\/p>\n<h3>Examples <\/h3>\n<p>A Visual Studio project containing all of the examples outlined in this article can be <a href=\"https:\/\/github.com\/EdCharbeneau\/RapidPrototypingMVCExamples\">downloaded from GitHub<\/a>. <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve ever had to build a working model from scratch, or produce a quick prototype for something, you know it&#8217;s trickier than it sounds. Thankfully, Ed Charbeneau shows us the tools he uses to make it both quick and easy to produce fantastic (and fantastic-looking) working prototypes in ASP.NET MVC.&hellip;<\/p>\n","protected":false},"author":58772,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[4143,4156,4157,5166,5702],"coauthors":[],"class_list":["post-1385","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","tag-net","tag-asp","tag-asp-net","tag-mvc","tag-rapid-prototyping"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/1385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/58772"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=1385"}],"version-history":[{"count":5,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/1385\/revisions"}],"predecessor-version":[{"id":91067,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/1385\/revisions\/91067"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=1385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=1385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=1385"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=1385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}