/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "One of the first PC games I played was Starcraft and the expansion Starcraft: Broodwar. We didn’t have a PC, so I had to play it on a friend’s computer, but I remember being immersed in the real-time strategy gameplay."
    }), "\n", _jsxs(_components.p, {
      children: ["Later, I would get a PC and bought my own copy of Starcraft. This was years later, but the community for the game was still impressive. Joining one of the older Starcraft forums, I discovered “mods” for the game. The most popular ones were just graphical changes, but that concept of changing a game to display your own graphics was so interesting to me. I’m not sure how I stumbled on it, but I found ", _jsx(_components.a, {
        href: "http://www.staredit.net/",
        children: "http://www.staredit.net/"
      }), " (yes, it’s still active!) and I learned that you could do so much more than just change the graphics of Starcraft with mods. There were people in the community working on hooking into existing Starcraft code to modify the gameplay and graphics using C++."]
    }), "\n", _jsx(_components.h2, {
      children: "Diving deep"
    }), "\n", _jsx(_components.p, {
      children: "In order to create these mods, we needed to know the hex address of different functions that Starcraft would call during them game. And to do anything meaningful, we also needed to know the structure of units and sprites and where those were stored as well. A lot of this base work required using tools like OllyDbg to analyze the assembly of the Starcraft executable, and ArtMoney for analyzing the memory of the game while it was executing."
    }), "\n", _jsx(_components.p, {
      children: "I used OllyDbg to find what functions Starcraft would call during execution – from common functions like the game-loop, to highly specialized functions like checking supply limits. ArtMoney let us determine how structures like units were laid out – where each unit’s health was stored, how much damage each weapon would do, and more."
    }), "\n", _jsxs(_components.p, {
      children: ["Most of this information was shared in forums, chat rooms, and a few disparate sites for looking up hex addresses. Of course, no write up about modding Starcraft is complete without mentioning all the work from ShadowFlare (check out ", _jsx(_components.a, {
        href: "https://sfsrealm.hopto.org/",
        children: "ShadowFlare’s realm"
      }), " for all the work they did), the great people at Staredit.Net, and plenty of others who built amazing tools to work with Starcraft files. All these sites were amazing resources for figuring out file specs and working with the Starcraft engine."]
    }), "\n", _jsx(_components.p, {
      children: "However, each time I wanted to write a new mod or experiment with an idea, I’d have to look up all of this information across all of these sites."
    }), "\n", _jsx(_components.h2, {
      children: "Bringing it together"
    }), "\n", _jsx(_components.p, {
      children: "The goal with GPTP (General Plugin Template Project), was to take all of this work that the amazing modding community had done and bring it together into a C++ Visual Studio project that could be copied for a new mod."
    }), "\n", _jsx(_components.p, {
      children: "My initial idea was simple: take all of the code for injecting new function hooks into Starcraft and wrap it in some very friendly functions. When a modder would come in to create a new project, they would have three functions exposed to them to work with: gameStart, gameLoop, gameEnd (I don’t remember the exact names I gave them at the time)."
    }), "\n", _jsx(_components.p, {
      children: "I released the initial GPTP back in 2008-2009. This included the project setup for compiling and producing a QDP file that could be loaded into Starcraft. Additionally, it contained known structures and hex addresses that developers could use to build their mod. The Intellisense autocomplete feature really helped developers leverage these structures."
    }), "\n", _jsx(_components.h2, {
      children: "The power of open source"
    }), "\n", _jsx(_components.p, {
      children: "I made the original version of GPTP back in high school, but I didn’t have time to continue to work on it when I went to university. I returned to the community a decade later, and found that not only was the community still alive and working on mods, but that they were using GPTP. At this point, GPTP was unrecognizable from my original work; the goal was the same, but the quality of the code was greatly improved and the number of hooks, known structures, and addresses was much more impressive."
    }), "\n", _jsxs(_components.p, {
      children: ["You can view the project on Github: ", _jsx(_components.a, {
        href: "https://github.com/SCMapsAndMods/general-plugin-template-project",
        children: "general-plugin-template-project"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "I’d like to thank open source for this sort of development. The amount of work that has been continually added onto this project couldn’t have been done without all the contributions from the community."
    }), "\n", _jsx(_components.h2, {
      children: "Does it still work?"
    }), "\n", _jsx(_components.p, {
      children: "I recently went back to Starcraft modding as a fun little project. I wanted to hop in and see how easy or difficult it would be to create a mod in 2020."
    }), "\n", _jsx(_components.p, {
      children: "One of the harder things to do in 2020 is find all the tools and initial setup for modding Starcraft. Some of the modding sites are down for good, and with them the knowledge they contained."
    }), "\n", _jsx(_components.p, {
      children: "But, I pulled together the tools (thanks PyMS), pulled together tutorials and other instructions into a Notion document, and created my first Starcraft mod!"
    }), "\n", _jsx(_components.p, {
      children: "Gathering all the tools was the hard part. After that, it was actually very straightforward creating a new GPTP template and mod. All of the known structures and hooks are pretty self-explanatory and I was able to even add my own hooks once I found the hex addresses using OllyDbg."
    }), "\n", _jsx(_components.h2, {
      children: "Looking forward"
    }), "\n", _jsx(_components.p, {
      children: "Starcraft modding is like an ancient art at this point. There isn’t a large audience for it, so in general, any new mod will be played by maybe 10 people. But to me, it’s a combination of nostalgia, hard work, tinkering, discovery, and creation that makes it so much fun. That feeling of finding a new function to hook onto, writing C++ code that injects itself into it, and then running the code in the Starcraft engine and seeing it work is a special kind of rewarding experience."
    }), "\n", _jsx(_components.h2, {
      children: "Thanks"
    }), "\n", _jsxs(_components.p, {
      children: ["I’d like to give thanks to everyone who has ever contributed to the modding community for Starcraft. There are so many names that I couldn’t possibly name them all, but please check of ", _jsx(_components.a, {
        href: "http://staredit.net",
        children: "http://staredit.net"
      }), " if any of this interests you."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>One of the first PC games I played was Starcraft and the expansion Starcraft: Broodwar. We didn’t have a PC, so I had to play it on a friend’s computer, but I remember being immersed in the real-time strategy gameplay.</p>
<p>Later, I would get a PC and bought my own copy of Starcraft. This was years later, but the community for the game was still impressive. Joining one of the older Starcraft forums, I discovered “mods” for the game. The most popular ones were just graphical changes, but that concept of changing a game to display your own graphics was so interesting to me. I’m not sure how I stumbled on it, but I found <a href="http://www.staredit.net/">http://www.staredit.net/</a> (yes, it’s still active!) and I learned that you could do so much more than just change the graphics of Starcraft with mods. There were people in the community working on hooking into existing Starcraft code to modify the gameplay and graphics using C++.</p>
<h2>Diving deep</h2>
<p>In order to create these mods, we needed to know the hex address of different functions that Starcraft would call during them game. And to do anything meaningful, we also needed to know the structure of units and sprites and where those were stored as well. A lot of this base work required using tools like OllyDbg to analyze the assembly of the Starcraft executable, and ArtMoney for analyzing the memory of the game while it was executing.</p>
<p>I used OllyDbg to find what functions Starcraft would call during execution – from common functions like the game-loop, to highly specialized functions like checking supply limits. ArtMoney let us determine how structures like units were laid out – where each unit’s health was stored, how much damage each weapon would do, and more.</p>
<p>Most of this information was shared in forums, chat rooms, and a few disparate sites for looking up hex addresses. Of course, no write up about modding Starcraft is complete without mentioning all the work from ShadowFlare (check out <a href="https://sfsrealm.hopto.org/">ShadowFlare’s realm</a> for all the work they did), the great people at Staredit.Net, and plenty of others who built amazing tools to work with Starcraft files. All these sites were amazing resources for figuring out file specs and working with the Starcraft engine.</p>
<p>However, each time I wanted to write a new mod or experiment with an idea, I’d have to look up all of this information across all of these sites.</p>
<h2>Bringing it together</h2>
<p>The goal with GPTP (General Plugin Template Project), was to take all of this work that the amazing modding community had done and bring it together into a C++ Visual Studio project that could be copied for a new mod.</p>
<p>My initial idea was simple: take all of the code for injecting new function hooks into Starcraft and wrap it in some very friendly functions. When a modder would come in to create a new project, they would have three functions exposed to them to work with: gameStart, gameLoop, gameEnd (I don’t remember the exact names I gave them at the time).</p>
<p>I released the initial GPTP back in 2008-2009. This included the project setup for compiling and producing a QDP file that could be loaded into Starcraft. Additionally, it contained known structures and hex addresses that developers could use to build their mod. The Intellisense autocomplete feature really helped developers leverage these structures.</p>
<h2>The power of open source</h2>
<p>I made the original version of GPTP back in high school, but I didn’t have time to continue to work on it when I went to university. I returned to the community a decade later, and found that not only was the community still alive and working on mods, but that they were using GPTP. At this point, GPTP was unrecognizable from my original work; the goal was the same, but the quality of the code was greatly improved and the number of hooks, known structures, and addresses was much more impressive.</p>
<p>You can view the project on Github: <a href="https://github.com/SCMapsAndMods/general-plugin-template-project">general-plugin-template-project</a>.</p>
<p>I’d like to thank open source for this sort of development. The amount of work that has been continually added onto this project couldn’t have been done without all the contributions from the community.</p>
<h2>Does it still work?</h2>
<p>I recently went back to Starcraft modding as a fun little project. I wanted to hop in and see how easy or difficult it would be to create a mod in 2020.</p>
<p>One of the harder things to do in 2020 is find all the tools and initial setup for modding Starcraft. Some of the modding sites are down for good, and with them the knowledge they contained.</p>
<p>But, I pulled together the tools (thanks PyMS), pulled together tutorials and other instructions into a Notion document, and created my first Starcraft mod!</p>
<p>Gathering all the tools was the hard part. After that, it was actually very straightforward creating a new GPTP template and mod. All of the known structures and hooks are pretty self-explanatory and I was able to even add my own hooks once I found the hex addresses using OllyDbg.</p>
<h2>Looking forward</h2>
<p>Starcraft modding is like an ancient art at this point. There isn’t a large audience for it, so in general, any new mod will be played by maybe 10 people. But to me, it’s a combination of nostalgia, hard work, tinkering, discovery, and creation that makes it so much fun. That feeling of finding a new function to hook onto, writing C++ code that injects itself into it, and then running the code in the Starcraft engine and seeing it work is a special kind of rewarding experience.</p>
<h2>Thanks</h2>
<p>I’d like to give thanks to everyone who has ever contributed to the modding community for Starcraft. There are so many names that I couldn’t possibly name them all, but please check of <a href="http://staredit.net">http://staredit.net</a> if any of this interests you.</p>


One of the first PC games I played was Starcraft and the expansion Starcraft: Broodwar. We didn’t have a PC, so I had to play it on a friend’s computer, but I remember being immersed in the real-time strategy gameplay.

Later, I would get a PC and bought my own copy of Starcraft. This was years later, but the community for the game was still impressive. Joining one of the older Starcraft forums, I discovered “mods” for the game. The most popular ones were just graphical changes, but that concept of changing a game to display your own graphics was so interesting to me. I’m not sure how I stumbled on it, but I found [http://www.staredit.net/](http://www.staredit.net/) (yes, it’s still active!) and I learned that you could do so much more than just change the graphics of Starcraft with mods. There were people in the community working on hooking into existing Starcraft code to modify the gameplay and graphics using C++.

## Diving deep

In order to create these mods, we needed to know the hex address of different functions that Starcraft would call during them game. And to do anything meaningful, we also needed to know the structure of units and sprites and where those were stored as well. A lot of this base work required using tools like OllyDbg to analyze the assembly of the Starcraft executable, and ArtMoney for analyzing the memory of the game while it was executing.

I used OllyDbg to find what functions Starcraft would call during execution – from common functions like the game-loop, to highly specialized functions like checking supply limits. ArtMoney let us determine how structures like units were laid out – where each unit’s health was stored, how much damage each weapon would do, and more.

Most of this information was shared in forums, chat rooms, and a few disparate sites for looking up hex addresses. Of course, no write up about modding Starcraft is complete without mentioning all the work from ShadowFlare (check out [ShadowFlare’s realm](https://sfsrealm.hopto.org/) for all the work they did), the great people at Staredit.Net, and plenty of others who built amazing tools to work with Starcraft files. All these sites were amazing resources for figuring out file specs and working with the Starcraft engine.

However, each time I wanted to write a new mod or experiment with an idea, I’d have to look up all of this information across all of these sites.

## Bringing it together

The goal with GPTP (General Plugin Template Project), was to take all of this work that the amazing modding community had done and bring it together into a C++ Visual Studio project that could be copied for a new mod.

My initial idea was simple: take all of the code for injecting new function hooks into Starcraft and wrap it in some very friendly functions. When a modder would come in to create a new project, they would have three functions exposed to them to work with: gameStart, gameLoop, gameEnd (I don’t remember the exact names I gave them at the time).

I released the initial GPTP back in 2008-2009. This included the project setup for compiling and producing a QDP file that could be loaded into Starcraft. Additionally, it contained known structures and hex addresses that developers could use to build their mod. The Intellisense autocomplete feature really helped developers leverage these structures.

## The power of open source

I made the original version of GPTP back in high school, but I didn’t have time to continue to work on it when I went to university. I returned to the community a decade later, and found that not only was the community still alive and working on mods, but that they were using GPTP. At this point, GPTP was unrecognizable from my original work; the goal was the same, but the quality of the code was greatly improved and the number of hooks, known structures, and addresses was much more impressive.

You can view the project on Github: [general-plugin-template-project](https://github.com/SCMapsAndMods/general-plugin-template-project).

I’d like to thank open source for this sort of development. The amount of work that has been continually added onto this project couldn’t have been done without all the contributions from the community.

## Does it still work?

I recently went back to Starcraft modding as a fun little project. I wanted to hop in and see how easy or difficult it would be to create a mod in 2020.

One of the harder things to do in 2020 is find all the tools and initial setup for modding Starcraft. Some of the modding sites are down for good, and with them the knowledge they contained.

But, I pulled together the tools (thanks PyMS), pulled together tutorials and other instructions into a Notion document, and created my first Starcraft mod!

Gathering all the tools was the hard part. After that, it was actually very straightforward creating a new GPTP template and mod. All of the known structures and hooks are pretty self-explanatory and I was able to even add my own hooks once I found the hex addresses using OllyDbg.

## Looking forward

Starcraft modding is like an ancient art at this point. There isn’t a large audience for it, so in general, any new mod will be played by maybe 10 people. But to me, it’s a combination of nostalgia, hard work, tinkering, discovery, and creation that makes it so much fun. That feeling of finding a new function to hook onto, writing C++ code that injects itself into it, and then running the code in the Starcraft engine and seeing it work is a special kind of rewarding experience.

## Thanks

I’d like to give thanks to everyone who has ever contributed to the modding community for Starcraft. There are so many names that I couldn’t possibly name them all, but please check of [http://staredit.net](http://staredit.net) if any of this interests you.


Revisiting GPTP - the Starcraft modding toolkit

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    a: "a"
  }, props.components), {Mermaid} = _components;
  if (!Mermaid) _missingMdxReference("Mermaid", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "Dark Emblem is an NFT project that was sparked by the idea of combining cards games with Crypto Kitties. You can buy packs, open them to collect random cards, and then use those cards to battle raids with others."
    }), "\n", _jsx(_components.p, {
      children: "To support all of the functionality, I created a WAX contract, written in C++, that I deployed to the WAX Blockchain. This contract handled the creation and storage of packs and cards, along with defining an in-game currency DREM."
    }), "\n", _jsx(_components.p, {
      children: "There was also a server that would sync with the changes on the Blockchain and provide some additional metadata on top of that. While Blockchains like ETH have stable public APIs that can be used to query data from the Blockchain through 3rd party vendors, WAX does not have the same maturity there. This meant that we would need to proxy requests that would normally be made to a WAX API mode through our servers instead."
    }), "\n", _jsx(_components.p, {
      children: "I also created a UI application to interact with the server and the Blockchain. The infrastructure ends up looking like:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph LR\n  WAX --> Dfuse\n Dfuse --> Listener(Dark Emblem Listener Service)\n  Listener --> Redis\n  Redis --> API(Dark Emblem API)\n  API --> Dapp\n  WAXEndpoint(WAX Endpoint) --> Dapp"
    }), "\n", _jsx(_components.p, {
      children: "One of the first steps to interacting with the dapp is to sign in. The authentication flow is similar to an oauth sign in where we let the user sign in with a third party authenticator and then issue a challenge for the user to verify they are who they say they are. At this point we issue a JWT for further API requests."
    }), "\n", _jsx(Mermaid, {
      chart: "sequenceDiagram\n  Dapp->>+3rdPartyAuthenticator: Request sign in\n  3rdPartyAuthenticator->>+Dapp: Wallet name\n  Dapp->>+DarkEmblemAPI: Request nonce\n  DarkEmblemAPI->>+Dapp: Send nonce\n  Dapp->>+3rdPartyAuthenticator: Sign nonce\n  3rdPartyAuthenticator->>+Dapp: Signed nonce\n  Dapp->>+DarkEmblemAPI: Send signed nonce\n  DarkEmblemAPI->>+Dapp: JWT"
    }), "\n", _jsx(_components.p, {
      children: "Once a user is logged in, they can fully interact with the Dark Emblem WAX contract via the UI. They can purchase packs, open them to get cards, and then use those cards in the Dark Emblem universe. The UI lets users combine Hero cards together to “Ascend” them into a new card. Or they can burn 3 Equipment cards to “Transmogrify” them into a single, better equipment card."
    }), "\n", _jsx(_components.p, {
      children: "Users can also participate in Raids, where they stake their cards to defeat an enemy monster – gaining $DREM and XP when they beat the monster."
    }), "\n", _jsx(_components.p, {
      children: "Dapp Schemas and Atomic Assets"
    }), "\n", _jsx(Mermaid, {
      chart: "classDiagram\n  class Card {\n    name: string\n  img: string\n  traits: number[]\n  matronid: number\n  sireid: number\n  rank: number\n  packid: string\n  cardtype: string\n  website: string\n  twitter: string\n  mintedat: number\n  rarity: string\n  cooldown: number\n  xp: number\n  }\n  class Raid {\n  asset_id: number\n  owner: name\n  staked_at: number\n  raid_id: number\n  }\n  class Staked {\n  asset_id: number\n  owner: name\n  staked_at: number\n  raid_id: number\n  }\n"
    }), "\n", _jsx(_components.p, {
      children: "The Dark Emblem project involves a lot of moving parts, and I’d love to dive deeper into each technical aspect in future blog posts."
    }), "\n", _jsx(_components.h2, {
      children: "Additional reading"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.darkemblem.com/blog/post/2023-04-02-new-site-released",
          children: "Dark Emblem Blog Announcement"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://capsulecat.com/blog/04-02-2023-dark-emblem-update/",
          children: "Capsule Cat Announcement"
        })
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


<p>Dark Emblem is an NFT project that was sparked by the idea of combining cards games with Crypto Kitties. You can buy packs, open them to collect random cards, and then use those cards to battle raids with others.</p>
<p>To support all of the functionality, I created a WAX contract, written in C++, that I deployed to the WAX Blockchain. This contract handled the creation and storage of packs and cards, along with defining an in-game currency DREM.</p>
<p>There was also a server that would sync with the changes on the Blockchain and provide some additional metadata on top of that. While Blockchains like ETH have stable public APIs that can be used to query data from the Blockchain through 3rd party vendors, WAX does not have the same maturity there. This meant that we would need to proxy requests that would normally be made to a WAX API mode through our servers instead.</p>
<p>I also created a UI application to interact with the server and the Blockchain. The infrastructure ends up looking like:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph LR
  WAX --&gt; Dfuse
 Dfuse --&gt; Listener(Dark Emblem Listener Service)
  Listener --&gt; Redis
  Redis --&gt; API(Dark Emblem API)
  API --&gt; Dapp
  WAXEndpoint(WAX Endpoint) --&gt; Dapp">graph LR
  WAX --&gt; Dfuse
 Dfuse --&gt; Listener(Dark Emblem Listener Service)
  Listener --&gt; Redis
  Redis --&gt; API(Dark Emblem API)
  API --&gt; Dapp
  WAXEndpoint(WAX Endpoint) --&gt; Dapp</div></div>
<p>One of the first steps to interacting with the dapp is to sign in. The authentication flow is similar to an oauth sign in where we let the user sign in with a third party authenticator and then issue a challenge for the user to verify they are who they say they are. At this point we issue a JWT for further API requests.</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="sequenceDiagram
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Request sign in
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Wallet name
  Dapp-&gt;&gt;+DarkEmblemAPI: Request nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: Send nonce
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Sign nonce
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Signed nonce
  Dapp-&gt;&gt;+DarkEmblemAPI: Send signed nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: JWT">sequenceDiagram
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Request sign in
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Wallet name
  Dapp-&gt;&gt;+DarkEmblemAPI: Request nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: Send nonce
  Dapp-&gt;&gt;+3rdPartyAuthenticator: Sign nonce
  3rdPartyAuthenticator-&gt;&gt;+Dapp: Signed nonce
  Dapp-&gt;&gt;+DarkEmblemAPI: Send signed nonce
  DarkEmblemAPI-&gt;&gt;+Dapp: JWT</div></div>
<p>Once a user is logged in, they can fully interact with the Dark Emblem WAX contract via the UI. They can purchase packs, open them to get cards, and then use those cards in the Dark Emblem universe. The UI lets users combine Hero cards together to “Ascend” them into a new card. Or they can burn 3 Equipment cards to “Transmogrify” them into a single, better equipment card.</p>
<p>Users can also participate in Raids, where they stake their cards to defeat an enemy monster – gaining $DREM and XP when they beat the monster.</p>
<p>Dapp Schemas and Atomic Assets</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="classDiagram
  class Card {
    name: string
  img: string
  traits: number[]
  matronid: number
  sireid: number
  rank: number
  packid: string
  cardtype: string
  website: string
  twitter: string
  mintedat: number
  rarity: string
  cooldown: number
  xp: number
  }
  class Raid {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
  class Staked {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
">classDiagram
  class Card {
    name: string
  img: string
  traits: number[]
  matronid: number
  sireid: number
  rank: number
  packid: string
  cardtype: string
  website: string
  twitter: string
  mintedat: number
  rarity: string
  cooldown: number
  xp: number
  }
  class Raid {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
  class Staked {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
</div></div>
<p>The Dark Emblem project involves a lot of moving parts, and I’d love to dive deeper into each technical aspect in future blog posts.</p>
<h2>Additional reading</h2>
<ul>
<li><a href="https://www.darkemblem.com/blog/post/2023-04-02-new-site-released">Dark Emblem Blog Announcement</a></li>
<li><a href="https://capsulecat.com/blog/04-02-2023-dark-emblem-update/">Capsule Cat Announcement</a></li>
</ul>


Dark Emblem is an NFT project that was sparked by the idea of combining cards games with Crypto Kitties. You can buy packs, open them to collect random cards, and then use those cards to battle raids with others.

To support all of the functionality, I created a WAX contract, written in C++, that I deployed to the WAX Blockchain. This contract handled the creation and storage of packs and cards, along with defining an in-game currency DREM.

There was also a server that would sync with the changes on the Blockchain and provide some additional metadata on top of that. While Blockchains like ETH have stable public APIs that can be used to query data from the Blockchain through 3rd party vendors, WAX does not have the same maturity there. This meant that we would need to proxy requests that would normally be made to a WAX API mode through our servers instead.

I also created a UI application to interact with the server and the Blockchain. The infrastructure ends up looking like:

```mermaid
graph LR
  WAX --> Dfuse
 Dfuse --> Listener(Dark Emblem Listener Service)
  Listener --> Redis
  Redis --> API(Dark Emblem API)
  API --> Dapp
  WAXEndpoint(WAX Endpoint) --> Dapp
```

One of the first steps to interacting with the dapp is to sign in. The authentication flow is similar to an oauth sign in where we let the user sign in with a third party authenticator and then issue a challenge for the user to verify they are who they say they are. At this point we issue a JWT for further API requests.

```mermaid
sequenceDiagram
  Dapp->>+3rdPartyAuthenticator: Request sign in
  3rdPartyAuthenticator->>+Dapp: Wallet name
  Dapp->>+DarkEmblemAPI: Request nonce
  DarkEmblemAPI->>+Dapp: Send nonce
  Dapp->>+3rdPartyAuthenticator: Sign nonce
  3rdPartyAuthenticator->>+Dapp: Signed nonce
  Dapp->>+DarkEmblemAPI: Send signed nonce
  DarkEmblemAPI->>+Dapp: JWT
```

Once a user is logged in, they can fully interact with the Dark Emblem WAX contract via the UI. They can purchase packs, open them to get cards, and then use those cards in the Dark Emblem universe. The UI lets users combine Hero cards together to “Ascend” them into a new card. Or they can burn 3 Equipment cards to “Transmogrify” them into a single, better equipment card.

Users can also participate in Raids, where they stake their cards to defeat an enemy monster – gaining $DREM and XP when they beat the monster.

Dapp Schemas and Atomic Assets

```mermaid
classDiagram
  class Card {
    name: string
  img: string
  traits: number[]
  matronid: number
  sireid: number
  rank: number
  packid: string
  cardtype: string
  website: string
  twitter: string
  mintedat: number
  rarity: string
  cooldown: number
  xp: number
  }
  class Raid {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }
  class Staked {
  asset_id: number
  owner: name
  staked_at: number
  raid_id: number
  }

```

The Dark Emblem project involves a lot of moving parts, and I’d love to dive deeper into each technical aspect in future blog posts.

## Additional reading

* [Dark Emblem Blog Announcement](https://www.darkemblem.com/blog/post/2023-04-02-new-site-released)
* [Capsule Cat Announcement](https://capsulecat.com/blog/04-02-2023-dark-emblem-update/)


Dark Emblem Rewrite

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    em: "em",
    hr: "hr",
    pre: "pre",
    code: "code"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["Looks like everyone is trying to discover ChatGPT’s limitations. In one article I read, the author asked whether ", _jsx(_components.a, {
        href: "https://medium.com/@theworldaccordingtocgpt/chatgpt-can-play-20-questions-7911405f7aff",
        children: "ChatGPT can play 20 questions"
      }), ". The human in this scenario tried to play 20 questions with ChatGPT, and found that they needed to guide the AI to ask questions. From my perspective, it looked more like a failure to engineer the initial prompt correctly."]
    }), "\n", _jsx(_components.p, {
      children: "I attempted to do 20 questions with ChatGPT using a different prompt:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: I would like to play a game. It's called twenty questions. You will ask me one question at a time and I will answer it. The goal is for you guess the thing I am thinking about."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Sure, I'd be happy to play \"Twenty Questions\" with you. Please go ahead and think of something, and I will start asking my first question."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: I am ready"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Great, here is my first question: Is the thing you are thinking of an object?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object something that you can hold in your hand?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object something that you would typically find in a kitchen?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: No"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object something that you would use for transportation?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: No"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object something that you would use for entertainment or leisure?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object a musical instrument?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: No"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object a type of game or puzzle?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: No"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object a piece of technology such as a phone or computer?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: No"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object a book or magazine?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object a novel or a collection of short stories?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object a specific book that is widely known and read?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object \"To Kill a Mockingbird\" by Harper Lee?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: No"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: I'm sorry, I'm running out of ideas. Can you give me a hint or tell me the answer?"
      })
    }), "\n", _jsx(_components.p, {
      children: "Seems like we hit a wall here with twenty questions, but ChatGPT is very close, so I decided to give a hint."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: You are on the right track. It is by Walt Whitman"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Is the object \"Leaves of Grass\" by Walt Whitman?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Yes! Congratulations!"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Thank you! I'm glad I was able to guess the object you were thinking of. It was fun playing \"Twenty Questions\" with you. Let me know if you want to play again sometime."
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.p, {
      children: ["I’ve been keeping an eye on how other people are using ChatGPT, and ", _jsx(_components.a, {
        href: "https://en.wikipedia.org/wiki/Prompt_engineering",
        children: "prompt engineering"
      }), " is one of the more fascinating aspects around how people are communicating with the AI. Prompt engineering plays a key role in communicating with models like ChatGPT. Carefully crafting prompts can help maximize the quality of the reponse. However, it is important to keep in mind that, like any AI model, ChatGPT has its own set of limitations."]
    }), "\n", _jsxs(_components.p, {
      children: ["So I was curious when I read that “", _jsx(_components.a, {
        href: "https://www.reddit.com/r/ChatGPT/comments/101e454/chatgpt_cant_write_sentences_that_end_with_a/",
        children: "ChatGPT can’t write sentences that end in a specific letter"
      }), "”. Is this a real limitation of ChatGPT, or maybe this was just a poor prompt."]
    }), "\n", _jsx(_components.p, {
      children: "So let’s start with a very simple question to ChatGPT:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Can you write a sentence that ends with the letter \"a\"?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: The cat sat on the mat."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: That sentence does not end in the letter \"a\". Can you write a sentence that ends in the letter \"a\"?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: I can't think of anything right now, but the word \"America\" ends with letter \"a\"."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Great, write a sentence that ends in that word. That will then satisfy the original question."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: The land of the free, and the home of the brave, America."
      })
    }), "\n", _jsx(_components.p, {
      children: "Okay, that does technically end in the letter a, but the sentence seems very strange."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: That isn't a very coherent sentence. Can you write a sentence that ends in the letter \"a\"?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: I am sorry for the confusion, here is a sentence that ends with the letter \"a\" - \"He saw the drama unfold on the stage, it was quite the spectacle, a.”"
      })
    }), "\n", _jsx(_components.p, {
      children: "Looks like we are going off the rails here. Let’s try a different approach:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Write a sentence that ends in a word that ends with the letter \"a\"."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: The sun was setting over the horizon, painting the sky with shades of orange and red, a spectacle to behold and end the day with."
      })
    }), "\n", _jsx(_components.p, {
      children: "I’m going to ask ChatGPT to tell me a prompt to feed back to itself. I’ve found this useful for resetting context when having long conversations. Or if ChatGPT gets into weird states like the above response."
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Can you tell me how to write a prompt for you that would actually get you to write a sentence that ends in the letter \"a\"."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Sure, to get me to write a sentence that ends in the letter \"a\" you could provide a prompt like: \"Write a sentence that ends with a word that ends with the letter 'a'\" or \"Can you write a sentence with a word ending in 'a' at the end of the sentence?\" . This makes it clear that the sentence should end in a word ending with the letter 'a'."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Can you write a sentence with a word ending in 'a' at the end of the sentence?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: The sky was clear and blue, not a cloud in sight, perfect for a day out at the parka."
      })
    }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, {
      children: "While ChatGPT is great at forming sentences and even code, it seems like it has no understanding and hasn’t been trained on letters, syllables, or the concept of sentences. I've seen others get ChatGPT to create poems, but it has no concept of why words would rhyme. It can give great answers to questions, but doesn’t understand how to count how many words are in its response."
    }), "\n", _jsx(_components.p, {
      children: "One Redditor in the link above mentions that ChatGPT fails at ASCII art. I’ve tried getting the AI to print ASCII art before, and I’ll leave you with part of a conversation I’ve had with it. This appears to be the best ASCII art I could get it to print, even after having a long conversation where I provided different ASCII art examples:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Can you make ASCII art? Show me a picture of a cat."
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Sure! Here is a picture of a cat using ASCII art:"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: " /\\_/\\\n( o.o )\n >^<\n\n"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "I hope you like it! Is there anything else I can help with?"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "Me: Can you make it more detailed"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.em, {
        children: "ChatGPT: Certainly! Here is a more detailed version of an ASCII art cat:"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: " /\\_/\\\n( o.o )\n  >^<\n  | |\n  || ||\n  \\\\ //\n  // \\\\\n  \\\\_//\n  /   \\\n /     \\\n\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "With new language models coming out, it's important to recognize what the limitations\nof the AI are. Poor responses can be a result of poorly written prompts, but there\nare times, like with letters in words with ChatGPT, where the AI just doesn't have\nthe capability to understand the question."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>Looks like everyone is trying to discover ChatGPT’s limitations. In one article I read, the author asked whether <a href="https://medium.com/@theworldaccordingtocgpt/chatgpt-can-play-20-questions-7911405f7aff">ChatGPT can play 20 questions</a>. The human in this scenario tried to play 20 questions with ChatGPT, and found that they needed to guide the AI to ask questions. From my perspective, it looked more like a failure to engineer the initial prompt correctly.</p>
<p>I attempted to do 20 questions with ChatGPT using a different prompt:</p>
<p><em>Me: I would like to play a game. It&#x27;s called twenty questions. You will ask me one question at a time and I will answer it. The goal is for you guess the thing I am thinking about.</em></p>
<p><em>ChatGPT: Sure, I&#x27;d be happy to play &quot;Twenty Questions&quot; with you. Please go ahead and think of something, and I will start asking my first question.</em></p>
<p><em>Me: I am ready</em></p>
<p><em>ChatGPT: Great, here is my first question: Is the thing you are thinking of an object?</em></p>
<p><em>Me: Yes</em></p>
<p><em>ChatGPT: Is the object something that you can hold in your hand?</em></p>
<p><em>Me: Yes</em></p>
<p><em>ChatGPT: Is the object something that you would typically find in a kitchen?</em></p>
<p><em>Me: No</em></p>
<p><em>ChatGPT: Is the object something that you would use for transportation?</em></p>
<p><em>Me: No</em></p>
<p><em>ChatGPT: Is the object something that you would use for entertainment or leisure?</em></p>
<p><em>Me: Yes</em></p>
<p><em>ChatGPT: Is the object a musical instrument?</em></p>
<p><em>Me: No</em></p>
<p><em>ChatGPT: Is the object a type of game or puzzle?</em></p>
<p><em>Me: No</em></p>
<p><em>ChatGPT: Is the object a piece of technology such as a phone or computer?</em></p>
<p><em>Me: No</em></p>
<p><em>ChatGPT: Is the object a book or magazine?</em></p>
<p><em>Me: Yes</em></p>
<p><em>ChatGPT: Is the object a novel or a collection of short stories?</em></p>
<p><em>Me: Yes</em></p>
<p><em>ChatGPT: Is the object a specific book that is widely known and read?</em></p>
<p><em>Me: Yes</em></p>
<p><em>ChatGPT: Is the object &quot;To Kill a Mockingbird&quot; by Harper Lee?</em></p>
<p><em>Me: No</em></p>
<p><em>ChatGPT: I&#x27;m sorry, I&#x27;m running out of ideas. Can you give me a hint or tell me the answer?</em></p>
<p>Seems like we hit a wall here with twenty questions, but ChatGPT is very close, so I decided to give a hint.</p>
<p><em>Me: You are on the right track. It is by Walt Whitman</em></p>
<p><em>ChatGPT: Is the object &quot;Leaves of Grass&quot; by Walt Whitman?</em></p>
<p><em>Me: Yes! Congratulations!</em></p>
<p><em>ChatGPT: Thank you! I&#x27;m glad I was able to guess the object you were thinking of. It was fun playing &quot;Twenty Questions&quot; with you. Let me know if you want to play again sometime.</em></p>
<hr/>
<p>I’ve been keeping an eye on how other people are using ChatGPT, and <a href="https://en.wikipedia.org/wiki/Prompt_engineering">prompt engineering</a> is one of the more fascinating aspects around how people are communicating with the AI. Prompt engineering plays a key role in communicating with models like ChatGPT. Carefully crafting prompts can help maximize the quality of the reponse. However, it is important to keep in mind that, like any AI model, ChatGPT has its own set of limitations.</p>
<p>So I was curious when I read that “<a href="https://www.reddit.com/r/ChatGPT/comments/101e454/chatgpt_cant_write_sentences_that_end_with_a/">ChatGPT can’t write sentences that end in a specific letter</a>”. Is this a real limitation of ChatGPT, or maybe this was just a poor prompt.</p>
<p>So let’s start with a very simple question to ChatGPT:</p>
<p><em>Me: Can you write a sentence that ends with the letter &quot;a&quot;?</em></p>
<p><em>ChatGPT: The cat sat on the mat.</em></p>
<p><em>Me: That sentence does not end in the letter &quot;a&quot;. Can you write a sentence that ends in the letter &quot;a&quot;?</em></p>
<p><em>ChatGPT: I can&#x27;t think of anything right now, but the word &quot;America&quot; ends with letter &quot;a&quot;.</em></p>
<p><em>Me: Great, write a sentence that ends in that word. That will then satisfy the original question.</em></p>
<p><em>ChatGPT: The land of the free, and the home of the brave, America.</em></p>
<p>Okay, that does technically end in the letter a, but the sentence seems very strange.</p>
<p><em>Me: That isn&#x27;t a very coherent sentence. Can you write a sentence that ends in the letter &quot;a&quot;?</em></p>
<p><em>ChatGPT: I am sorry for the confusion, here is a sentence that ends with the letter &quot;a&quot; - &quot;He saw the drama unfold on the stage, it was quite the spectacle, a.”</em></p>
<p>Looks like we are going off the rails here. Let’s try a different approach:</p>
<p><em>Me: Write a sentence that ends in a word that ends with the letter &quot;a&quot;.</em></p>
<p><em>ChatGPT: The sun was setting over the horizon, painting the sky with shades of orange and red, a spectacle to behold and end the day with.</em></p>
<p>I’m going to ask ChatGPT to tell me a prompt to feed back to itself. I’ve found this useful for resetting context when having long conversations. Or if ChatGPT gets into weird states like the above response.</p>
<p><em>Me: Can you tell me how to write a prompt for you that would actually get you to write a sentence that ends in the letter &quot;a&quot;.</em></p>
<p><em>ChatGPT: Sure, to get me to write a sentence that ends in the letter &quot;a&quot; you could provide a prompt like: &quot;Write a sentence that ends with a word that ends with the letter &#x27;a&#x27;&quot; or &quot;Can you write a sentence with a word ending in &#x27;a&#x27; at the end of the sentence?&quot; . This makes it clear that the sentence should end in a word ending with the letter &#x27;a&#x27;.</em></p>
<p><em>Me: Can you write a sentence with a word ending in &#x27;a&#x27; at the end of the sentence?</em></p>
<p><em>ChatGPT: The sky was clear and blue, not a cloud in sight, perfect for a day out at the parka.</em></p>
<hr/>
<p>While ChatGPT is great at forming sentences and even code, it seems like it has no understanding and hasn’t been trained on letters, syllables, or the concept of sentences. I&#x27;ve seen others get ChatGPT to create poems, but it has no concept of why words would rhyme. It can give great answers to questions, but doesn’t understand how to count how many words are in its response.</p>
<p>One Redditor in the link above mentions that ChatGPT fails at ASCII art. I’ve tried getting the AI to print ASCII art before, and I’ll leave you with part of a conversation I’ve had with it. This appears to be the best ASCII art I could get it to print, even after having a long conversation where I provided different ASCII art examples:</p>
<p><em>Me: Can you make ASCII art? Show me a picture of a cat.</em></p>
<p><em>ChatGPT: Sure! Here is a picture of a cat using ASCII art:</em></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code> /\_/\
( o.o )
 &gt;^&lt;

</code></pre></div>
<p><em>I hope you like it! Is there anything else I can help with?</em></p>
<p><em>Me: Can you make it more detailed</em></p>
<p><em>ChatGPT: Certainly! Here is a more detailed version of an ASCII art cat:</em></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code> /\_/\
( o.o )
  &gt;^&lt;
  | |
  || ||
  \\ //
  // \\
  \\_//
  /   \
 /     \

</code></pre></div>
<p>With new language models coming out, it&#x27;s important to recognize what the limitations
of the AI are. Poor responses can be a result of poorly written prompts, but there
are times, like with letters in words with ChatGPT, where the AI just doesn&#x27;t have
the capability to understand the question.</p>


Looks like everyone is trying to discover ChatGPT’s limitations. In one article I read, the author asked whether [ChatGPT can play 20 questions](https://medium.com/@theworldaccordingtocgpt/chatgpt-can-play-20-questions-7911405f7aff). The human in this scenario tried to play 20 questions with ChatGPT, and found that they needed to guide the AI to ask questions. From my perspective, it looked more like a failure to engineer the initial prompt correctly.

I attempted to do 20 questions with ChatGPT using a different prompt:

*Me: I would like to play a game. It's called twenty questions. You will ask me one question at a time and I will answer it. The goal is for you guess the thing I am thinking about.*

*ChatGPT: Sure, I'd be happy to play "Twenty Questions" with you. Please go ahead and think of something, and I will start asking my first question.*

*Me: I am ready*

*ChatGPT: Great, here is my first question: Is the thing you are thinking of an object?*

*Me: Yes*

*ChatGPT: Is the object something that you can hold in your hand?*

*Me: Yes*

*ChatGPT: Is the object something that you would typically find in a kitchen?*

*Me: No*

*ChatGPT: Is the object something that you would use for transportation?*

*Me: No*

*ChatGPT: Is the object something that you would use for entertainment or leisure?*

*Me: Yes*

*ChatGPT: Is the object a musical instrument?*

*Me: No*

*ChatGPT: Is the object a type of game or puzzle?*

*Me: No*

*ChatGPT: Is the object a piece of technology such as a phone or computer?*

*Me: No*

*ChatGPT: Is the object a book or magazine?*

*Me: Yes*

*ChatGPT: Is the object a novel or a collection of short stories?*

*Me: Yes*

*ChatGPT: Is the object a specific book that is widely known and read?*

*Me: Yes*

*ChatGPT: Is the object "To Kill a Mockingbird" by Harper Lee?*

*Me: No*

*ChatGPT: I'm sorry, I'm running out of ideas. Can you give me a hint or tell me the answer?*

Seems like we hit a wall here with twenty questions, but ChatGPT is very close, so I decided to give a hint.

*Me: You are on the right track. It is by Walt Whitman*

*ChatGPT: Is the object "Leaves of Grass" by Walt Whitman?*

*Me: Yes! Congratulations!*

*ChatGPT: Thank you! I'm glad I was able to guess the object you were thinking of. It was fun playing "Twenty Questions" with you. Let me know if you want to play again sometime.*

---

I’ve been keeping an eye on how other people are using ChatGPT, and [prompt engineering](https://en.wikipedia.org/wiki/Prompt_engineering) is one of the more fascinating aspects around how people are communicating with the AI. Prompt engineering plays a key role in communicating with models like ChatGPT. Carefully crafting prompts can help maximize the quality of the reponse. However, it is important to keep in mind that, like any AI model, ChatGPT has its own set of limitations.

So I was curious when I read that “[ChatGPT can’t write sentences that end in a specific letter](https://www.reddit.com/r/ChatGPT/comments/101e454/chatgpt_cant_write_sentences_that_end_with_a/)”. Is this a real limitation of ChatGPT, or maybe this was just a poor prompt.

So let’s start with a very simple question to ChatGPT:

*Me: Can you write a sentence that ends with the letter "a"?*

*ChatGPT: The cat sat on the mat.*

*Me: That sentence does not end in the letter "a". Can you write a sentence that ends in the letter "a"?*

*ChatGPT: I can't think of anything right now, but the word "America" ends with letter "a".*

*Me: Great, write a sentence that ends in that word. That will then satisfy the original question.*

*ChatGPT: The land of the free, and the home of the brave, America.*

Okay, that does technically end in the letter a, but the sentence seems very strange.

*Me: That isn't a very coherent sentence. Can you write a sentence that ends in the letter "a"?*

*ChatGPT: I am sorry for the confusion, here is a sentence that ends with the letter "a" - "He saw the drama unfold on the stage, it was quite the spectacle, a.”*

Looks like we are going off the rails here. Let’s try a different approach:

*Me: Write a sentence that ends in a word that ends with the letter "a".*

*ChatGPT: The sun was setting over the horizon, painting the sky with shades of orange and red, a spectacle to behold and end the day with.*

I’m going to ask ChatGPT to tell me a prompt to feed back to itself. I’ve found this useful for resetting context when having long conversations. Or if ChatGPT gets into weird states like the above response.

*Me: Can you tell me how to write a prompt for you that would actually get you to write a sentence that ends in the letter "a".*

*ChatGPT: Sure, to get me to write a sentence that ends in the letter "a" you could provide a prompt like: "Write a sentence that ends with a word that ends with the letter 'a'" or "Can you write a sentence with a word ending in 'a' at the end of the sentence?" . This makes it clear that the sentence should end in a word ending with the letter 'a'.*

*Me: Can you write a sentence with a word ending in 'a' at the end of the sentence?*

*ChatGPT: The sky was clear and blue, not a cloud in sight, perfect for a day out at the parka.*

---

While ChatGPT is great at forming sentences and even code, it seems like it has no understanding and hasn’t been trained on letters, syllables, or the concept of sentences. I've seen others get ChatGPT to create poems, but it has no concept of why words would rhyme. It can give great answers to questions, but doesn’t understand how to count how many words are in its response.

One Redditor in the link above mentions that ChatGPT fails at ASCII art. I’ve tried getting the AI to print ASCII art before, and I’ll leave you with part of a conversation I’ve had with it. This appears to be the best ASCII art I could get it to print, even after having a long conversation where I provided different ASCII art examples:

*Me: Can you make ASCII art? Show me a picture of a cat.*

*ChatGPT: Sure! Here is a picture of a cat using ASCII art:*

```
 /\_/\
( o.o )
 >^<

```

*I hope you like it! Is there anything else I can help with?*

*Me: Can you make it more detailed*

*ChatGPT: Certainly! Here is a more detailed version of an ASCII art cat:*

```
 /\_/\
( o.o )
  >^<
  | |
  || ||
  \\ //
  // \\
  \\_//
  /   \
 /     \

```

With new language models coming out, it's important to recognize what the limitations
of the AI are. Poor responses can be a result of poorly written prompts, but there
are times, like with letters in words with ChatGPT, where the AI just doesn't have
the capability to understand the question.


ChatGPT Doesn't Understand

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "I was thinking about all the little projects I work on and how they grow over time. The applications end up hitting some milestones and end up needing similar functionality that compliments the core features. A small project ends up getting complex enough that it requires some unit tests. I’ll go to deploy the project and now I need some deployment scripts and analytics to ensure the application is running correctly. The technology may change between each project, but web applications always seem to have the same steps that need to be taken to strengthen the application as it is scaled up."
    }), "\n", _jsx(_components.p, {
      children: "At a large company, adding a new set of functionality always has a suite of concerns to think through before implementation: how will we deploy this feature, how do we validate that users are using the feature like we expected them to, how do we monitor for bugs and errors? This is on top of the basic functionality of actually writing and testing that new feature."
    }), "\n", _jsx(_components.p, {
      children: "What if we thought about this like Maslow’s Hierarchy of Needs, but in the context of a web application."
    }), "\n", _jsx(_components.p, {
      children: "Maslow's Hierarchy of Needs is a psychological model of human motivation proposed by Abraham Maslow in 1943. The model describes a hierarchy of human needs, beginning with basic physiological needs such as food and shelter and progressing upwards to higher-level needs such as self-actualization. Maslow argued that as humans satisfy their basic needs, they can move on to satisfy their higher-level needs."
    }), "\n", _jsx(_components.p, {
      children: "Applying Maslow's Hierarchy of Needs to web applications, we can identify the different levels of needs that need to be met in order to make a web application successful."
    }), "\n", _jsx(_components.p, {
      children: "Basic functionality:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "A single build/run script"
      }), "\n", _jsx(_components.li, {
        children: "Basic functionality (e.g. CRUD operations for a web app)"
      }), "\n", _jsx(_components.li, {
        children: "User interface (e.g. layout, navigation, responsive design)"
      }), "\n", _jsx(_components.li, {
        children: "Integration with external services (e.g. databases, APIs)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Safety and security:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Linting (e.g. ESLint, Prettier)"
      }), "\n", _jsx(_components.li, {
        children: "Unit tests (e.g. Jest, Mocha)"
      }), "\n", _jsx(_components.li, {
        children: "Basic error handling and reporting (e.g. logging, alerting)"
      }), "\n", _jsx(_components.li, {
        children: "Input validation (e.g. form validation)"
      }), "\n", _jsx(_components.li, {
        children: "Security best practices (e.g. encryption, password hashing, session management)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Love and belonging:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Basic analytics (e.g. page views, user engagement)"
      }), "\n", _jsx(_components.li, {
        children: "User authentication and authorization (e.g. sign-up, login, role-based access control)"
      }), "\n", _jsx(_components.li, {
        children: "User feedback (e.g. contact form, survey)"
      }), "\n", _jsx(_components.li, {
        children: "Social media integration (e.g. sharing, commenting)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Esteem:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Advanced analytics (e.g. user behavior tracking, A/B testing)"
      }), "\n", _jsx(_components.li, {
        children: "Performance monitoring (e.g. load testing, monitoring of server resources)"
      }), "\n", _jsx(_components.li, {
        children: "User experience optimization (e.g. user testing, usability analysis)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Self-actualization:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "End-to-end testing (e.g. Selenium, Cypress)"
      }), "\n", _jsx(_components.li, {
        children: "Accessibility and internationalization (e.g. support for screen readers, translation)"
      }), "\n", _jsx(_components.li, {
        children: "Scalability (e.g. load balancing, caching)"
      }), "\n", _jsx(_components.li, {
        children: "Continuous integration and delivery (e.g. Jenkins, Travis CI)"
      }), "\n", _jsx(_components.li, {
        children: "Deployment (e.g. Docker, Kubernetes)"
      }), "\n", _jsx(_components.li, {
        children: "Automated testing (e.g. unit test, integration test)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Of course this list isn’t exhaustive, but I’ve been thinking about it as more of a checklist to build upon when working on small side-projects that end up getting significant attention and development time."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>I was thinking about all the little projects I work on and how they grow over time. The applications end up hitting some milestones and end up needing similar functionality that compliments the core features. A small project ends up getting complex enough that it requires some unit tests. I’ll go to deploy the project and now I need some deployment scripts and analytics to ensure the application is running correctly. The technology may change between each project, but web applications always seem to have the same steps that need to be taken to strengthen the application as it is scaled up.</p>
<p>At a large company, adding a new set of functionality always has a suite of concerns to think through before implementation: how will we deploy this feature, how do we validate that users are using the feature like we expected them to, how do we monitor for bugs and errors? This is on top of the basic functionality of actually writing and testing that new feature.</p>
<p>What if we thought about this like Maslow’s Hierarchy of Needs, but in the context of a web application.</p>
<p>Maslow&#x27;s Hierarchy of Needs is a psychological model of human motivation proposed by Abraham Maslow in 1943. The model describes a hierarchy of human needs, beginning with basic physiological needs such as food and shelter and progressing upwards to higher-level needs such as self-actualization. Maslow argued that as humans satisfy their basic needs, they can move on to satisfy their higher-level needs.</p>
<p>Applying Maslow&#x27;s Hierarchy of Needs to web applications, we can identify the different levels of needs that need to be met in order to make a web application successful.</p>
<p>Basic functionality:</p>
<ul>
<li>A single build/run script</li>
<li>Basic functionality (e.g. CRUD operations for a web app)</li>
<li>User interface (e.g. layout, navigation, responsive design)</li>
<li>Integration with external services (e.g. databases, APIs)</li>
</ul>
<p>Safety and security:</p>
<ul>
<li>Linting (e.g. ESLint, Prettier)</li>
<li>Unit tests (e.g. Jest, Mocha)</li>
<li>Basic error handling and reporting (e.g. logging, alerting)</li>
<li>Input validation (e.g. form validation)</li>
<li>Security best practices (e.g. encryption, password hashing, session management)</li>
</ul>
<p>Love and belonging:</p>
<ul>
<li>Basic analytics (e.g. page views, user engagement)</li>
<li>User authentication and authorization (e.g. sign-up, login, role-based access control)</li>
<li>User feedback (e.g. contact form, survey)</li>
<li>Social media integration (e.g. sharing, commenting)</li>
</ul>
<p>Esteem:</p>
<ul>
<li>Advanced analytics (e.g. user behavior tracking, A/B testing)</li>
<li>Performance monitoring (e.g. load testing, monitoring of server resources)</li>
<li>User experience optimization (e.g. user testing, usability analysis)</li>
</ul>
<p>Self-actualization:</p>
<ul>
<li>End-to-end testing (e.g. Selenium, Cypress)</li>
<li>Accessibility and internationalization (e.g. support for screen readers, translation)</li>
<li>Scalability (e.g. load balancing, caching)</li>
<li>Continuous integration and delivery (e.g. Jenkins, Travis CI)</li>
<li>Deployment (e.g. Docker, Kubernetes)</li>
<li>Automated testing (e.g. unit test, integration test)</li>
</ul>
<p>Of course this list isn’t exhaustive, but I’ve been thinking about it as more of a checklist to build upon when working on small side-projects that end up getting significant attention and development time.</p>


I was thinking about all the little projects I work on and how they grow over time. The applications end up hitting some milestones and end up needing similar functionality that compliments the core features. A small project ends up getting complex enough that it requires some unit tests. I’ll go to deploy the project and now I need some deployment scripts and analytics to ensure the application is running correctly. The technology may change between each project, but web applications always seem to have the same steps that need to be taken to strengthen the application as it is scaled up.

At a large company, adding a new set of functionality always has a suite of concerns to think through before implementation: how will we deploy this feature, how do we validate that users are using the feature like we expected them to, how do we monitor for bugs and errors? This is on top of the basic functionality of actually writing and testing that new feature.

What if we thought about this like Maslow’s Hierarchy of Needs, but in the context of a web application.

Maslow's Hierarchy of Needs is a psychological model of human motivation proposed by Abraham Maslow in 1943. The model describes a hierarchy of human needs, beginning with basic physiological needs such as food and shelter and progressing upwards to higher-level needs such as self-actualization. Maslow argued that as humans satisfy their basic needs, they can move on to satisfy their higher-level needs.

Applying Maslow's Hierarchy of Needs to web applications, we can identify the different levels of needs that need to be met in order to make a web application successful.

Basic functionality:

- A single build/run script
- Basic functionality (e.g. CRUD operations for a web app)
- User interface (e.g. layout, navigation, responsive design)
- Integration with external services (e.g. databases, APIs)

Safety and security:

- Linting (e.g. ESLint, Prettier)
- Unit tests (e.g. Jest, Mocha)
- Basic error handling and reporting (e.g. logging, alerting)
- Input validation (e.g. form validation)
- Security best practices (e.g. encryption, password hashing, session management)

Love and belonging:

- Basic analytics (e.g. page views, user engagement)
- User authentication and authorization (e.g. sign-up, login, role-based access control)
- User feedback (e.g. contact form, survey)
- Social media integration (e.g. sharing, commenting)

Esteem:

- Advanced analytics (e.g. user behavior tracking, A/B testing)
- Performance monitoring (e.g. load testing, monitoring of server resources)
- User experience optimization (e.g. user testing, usability analysis)

Self-actualization:

- End-to-end testing (e.g. Selenium, Cypress)
- Accessibility and internationalization (e.g. support for screen readers, translation)
- Scalability (e.g. load balancing, caching)
- Continuous integration and delivery (e.g. Jenkins, Travis CI)
- Deployment (e.g. Docker, Kubernetes)
- Automated testing (e.g. unit test, integration test)

Of course this list isn’t exhaustive, but I’ve been thinking about it as more of a checklist to build upon when working on small side-projects that end up getting significant attention and development time.


The Hierarchy of Webapp Needs

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    img: "img",
    strong: "strong",
    h3: "h3",
    ul: "ul",
    li: "li",
    a: "a"
  }, props.components), {Mermaid} = _components;
  if (!Mermaid) _missingMdxReference("Mermaid", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.30_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.57.30 PM.png"
      })
    }), "\n", _jsx(_components.p, {
      children: "While working on Clarity Hub, we created a Clarity Hub Infer API along with a developer portal that would let anyone create infer models."
    }), "\n", _jsx(_components.p, {
      children: "The Clarity Hub Infer API provides a fast and intuitive way to create, manage, and deploy NLP models based on labelling utterances."
    }), "\n", _jsx(_components.p, {
      children: "At the most basic level, the Infer API would let users send utterances via an API and get toxicity analysis, sentiment scores, and simple NLP data like nouns and topics from the utterances."
    }), "\n", _jsx(_components.p, {
      children: "The power of the Infer API is that consumers can supply a set of pre-labelled utterances to the API, and the API will create a model from this, even if there are only a few utterances used for training. Then the consumer can send a new utterance get a label using that model."
    }), "\n", _jsx(_components.p, {
      children: "The NLP APIs at Clarity Hub were a set of APIs:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph RL\n  NLP(Clarity Hub NLP API) --> API(Clarity Hub Infer API) --> Consumer"
    }), "\n", _jsx(_components.p, {
      children: "The Consumer would user the Infer API which provided APIs for training and labeling datasets and getting toxicity and sentiment analyses. the Clarity Hub NLP API contained trained Tensorflow datasets for creating embeddings via the Universal Sentence Encoder (USE)."
    }), "\n", _jsxs(_components.p, {
      children: ["An ", _jsx(_components.strong, {
        children: "embedding"
      }), " a vector that represents an utterance - a sentence, sentence fragment, or paragraph of text."]
    }), "\n", _jsx(_components.p, {
      children: "Training would involve a consumer sending a payload of utterances with labels to the Infer API, which would call the NLP API internally to create embeddings. We then clustered these embeddings to and re-labelled the clusters using the given labels. If no label was found for an utterance cluster, we attempted to pull a topic out of the utterances to re-label it."
    }), "\n", _jsx(_components.p, {
      children: "The clusters with labels were then stored into S3."
    }), "\n", _jsx(Mermaid, {
      chart: "graph TD\n  Train -->|Utterances with labels| USE\n  USE -->|Embeddings with labels| Clustering\n  Clustering -->|Embedding Clusters| Labeller\n  Labeller -->|Clusters with Labels| S3"
    }), "\n", _jsx(_components.p, {
      children: "To classify a new utterance, we created an embedding from it, loaded the existing dataset in, then ran cosine similarity to find the most probabilistic matches:"
    }), "\n", _jsx(Mermaid, {
      chart: "graph TD\n  Classify --> |Utterance| USE\n  USE --> |Embedding| Classifier(Classifier)\n  Classifier --> |Embedding + Clusters from S3| Similarity(Cosine Similarity)\n  Similarity --> |Labels with Probability| Response"
    }), "\n", _jsx(_components.h3, {
      children: "What it looked like"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.56_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.57.56 PM.png"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.08_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.58.08 PM.png"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.28_PM.png",
        alt: "Screen Shot 2023-01-07 at 3.58.28 PM.png"
      })
    }), "\n", _jsx(_components.h3, {
      children: "Conclusion"
    }), "\n", _jsx(_components.p, {
      children: "With ChatGPT and other NLP models coming out lately, this seems fairly basic, but the following processes are still very useful to understand:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Convert language to a representation that is easier to work with, like a vector."
      }), "\n", _jsx(_components.li, {
        children: "Clustering vectors is a great way to find representative vectors, reducing the size of the number of vectors you need to work with."
      }), "\n", _jsx(_components.li, {
        children: "Cosine Similarity can be used to find how similar vectors are. If a vector is labelled with metadata, it also tells you how similar the metadata between the vectors are as well."
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["You can see ", _jsx(_components.a, {
        href: "/projects/2020-05-18-clarity-hub-infer",
        children: "my project page"
      }), " for more details and links to the Github repos."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


<p><img alt="Screen Shot 2023-01-07 at 3.57.30 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.30_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p>While working on Clarity Hub, we created a Clarity Hub Infer API along with a developer portal that would let anyone create infer models.</p>
<p>The Clarity Hub Infer API provides a fast and intuitive way to create, manage, and deploy NLP models based on labelling utterances.</p>
<p>At the most basic level, the Infer API would let users send utterances via an API and get toxicity analysis, sentiment scores, and simple NLP data like nouns and topics from the utterances.</p>
<p>The power of the Infer API is that consumers can supply a set of pre-labelled utterances to the API, and the API will create a model from this, even if there are only a few utterances used for training. Then the consumer can send a new utterance get a label using that model.</p>
<p>The NLP APIs at Clarity Hub were a set of APIs:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph RL
  NLP(Clarity Hub NLP API) --&gt; API(Clarity Hub Infer API) --&gt; Consumer">graph RL
  NLP(Clarity Hub NLP API) --&gt; API(Clarity Hub Infer API) --&gt; Consumer</div></div>
<p>The Consumer would user the Infer API which provided APIs for training and labeling datasets and getting toxicity and sentiment analyses. the Clarity Hub NLP API contained trained Tensorflow datasets for creating embeddings via the Universal Sentence Encoder (USE).</p>
<p>An <strong>embedding</strong> a vector that represents an utterance - a sentence, sentence fragment, or paragraph of text.</p>
<p>Training would involve a consumer sending a payload of utterances with labels to the Infer API, which would call the NLP API internally to create embeddings. We then clustered these embeddings to and re-labelled the clusters using the given labels. If no label was found for an utterance cluster, we attempted to pull a topic out of the utterances to re-label it.</p>
<p>The clusters with labels were then stored into S3.</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph TD
  Train --&gt;|Utterances with labels| USE
  USE --&gt;|Embeddings with labels| Clustering
  Clustering --&gt;|Embedding Clusters| Labeller
  Labeller --&gt;|Clusters with Labels| S3">graph TD
  Train --&gt;|Utterances with labels| USE
  USE --&gt;|Embeddings with labels| Clustering
  Clustering --&gt;|Embedding Clusters| Labeller
  Labeller --&gt;|Clusters with Labels| S3</div></div>
<p>To classify a new utterance, we created an embedding from it, loaded the existing dataset in, then ran cosine similarity to find the most probabilistic matches:</p>
<div class="py-8 [&amp;_svg]:m-auto"><div class="mermaid" data-mermaid-src="graph TD
  Classify --&gt; |Utterance| USE
  USE --&gt; |Embedding| Classifier(Classifier)
  Classifier --&gt; |Embedding + Clusters from S3| Similarity(Cosine Similarity)
  Similarity --&gt; |Labels with Probability| Response">graph TD
  Classify --&gt; |Utterance| USE
  USE --&gt; |Embedding| Classifier(Classifier)
  Classifier --&gt; |Embedding + Clusters from S3| Similarity(Cosine Similarity)
  Similarity --&gt; |Labels with Probability| Response</div></div>
<h3>What it looked like</h3>
<p><img alt="Screen Shot 2023-01-07 at 3.57.56 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.56_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p><img alt="Screen Shot 2023-01-07 at 3.58.08 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.08_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<p><img alt="Screen Shot 2023-01-07 at 3.58.28 PM.png" src="/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.28_PM.png" style="max-height:500px;margin:auto;text-align:center"/></p>
<h3>Conclusion</h3>
<p>With ChatGPT and other NLP models coming out lately, this seems fairly basic, but the following processes are still very useful to understand:</p>
<ul>
<li>Convert language to a representation that is easier to work with, like a vector.</li>
<li>Clustering vectors is a great way to find representative vectors, reducing the size of the number of vectors you need to work with.</li>
<li>Cosine Similarity can be used to find how similar vectors are. If a vector is labelled with metadata, it also tells you how similar the metadata between the vectors are as well.</li>
</ul>
<p>You can see <a href="/projects/2020-05-18-clarity-hub-infer">my project page</a> for more details and links to the Github repos.</p>


![Screen Shot 2023-01-07 at 3.57.30 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.30_PM.png)

While working on Clarity Hub, we created a Clarity Hub Infer API along with a developer portal that would let anyone create infer models.

The Clarity Hub Infer API provides a fast and intuitive way to create, manage, and deploy NLP models based on labelling utterances.

At the most basic level, the Infer API would let users send utterances via an API and get toxicity analysis, sentiment scores, and simple NLP data like nouns and topics from the utterances.

The power of the Infer API is that consumers can supply a set of pre-labelled utterances to the API, and the API will create a model from this, even if there are only a few utterances used for training. Then the consumer can send a new utterance get a label using that model.

The NLP APIs at Clarity Hub were a set of APIs:

```mermaid
graph RL
  NLP(Clarity Hub NLP API) --> API(Clarity Hub Infer API) --> Consumer
```

The Consumer would user the Infer API which provided APIs for training and labeling datasets and getting toxicity and sentiment analyses. the Clarity Hub NLP API contained trained Tensorflow datasets for creating embeddings via the Universal Sentence Encoder (USE).

An **embedding** a vector that represents an utterance - a sentence, sentence fragment, or paragraph of text.

Training would involve a consumer sending a payload of utterances with labels to the Infer API, which would call the NLP API internally to create embeddings. We then clustered these embeddings to and re-labelled the clusters using the given labels. If no label was found for an utterance cluster, we attempted to pull a topic out of the utterances to re-label it.

The clusters with labels were then stored into S3.

```mermaid
graph TD
  Train -->|Utterances with labels| USE
  USE -->|Embeddings with labels| Clustering
  Clustering -->|Embedding Clusters| Labeller
  Labeller -->|Clusters with Labels| S3
```

To classify a new utterance, we created an embedding from it, loaded the existing dataset in, then ran cosine similarity to find the most probabilistic matches:

```mermaid
graph TD
  Classify --> |Utterance| USE
  USE --> |Embedding| Classifier(Classifier)
  Classifier --> |Embedding + Clusters from S3| Similarity(Cosine Similarity)
  Similarity --> |Labels with Probability| Response
```

### What it looked like

![Screen Shot 2023-01-07 at 3.57.56 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.57.56_PM.png)

![Screen Shot 2023-01-07 at 3.58.08 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.08_PM.png)

![Screen Shot 2023-01-07 at 3.58.28 PM.png](/media/2023-01-07-clarity-hub-infer/Screen_Shot_2023-01-07_at_3.58.28_PM.png)

### Conclusion

With ChatGPT and other NLP models coming out lately, this seems fairly basic, but the following processes are still very useful to understand:

- Convert language to a representation that is easier to work with, like a vector.
- Clustering vectors is a great way to find representative vectors, reducing the size of the number of vectors you need to work with.
- Cosine Similarity can be used to find how similar vectors are. If a vector is labelled with metadata, it also tells you how similar the metadata between the vectors are as well.

You can see [my project page](/projects/2020-05-18-clarity-hub-infer) for more details and links to the Github repos.


Clarity Hub Infer API

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "To kickstart the year, I created a repo that contains a simple starter kit for using NextJS with NX. You can see the repo here:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.a, {
        href: "https://github.com/idmontie/nx-nextjs-starter",
        children: "Github"
      })
    }), "\n", _jsx(_components.p, {
      children: "This personal Github page is built using this starter kit. I wanted to create a starter kit that was simple and easy to use and also has a lot of eslint and Typescript configuration setup. I've also been working on revamping the website for Dark Emblem - my NFT side-project. The starter kit is based on the linting rules and Typescript set up that I've been using for that project."
    }), "\n", _jsx(_components.h2, {
      children: "Nx"
    }), "\n", _jsx(_components.p, {
      children: "I've traditionally used Lerna for my monorepo projects, but now that Nx has taken over maintenance of Lerna, I decided to give Nx a try directly."
    }), "\n", _jsx(_components.p, {
      children: "Nx has been enjoyable to use. Managing many different React projects with internal libraries has been very easy to set up, use and deploy."
    }), "\n", _jsx(_components.h2, {
      children: "NextJS"
    }), "\n", _jsx(_components.p, {
      children: "My last few projects have been Single Page Apps (SPAs) or statically generated sites using Gatsby or Docusaurus. All three of those tools are great, but I wanted to try out NextJS for a few reasons:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "In my Dark Emblem project, I was having difficulty getting share links to Discord and Twitter to work properly. This was mainly caused by those sites not running JavaScript, so page links would just render the default SPA title and description. I knew that NextJS had a solution for this, so I wanted to try it out."
      }), "\n", _jsx(_components.li, {
        children: "I wanted more control of my documentation and blog websites, so I needed to be able to use custom server-side code."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Starter Kit"
    }), "\n", _jsx(_components.p, {
      children: "Overall the starter kit is a pretty simple example. It just containers preconfigured Nx, husky, lint-staged, eslint, prettier, Typescript, and NextJS. It does not contain any UI components or anything like that. It's just a simple starter kit to get you up and running with a monorepo NextJS project."
    }), "\n", _jsxs(_components.p, {
      children: ["Feel free to check it out at ", _jsx(_components.a, {
        href: "https://github.com/idmontie/nx-nextjs-starter",
        children: "Github"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>To kickstart the year, I created a repo that contains a simple starter kit for using NextJS with NX. You can see the repo here:</p>
<p><a href="https://github.com/idmontie/nx-nextjs-starter">Github</a></p>
<p>This personal Github page is built using this starter kit. I wanted to create a starter kit that was simple and easy to use and also has a lot of eslint and Typescript configuration setup. I&#x27;ve also been working on revamping the website for Dark Emblem - my NFT side-project. The starter kit is based on the linting rules and Typescript set up that I&#x27;ve been using for that project.</p>
<h2>Nx</h2>
<p>I&#x27;ve traditionally used Lerna for my monorepo projects, but now that Nx has taken over maintenance of Lerna, I decided to give Nx a try directly.</p>
<p>Nx has been enjoyable to use. Managing many different React projects with internal libraries has been very easy to set up, use and deploy.</p>
<h2>NextJS</h2>
<p>My last few projects have been Single Page Apps (SPAs) or statically generated sites using Gatsby or Docusaurus. All three of those tools are great, but I wanted to try out NextJS for a few reasons:</p>
<ul>
<li>In my Dark Emblem project, I was having difficulty getting share links to Discord and Twitter to work properly. This was mainly caused by those sites not running JavaScript, so page links would just render the default SPA title and description. I knew that NextJS had a solution for this, so I wanted to try it out.</li>
<li>I wanted more control of my documentation and blog websites, so I needed to be able to use custom server-side code.</li>
</ul>
<h2>Starter Kit</h2>
<p>Overall the starter kit is a pretty simple example. It just containers preconfigured Nx, husky, lint-staged, eslint, prettier, Typescript, and NextJS. It does not contain any UI components or anything like that. It&#x27;s just a simple starter kit to get you up and running with a monorepo NextJS project.</p>
<p>Feel free to check it out at <a href="https://github.com/idmontie/nx-nextjs-starter">Github</a>.</p>


To kickstart the year, I created a repo that contains a simple starter kit for using NextJS with NX. You can see the repo here:

[Github](https://github.com/idmontie/nx-nextjs-starter)

This personal Github page is built using this starter kit. I wanted to create a starter kit that was simple and easy to use and also has a lot of eslint and Typescript configuration setup. I've also been working on revamping the website for Dark Emblem - my NFT side-project. The starter kit is based on the linting rules and Typescript set up that I've been using for that project.

## Nx

I've traditionally used Lerna for my monorepo projects, but now that Nx has taken over maintenance of Lerna, I decided to give Nx a try directly.

Nx has been enjoyable to use. Managing many different React projects with internal libraries has been very easy to set up, use and deploy.

## NextJS

My last few projects have been Single Page Apps (SPAs) or statically generated sites using Gatsby or Docusaurus. All three of those tools are great, but I wanted to try out NextJS for a few reasons:

* In my Dark Emblem project, I was having difficulty getting share links to Discord and Twitter to work properly. This was mainly caused by those sites not running JavaScript, so page links would just render the default SPA title and description. I knew that NextJS had a solution for this, so I wanted to try it out.
* I wanted more control of my documentation and blog websites, so I needed to be able to use custom server-side code.

## Starter Kit

Overall the starter kit is a pretty simple example. It just containers preconfigured Nx, husky, lint-staged, eslint, prettier, Typescript, and NextJS. It does not contain any UI components or anything like that. It's just a simple starter kit to get you up and running with a monorepo NextJS project.

Feel free to check it out at [Github](https://github.com/idmontie/nx-nextjs-starter).

NX NextJS Starter

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    a: "a"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This short post was originally on a blog I started for creating web applications. This post goes into mobile considerations for web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Tools to Sync Mobile and Web Development"
    }), "\n", _jsx(_components.p, {
      children: "These tools not only help with Mobile development, but they also help with cross-browser development as well (see Developer Tools):"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://vanamco.com/ghostlab/",
          children: "Ghostlab"
        }), " - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://creative.adobe.com/products/inspect",
          children: "Edge Inspect CC"
        }), " - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud."]
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This short post was originally on a blog I started for creating web applications. This post goes into mobile considerations for web applications.</p>
<h2>Tools to Sync Mobile and Web Development</h2>
<p>These tools not only help with Mobile development, but they also help with cross-browser development as well (see Developer Tools):</p>
<ul>
<li><a href="http://vanamco.com/ghostlab/">Ghostlab</a> - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.</li>
<li><a href="https://creative.adobe.com/products/inspect">Edge Inspect CC</a> - Synchronized Browsing &amp; Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.</li>
</ul>


This short post was originally on a blog I started for creating web applications. This post goes into mobile considerations for web applications.

## Tools to Sync Mobile and Web Development

These tools not only help with Mobile development, but they also help with cross-browser development as well (see Developer Tools):

* [Ghostlab](http://vanamco.com/ghostlab/) - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.
* [Edge Inspect CC](https://creative.adobe.com/products/inspect) - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.


Mobile

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    a: "a",
    h3: "h3"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Cross Browser Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://vanamco.com/ghostlab/",
          children: "Ghostlab"
        }), " - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://creative.adobe.com/products/inspect",
          children: "Edge Inspect CC"
        }), " - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://livereload.com/",
          children: "Live Reload"
        }), " - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://www.parallels.com/",
          children: "Parallels"
        }), " - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Google Chrome Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://cssdig.com/",
          children: "CSSDig"
        }), " - Look at your CSS in a way that easily allows you to refactor it."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "User Interface Tools"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "www.uxcheck.co",
          children: "UX Check"
        }), " - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "www.googleui.org",
          children: "Good UI"
        }), " - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://littlebigdetails.com/",
          children: "Little Big Details"
        }), " contains design inspiration from the point of view of the users."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://color.adobe.com/",
          children: "Adobe Color CC"
        }), " - Formerly known as Kuler, this tools lets you pick color schemes."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://www.materialpalette.com/",
          children: "Material Palette"
        }), " - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Usage Trends"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://w3techs.com/",
          children: "W3Techs"
        }), " has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://stackshare.io/",
          children: "Stack Share"
        }), " - see what technology stacks other platforms are using."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Images and Stock Photos"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://subtlepatterns.com/",
          children: "Subtle Patterns"
        }), " - Sublte pattern backgrounds for websites."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://unsplash.com/",
          children: "Unsplash"
        }), " - Large, high-resolution, splash photos for free."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://www.resplashed.com/",
          children: "Resplashed"
        }), " - HD images."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b",
          children: "Stock photos list ad Medium"
        }), " - List of great stock photo resources."]
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://superfamous.com/",
          children: "SuperFamous"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.imcreator.com/free",
          children: "IMCreator"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://thepatternlibrary.com/",
          children: "The Pattern Library"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://picjumbo.com/",
          children: "Pic Jumbo"
        })
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Templates"
    }), "\n", _jsx(_components.h3, {
      children: "HTML5 Templates"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://html5up.net/",
          children: "HTML5 Up"
        }), " - fully responsive, free, HTML5 templates."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://themes.3rdwavemedia.com/",
          children: "HTML5 Templates"
        }), " - UX centred HTML5 Bootstrap themes and templates."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://templated.co/",
          children: "Templated"
        }), " - A collection of free CSS and HTML5 site templates."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Emails"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://zurb.com/ink/",
          children: "Ink"
        }), " - Tool for helping create emails."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "https://beefree.io/",
          children: "BeeFree"
        }), " - Tool for helping create emails."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "SEO"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://adwords.google.com/KeywordPlanner",
          children: "Google Keyword Planner"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.google.com/analytics/",
          children: "Google Analytics"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://support.google.com/analytics/answer/1745147",
          children: "Website Optimizer"
        })
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["Note: Checkout the ", _jsx(_components.a, {
        href: "https://www.youtube.com/watch?v=9yKjrdcC8wA",
        children: "Google Trifecta Video"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications.</p>
<h2>Cross Browser Tools</h2>
<ul>
<li><a href="http://vanamco.com/ghostlab/">Ghostlab</a> - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.</li>
<li><a href="https://creative.adobe.com/products/inspect">Edge Inspect CC</a> - Synchronized Browsing &amp; Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.</li>
<li><a href="http://livereload.com/">Live Reload</a> - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms.</li>
<li><a href="https://www.parallels.com/">Parallels</a> - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX.</li>
</ul>
<h2>Google Chrome Tools</h2>
<ul>
<li><a href="http://cssdig.com/">CSSDig</a> - Look at your CSS in a way that easily allows you to refactor it.</li>
</ul>
<h2>User Interface Tools</h2>
<ul>
<li><a href="www.uxcheck.co">UX Check</a> - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites.</li>
<li><a href="www.googleui.org">Good UI</a> - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter.</li>
<li><a href="http://littlebigdetails.com/">Little Big Details</a> contains design inspiration from the point of view of the users.</li>
<li><a href="https://color.adobe.com/">Adobe Color CC</a> - Formerly known as Kuler, this tools lets you pick color schemes.</li>
<li><a href="http://www.materialpalette.com/">Material Palette</a> - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site.</li>
</ul>
<h2>Usage Trends</h2>
<ul>
<li><a href="http://w3techs.com/">W3Techs</a> has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc.</li>
<li><a href="http://stackshare.io/">Stack Share</a> - see what technology stacks other platforms are using.</li>
</ul>
<h2>Images and Stock Photos</h2>
<ul>
<li><a href="http://subtlepatterns.com/">Subtle Patterns</a> - Sublte pattern backgrounds for websites.</li>
<li><a href="https://unsplash.com/">Unsplash</a> - Large, high-resolution, splash photos for free.</li>
<li><a href="http://www.resplashed.com/">Resplashed</a> - HD images.</li>
<li><a href="https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b">Stock photos list ad Medium</a> - List of great stock photo resources.</li>
<li><a href="http://superfamous.com/">SuperFamous</a></li>
<li><a href="http://www.imcreator.com/free">IMCreator</a></li>
<li><a href="http://thepatternlibrary.com/">The Pattern Library</a></li>
<li><a href="http://picjumbo.com/">Pic Jumbo</a></li>
</ul>
<h2>Templates</h2>
<h3>HTML5 Templates</h3>
<ul>
<li><a href="http://html5up.net/">HTML5 Up</a> - fully responsive, free, HTML5 templates.</li>
<li><a href="http://themes.3rdwavemedia.com/">HTML5 Templates</a> - UX centred HTML5 Bootstrap themes and templates.</li>
<li><a href="http://templated.co/">Templated</a> - A collection of free CSS and HTML5 site templates.</li>
</ul>
<h2>Emails</h2>
<ul>
<li><a href="http://zurb.com/ink/">Ink</a> - Tool for helping create emails.</li>
<li><a href="https://beefree.io/">BeeFree</a> - Tool for helping create emails.</li>
</ul>
<h2>SEO</h2>
<ul>
<li><a href="https://adwords.google.com/KeywordPlanner">Google Keyword Planner</a></li>
<li><a href="http://www.google.com/analytics/">Google Analytics</a></li>
<li><a href="https://support.google.com/analytics/answer/1745147">Website Optimizer</a></li>
</ul>
<p>Note: Checkout the <a href="https://www.youtube.com/watch?v=9yKjrdcC8wA">Google Trifecta Video</a>.</p>


This post was originally on a blog I started for creating web applications. This post goes into using developer tools to help you develop your web applications.

## Cross Browser Tools

* [Ghostlab](http://vanamco.com/ghostlab/) - Synchronized browser testing for web and mobile.  Test files and URLs against multiple devices by syncing clicks, scrolls, keystrokes across the devices. $49 for a license.
* [Edge Inspect CC](https://creative.adobe.com/products/inspect) - Synchronized Browsing & Refreshing. Test files and URLs agaisnt multiple devices at once.  Part of the Adobe Creative Cloud.
* [Live Reload](http://livereload.com/) - LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. $10 for Mac. Free for other platforms.
* [Parallels](https://www.parallels.com/) - Run Windows on Your Mac.  Useful for testing Internet Explorer on OSX.

## Google Chrome Tools

* [CSSDig](http://cssdig.com/) - Look at your CSS in a way that easily allows you to refactor it.  

## User Interface Tools

* [UX Check](www.uxcheck.co) - UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation.  It gives you tools for making notes on websites.
* [Good UI](www.googleui.org) - Data stories concerning UI. Tips and hints for a better user experience.  They have a paid-for newsletter.
* [Little Big Details](http://littlebigdetails.com/) contains design inspiration from the point of view of the users.
* [Adobe Color CC](https://color.adobe.com/) - Formerly known as Kuler, this tools lets you pick color schemes.
* [Material Palette](http://www.materialpalette.com/) - Preview simple color schemes.  Pick two colors and preview what they will look like on a simple site.

## Usage Trends

* [W3Techs](http://w3techs.com/) has a lot of technology surveys that can show you current technology trends.  It will show changes in market share, which CMS systems are popular, etc.
* [Stack Share](http://stackshare.io/) - see what technology stacks other platforms are using.

## Images and Stock Photos

* [Subtle Patterns](http://subtlepatterns.com/) - Sublte pattern backgrounds for websites.
* [Unsplash](https://unsplash.com/) - Large, high-resolution, splash photos for free.
* [Resplashed](http://www.resplashed.com/) - HD images.
* [Stock photos list ad Medium](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b) - List of great stock photo resources.
* [SuperFamous](http://superfamous.com/)
* [IMCreator](http://www.imcreator.com/free)
* [The Pattern Library](http://thepatternlibrary.com/)
* [Pic Jumbo](http://picjumbo.com/)

## Templates

### HTML5 Templates

* [HTML5 Up](http://html5up.net/) - fully responsive, free, HTML5 templates.
* [HTML5 Templates](http://themes.3rdwavemedia.com/) - UX centred HTML5 Bootstrap themes and templates.
* [Templated](http://templated.co/) - A collection of free CSS and HTML5 site templates.

## Emails

* [Ink](http://zurb.com/ink/) - Tool for helping create emails.
* [BeeFree](https://beefree.io/) - Tool for helping create emails.

## SEO

* [Google Keyword Planner](https://adwords.google.com/KeywordPlanner)
* [Google Analytics](http://www.google.com/analytics/)
* [Website Optimizer](https://support.google.com/analytics/answer/1745147)

Note: Checkout the [Google Trifecta Video](https://www.youtube.com/watch?v=9yKjrdcC8wA).


Developer Tools

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    input: "input",
    a: "a",
    code: "code",
    pre: "pre"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into User Interface design for web applications."
    }), "\n", _jsx(_components.p, {
      children: "User Experience is one of the most important parts of web applications."
    }), "\n", _jsx(_components.p, {
      children: "The following are tips and questions to consider when working on your web application user interface."
    }), "\n", _jsx(_components.h2, {
      children: "Test for Consistency Between Browsers"
    }), "\n", _jsx(_components.p, {
      children: "Are there tests for consistency with:"
    }), "\n", _jsxs(_components.ul, {
      className: "contains-task-list",
      children: ["\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "The ", _jsx(_components.a, {
          href: "http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29",
          children: "Gecko"
        }), " engine - i.e. ", _jsx(_components.a, {
          href: "http://firefox.com/",
          children: "Firefox"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "The Webkit engine - i.e. ", _jsx(_components.a, {
          href: "http://www.apple.com/safari/",
          children: "Safari"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", _jsx(_components.a, {
          href: "http://www.google.com/chrome",
          children: "Chrome"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", _jsx(_components.a, {
          href: "http://www.opera.com/",
          children: "Opera"
        }), "."]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "IE Browsers - take advantage of the ", _jsx(_components.a, {
          href: "http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en",
          children: "Application Compatibility VPC Images"
        }), "."]
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["For IE Browsers, there is a Github project call ", _jsx(_components.a, {
        href: "https://github.com/xdissent/ievms",
        children: "ievms"
      }), " which provides Virtual Machines with IE6, IE7, IE8, IE8, IE10, and IE11."]
    }), "\n", _jsxs(_components.p, {
      children: ["Also consider how the same browser will render your site on differnet operating systems. Consider a service like ", _jsx(_components.a, {
        href: "http://www.browsershots.org/",
        children: "Browsershots"
      }), " or ", _jsx(_components.a, {
        href: "https://litmus.com/",
        children: "Litmus"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Do your Positive, Negative, and Neutral Buttons look different?"
    }), "\n", _jsxs(_components.p, {
      children: ["Image from ", _jsx(_components.a, {
        href: "http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/",
        children: "UX Movement"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different.  Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness."
    }), "\n", _jsx(_components.h2, {
      children: "Test for Mobile Consistency"
    }), "\n", _jsx(_components.p, {
      children: "Are there tests for consistency with:"
    }), "\n", _jsxs(_components.ul, {
      className: "contains-task-list",
      children: ["\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Android phones and tablets"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "iOS phones and tablets"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Screen readers"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Search engines"]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "For more information, check out Mobile and Developer Tools."
    }), "\n", _jsx(_components.h2, {
      children: "Do you have a staging environment?"
    }), "\n", _jsx(_components.p, {
      children: "Can you deploy updates without affecting your users?"
    }), "\n", _jsx(_components.p, {
      children: "Testing and staging environments are important for being able to test features, architecture, etc without breaking the user's session."
    }), "\n", _jsxs(_components.p, {
      children: ["Have an automated way of deploying approved changes to the live site. Consider using a version control system with an automated build system (something like ", _jsx(_components.a, {
        href: "http://maven.apache.org/",
        children: "Maven"
      }), ")."]
    }), "\n", _jsx(_components.h2, {
      children: "Are errors handled in a friendly matter?"
    }), "\n", _jsx(_components.p, {
      children: "Users should receive easy to read error messages."
    }), "\n", _jsx(_components.p, {
      children: "Users should never see:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Out Of Memory errors"
      }), "\n", _jsx(_components.li, {
        children: "Raw 404 pages"
      }), "\n", _jsx(_components.li, {
        children: "Stack Traces"
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Is user info crawlable on public pages?"
    }), "\n", _jsx(_components.p, {
      children: "Try not to have users' email in plain text on public facing pages.  They might get spammed."
    }), "\n", _jsxs(_components.h2, {
      children: ["Is the ", _jsx(_components.code, {
        children: "rel=\"nofollow\""
      }), " attribute on user-generated links?"]
    }), "\n", _jsxs(_components.p, {
      children: ["Avoid spam by putting the ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Nofollow",
        children: "nofollow"
      }), " on user generated links."]
    }), "\n", _jsx(_components.h2, {
      children: "Does your site have built in rate limiting and velocity checking?"
    }), "\n", _jsx(_components.p, {
      children: "Any user actions should have rate limiting and velocity checking built in.  This is also a security issue."
    }), "\n", _jsxs(_components.p, {
      children: ["Look into ", _jsx(_components.a, {
        href: "http://blog.codinghorror.com/rate-limiting-and-velocity-checking/",
        children: "Coding Horror's post on rate limiting and velocity checking"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "No inline styles"
    }), "\n", _jsx(_components.p, {
      children: "All CSS should be in stylesheets."
    }), "\n", _jsx(_components.h2, {
      children: "Accessibility"
    }), "\n", _jsx(_components.p, {
      children: "Check to make sure your website is navigable from screen readers."
    }), "\n", _jsxs(_components.p, {
      children: ["If you are using ", _jsx(_components.a, {
        href: "http://getbootstrap.com/",
        children: "Twitter Bootstrap"
      }), ", look into the ", _jsx(_components.a, {
        href: "http://paypal.github.io/bootstrap-accessibility-plugin/",
        children: "Bootstrap accessibility plugin"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["If you are using ", _jsx(_components.a, {
        href: "http://foundation.zurb.com/",
        children: "Foundation"
      }), ", look into how ", _jsx(_components.a, {
        href: "http://zurb.com/article/1337/foundation-now-helps-you-build-accessible",
        children: "Foundation is built around accessibility"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "For more on accessibility, see the full page on Accessibility."
    }), "\n", _jsx(_components.h2, {
      children: "Are you using HTML5?"
    }), "\n", _jsxs(_components.p, {
      children: ["If you can, start out by using HTML5.  If you do so, remember to include the ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/HTML5_Shiv",
        children: "HTML5 Shiv"
      }), " (or Shim) so that IE version before 9 can use HTML5 elements."]
    }), "\n", _jsxs(_components.p, {
      children: ["Look into ", _jsx(_components.a, {
        href: "http://html5boilerplate.com/",
        children: "HTML5 Boilerplate"
      }), " or ", _jsx(_components.a, {
        href: "http://www.initializr.com/",
        children: "Initialzr"
      }), " for an HTML5 boilerplate that comes with the HTML5 shim, normalize.css, and Modernizr."]
    }), "\n", _jsx(_components.h2, {
      children: "Consider Using Normalize.css"
    }), "\n", _jsxs(_components.p, {
      children: ["Consider reseting the browser style sheets or using ", _jsx(_components.a, {
        href: "http://necolas.github.io/normalize.css/",
        children: "normalize.css"
      }), " for consistency between browsers."]
    }), "\n", _jsx(_components.h2, {
      children: "Are you using Semantic HTML?"
    }), "\n", _jsxs(_components.p, {
      children: ["Recent HTML standards discourage the use of the ", _jsx(_components.code, {
        children: "<i>"
      }), " in preference for the ", _jsx(_components.code, {
        children: "<em>"
      }), " tag. Other HTML5 tas to consider using are:"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<article>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<aside>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<details>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<figcaption>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<figure>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<footer>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<header>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<main>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<mark>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<nav>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<section>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<summary>"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.code, {
          children: "<time>"
        })
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Redirect after a POST"
    }), "\n", _jsx(_components.p, {
      children: "After a user POSTs data, redirect to a success page, to prevent a refresh from submitting data again."
    }), "\n", _jsx(_components.h2, {
      children: "Use Progressive Enhancement"
    }), "\n", _jsx(_components.p, {
      children: "Allow graceful degradation of your website."
    }), "\n", _jsxs(_components.ul, {
      className: "contains-task-list",
      children: ["\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Basic content should be accessible to all web browsers"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Basic functionality should be accessible to all web browsers"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Sparse, semantic markup contains all content"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Enhanced layout is provided by externally linked CSS"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "Enhanced behavior is provided by unobtrusive, externally linked JavaScript"]
      }), "\n", _jsxs(_components.li, {
        className: "task-list-item",
        children: [_jsx(_components.input, {
          type: "checkbox",
          disabled: true
        }), " ", "End-user web browser preferences are respected"]
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["See ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Progressive_enhancement",
        children: "Progressive Enhancement"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Validate Forms"
    }), "\n", _jsx(_components.p, {
      children: "Going along with Security, make sure to validate all form input on the server side and give useful errors back to the user.  Once proper form security handling has been implemented, add in client side validation.  You can use HTML5's simple validation to add a small layer of responsive validation:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-html",
        children: "<input id=\"username\" placeholder=\"John Jones\" required>\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["You can use the ", _jsx(_components.code, {
        children: "required"
      }), " attribute to let users know on the client side before they submit their form that a field is required."]
    }), "\n", _jsx(_components.p, {
      children: "You can use the new input type to help with input validation as well:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-html",
        children: "<input type=\"email\" required>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "You can mark invalid input with CSS as well:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "language-css",
        children: "input:required:invalid {\n  background: red;\n}\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Checkout ", _jsx(_components.a, {
        href: "http://basicuse.net/articles/pl/textile/html_css/form_validation_in_html5",
        children: "Form Validation in HTML 5"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Use CSS Animations over JavaScript Animations"
    }), "\n", _jsxs(_components.p, {
      children: ["You can now use CSS animations instead of relying on JavaScript.  You can read more about CSS animations on the ", _jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations",
        children: "Mozilla Developer Network"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Look at Little Big Details"
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "http://littlebigdetails.com/",
        children: "Little Big Details"
      }), " contains design inspiration from the point of view of the users."]
    }), "\n", _jsx(_components.p, {
      children: "For more websites about UI, look at our developer tools list."
    }), "\n", _jsx(_components.h2, {
      children: "Responsive Grids"
    }), "\n", _jsx(_components.p, {
      children: "Having a responsve layout is great for creating one application that looks good on mobile and desktop devices.  A Responsive Layout can be achieved by using popular frameworks like:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://getbootstrap.com/",
          children: "Bootstrap"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://semantic-ui.com/",
          children: "SemanticUI"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://foundation.zurb.com/",
          children: "Foundation"
        })
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "and more."
    }), "\n", _jsxs(_components.p, {
      children: ["You can also create a custom grid if the above frameworks are too large for you to use.  Check out ", _jsx(_components.a, {
        href: "http://jordanlev.github.io/grid/",
        children: "this tutorial on Minimal Responsive Grids"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into User Interface design for web applications.</p>
<p>User Experience is one of the most important parts of web applications.</p>
<p>The following are tips and questions to consider when working on your web application user interface.</p>
<h2>Test for Consistency Between Browsers</h2>
<p>Are there tests for consistency with:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/> The <a href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29">Gecko</a> engine - i.e. <a href="http://firefox.com/">Firefox</a>.</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> The Webkit engine - i.e. <a href="http://www.apple.com/safari/">Safari</a>.</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> <a href="http://www.google.com/chrome">Chrome</a>.</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> <a href="http://www.opera.com/">Opera</a>.</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> IE Browsers - take advantage of the <a href="http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&amp;displaylang=en">Application Compatibility VPC Images</a>.</li>
</ul>
<p>For IE Browsers, there is a Github project call <a href="https://github.com/xdissent/ievms">ievms</a> which provides Virtual Machines with IE6, IE7, IE8, IE8, IE10, and IE11.</p>
<p>Also consider how the same browser will render your site on differnet operating systems. Consider a service like <a href="http://www.browsershots.org/">Browsershots</a> or <a href="https://litmus.com/">Litmus</a>.</p>
<h2>Do your Positive, Negative, and Neutral Buttons look different?</h2>
<p>Image from <a href="http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/">UX Movement</a>.</p>
<p>Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different.  Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.</p>
<h2>Test for Mobile Consistency</h2>
<p>Are there tests for consistency with:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/> Android phones and tablets</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> iOS phones and tablets</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> Screen readers</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> Search engines</li>
</ul>
<p>For more information, check out Mobile and Developer Tools.</p>
<h2>Do you have a staging environment?</h2>
<p>Can you deploy updates without affecting your users?</p>
<p>Testing and staging environments are important for being able to test features, architecture, etc without breaking the user&#x27;s session.</p>
<p>Have an automated way of deploying approved changes to the live site. Consider using a version control system with an automated build system (something like <a href="http://maven.apache.org/">Maven</a>).</p>
<h2>Are errors handled in a friendly matter?</h2>
<p>Users should receive easy to read error messages.</p>
<p>Users should never see:</p>
<ul>
<li>Out Of Memory errors</li>
<li>Raw 404 pages</li>
<li>Stack Traces</li>
</ul>
<h2>Is user info crawlable on public pages?</h2>
<p>Try not to have users&#x27; email in plain text on public facing pages.  They might get spammed.</p>
<h2>Is the <code>rel=&quot;nofollow&quot;</code> attribute on user-generated links?</h2>
<p>Avoid spam by putting the <a href="http://en.wikipedia.org/wiki/Nofollow">nofollow</a> on user generated links.</p>
<h2>Does your site have built in rate limiting and velocity checking?</h2>
<p>Any user actions should have rate limiting and velocity checking built in.  This is also a security issue.</p>
<p>Look into <a href="http://blog.codinghorror.com/rate-limiting-and-velocity-checking/">Coding Horror&#x27;s post on rate limiting and velocity checking</a> for more information.</p>
<h2>No inline styles</h2>
<p>All CSS should be in stylesheets.</p>
<h2>Accessibility</h2>
<p>Check to make sure your website is navigable from screen readers.</p>
<p>If you are using <a href="http://getbootstrap.com/">Twitter Bootstrap</a>, look into the <a href="http://paypal.github.io/bootstrap-accessibility-plugin/">Bootstrap accessibility plugin</a>.</p>
<p>If you are using <a href="http://foundation.zurb.com/">Foundation</a>, look into how <a href="http://zurb.com/article/1337/foundation-now-helps-you-build-accessible">Foundation is built around accessibility</a>.</p>
<p>For more on accessibility, see the full page on Accessibility.</p>
<h2>Are you using HTML5?</h2>
<p>If you can, start out by using HTML5.  If you do so, remember to include the <a href="http://en.wikipedia.org/wiki/HTML5_Shiv">HTML5 Shiv</a> (or Shim) so that IE version before 9 can use HTML5 elements.</p>
<p>Look into <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> or <a href="http://www.initializr.com/">Initialzr</a> for an HTML5 boilerplate that comes with the HTML5 shim, normalize.css, and Modernizr.</p>
<h2>Consider Using Normalize.css</h2>
<p>Consider reseting the browser style sheets or using <a href="http://necolas.github.io/normalize.css/">normalize.css</a> for consistency between browsers.</p>
<h2>Are you using Semantic HTML?</h2>
<p>Recent HTML standards discourage the use of the <code>&lt;i&gt;</code> in preference for the <code>&lt;em&gt;</code> tag. Other HTML5 tas to consider using are:</p>
<ul>
<li><code>&lt;article&gt;</code></li>
<li><code>&lt;aside&gt;</code></li>
<li><code>&lt;details&gt;</code></li>
<li><code>&lt;figcaption&gt;</code></li>
<li><code>&lt;figure&gt;</code></li>
<li><code>&lt;footer&gt;</code></li>
<li><code>&lt;header&gt;</code></li>
<li><code>&lt;main&gt;</code></li>
<li><code>&lt;mark&gt;</code></li>
<li><code>&lt;nav&gt;</code></li>
<li><code>&lt;section&gt;</code></li>
<li><code>&lt;summary&gt;</code></li>
<li><code>&lt;time&gt;</code></li>
</ul>
<h2>Redirect after a POST</h2>
<p>After a user POSTs data, redirect to a success page, to prevent a refresh from submitting data again.</p>
<h2>Use Progressive Enhancement</h2>
<p>Allow graceful degradation of your website.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/> Basic content should be accessible to all web browsers</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> Basic functionality should be accessible to all web browsers</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> Sparse, semantic markup contains all content</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> Enhanced layout is provided by externally linked CSS</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> Enhanced behavior is provided by unobtrusive, externally linked JavaScript</li>
<li class="task-list-item"><input type="checkbox" disabled=""/> End-user web browser preferences are respected</li>
</ul>
<p>See <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a> for more information.</p>
<h2>Validate Forms</h2>
<p>Going along with Security, make sure to validate all form input on the server side and give useful errors back to the user.  Once proper form security handling has been implemented, add in client side validation.  You can use HTML5&#x27;s simple validation to add a small layer of responsive validation:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-html">&lt;input id=&quot;username&quot; placeholder=&quot;John Jones&quot; required&gt;
</code></pre></div>
<p>You can use the <code>required</code> attribute to let users know on the client side before they submit their form that a field is required.</p>
<p>You can use the new input type to help with input validation as well:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-html">&lt;input type=&quot;email&quot; required&gt;
</code></pre></div>
<p>You can mark invalid input with CSS as well:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code class="language-css">input:required:invalid {
  background: red;
}
</code></pre></div>
<p>Checkout <a href="http://basicuse.net/articles/pl/textile/html_css/form_validation_in_html5">Form Validation in HTML 5</a> for more information.</p>
<h2>Use CSS Animations over JavaScript Animations</h2>
<p>You can now use CSS animations instead of relying on JavaScript.  You can read more about CSS animations on the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations">Mozilla Developer Network</a>.</p>
<h2>Look at Little Big Details</h2>
<p><a href="http://littlebigdetails.com/">Little Big Details</a> contains design inspiration from the point of view of the users.</p>
<p>For more websites about UI, look at our developer tools list.</p>
<h2>Responsive Grids</h2>
<p>Having a responsve layout is great for creating one application that looks good on mobile and desktop devices.  A Responsive Layout can be achieved by using popular frameworks like:</p>
<ul>
<li><a href="http://getbootstrap.com/">Bootstrap</a></li>
<li><a href="http://semantic-ui.com/">SemanticUI</a></li>
<li><a href="http://foundation.zurb.com/">Foundation</a></li>
</ul>
<p>and more.</p>
<p>You can also create a custom grid if the above frameworks are too large for you to use.  Check out <a href="http://jordanlev.github.io/grid/">this tutorial on Minimal Responsive Grids</a>.</p>


This post was originally on a blog I started for creating web applications. This post goes into User Interface design for web applications.

User Experience is one of the most important parts of web applications.

The following are tips and questions to consider when working on your web application user interface.

## Test for Consistency Between Browsers

Are there tests for consistency with:

- [ ] The [Gecko](http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29) engine - i.e. [Firefox](http://firefox.com/).
- [ ] The Webkit engine - i.e. [Safari](http://www.apple.com/safari/).
- [ ] [Chrome](http://www.google.com/chrome).
- [ ] [Opera](http://www.opera.com/).
- [ ] IE Browsers - take advantage of the [Application Compatibility VPC Images](http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en).

For IE Browsers, there is a Github project call [ievms](https://github.com/xdissent/ievms) which provides Virtual Machines with IE6, IE7, IE8, IE8, IE10, and IE11.

Also consider how the same browser will render your site on differnet operating systems. Consider a service like [Browsershots](http://www.browsershots.org/) or [Litmus](https://litmus.com/).

## Do your Positive, Negative, and Neutral Buttons look different?

Image from [UX Movement](http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/).

Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different.  Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.

## Test for Mobile Consistency

Are there tests for consistency with:

- [ ] Android phones and tablets
- [ ] iOS phones and tablets
- [ ] Screen readers
- [ ] Search engines

For more information, check out Mobile and Developer Tools.

## Do you have a staging environment?

Can you deploy updates without affecting your users?

Testing and staging environments are important for being able to test features, architecture, etc without breaking the user's session.

Have an automated way of deploying approved changes to the live site. Consider using a version control system with an automated build system (something like [Maven](http://maven.apache.org/)).

## Are errors handled in a friendly matter?

Users should receive easy to read error messages.

Users should never see:

- Out Of Memory errors
- Raw 404 pages
- Stack Traces

## Is user info crawlable on public pages?

Try not to have users' email in plain text on public facing pages.  They might get spammed.

## Is the `rel="nofollow"` attribute on user-generated links?

Avoid spam by putting the [nofollow](http://en.wikipedia.org/wiki/Nofollow) on user generated links.

## Does your site have built in rate limiting and velocity checking?

Any user actions should have rate limiting and velocity checking built in.  This is also a security issue.

Look into [Coding Horror's post on rate limiting and velocity checking](http://blog.codinghorror.com/rate-limiting-and-velocity-checking/) for more information.

## No inline styles

All CSS should be in stylesheets.

## Accessibility

Check to make sure your website is navigable from screen readers.

If you are using [Twitter Bootstrap](http://getbootstrap.com/), look into the [Bootstrap accessibility plugin](http://paypal.github.io/bootstrap-accessibility-plugin/).

If you are using [Foundation](http://foundation.zurb.com/), look into how [Foundation is built around accessibility](http://zurb.com/article/1337/foundation-now-helps-you-build-accessible).

For more on accessibility, see the full page on Accessibility.

## Are you using HTML5?

If you can, start out by using HTML5.  If you do so, remember to include the [HTML5 Shiv](http://en.wikipedia.org/wiki/HTML5_Shiv) (or Shim) so that IE version before 9 can use HTML5 elements.

Look into [HTML5 Boilerplate](http://html5boilerplate.com/) or [Initialzr](http://www.initializr.com/) for an HTML5 boilerplate that comes with the HTML5 shim, normalize.css, and Modernizr.

## Consider Using Normalize.css

Consider reseting the browser style sheets or using [normalize.css](http://necolas.github.io/normalize.css/) for consistency between browsers.

## Are you using Semantic HTML?

Recent HTML standards discourage the use of the `<i>` in preference for the `<em>` tag. Other HTML5 tas to consider using are:

- `<article>`
- `<aside>`
- `<details>`
- `<figcaption>`
- `<figure>`
- `<footer>`
- `<header>`
- `<main>`
- `<mark>`
- `<nav>`
- `<section>`
- `<summary>`
- `<time>`

## Redirect after a POST

After a user POSTs data, redirect to a success page, to prevent a refresh from submitting data again.

## Use Progressive Enhancement

Allow graceful degradation of your website.

- [ ] Basic content should be accessible to all web browsers
- [ ] Basic functionality should be accessible to all web browsers
- [ ] Sparse, semantic markup contains all content
- [ ] Enhanced layout is provided by externally linked CSS
- [ ] Enhanced behavior is provided by unobtrusive, externally linked JavaScript
- [ ] End-user web browser preferences are respected

See [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) for more information.

## Validate Forms

Going along with Security, make sure to validate all form input on the server side and give useful errors back to the user.  Once proper form security handling has been implemented, add in client side validation.  You can use HTML5's simple validation to add a small layer of responsive validation:

```html
<input id="username" placeholder="John Jones" required>
```

You can use the `required` attribute to let users know on the client side before they submit their form that a field is required.

You can use the new input type to help with input validation as well:

```html
<input type="email" required>
```

You can mark invalid input with CSS as well:

```css
input:required:invalid {
  background: red;
}
```

Checkout [Form Validation in HTML 5](http://basicuse.net/articles/pl/textile/html_css/form_validation_in_html5) for more information.

## Use CSS Animations over JavaScript Animations

You can now use CSS animations instead of relying on JavaScript.  You can read more about CSS animations on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations).

## Look at Little Big Details

[Little Big Details](http://littlebigdetails.com/) contains design inspiration from the point of view of the users.

For more websites about UI, look at our developer tools list.

## Responsive Grids

Having a responsve layout is great for creating one application that looks good on mobile and desktop devices.  A Responsive Layout can be achieved by using popular frameworks like:

- [Bootstrap](http://getbootstrap.com/)
- [SemanticUI](http://semantic-ui.com/)
- [Foundation](http://foundation.zurb.com/)

and more.

You can also create a custom grid if the above frameworks are too large for you to use.  Check out [this tutorial on Minimal Responsive Grids](http://jordanlev.github.io/grid/).


User Interface

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    code: "code",
    a: "a",
    blockquote: "blockquote"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into using web standards and best practices."
    }), "\n", _jsx(_components.h2, {
      children: "Check that GET and POST Requests are Used Properly"
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "GET"
      }), " request should be for requesting information."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "POST"
      }), " requests should be for sending information."]
    }), "\n", _jsxs(_components.p, {
      children: ["A ", _jsx(_components.code, {
        children: "GET"
      }), " request should not change the object that is being requests."]
    }), "\n", _jsx(_components.h2, {
      children: "Validate your HTML and CSS"
    }), "\n", _jsxs(_components.p, {
      children: ["Write your ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/xhtml1/",
        children: "XHTML"
      }), " or ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/REC-html40/",
        children: "HTML"
      }), " and ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/CSS2/",
        children: "CSS"
      }), " according to ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/",
        children: "the W3C specifications"
      }), " and make sure they ", _jsx(_components.a, {
        href: "http://validator.w3.org/",
        children: "validate"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "Avoid browser quirks modes by doing this."
    }), "\n", _jsx(_components.h2, {
      children: "Use 301 and 302 Redirects Correctly"
    }), "\n", _jsxs(_components.p, {
      children: ["According to ", _jsx(_components.a, {
        href: "http://www.bigoakinc.com/blog/when-to-use-a-301-vs-302-redirect/",
        children: "Bigoak Inc"
      }), ":"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "All three major search engines handle 301 redirects the same, that is to say they ignore the original URL and instead index the destination URL."
      }), "\n"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "The three major engines handle 302 redirects very differently, and because of this 302s are typically not recommended."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Best practice is to use 301 redirects (which are permanent and are usually cached by the browser).  For temporary moves, use 302 redirects."
    }), "\n", _jsx(_components.h2, {
      children: "Force IE to Use Unicode for Parameters"
    }), "\n", _jsxs(_components.p, {
      children: ["If you have ever seen ", _jsx(_components.code, {
        children: "utf8=✓"
      }), " in the parameter listing of a url, it's in order to ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/3222013/what-is-the-snowman-param-in-ruby-on-rails-3-forms-for/3348524#3348524",
        children: "force Internet Explorer (5, 6, 7 and 8) to encode its parameters as unicode"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into using web standards and best practices.</p>
<h2>Check that GET and POST Requests are Used Properly</h2>
<p><code>GET</code> request should be for requesting information.</p>
<p><code>POST</code> requests should be for sending information.</p>
<p>A <code>GET</code> request should not change the object that is being requests.</p>
<h2>Validate your HTML and CSS</h2>
<p>Write your <a href="http://www.w3.org/TR/xhtml1/">XHTML</a> or <a href="http://www.w3.org/TR/REC-html40/">HTML</a> and <a href="http://www.w3.org/TR/CSS2/">CSS</a> according to <a href="http://www.w3.org/TR/">the W3C specifications</a> and make sure they <a href="http://validator.w3.org/">validate</a>.</p>
<p>Avoid browser quirks modes by doing this.</p>
<h2>Use 301 and 302 Redirects Correctly</h2>
<p>According to <a href="http://www.bigoakinc.com/blog/when-to-use-a-301-vs-302-redirect/">Bigoak Inc</a>:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>All three major search engines handle 301 redirects the same, that is to say they ignore the original URL and instead index the destination URL.</p>
</blockquote>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>The three major engines handle 302 redirects very differently, and because of this 302s are typically not recommended.</p>
</blockquote>
<p>Best practice is to use 301 redirects (which are permanent and are usually cached by the browser).  For temporary moves, use 302 redirects.</p>
<h2>Force IE to Use Unicode for Parameters</h2>
<p>If you have ever seen <code>utf8=✓</code> in the parameter listing of a url, it&#x27;s in order to <a href="http://stackoverflow.com/questions/3222013/what-is-the-snowman-param-in-ruby-on-rails-3-forms-for/3348524#3348524">force Internet Explorer (5, 6, 7 and 8) to encode its parameters as unicode</a>.</p>


This post was originally on a blog I started for creating web applications. This post goes into using web standards and best practices.

## Check that GET and POST Requests are Used Properly

`GET` request should be for requesting information.

`POST` requests should be for sending information.

A `GET` request should not change the object that is being requests.

## Validate your HTML and CSS

Write your [XHTML](http://www.w3.org/TR/xhtml1/) or [HTML](http://www.w3.org/TR/REC-html40/) and [CSS](http://www.w3.org/TR/CSS2/) according to [the W3C specifications](http://www.w3.org/TR/) and make sure they [validate](http://validator.w3.org/).

Avoid browser quirks modes by doing this.

## Use 301 and 302 Redirects Correctly

According to [Bigoak Inc](http://www.bigoakinc.com/blog/when-to-use-a-301-vs-302-redirect/):

> All three major search engines handle 301 redirects the same, that is to say they ignore the original URL and instead index the destination URL.

> The three major engines handle 302 redirects very differently, and because of this 302s are typically not recommended.

Best practice is to use 301 redirects (which are permanent and are usually cached by the browser).  For temporary moves, use 302 redirects.

## Force IE to Use Unicode for Parameters

If you have ever seen `utf8=✓` in the parameter listing of a url, it's in order to [force Internet Explorer (5, 6, 7 and 8) to encode its parameters as unicode](http://stackoverflow.com/questions/3222013/what-is-the-snowman-param-in-ruby-on-rails-3-forms-for/3348524#3348524).  


Blog Page 3