Performance - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2"
  }, 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 maintenance of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Setup an Error/Bug Reporting Solution"
    }), "\n", _jsx(_components.p, {
      children: "Use Github's issue tracker, or JIRA, or anything.  Keeping track of issues, enhancements, and bugs in progress helps tremendously down the line."
    }), "\n", _jsx(_components.h2, {
      children: "Setup a Contact Form"
    }), "\n", _jsx(_components.p, {
      children: "Simple email forms or using other services like Reddit or even forums can help users give you suggestions and criticism."
    }), "\n", _jsx(_components.h2, {
      children: "Documentation"
    }), "\n", _jsx(_components.p, {
      children: "Document how the application works, the deployment progress, and anything else you can!  Those who do future maintenance will thank you."
    }), "\n", _jsx(_components.h2, {
      children: "Backup/Restore Strategy"
    }), "\n", _jsx(_components.p, {
      children: "Have a backup strategy and a restore strategy."
    }), "\n", _jsx(_components.h2, {
      children: "Version Control Your Project"
    }), "\n", _jsx(_components.p, {
      children: "Use Subversion, Mecurial, Git to version control your files.  Preferably Git ;) ."
    }), "\n", _jsx(_components.h2, {
      children: "Setup Unit Tests/Acceptance Tests/Regression Test etc"
    }), "\n", _jsx(_components.p, {
      children: "Getting any type of tests is very useful, especially acceptance testing and integration testing."
    }), "\n", _jsx(_components.h2, {
      children: "Setup Logging"
    }), "\n", _jsx(_components.p, {
      children: "Log any application errors, user errors, exceptions, etc."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into maintenance of web applications.</p>
<h2>Setup an Error/Bug Reporting Solution</h2>
<p>Use Github&#x27;s issue tracker, or JIRA, or anything.  Keeping track of issues, enhancements, and bugs in progress helps tremendously down the line.</p>
<h2>Setup a Contact Form</h2>
<p>Simple email forms or using other services like Reddit or even forums can help users give you suggestions and criticism.</p>
<h2>Documentation</h2>
<p>Document how the application works, the deployment progress, and anything else you can!  Those who do future maintenance will thank you.</p>
<h2>Backup/Restore Strategy</h2>
<p>Have a backup strategy and a restore strategy.</p>
<h2>Version Control Your Project</h2>
<p>Use Subversion, Mecurial, Git to version control your files.  Preferably Git ;) .</p>
<h2>Setup Unit Tests/Acceptance Tests/Regression Test etc</h2>
<p>Getting any type of tests is very useful, especially acceptance testing and integration testing.</p>
<h2>Setup Logging</h2>
<p>Log any application errors, user errors, exceptions, etc.</p>


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

## Setup an Error/Bug Reporting Solution

Use Github's issue tracker, or JIRA, or anything.  Keeping track of issues, enhancements, and bugs in progress helps tremendously down the line.

## Setup a Contact Form

Simple email forms or using other services like Reddit or even forums can help users give you suggestions and criticism.

## Documentation

Document how the application works, the deployment progress, and anything else you can!  Those who do future maintenance will thank you.

## Backup/Restore Strategy

Have a backup strategy and a restore strategy.

## Version Control Your Project

Use Subversion, Mecurial, Git to version control your files.  Preferably Git ;) .

## Setup Unit Tests/Acceptance Tests/Regression Test etc

Getting any type of tests is very useful, especially acceptance testing and integration testing.

## Setup Logging

Log any application errors, user errors, exceptions, etc.


Maintenance

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    em: "em",
    code: "code",
    ul: "ul",
    li: "li"
  }, 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 performance of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Cache Pages"
    }), "\n", _jsxs(_components.p, {
      children: ["Dynamic pages should be cached in order to improve performance.  Understand how ", _jsx(_components.a, {
        href: "https://www.mnot.net/cache_docs/",
        children: "Web Caching"
      }), " works."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Cache Manifest for Offline Performance"
    }), "\n", _jsxs(_components.p, {
      children: ["If you would like your page to be accessible offline after a user has already visited it, look into the ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/2011/WD-html5-20110525/offline.html",
        children: "Cache Manifest"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Optimize Images"
    }), "\n", _jsx(_components.p, {
      children: "Compress and crop images for best performance."
    }), "\n", _jsx(_components.h2, {
      children: "Gzip Content"
    }), "\n", _jsxs(_components.p, {
      children: ["Most web servers can be configured to automatically do this for you.  Look into ", _jsx(_components.a, {
        href: "https://developer.yahoo.com/performance/rules.html#gzip",
        children: "Yahoo's Developer Network discussion"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Concatenate Stylesheets and Script Files"
    }), "\n", _jsxs(_components.p, {
      children: ["Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into ", _jsx(_components.a, {
        href: "http://gruntjs.com/",
        children: "Grunt"
      }), " for a Node.js solution."]
    }), "\n", _jsx(_components.h2, {
      children: "Use CSS Image Sprites When Possible"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://alistapart.com/article/sprites",
        children: "CSS Image Sprites"
      }), " when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression."]
    }), "\n", _jsx(_components.h2, {
      children: "Split Static Content to Its Own Domain"
    }), "\n", _jsxs(_components.p, {
      children: ["Static content like images, CSS, JavaScript, and other content should go in a separate domain that ", _jsx(_components.em, {
        children: "does not use cookies"
      }), ".  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible."]
    }), "\n", _jsx(_components.h2, {
      children: "Minify JavasScript"
    }), "\n", _jsxs(_components.p, {
      children: ["Minify your JavaScript if possible.  Use the ", _jsx(_components.a, {
        href: "https://developers.google.com/closure/compiler/",
        children: "Google Closure Compiler"
      }), " or look into ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node",
        children: "this Stackoverflow question for concatenating and minifying JavaScript files in Node"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Make a Favicon.ico File"
    }), "\n", _jsxs(_components.p, {
      children: ["Make sure there’s a ", _jsx(_components.code, {
        children: "favicon.ico"
      }), " file in the root of the site, i.e. ", _jsx(_components.code, {
        children: "/favicon.ico"
      }), ". ", _jsx(_components.a, {
        href: "https://mathiasbynens.be/notes/rel-shortcut-icon",
        children: "Browsers will automatically request it"
      }), ", even if the icon isn’t mentioned in the HTML at all. If you don’t have a ", _jsx(_components.code, {
        children: "/favicon.ico"
      }), ", this will result in a lot of 404s, draining your server’s bandwidth."]
    }), "\n", _jsxs(_components.p, {
      children: ["Check your Favicon against ", _jsx(_components.a, {
        href: "http://realfavicongenerator.net/",
        children: "The Real Favicon Generator"
      }), ".  It takes care of favicons for:"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Desktop Browsers"
      }), "\n", _jsx(_components.li, {
        children: "iOS Home Screen (Favorite icons)"
      }), "\n", _jsx(_components.li, {
        children: "Android Home Screen (Favorite icons)"
      }), "\n", _jsx(_components.li, {
        children: "Windows 8 Tile (Favorite tiles)"
      }), "\n", _jsx(_components.li, {
        children: "Windows Task Bar (App style icon)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "It also helps you compress the icons and generates the HTML markup for you."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into performance of web applications.</p>
<h2>Cache Pages</h2>
<p>Dynamic pages should be cached in order to improve performance.  Understand how <a href="https://www.mnot.net/cache_docs/">Web Caching</a> works.</p>
<h2>Use Cache Manifest for Offline Performance</h2>
<p>If you would like your page to be accessible offline after a user has already visited it, look into the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/offline.html">Cache Manifest</a>.</p>
<h2>Optimize Images</h2>
<p>Compress and crop images for best performance.</p>
<h2>Gzip Content</h2>
<p>Most web servers can be configured to automatically do this for you.  Look into <a href="https://developer.yahoo.com/performance/rules.html#gzip">Yahoo&#x27;s Developer Network discussion</a> for more information.</p>
<h2>Concatenate Stylesheets and Script Files</h2>
<p>Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into <a href="http://gruntjs.com/">Grunt</a> for a Node.js solution.</p>
<h2>Use CSS Image Sprites When Possible</h2>
<p>Use <a href="http://alistapart.com/article/sprites">CSS Image Sprites</a> when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression.</p>
<h2>Split Static Content to Its Own Domain</h2>
<p>Static content like images, CSS, JavaScript, and other content should go in a separate domain that <em>does not use cookies</em>.  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible.</p>
<h2>Minify JavasScript</h2>
<p>Minify your JavaScript if possible.  Use the <a href="https://developers.google.com/closure/compiler/">Google Closure Compiler</a> or look into <a href="http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node">this Stackoverflow question for concatenating and minifying JavaScript files in Node</a>.</p>
<h2>Make a Favicon.ico File</h2>
<p>Make sure there’s a <code>favicon.ico</code> file in the root of the site, i.e. <code>/favicon.ico</code>. <a href="https://mathiasbynens.be/notes/rel-shortcut-icon">Browsers will automatically request it</a>, even if the icon isn’t mentioned in the HTML at all. If you don’t have a <code>/favicon.ico</code>, this will result in a lot of 404s, draining your server’s bandwidth.</p>
<p>Check your Favicon against <a href="http://realfavicongenerator.net/">The Real Favicon Generator</a>.  It takes care of favicons for:</p>
<ul>
<li>Desktop Browsers</li>
<li>iOS Home Screen (Favorite icons)</li>
<li>Android Home Screen (Favorite icons)</li>
<li>Windows 8 Tile (Favorite tiles)</li>
<li>Windows Task Bar (App style icon)</li>
</ul>
<p>It also helps you compress the icons and generates the HTML markup for you.</p>


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

## Cache Pages

Dynamic pages should be cached in order to improve performance.  Understand how [Web Caching](https://www.mnot.net/cache_docs/) works.

## Use Cache Manifest for Offline Performance

If you would like your page to be accessible offline after a user has already visited it, look into the [Cache Manifest](http://www.w3.org/TR/2011/WD-html5-20110525/offline.html).

## Optimize Images

Compress and crop images for best performance.

## Gzip Content

Most web servers can be configured to automatically do this for you.  Look into [Yahoo's Developer Network discussion](https://developer.yahoo.com/performance/rules.html#gzip) for more information.

## Concatenate Stylesheets and Script Files

Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into [Grunt](http://gruntjs.com/) for a Node.js solution.

## Use CSS Image Sprites When Possible

Use [CSS Image Sprites](http://alistapart.com/article/sprites) when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression.

## Split Static Content to Its Own Domain

Static content like images, CSS, JavaScript, and other content should go in a separate domain that *does not use cookies*.  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible.

## Minify JavasScript

Minify your JavaScript if possible.  Use the [Google Closure Compiler](https://developers.google.com/closure/compiler/) or look into [this Stackoverflow question for concatenating and minifying JavaScript files in Node](http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node).

## Make a Favicon.ico File

Make sure there’s a `favicon.ico` file in the root of the site, i.e. `/favicon.ico`. [Browsers will automatically request it](https://mathiasbynens.be/notes/rel-shortcut-icon), even if the icon isn’t mentioned in the HTML at all. If you don’t have a `/favicon.ico`, this will result in a lot of 404s, draining your server’s bandwidth.

Check your Favicon against [The Real Favicon Generator](http://realfavicongenerator.net/).  It takes care of favicons for:

* Desktop Browsers
* iOS Home Screen (Favorite icons)
* Android Home Screen (Favorite icons)
* Windows 8 Tile (Favorite tiles)
* Windows Task Bar (App style icon)

It also helps you compress the icons and generates the HTML markup for you.


Performance

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    ul: "ul",
    li: "li",
    code: "code",
    em: "em"
  }, 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, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into 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.
