<commit_before><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Automated Frontend Testing</title>

    <meta name="description" content="Automated Frontend Testing &mdash; a slides describing how to perform functional testing with CasperJS and performance monitoring with grunt-phantomas and WebPageTest.org">
    <meta name="author" content="<NAME>">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print">

    <link rel="stylesheet" href="lib/github.css">
    <link rel="stylesheet" href="lib/prism.css">
  </head>

  <body>

    <div class="reveal">

      <!-- Used to fade in a background when a specific slide state is reached -->
      <div class="state-background"></div>

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section data-state="bluesy">
          <br><br>
          <h1 style="font-size: 3.2em; ">Automated Frontend Testing</h1><br>
          <p class="fragment insert-container">Or: How to Automate the Process of <span class="insert fragment">detecting when you</span> Break Things</p>
          <script>
            // Delicously hacky. Look away.
            if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
          </script>
        </section>

        <section>
          <h2><NAME></h2>
          <section>
            <br><br>
            <p>frontend dev @ <a href="http://fourkitchens.com">Four Kitchens</a></p>
            <p><a href="http://twitter.com/rupl">twitter.com/rupl</a></p>
            <p><a href="https://github.com/rupl">github.com/rupl</a></p>
          </section>
          <section>
            <a href="http://fourkitchens.com"><img src="img/4k-logo-square-500px.png" alt="Four Kitchens" style="border: 0; box-shadow: none; "></a><br>
            <small><a href="http://fourkitchens.com/careers">(we're hiring!)</a></small>
          </section>
          <section>
            <br><br>
            <p style="font-size: 1.25em;">I contribute and present about open source:</p><br>
            <ul class="fragment">
              <li><a href="http://rupl.github.io/unfold/">Unfolding the Box Model</a>
              <li><a href="https://drupal.org/project/modernizr">Modernizr Drupal module</a>
              <li><a href="https://drupal.org/project/fastclick">FastClick Drupal module</a>
              <li><a href="https://drupal.org/sandbox/joel/2121797">Prerender/Prefetch Drupal module</a>
              <li><a href="https://github.com/fourkitchens/jekyll-schedule">jekyll-schedule</a>
            </ul>
          </section>
        </section>

        <section>
          <h2>Differences from<br> server-side testing</h2>
          <section>
            <br><br>
            <p class="fragment">None: if you're familiar with server-side testing,<br> this is <strong style="font-size: 1.4em;">not</strong> new.</p>
            <br>
            <p class="fragment">However, since frontend is a different game than backend, its operational needs are slightly different.</p>
          </section>
          <section>
            <br><br>
            <p>Often, a PHP error results in a 500 or<br> blank page. You either get HTML or not.</p>
            <br><br>
            <p class="fragment">(or you can at least use XHProf)</p>
            <br>
          </section>
          <section>
            <br><commit_msg>Remove unnecessary comparison slides about server.<commit_after><!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Automated Frontend Testing</title>

    <meta name="description" content="Automated Frontend Testing &mdash; a slides describing how to perform functional testing with CasperJS and performance monitoring with grunt-phantomas and WebPageTest.org">
    <meta name="author" content="<NAME>">

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print">

    <link rel="stylesheet" href="lib/github.css">
    <link rel="stylesheet" href="lib/prism.css">
  </head>

  <body>

    <div class="reveal">

      <!-- Used to fade in a background when a specific slide state is reached -->
      <div class="state-background"></div>

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section data-state="bluesy">
          <br><br>
          <h1 style="font-size: 3.2em; ">Automated Frontend Testing</h1><br>
          <p class="fragment insert-container">Or: How to Automate the Process of <span class="insert fragment">detecting when you</span> Break Things</p>
          <script>
            // Delicously hacky. Look away.
            if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
          </script>
        </section>

        <section>
          <h2><NAME></h2>
          <section>
            <br><br>
            <p>frontend dev @ <a href="http://fourkitchens.com">Four Kitchens</a></p>
            <p><a href="http://twitter.com/rupl">twitter.com/rupl</a></p>
            <p><a href="https://github.com/rupl">github.com/rupl</a></p>
          </section>
          <section>
            <a href="http://fourkitchens.com"><img src="img/4k-logo-square-500px.png" alt="Four Kitchens" style="border: 0; box-shadow: none; "></a><br>
            <small><a href="http://fourkitchens.com/careers">(we're hiring!)</a></small>
          </section>
          <section>
            <br><br>
            <p style="font-size: 1.25em;">I contribute and present about open source:</p><br>
            <ul class="fragment">
              <li><a href="http://rupl.github.io/unfold/">Unfolding the Box Model</a>
              <li><a href="https://drupal.org/project/modernizr">Modernizr Drupal module</a>
              <li><a href="https://drupal.org/project/fastclick">FastClick Drupal module</a>
              <li><a href="https://drupal.org/sandbox/joel/2121797">Prerender/Prefetch Drupal module</a>
              <li><a href="https://github.com/fourkitchens/jekyll-schedule">jekyll-schedule</a>
            </ul>
          </section>
        </section>

        <section>
          <h2>Why do I need frontend testing?</h2>
          <section>
            <br>
{'fraction_non_alphanumeric': 0.17039067854694998, 'fraction_numerical': 0.011925976696367375, 'mean_word_length': 2.6516516516516515, 'pattern_counts': {'":': 0, '<': 230, '<?xml version=': 0, '>': 230, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3977351', 'n_tokens_mistral': 2367, 'n_tokens_neox': 2258, 'n_words': 500}