"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    li: "li",
    p: "p",
    ul: "ul",
    ...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, {
    ...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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    h3: "h3",
    img: "img",
    li: "li",
    mermaid: "mermaid",
    p: "p",
    strong: "strong",
    ul: "ul",
    ...props.components
  };
  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(_components.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(_components.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(_components.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, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<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>
<mermaid chart="graph RL
  NLP(Clarity Hub NLP API) --&gt; API(Clarity Hub Infer API) --&gt; Consumer"></mermaid>
<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>
<mermaid chart="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"></mermaid>
<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>
<mermaid chart="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"></mermaid>
<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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    h2: "h2",
    li: "li",
    p: "p",
    ul: "ul",
    ...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, {
    ...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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    h2: "h2",
    li: "li",
    p: "p",
    ul: "ul",
    ...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, {
    ...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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    h2: "h2",
    h3: "h3",
    li: "li",
    p: "p",
    ul: "ul",
    ...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, {
    ...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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    code: "code",
    h2: "h2",
    input: "input",
    li: "li",
    p: "p",
    pre: "pre",
    ul: "ul",
    ...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, {
    ...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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] 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

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    blockquote: "blockquote",
    code: "code",
    h2: "h2",
    p: "p",
    ...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, {
    ...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).  


Web Standards

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    blockquote: "blockquote",
    code: "code",
    h2: "h2",
    li: "li",
    p: "p",
    pre: "pre",
    strong: "strong",
    ul: "ul",
    ...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 security for web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Against SQL Injection"
    }), "\n", _jsxs(_components.p, {
      children: ["Read about ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/SQL_injection",
        children: "SQL injection"
      }), " and learn how to prevent it for the langauge and database you are using."]
    }), "\n", _jsx(_components.h2, {
      children: "All User Input is Filtered"
    }), "\n", _jsx(_components.p, {
      children: "Never trust user input.  This includes cookies and hidden form field values."
    }), "\n", _jsx(_components.h2, {
      children: "Read the Open Web Application Security Project"
    }), "\n", _jsxs(_components.p, {
      children: ["Read ", _jsx(_components.a, {
        href: "https://www.owasp.org/index.php/Category:OWASP_Guide_Project",
        children: "the Open Web Application Security Project"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "All Passwords are Hashed with a Salt"
    }), "\n", _jsxs(_components.p, {
      children: ["Hash all passwords using a ", _jsx(_components.a, {
        href: "http://security.stackexchange.com/q/21263/396",
        children: "salt"
      }), " and all salts are different to prevent against ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Rainbow_table",
        children: "rainbow attacks"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["The hashing algorithm should be bcrypt or scrypt for storing passwords.  Look into ", _jsx(_components.a, {
        href: "http://codahale.com/how-to-safely-store-a-password/",
        children: "How To Safely Sroe a Password"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["Do ", _jsx(_components.strong, {
        children: "not"
      }), " use MD5 or any SHA algorithm.  SHA algorithms are meant to be fast, which should not be used for trying to securely store passwords."]
    }), "\n", _jsx(_components.h2, {
      children: "Use a Standard Authentication System"
    }), "\n", _jsx(_components.p, {
      children: "Do not role your own authentication system."
    }), "\n", _jsx(_components.h2, {
      children: "Process Credit Card Information Correctly"
    }), "\n", _jsxs(_components.p, {
      children: ["Look into the ", _jsx(_components.a, {
        href: "https://www.pcisecuritystandards.org/",
        children: "PCI Security Standards"
      }), " for financial security information."]
    }), "\n", _jsx(_components.h2, {
      children: "Use HTTPS for Sensitive Data"
    }), "\n", _jsxs(_components.p, {
      children: ["Set up your ", _jsx(_components.a, {
        href: "http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt",
        children: "SSL"
      }), "/", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Https",
        children: "HTTPS"
      }), " certs correctly and check it against ", _jsx(_components.a, {
        href: "https://www.ssllabs.com/ssltest/",
        children: "SSL Labs Server Test"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Session Hijacking"
    }), "\n", _jsx(_components.p, {
      children: "Built in session systems are usually premade to handle these types of attacks. It is not recommended that you roll your own, but it should have the following features:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Encrypted data traffic.  The session key in particular should be encrypted, but ideally all traffic should be encrypted by using SSL/TLS."
      }), "\n", _jsx(_components.li, {
        children: "Long random session key.  Attackers should not be able to guess valid session keys."
      }), "\n", _jsxs(_components.li, {
        children: ["Regenerating the session id after a successful login.  Prevents [session fixation](", _jsx(_components.a, {
          href: "http://en.wikipedia.org/wiki/Session_fixation",
          children: "http://en.wikipedia.org/wiki/Session_fixation"
        }), "]."]
      }), "\n", _jsx(_components.li, {
        children: "Change the cookie value with each and every request.  This reduces the window for an attacker to hijack the session."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Cross Site Scripting (XSS)"
    }), "\n", _jsxs(_components.p, {
      children: ["Unfiltered query parameters that are added to the DOM are an easy way for attackers to use cross site scripting to pull data from your users.  Filter all query parameters; see ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Cross-site_scripting",
        children: "Cross-site Scripting"
      }), " for more information on common attacks and prevention methods."]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Page Embedding"
    }), "\n", _jsx(_components.p, {
      children: "You can prevent page embedding with the following header:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "X-Frame-Options: DENY\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "This will cause browsers to refuse requests for framing in that page."
    }), "\n", _jsxs(_components.p, {
      children: ["You can also prevent page embedding with JavaScript to prevent users from accessing your website in an iframe.  Look into this ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/7776281/javascript-jquery-how-to-detect-if-a-page-is-embedded-by-others",
        children: "StackOverflow solution"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Cross Site Request Forgeries"
    }), "\n", _jsx(_components.p, {
      children: "Cross site request forgeries are attacks by a malicious user whereby they craft a link to a site which a user is know to have been authenticated.  For example, say your site is a bank website; the malicious user may craft a URL for you site that when a user clicks on it, deposits money into the attacker's account.  The attacker then sends the link to users who may have been logged into your bank website."
    }), "\n", _jsxs(_components.p, {
      children: ["According to ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Cross-site_request_forgery",
        children: "Wikipedia"
      }), ":"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "At risk are web applications that perform actions based on input from trusted and authenticated users without requiring the user to authorize the specific action. A user who is authenticated by a cookie saved in the user's web browser could unknowingly send an HTTP request to a site that trusts the user and thereby causes an unwanted action."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Click Jacking"
    }), "\n", _jsxs(_components.p, {
      children: ["Similar to ", _jsx(_components.a, {
        href: "#prevent-page-embedding",
        children: "Page Embedding"
      }), ", click jacking works by:"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "A user might receive an email with a link to a video about a news item, but another valid page, say a product page on Amazon.com, can be \"hidden\" on top or underneath the \"PLAY\" button of the news video. The user tries to \"play\" the video but actually \"buys\" the product from Amazon."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Other known exploits include:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Tricking users into enabling their webcam and microphone through Flash"
      }), "\n", _jsx(_components.li, {
        children: "Tricking users into making their social networking profile information public"
      }), "\n", _jsx(_components.li, {
        children: "Making users follow someone on Twitter[8]"
      }), "\n", _jsx(_components.li, {
        children: "Sharing links on Facebook"
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["See ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Clickjacking",
        children: "Wikipedia"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Verify That Server Software is Up to Date"
    }), "\n", _jsx(_components.p, {
      children: "Make sure that the software on your system is up to date with the latest patches."
    }), "\n", _jsx(_components.h2, {
      children: "Verify That Packages, Modules, Plugins, etc are Up to Date"
    }), "\n", _jsx(_components.p, {
      children: "Make sure that the latest software used by your projest is up to date with the latest patches."
    }), "\n", _jsx(_components.h2, {
      children: "Verify That Your Database is Secured"
    }), "\n", _jsx(_components.p, {
      children: "Make sure that connections to the database are at least password protected.  Verify that only the least amount of permissions are being used."
    }), "\n", _jsx(_components.p, {
      children: "Make sure that confidential information is encrypted or hashed."
    }), "\n", _jsx(_components.h2, {
      children: "Attempt to Make Your App Run As Non-Root"
    }), "\n", _jsxs(_components.p, {
      children: ["Apply ", _jsx(_components.a, {
        href: "https://en.wikipedia.org/wiki/Principle_of_least_privilege",
        children: "the principle of least privilege"
      }), " and try to have your app run as non-root as often as possible."]
    }), "\n", _jsx(_components.h2, {
      children: "Use the Content-Security-Policy Header"
    }), "\n", _jsx(_components.p, {
      children: "Specify the following header to make the browser only run certain content depending on its origin:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "example"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "Content-Security-Policy: script-src 'self' https://apis.google.com\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "You can also specify the following type of content:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "script-src (JavaScript)"
      }), "\n", _jsx(_components.li, {
        children: "connect-src (XMLHttpRequest, WebSockets, and EventSource)"
      }), "\n", _jsx(_components.li, {
        children: "font-src (Fonts)"
      }), "\n", _jsx(_components.li, {
        children: "frame-src (Frame Urls)"
      }), "\n", _jsx(_components.li, {
        children: "img-src (Images)"
      }), "\n", _jsx(_components.li, {
        children: "media-src (Audio and Videos)"
      }), "\n", _jsx(_components.li, {
        children: "object-src (Flash)"
      }), "\n", _jsx(_components.li, {
        children: "style-src (CSS)"
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Do Not Allow Mime Sniffing with User Uploaded Content"
    }), "\n", _jsx(_components.p, {
      children: "You can tell browsers to not try to guess Mime Types of files with the following header:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "X-CONTENT-TYPE-OPTIONS: nosniff\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "For example, say a user uploads an HTML file. You intend to serve it to users as a text file, but the browser will attempt to serve it as an HTML page.  You can tell the browser that you know what you are doing and that the Mime Type you are providing is indeed correct by using the above header."
    }), "\n", _jsx(_components.h2, {
      children: "Force HTTPS Traffic"
    }), "\n", _jsx(_components.p, {
      children: "You can force HTTPS Traffic with the following header:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "Scrict-Transport-Security: max-age=31536000; includeSubDomains\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["This will force ", _jsx(_components.code, {
        children: "https://website.com"
      }), " even when typing in ", _jsx(_components.code, {
        children: "http://website.com"
      })]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...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 security for web applications.</p>
<h2>Prevent Against SQL Injection</h2>
<p>Read about <a href="http://en.wikipedia.org/wiki/SQL_injection">SQL injection</a> and learn how to prevent it for the langauge and database you are using.</p>
<h2>All User Input is Filtered</h2>
<p>Never trust user input.  This includes cookies and hidden form field values.</p>
<h2>Read the Open Web Application Security Project</h2>
<p>Read <a href="https://www.owasp.org/index.php/Category:OWASP_Guide_Project">the Open Web Application Security Project</a>.</p>
<h2>All Passwords are Hashed with a Salt</h2>
<p>Hash all passwords using a <a href="http://security.stackexchange.com/q/21263/396">salt</a> and all salts are different to prevent against <a href="http://en.wikipedia.org/wiki/Rainbow_table">rainbow attacks</a>.</p>
<p>The hashing algorithm should be bcrypt or scrypt for storing passwords.  Look into <a href="http://codahale.com/how-to-safely-store-a-password/">How To Safely Sroe a Password</a>.</p>
<p>Do <strong>not</strong> use MD5 or any SHA algorithm.  SHA algorithms are meant to be fast, which should not be used for trying to securely store passwords.</p>
<h2>Use a Standard Authentication System</h2>
<p>Do not role your own authentication system.</p>
<h2>Process Credit Card Information Correctly</h2>
<p>Look into the <a href="https://www.pcisecuritystandards.org/">PCI Security Standards</a> for financial security information.</p>
<h2>Use HTTPS for Sensitive Data</h2>
<p>Set up your <a href="http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt">SSL</a>/<a href="http://en.wikipedia.org/wiki/Https">HTTPS</a> certs correctly and check it against <a href="https://www.ssllabs.com/ssltest/">SSL Labs Server Test</a>.</p>
<h2>Prevent Session Hijacking</h2>
<p>Built in session systems are usually premade to handle these types of attacks. It is not recommended that you roll your own, but it should have the following features:</p>
<ul>
<li>Encrypted data traffic.  The session key in particular should be encrypted, but ideally all traffic should be encrypted by using SSL/TLS.</li>
<li>Long random session key.  Attackers should not be able to guess valid session keys.</li>
<li>Regenerating the session id after a successful login.  Prevents [session fixation](<a href="http://en.wikipedia.org/wiki/Session_fixation">http://en.wikipedia.org/wiki/Session_fixation</a>].</li>
<li>Change the cookie value with each and every request.  This reduces the window for an attacker to hijack the session.</li>
</ul>
<h2>Prevent Cross Site Scripting (XSS)</h2>
<p>Unfiltered query parameters that are added to the DOM are an easy way for attackers to use cross site scripting to pull data from your users.  Filter all query parameters; see <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">Cross-site Scripting</a> for more information on common attacks and prevention methods.</p>
<h2>Prevent Page Embedding</h2>
<p>You can prevent page embedding with the following header:</p>
<div class="overflow-auto rounded-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] dark:text-gray-100"><pre><code>X-Frame-Options: DENY
</code></pre></div>
<p>This will cause browsers to refuse requests for framing in that page.</p>
<p>You can also prevent page embedding with JavaScript to prevent users from accessing your website in an iframe.  Look into this <a href="http://stackoverflow.com/questions/7776281/javascript-jquery-how-to-detect-if-a-page-is-embedded-by-others">StackOverflow solution</a>.</p>
<h2>Prevent Cross Site Request Forgeries</h2>
<p>Cross site request forgeries are attacks by a malicious user whereby they craft a link to a site which a user is know to have been authenticated.  For example, say your site is a bank website; the malicious user may craft a URL for you site that when a user clicks on it, deposits money into the attacker&#x27;s account.  The attacker then sends the link to users who may have been logged into your bank website.</p>
<p>According to <a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery">Wikipedia</a>:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>At risk are web applications that perform actions based on input from trusted and authenticated users without requiring the user to authorize the specific action. A user who is authenticated by a cookie saved in the user&#x27;s web browser could unknowingly send an HTTP request to a site that trusts the user and thereby causes an unwanted action.</p>
</blockquote>
<h2>Prevent Click Jacking</h2>
<p>Similar to <a href="#prevent-page-embedding">Page Embedding</a>, click jacking works by:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>A user might receive an email with a link to a video about a news item, but another valid page, say a product page on Amazon.com, can be &quot;hidden&quot; on top or underneath the &quot;PLAY&quot; button of the news video. The user tries to &quot;play&quot; the video but actually &quot;buys&quot; the product from Amazon.</p>
</blockquote>
<p>Other known exploits include:</p>
<ul>
<li>Tricking users into enabling their webcam and microphone through Flash</li>
<li>Tricking users into making their social networking profile information public</li>
<li>Making users follow someone on Twitter[8]</li>
<li>Sharing links on Facebook</li>
</ul>
<p>See <a href="http://en.wikipedia.org/wiki/Clickjacking">Wikipedia</a> for more information.</p>
<h2>Verify That Server Software is Up to Date</h2>
<p>Make sure that the software on your system is up to date with the latest patches.</p>
<h2>Verify That Packages, Modules, Plugins, etc are Up to Date</h2>
<p>Make sure that the latest software used by your projest is up to date with the latest patches.</p>
<h2>Verify That Your Database is Secured</h2>
<p>Make sure that connections to the database are at least password protected.  Verify that only the least amount of permissions are being used.</p>
<p>Make sure that confidential information is encrypted or hashed.</p>
<h2>Attempt to Make Your App Run As Non-Root</h2>
<p>Apply <a href="https://en.wikipedia.org/wiki/Principle_of_least_privilege">the principle of least privilege</a> and try to have your app run as non-root as often as possible.</p>
<h2>Use the Content-Security-Policy Header</h2>
<p>Specify the following header to make the browser only run certain content depending on its origin:</p>
<p><strong>example</strong></p>
<div class="overflow-auto rounded-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] dark:text-gray-100"><pre><code>Content-Security-Policy: script-src &#x27;self&#x27; https://apis.google.com
</code></pre></div>
<p>You can also specify the following type of content:</p>
<ul>
<li>script-src (JavaScript)</li>
<li>connect-src (XMLHttpRequest, WebSockets, and EventSource)</li>
<li>font-src (Fonts)</li>
<li>frame-src (Frame Urls)</li>
<li>img-src (Images)</li>
<li>media-src (Audio and Videos)</li>
<li>object-src (Flash)</li>
<li>style-src (CSS)</li>
</ul>
<h2>Do Not Allow Mime Sniffing with User Uploaded Content</h2>
<p>You can tell browsers to not try to guess Mime Types of files with the following header:</p>
<div class="overflow-auto rounded-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] dark:text-gray-100"><pre><code>X-CONTENT-TYPE-OPTIONS: nosniff
</code></pre></div>
<p>For example, say a user uploads an HTML file. You intend to serve it to users as a text file, but the browser will attempt to serve it as an HTML page.  You can tell the browser that you know what you are doing and that the Mime Type you are providing is indeed correct by using the above header.</p>
<h2>Force HTTPS Traffic</h2>
<p>You can force HTTPS Traffic with the following header:</p>
<div class="overflow-auto rounded-2xl bg-[#0e005d6d] p-4 font-mono text-sm dark:bg-[#0e005d6d] dark:text-gray-100"><pre><code>Scrict-Transport-Security: max-age=31536000; includeSubDomains
</code></pre></div>
<p>This will force <code>https://website.com</code> even when typing in <code>http://website.com</code></p>


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

## Prevent Against SQL Injection

Read about [SQL injection](http://en.wikipedia.org/wiki/SQL_injection) and learn how to prevent it for the langauge and database you are using.

## All User Input is Filtered

Never trust user input.  This includes cookies and hidden form field values.

## Read the Open Web Application Security Project

Read [the Open Web Application Security Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).

## All Passwords are Hashed with a Salt

Hash all passwords using a [salt](http://security.stackexchange.com/q/21263/396) and all salts are different to prevent against [rainbow attacks](http://en.wikipedia.org/wiki/Rainbow_table).

The hashing algorithm should be bcrypt or scrypt for storing passwords.  Look into [How To Safely Sroe a Password](http://codahale.com/how-to-safely-store-a-password/).

Do **not** use MD5 or any SHA algorithm.  SHA algorithms are meant to be fast, which should not be used for trying to securely store passwords.

## Use a Standard Authentication System

Do not role your own authentication system.

## Process Credit Card Information Correctly

Look into the [PCI Security Standards](https://www.pcisecuritystandards.org/) for financial security information.

## Use HTTPS for Sensitive Data

Set up your [SSL](http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt)/[HTTPS](http://en.wikipedia.org/wiki/Https) certs correctly and check it against [SSL Labs Server Test](https://www.ssllabs.com/ssltest/).

## Prevent Session Hijacking

Built in session systems are usually premade to handle these types of attacks. It is not recommended that you roll your own, but it should have the following features:

- Encrypted data traffic.  The session key in particular should be encrypted, but ideally all traffic should be encrypted by using SSL/TLS.
- Long random session key.  Attackers should not be able to guess valid session keys.
- Regenerating the session id after a successful login.  Prevents [session fixation](http://en.wikipedia.org/wiki/Session_fixation].
- Change the cookie value with each and every request.  This reduces the window for an attacker to hijack the session.

## Prevent Cross Site Scripting (XSS)

Unfiltered query parameters that are added to the DOM are an easy way for attackers to use cross site scripting to pull data from your users.  Filter all query parameters; see [Cross-site Scripting](http://en.wikipedia.org/wiki/Cross-site_scripting) for more information on common attacks and prevention methods.

## Prevent Page Embedding

You can prevent page embedding with the following header:

```
X-Frame-Options: DENY
```

This will cause browsers to refuse requests for framing in that page.

You can also prevent page embedding with JavaScript to prevent users from accessing your website in an iframe.  Look into this [StackOverflow solution](http://stackoverflow.com/questions/7776281/javascript-jquery-how-to-detect-if-a-page-is-embedded-by-others).

## Prevent Cross Site Request Forgeries

Cross site request forgeries are attacks by a malicious user whereby they craft a link to a site which a user is know to have been authenticated.  For example, say your site is a bank website; the malicious user may craft a URL for you site that when a user clicks on it, deposits money into the attacker's account.  The attacker then sends the link to users who may have been logged into your bank website.

According to [Wikipedia](http://en.wikipedia.org/wiki/Cross-site_request_forgery):

> At risk are web applications that perform actions based on input from trusted and authenticated users without requiring the user to authorize the specific action. A user who is authenticated by a cookie saved in the user's web browser could unknowingly send an HTTP request to a site that trusts the user and thereby causes an unwanted action.

## Prevent Click Jacking

Similar to [Page Embedding](#prevent-page-embedding), click jacking works by:

> A user might receive an email with a link to a video about a news item, but another valid page, say a product page on Amazon.com, can be "hidden" on top or underneath the "PLAY" button of the news video. The user tries to "play" the video but actually "buys" the product from Amazon.

Other known exploits include:

- Tricking users into enabling their webcam and microphone through Flash
- Tricking users into making their social networking profile information public
- Making users follow someone on Twitter[8]
- Sharing links on Facebook

See [Wikipedia](http://en.wikipedia.org/wiki/Clickjacking) for more information.

## Verify That Server Software is Up to Date

Make sure that the software on your system is up to date with the latest patches.

## Verify That Packages, Modules, Plugins, etc are Up to Date

Make sure that the latest software used by your projest is up to date with the latest patches.

## Verify That Your Database is Secured

Make sure that connections to the database are at least password protected.  Verify that only the least amount of permissions are being used.

Make sure that confidential information is encrypted or hashed.

## Attempt to Make Your App Run As Non-Root

Apply [the principle of least privilege](https://en.wikipedia.org/wiki/Principle_of_least_privilege) and try to have your app run as non-root as often as possible.

## Use the Content-Security-Policy Header

Specify the following header to make the browser only run certain content depending on its origin:

**example**

```
Content-Security-Policy: script-src 'self' https://apis.google.com
```

You can also specify the following type of content:

- script-src (JavaScript)
- connect-src (XMLHttpRequest, WebSockets, and EventSource)
- font-src (Fonts)
- frame-src (Frame Urls)
- img-src (Images)
- media-src (Audio and Videos)
- object-src (Flash)
- style-src (CSS)

## Do Not Allow Mime Sniffing with User Uploaded Content

You can tell browsers to not try to guess Mime Types of files with the following header:

```
X-CONTENT-TYPE-OPTIONS: nosniff
```

For example, say a user uploads an HTML file. You intend to serve it to users as a text file, but the browser will attempt to serve it as an HTML page.  You can tell the browser that you know what you are doing and that the Mime Type you are providing is indeed correct by using the above header.

## Force HTTPS Traffic

You can force HTTPS Traffic with the following header:

```
Scrict-Transport-Security: max-age=31536000; includeSubDomains
```

This will force `https://website.com` even when typing in `http://website.com`


Security

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    blockquote: "blockquote",
    code: "code",
    h2: "h2",
    h3: "h3",
    li: "li",
    p: "p",
    table: "table",
    tbody: "tbody",
    td: "td",
    th: "th",
    thead: "thead",
    tr: "tr",
    ul: "ul",
    ...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 SEO considerations for web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Use Search Engine Friendly URLs"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Semantic_URL",
        children: "semantic URLs"
      }), ".  Semantic URLs help improve usability and accessibility of a website.  The following table from the Wikipedia entry illistrates how to use semantic URLs:"]
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Non-semantic URL"
          }), _jsx(_components.th, {
            children: "Semantic URL"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/index.php?page=name"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/name"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/index.php?page=consulting/marketing"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/consulting/marketing"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/products?category=2&pid=25"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/products/2/25"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/news.rss"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/services/index.jsp?category=legal&id=patents"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/services/legal/patents"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/kb/index.php?cat=8&id=41"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/kb/8/41"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/index.php?mod=profiles&id=193"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/profiles/193"
            })
          })]
        })]
      })]
    }), "\n", _jsx(_components.h2, {
      children: "Use Hashbangs for Dynamic Content When You Normally Use Hashes"
    }), "\n", _jsxs(_components.p, {
      children: ["If you normally use the hash ", _jsx(_components.code, {
        children: "#"
      }), " character for dynamic content, change it to the hashbang ", _jsx(_components.code, {
        children: "#!"
      }), ".  This allows googlebot to use ", _jsx(_components.code, {
        children: "#_REQUEST[\"_escaped_fragment_\"]"
      }), " instead of ", _jsx(_components.code, {
        children: "#!"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Push State If You Can"
    }), "\n", _jsxs(_components.p, {
      children: ["If the user is using Firefox or Chromium, you can use ", _jsx(_components.code, {
        children: "history.pushState( object, pageName, \"./?param=1\");"
      }), " so that the address bar changes, but the page does not reload.  This allows you to use ", _jsx(_components.code, {
        children: "?"
      }), " instead of ", _jsx(_components.code, {
        children: "#!"
      }), " to keep dynamic content."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Descriptive Links"
    }), "\n", _jsx(_components.p, {
      children: "When creating links, refrain from using \"this\" or \"click here\" or similar phrases for your links.  Link descriptions should be descriptive."
    }), "\n", _jsx(_components.h2, {
      children: "Have an XML Sitemap"
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling."
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["Have a ", _jsx(_components.a, {
        href: "http://www.sitemaps.org/",
        children: "sitemap"
      }), " at ", _jsx(_components.code, {
        children: "/sitemap.xml"
      }), " for search engines to crawl."]
    }), "\n", _jsxs(_components.p, {
      children: ["Have a ", _jsx(_components.a, {
        href: "https://support.google.com/webmasters/answer/178636",
        children: "image sitemap"
      }), " for your images!"]
    }), "\n", _jsxs(_components.p, {
      children: ["Create a ", _jsx(_components.a, {
        href: "https://support.google.com/webmasters/topic/2370586?rd=1",
        children: "mobile sitemap"
      }), "!"]
    }), "\n", _jsx(_components.h2, {
      children: "Use Canonical URLs For Duplicate Content"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.code, {
        children: "<link rel=\"canonical\" ... />"
      }), " when you have duplicate content on multiple pages. Remember, multiple URLs that point to the same content coint as dusplicate content. Also remember that ", _jsx(_components.code, {
        children: "?page=1&subject=my-subject"
      }), " and ", _jsx(_components.code, {
        children: "?subject=my-subject&page=1"
      }), " are different pages to web crawlers!"]
    }), "\n", _jsx(_components.h2, {
      children: "Setup Webmaster Tools"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://www.google.com/webmasters/",
        children: "Google Webmaster Tools"
      }), " and ", _jsx(_components.a, {
        href: "http://www.bing.com/toolbox/webmaster",
        children: "Bing Webmaster Tools"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Setup Google Analytics"
    }), "\n", _jsxs(_components.p, {
      children: ["Have ", _jsx(_components.a, {
        href: "http://www.google.com/analytics/",
        children: "Google Analytics"
      }), " set up.  Or something like ", _jsx(_components.a, {
        href: "http://piwik.org/",
        children: "Piwik"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Have robots.txt Configured Properly"
    }), "\n", _jsxs(_components.p, {
      children: ["Set your ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Robots_exclusion_standard",
        children: "robots.txt"
      }), " file properly.  Each subdomain must have its own robots.txt file."]
    }), "\n", _jsx(_components.h2, {
      children: "301 Redirect for WWW Requests"
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "www.example.com"
      }), " or ", _jsx(_components.code, {
        children: "example.com"
      }), " should be your primary domain, not both. Have one 301 Redirect (Moved Permanently) to the other."]
    }), "\n", _jsx(_components.h2, {
      children: "Read the Search Engine Optimization Starter Guide"
    }), "\n", _jsxs(_components.p, {
      children: ["The ", _jsx(_components.a, {
        href: "http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf",
        children: "starter guide is viewable here"
      }), "."]
    }), "\n", _jsx(_components.h3, {
      children: "The Basics"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create unique, accurate page titles. These titles are displayed in the search results. Titles reflect what is on each individual page."
      }), "\n", _jsx(_components.li, {
        children: "Use the description meta tag. Google will use them as snippets for your pages."
      }), "\n", _jsxs(_components.li, {
        children: ["Use simple to understand (ie \"friendly\") URLs.  URLs should contain relevant words. ", _jsx(_components.code, {
          children: "http://mysite.com/article/basket-ball-scores"
        }), " is a friendly URL."]
      }), "\n", _jsx(_components.li, {
        children: "Navigation is very important for search engines.  Think of you website as folders that should be easy to navigate.  Use breadcrumbs!"
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.a, {
          href: "#have-an-xml-sitemap",
          children: "sitemaps"
        }), "!  Prepare one for users and one for search engines."]
      }), "\n", _jsx(_components.li, {
        children: "Use 404s when necessary."
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Improving Site Structure"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create a naturally flowing hierarchy."
      }), "\n", _jsx(_components.li, {
        children: "Avoid having all navigation based entirely on dropdown menus.  Your website should be accessible, pages should be conntected with normal text links."
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Optimizing Content"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create compelling and useful content."
      }), "\n", _jsx(_components.li, {
        children: "Offer unique and exclusive content."
      }), "\n", _jsxs(_components.li, {
        children: ["Checkout the ", _jsx(_components.a, {
          href: "https://adwords.google.com/KeywordPlanner",
          children: "Keyword Planner"
        }), " by Google AdWords."]
      }), "\n", _jsx(_components.li, {
        children: "Write easy-to-read text.  Don't embed text in images"
      }), "\n", _jsx(_components.li, {
        children: "Create fresh content."
      }), "\n", _jsx(_components.li, {
        children: "Create content for users, not for search engines."
      }), "\n", _jsxs(_components.li, {
        children: ["Write good anchor text: ", _jsx(_components.code, {
          children: "<a href=\"...\">Top Ten Basketball Shots</a>"
        }), " is a descriptive link."]
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.code, {
          children: "alt"
        }), " tags on your images! This also helps with accessibility."]
      }), "\n", _jsx(_components.li, {
        children: "Use descriptive filenames for your images and assets!"
      }), "\n", _jsxs(_components.li, {
        children: ["Supply an ", _jsx(_components.a, {
          href: "https://support.google.com/webmasters/answer/178636",
          children: "image sitemap file"
        }), "!"]
      }), "\n", _jsxs(_components.li, {
        children: ["Use heading tags correctly!  ", _jsx(_components.code, {
          children: "<h1>"
        }), " is the most important. ", _jsx(_components.code, {
          children: "<h6>"
        }), " is the least important."]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Dealing with Crawlers"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Restrict crawling with robots.txt."
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.code, {
          children: "rel=\"nofollow\""
        }), " when necessary for links. Normally, user generated links through comment systems should be tagged with nofollow."]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "SEO for Mobile Phones"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Configure mobiles sites so that they can be indexed accurately."
      }), "\n", _jsxs(_components.li, {
        children: ["Create a ", _jsx(_components.a, {
          href: "https://support.google.com/webmasters/topic/2370586?rd=1",
          children: "mobile sitemap"
        }), "!"]
      }), "\n", _jsxs(_components.li, {
        children: ["If you use User-agents to generate your mobile site, make sure to allow ", _jsx(_components.code, {
          children: "Googlebot-Mobile"
        }), "!"]
      }), "\n", _jsx(_components.li, {
        children: "If you use a seperate domain for your mobile app, redirect them to the correct page!"
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Promotions and Analysis"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Backlinks increase the value of your site ( backlinks are links that other people post to your site)."
      }), "\n", _jsx(_components.li, {
        children: "Know how to utilize your social media sites."
      }), "\n", _jsx(_components.li, {
        children: "Utilize the Google Webmaster Tools."
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...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 SEO considerations for web applications.</p>
<h2>Use Search Engine Friendly URLs</h2>
<p>Use <a href="http://en.wikipedia.org/wiki/Semantic_URL">semantic URLs</a>.  Semantic URLs help improve usability and accessibility of a website.  The following table from the Wikipedia entry illistrates how to use semantic URLs:</p>
<table><thead><tr><th>Non-semantic URL</th><th>Semantic URL</th></tr></thead><tbody><tr><td><code>http://example.com/index.php?page=name</code></td><td><code>http://example.com/name</code></td></tr><tr><td><code>http://example.com/index.php?page=consulting/marketing</code></td><td><code>http://example.com/consulting/marketing</code></td></tr><tr><td><code>http://example.com/products?category=2&amp;pid=25</code></td><td><code>http://example.com/products/2/25</code></td></tr><tr><td><code>http://example.com/cgi-bin/feed.cgi?feed=news&amp;frm=rss</code></td><td><code>http://example.com/news.rss</code></td></tr><tr><td><code>http://example.com/services/index.jsp?category=legal&amp;id=patents</code></td><td><code>http://example.com/services/legal/patents</code></td></tr><tr><td><code>http://example.com/kb/index.php?cat=8&amp;id=41</code></td><td><code>http://example.com/kb/8/41</code></td></tr><tr><td><code>http://example.com/index.php?mod=profiles&amp;id=193</code></td><td><code>http://example.com/profiles/193</code></td></tr></tbody></table>
<h2>Use Hashbangs for Dynamic Content When You Normally Use Hashes</h2>
<p>If you normally use the hash <code>#</code> character for dynamic content, change it to the hashbang <code>#!</code>.  This allows googlebot to use <code>#_REQUEST[&quot;_escaped_fragment_&quot;]</code> instead of <code>#!</code>.</p>
<h2>Use Push State If You Can</h2>
<p>If the user is using Firefox or Chromium, you can use <code>history.pushState( object, pageName, &quot;./?param=1&quot;);</code> so that the address bar changes, but the page does not reload.  This allows you to use <code>?</code> instead of <code>#!</code> to keep dynamic content.</p>
<h2>Use Descriptive Links</h2>
<p>When creating links, refrain from using &quot;this&quot; or &quot;click here&quot; or similar phrases for your links.  Link descriptions should be descriptive.</p>
<h2>Have an XML Sitemap</h2>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling.</p>
</blockquote>
<p>Have a <a href="http://www.sitemaps.org/">sitemap</a> at <code>/sitemap.xml</code> for search engines to crawl.</p>
<p>Have a <a href="https://support.google.com/webmasters/answer/178636">image sitemap</a> for your images!</p>
<p>Create a <a href="https://support.google.com/webmasters/topic/2370586?rd=1">mobile sitemap</a>!</p>
<h2>Use Canonical URLs For Duplicate Content</h2>
<p>Use <code>&lt;link rel=&quot;canonical&quot; ... /&gt;</code> when you have duplicate content on multiple pages. Remember, multiple URLs that point to the same content coint as dusplicate content. Also remember that <code>?page=1&amp;subject=my-subject</code> and <code>?subject=my-subject&amp;page=1</code> are different pages to web crawlers!</p>
<h2>Setup Webmaster Tools</h2>
<p>Use <a href="http://www.google.com/webmasters/">Google Webmaster Tools</a> and <a href="http://www.bing.com/toolbox/webmaster">Bing Webmaster Tools</a>.</p>
<h2>Setup Google Analytics</h2>
<p>Have <a href="http://www.google.com/analytics/">Google Analytics</a> set up.  Or something like <a href="http://piwik.org/">Piwik</a>.</p>
<h2>Have robots.txt Configured Properly</h2>
<p>Set your <a href="http://en.wikipedia.org/wiki/Robots_exclusion_standard">robots.txt</a> file properly.  Each subdomain must have its own robots.txt file.</p>
<h2>301 Redirect for WWW Requests</h2>
<p><code>www.example.com</code> or <code>example.com</code> should be your primary domain, not both. Have one 301 Redirect (Moved Permanently) to the other.</p>
<h2>Read the Search Engine Optimization Starter Guide</h2>
<p>The <a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf">starter guide is viewable here</a>.</p>
<h3>The Basics</h3>
<ul>
<li>Create unique, accurate page titles. These titles are displayed in the search results. Titles reflect what is on each individual page.</li>
<li>Use the description meta tag. Google will use them as snippets for your pages.</li>
<li>Use simple to understand (ie &quot;friendly&quot;) URLs.  URLs should contain relevant words. <code>http://mysite.com/article/basket-ball-scores</code> is a friendly URL.</li>
<li>Navigation is very important for search engines.  Think of you website as folders that should be easy to navigate.  Use breadcrumbs!</li>
<li>Use <a href="#have-an-xml-sitemap">sitemaps</a>!  Prepare one for users and one for search engines.</li>
<li>Use 404s when necessary.</li>
</ul>
<h3>Improving Site Structure</h3>
<ul>
<li>Create a naturally flowing hierarchy.</li>
<li>Avoid having all navigation based entirely on dropdown menus.  Your website should be accessible, pages should be conntected with normal text links.</li>
</ul>
<h3>Optimizing Content</h3>
<ul>
<li>Create compelling and useful content.</li>
<li>Offer unique and exclusive content.</li>
<li>Checkout the <a href="https://adwords.google.com/KeywordPlanner">Keyword Planner</a> by Google AdWords.</li>
<li>Write easy-to-read text.  Don&#x27;t embed text in images</li>
<li>Create fresh content.</li>
<li>Create content for users, not for search engines.</li>
<li>Write good anchor text: <code>&lt;a href=&quot;...&quot;&gt;Top Ten Basketball Shots&lt;/a&gt;</code> is a descriptive link.</li>
<li>Use <code>alt</code> tags on your images! This also helps with accessibility.</li>
<li>Use descriptive filenames for your images and assets!</li>
<li>Supply an <a href="https://support.google.com/webmasters/answer/178636">image sitemap file</a>!</li>
<li>Use heading tags correctly!  <code>&lt;h1&gt;</code> is the most important. <code>&lt;h6&gt;</code> is the least important.</li>
</ul>
<h3>Dealing with Crawlers</h3>
<ul>
<li>Restrict crawling with robots.txt.</li>
<li>Use <code>rel=&quot;nofollow&quot;</code> when necessary for links. Normally, user generated links through comment systems should be tagged with nofollow.</li>
</ul>
<h3>SEO for Mobile Phones</h3>
<ul>
<li>Configure mobiles sites so that they can be indexed accurately.</li>
<li>Create a <a href="https://support.google.com/webmasters/topic/2370586?rd=1">mobile sitemap</a>!</li>
<li>If you use User-agents to generate your mobile site, make sure to allow <code>Googlebot-Mobile</code>!</li>
<li>If you use a seperate domain for your mobile app, redirect them to the correct page!</li>
</ul>
<h3>Promotions and Analysis</h3>
<ul>
<li>Backlinks increase the value of your site ( backlinks are links that other people post to your site).</li>
<li>Know how to utilize your social media sites.</li>
<li>Utilize the Google Webmaster Tools.</li>
</ul>


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

## Use Search Engine Friendly URLs

Use [semantic URLs](http://en.wikipedia.org/wiki/Semantic_URL).  Semantic URLs help improve usability and accessibility of a website.  The following table from the Wikipedia entry illistrates how to use semantic URLs:

| Non-semantic URL                                                | Semantic URL                              |
|-----------------------------------------------------------------|-------------------------------------------|
| `http://example.com/index.php?page=name`                          | `http://example.com/name`                   |
| `http://example.com/index.php?page=consulting/marketing`          | `http://example.com/consulting/marketing`   |
| `http://example.com/products?category=2&pid=25`                   | `http://example.com/products/2/25`          |
| `http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss`           | `http://example.com/news.rss`               |
| `http://example.com/services/index.jsp?category=legal&id=patents` | `http://example.com/services/legal/patents` |
| `http://example.com/kb/index.php?cat=8&id=41`                     | `http://example.com/kb/8/41`                |
| `http://example.com/index.php?mod=profiles&id=193`                | `http://example.com/profiles/193`           |

## Use Hashbangs for Dynamic Content When You Normally Use Hashes

If you normally use the hash `#` character for dynamic content, change it to the hashbang `#!`.  This allows googlebot to use `#_REQUEST["_escaped_fragment_"]` instead of `#!`.

## Use Push State If You Can

If the user is using Firefox or Chromium, you can use `history.pushState( object, pageName, "./?param=1");` so that the address bar changes, but the page does not reload.  This allows you to use `?` instead of `#!` to keep dynamic content.

## Use Descriptive Links

When creating links, refrain from using "this" or "click here" or similar phrases for your links.  Link descriptions should be descriptive.

## Have an XML Sitemap

> Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling.

Have a [sitemap](http://www.sitemaps.org/) at `/sitemap.xml` for search engines to crawl.

Have a [image sitemap](https://support.google.com/webmasters/answer/178636) for your images!

Create a [mobile sitemap](https://support.google.com/webmasters/topic/2370586?rd=1)!

## Use Canonical URLs For Duplicate Content

Use `<link rel="canonical" ... />` when you have duplicate content on multiple pages. Remember, multiple URLs that point to the same content coint as dusplicate content. Also remember that `?page=1&subject=my-subject` and `?subject=my-subject&page=1` are different pages to web crawlers!

## Setup Webmaster Tools

Use [Google Webmaster Tools](http://www.google.com/webmasters/) and [Bing Webmaster Tools](http://www.bing.com/toolbox/webmaster).

## Setup Google Analytics

Have [Google Analytics](http://www.google.com/analytics/) set up.  Or something like [Piwik](http://piwik.org/).

## Have robots.txt Configured Properly

Set your [robots.txt](http://en.wikipedia.org/wiki/Robots_exclusion_standard) file properly.  Each subdomain must have its own robots.txt file.

## 301 Redirect for WWW Requests

`www.example.com` or `example.com` should be your primary domain, not both. Have one 301 Redirect (Moved Permanently) to the other.

## Read the Search Engine Optimization Starter Guide

The [starter guide is viewable here](http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf).

### The Basics

- Create unique, accurate page titles. These titles are displayed in the search results. Titles reflect what is on each individual page.
- Use the description meta tag. Google will use them as snippets for your pages.
- Use simple to understand (ie "friendly") URLs.  URLs should contain relevant words. `http://mysite.com/article/basket-ball-scores` is a friendly URL.
- Navigation is very important for search engines.  Think of you website as folders that should be easy to navigate.  Use breadcrumbs!
- Use [sitemaps](#have-an-xml-sitemap)!  Prepare one for users and one for search engines.
- Use 404s when necessary.

### Improving Site Structure

- Create a naturally flowing hierarchy.
- Avoid having all navigation based entirely on dropdown menus.  Your website should be accessible, pages should be conntected with normal text links.

### Optimizing Content

- Create compelling and useful content.
- Offer unique and exclusive content.
- Checkout the [Keyword Planner](https://adwords.google.com/KeywordPlanner) by Google AdWords.
- Write easy-to-read text.  Don't embed text in images
- Create fresh content.
- Create content for users, not for search engines.
- Write good anchor text: `<a href="...">Top Ten Basketball Shots</a>` is a descriptive link.
- Use `alt` tags on your images! This also helps with accessibility.
- Use descriptive filenames for your images and assets!
- Supply an [image sitemap file](https://support.google.com/webmasters/answer/178636)!
- Use heading tags correctly!  `<h1>` is the most important. `<h6>` is the least important.

### Dealing with Crawlers

- Restrict crawling with robots.txt.
- Use `rel="nofollow"` when necessary for links. Normally, user generated links through comment systems should be tagged with nofollow.

### SEO for Mobile Phones

- Configure mobiles sites so that they can be indexed accurately.
- Create a [mobile sitemap](https://support.google.com/webmasters/topic/2370586?rd=1)!
- If you use User-agents to generate your mobile site, make sure to allow `Googlebot-Mobile`!
- If you use a seperate domain for your mobile app, redirect them to the correct page!

### Promotions and Analysis

- Backlinks increase the value of your site ( backlinks are links that other people post to your site).
- Know how to utilize your social media sites.
- Utilize the Google Webmaster Tools.


"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    code: "code",
    em: "em",
    h2: "h2",
    li: "li",
    p: "p",
    ul: "ul",
    ...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 accessibility of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Is your site accessible via screen readers?"
    }), "\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.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: "HTML Tags"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<i>"
        }), " - ", _jsx(_components.em, {
          children: "\"alternate voice\""
        }), "; transliterated foreign words, technical terms, and typographically italicized text."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<em>"
        }), " - ", _jsx(_components.em, {
          children: "\"stress emphasis\""
        }), "; something you'd pronounce differently."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<b>"
        }), " - ", _jsx(_components.em, {
          children: "\"stylistically offset\""
        }), "; keywords and typographically emboldened text."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<strong>"
        }), " - ", _jsx(_components.em, {
          children: "\"strong importance\""
        }), ";"]
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["See ", _jsx(_components.a, {
        href: "http://html5doctor.com/i-b-em-strong-element/",
        children: "this HTML5 Doctor post"
      }), " for more information."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...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 accessibility of web applications.</p>
<h2>Is your site accessible via screen readers?</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>
<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>HTML Tags</h2>
<ul>
<li><code>&lt;i&gt;</code> - <em>&quot;alternate voice&quot;</em>; transliterated foreign words, technical terms, and typographically italicized text.</li>
<li><code>&lt;em&gt;</code> - <em>&quot;stress emphasis&quot;</em>; something you&#x27;d pronounce differently.</li>
<li><code>&lt;b&gt;</code> - <em>&quot;stylistically offset&quot;</em>; keywords and typographically emboldened text.</li>
<li><code>&lt;strong&gt;</code> - <em>&quot;strong importance&quot;</em>;</li>
</ul>
<p>See <a href="http://html5doctor.com/i-b-em-strong-element/">this HTML5 Doctor post</a> for more information.</p>


This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications.

## Is your site accessible via screen readers?

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).

## 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.

## HTML Tags

* `<i>` - *"alternate voice"*; transliterated foreign words, technical terms, and typographically italicized text.
* `<em>` - *"stress emphasis"*; something you'd pronounce differently.
* `<b>` - *"stylistically offset"*; keywords and typographically emboldened text.
* `<strong>` - *"strong importance"*;

See [this HTML5 Doctor post](http://html5doctor.com/i-b-em-strong-element/) for more information.
