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


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


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

## Cross Browser Tools

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

## Google Chrome Tools

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

## User Interface Tools

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

## Usage Trends

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

## Images and Stock Photos

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

## Templates

### HTML5 Templates

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

## Emails

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

## SEO

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

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


Developer Tools