<commit_before><!DOCTYPE html>

<html>

<head>
  <title>Blog | webdevjeff.us</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>

  <header>
    <h1>webdevjeff.us</h1>
    <p>Web Developer <NAME></p>

    <nav>
      <ul>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

  <main>
    <article>

      <header>
        <h2>Blog</h2>
        <div class="blog-post-nav">
          <a href="#"><i class="fa fa-caret-right fa-2x"></i></a>
          <a href="#"><i class="fa fa-caret-left fa-2x"></i></a>
        </div>
      </header>

      <article>

        <header>
          <h3>Most recent blog post</h3>
          <p>September 15</p>
          <p>Posted in category, category, category</p>
        </header>

        <p>
          Artisan kale chips before they sold out cronut. Banh mi keffiyeh ethical, roof party pour-over post-ironic asymmetrical 8-bit VHS cray. IPhone blog tote bag paleo cred, pug lumbersexual. Beard small batch twee organic American Apparel, crucifix High Life freegan ethical pour-over gastropub cronut butcher master cleanse meditation. Pork belly brunch Brooklyn, aesthetic farm-to-table Portland cold-pressed biodiesel Marfa tousled fixie VHS asymmetrical put a bird on it actually. Messenger bag dreamcatcher health goth, Blue Bottle banjo roof party crucifix tofu Marfa PBR biodiesel readymade. Umami flannel crucifix keffiyeh viral, bitters banh mi four dollar toast Portland drinking vinegar.
        </p>
        <p>
          Before they sold out DIY put a bird on it plaid, mumblecore gluten-free post-ironic Brooklyn 3 wolf moon four loko health goth. Paleo art party jean shorts sartorial, migas next level Thundercats fixie ugh Pinterest taxidermy. Kickstarter vegan Echo Park asymmetrical actually Bushwick. Raw denim retro iPhone cliche hella next level. VHS four loko +1 scenester biodiesel, ennui gastropub paleo PBR&amp;B food truck pug. Vinyl next level keytar actually, flannel PBR single-origin coffee hashtag Brooklyn skateboard pork belly iPhone slow-carb. Single-origin coffee pug locavore, blog 3 wolf moon mumblecore Blue Bottle banjo sriracha actually typewriter biodiesel lomo.
        </p>
        <p>
          Four dollar toast food truck tofu, Neutra mixtape four loko disrupt fanny pack sustainable chambray ethical. Listicle Tumblr taxidermy bespoke, authentic disrupt squid Blue Bottle. Shabby chic McSweeney's yr, chillwave cliche meh keytar. Bespoke cray letterpress, cardigan mlkshk trust fund XOXO biodiesel banjo fashion axe dreamcatcher meditation. Crucifix trust fund Austin American Apparel next level, dreamcatcher pour-over plaid lumbersexual seitan fanny pack ennui kale chips semiotics. Fixie hashtag flexitarian narwhal. Hella mlkshk cronut Austin 90's, bicycle rights keffiyeh.
        </p>
        <p>
          Seitan mlkshk PBR art party direct trade narwhal Brooklyn post-ironic paleo synth letterpress street art. Tattooed try-hard beard before they sold out wayfarers, letterpress Portland Echo Park. YOLO plaid Etsy typewriter chambray, pour-over stumptown Brooklyn. Messenger bag Schlitz Helvetica fashion axe cred, swag butcher skateboard lomo Pitchfork. Put a bird on it typewriter food truck lo-fi, viral you probably haven't heard of them Kickstarter butcher before they sold out 3 wolf moon semiotics. Polaroid flannel PBR semiotics. Cred American Apparel Intelligentsia narwhal kogi.
        </p>

      </article>

    </article>

    <aside>

      <section>
        <h3>About <NAME></h3>
        <img src="../imgs/profile-jeff-george.jpg" alt="<NAME>">
        <div class="twitter-follow">
          <i class="fa fa-twitter fa-lg"></i></a>
          <a href="https://twitter.com/webdevjeffus"><button>Follow @webdevjeffus</button></a>
        </div>
      </section>

      <section>
        <h4>Bio</h4>
        <p>
          Four dollar toast food truck tofu, Neutra mixtape four loko disrupt fanny pack sustainable chambray ethical. Listicle Tumblr taxidermy bespoke, authentic disrupt squid Blue Bottle. Shabby chic McSweeney's yr, chillwave cliche meh keytar. Bespoke cray letterpress, cardigan mlkshk trust fund XOXO biodiesel banjo fashion axe dreamcatcher meditation. Crucifix trust fund Austin American Apparel next level, dreamcatcher pour-over plaid lumbersexual seitan fanny pack ennui kale chips semiotics. Fixie hashtag flexitarian narwhal. Hella mlkshk cronut Austin 90's, bicycle rights keffiyeh.
        </p>
        <p>
          Seitan mlkshk PBR art party direct trade narwhal Brooklyn post-ironic paleo synth letterpress street art. Tattooed try-hard beard before they sold out wayfarers, letterpress Portland Echo Park. YOLO plaid Etsy typewriter chambray, pour-over stumptown Brooklyn. Messenger bag Schlitz Helvetica fashion axe cred, swag butcher skateboard lomo Pitchfork. Put a bird on it typewriter food truck lo-fi, viral you probably haven't heard of them Kickstarter butcher before they sold out 3 wolf moon semiotics. Polaroid flannel PBR semiotics. Cred American Apparel Intelligentsia narwhal kogi.
        </p>
      </section>

      <section>
        <h4>Contact</h4>
        <a href="mailto:<EMAIL>"><i class="fa fa-envelope-o fa-lg"></i></a>
        <a href="https://www.linkedin.com/in/webdevjeffus"><i class="fa fa-linkedin-square fa-lg"></i></a>
        <a href="https://github.com/webdevjeffus"><i class="fa fa-github-square fa-lg"></i></a>
      </section>

    </aside>

  </main>

  <footer>
    <p>
      <a href="#"><NAME></a> - All content is <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC-by-NC-SA</a> unless otherwise noted.
    </p>
  </footer>

</body>

</html><commit_msg>Add reflection questions to blog-template.html<commit_after><!DOCTYPE html>

<html>

<head>
  <title>Blog | webdevjeff.us</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>

  <header>
    <h1>webdevjeff.us</h1>
    <p>Web Developer <NAME></p>

    <nav>
      <ul>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

  <main>
    <article>

      <header>
        <h2>Blog</h2>
        <div class="blog-post-nav">
          <a href="#"><i class="fa fa-caret-right fa-2x"></i></a>
          <a href="#"><i class="fa fa-caret-left fa-2x"></i></a>
        </div>
      </header>

      <article>

        <header>
          <h3>Most recent blog post</h3>
          <p>September 15</p>
          <p>Posted in category, category, category</p>
        </header>

        <p>
          Artisan kale chips before they sold out cronut. Banh mi keffiyeh ethical, roof party pour-over post-ironic asymmetrical 8-bit VHS cray. IPhone blog tote bag paleo cred, pug lumbersexual. Beard small batch twee organic American Apparel, crucifix High Life freegan ethical pour-over gastropub cronut butcher master cleanse meditation. Pork belly brunch Brooklyn, aesthetic farm-to-table Portland cold-pressed biodiesel Marfa tousled fixie VHS asymmetrical put a bird on it actually. Messenger bag dreamcatcher health goth, Blue Bottle banjo roof party crucifix tofu Marfa PBR biodiesel readymade. Umami flannel crucifix keffiyeh viral, bitters banh mi four dollar toast Portland drinking vinegar.
        </p>
        <p>
          Before they sold out DIY put a bird on it plaid, mumblecore gluten-free post-ironic Brooklyn 3 wolf moon four loko health goth. Paleo art party jean shorts sartorial, migas next level Thundercats fixie ugh Pinterest taxidermy. Kickstarter vegan Echo Park asymmetrical actually Bushwick. Raw denim retro iPhone cliche hella next level. VHS four loko +1 scenester biodiesel, ennui gastropub paleo PBR&amp;B food truck pug. Vinyl next level keytar actually, flannel PBR single-origin coffee hashtag Brooklyn skateboard pork belly iPhone slow-carb. Single-origin coffee pug locavore, blog 3 wolf moon mumblecore Blue Bottle banjo sriracha actually typewriter biodiesel lomo.
        </p>
        <p>
          Four dollar toast food truck tofu, Neutra mixtape four loko disrupt fanny pack sustainable chambray ethical. Listicle Tumblr taxidermy bespoke, authentic disrupt squid Blue Bottle. Shabby chic McSweeney's yr, chillwave cliche meh keytar. Bespoke cray letterpress, cardigan mlkshk trust fund XOXO biodiesel banjo fashion axe dreamcatcher meditation. Crucifix trust fund Austin American Apparel next level, dreamcatcher pour-over plaid lumbersexual seitan fanny pack ennui kale chips semiotics. Fixie hashtag flexitarian narwhal. Hella mlkshk cronut Austin 90's, bicycle rights keffiyeh.
        </p>
        <p>
          Seitan mlkshk PBR art party direct trade narwhal Brooklyn post-ironic paleo synth letterpress street art. Tattooed try-hard beard before they sold out wayfarers, letterpress Portland Echo Park. YOLO plaid Etsy typewriter chambray, pour-over stumptown Brooklyn. Messenger bag Schlitz Helvetica fashion axe cred, swag butcher skateboard lomo Pitchfork. Put a bird on it typewriter food truck lo-fi, viral you probably haven't heard of them Kickstarter butcher before they sold out 3 wolf moon semiotics. Polaroid flannel PBR semiotics. Cred American Apparel Intelligentsia narwhal kogi.
        </p>

      </article>

    </article>

    <aside>

      <section>
        <h3>About <NAME></h3>
        <img src="../imgs/profile-jeff-george.jpg" alt="<NAME>">
        <div class="twitter-follow">
          <i class="fa fa-twitter fa-lg"></i>
          <a href="https://twitter.com/webdevjeffus"><button>Follow @webdevjeffus</button></a>
        </div>
      </section>

      <section>
        <h4>Bio</h4>
        <p>
          Four dollar toast food truck tofu, Neutra mixtape four loko disrupt fanny pack sustainable chambray ethical. Listicle Tumblr taxidermy bespoke, authentic disrupt squid Blue Bottle. Shabby chic McSweeney's yr, chillwave cliche meh keytar. Bespoke cray letterpress, cardigan mlkshk trust fund XOXO biodiesel banjo fashion axe dreamcatcher meditation. Crucifix trust fund Austin American Apparel next level, dreamcatcher pour-over plaid lumbersexual seitan fanny pack ennui kale chips semiotics. Fixie hashtag flexitarian narwhal. Hella mlkshk cronut Austin 90's, bicycle rights keffiyeh.
        </p>
        <p>
          Seitan mlkshk PBR art party direct trade narwhal Brooklyn post-ironic paleo synth letterpress street art. Tattooed try-hard beard before they sold out wayfarers, letterpress Portland Echo Park. YOLO plaid Etsy typewriter chambray, pour-over stumptown Brooklyn. Messenger bag Schlitz Helvetica fashion axe cred, swag butcher skateboard lomo Pitchfork. Put a bird on it typewriter food truck lo-fi, viral you probably haven't heard of them Kickstarter butcher before they sold out 3 wolf moon semiotics. Polaroid flannel PBR semiotics. Cred American Apparel Intelligentsia narwhal kogi.
        </p>
      </section>

      <section>
        <h4>Contact</h4>
        <a href="mailto:<EMAIL>"><i class="fa fa-envelope-o fa-lg"></i></a>
        <a href="https://www.linkedin.com/in/webdevjeffus"><i class="fa fa-linkedin-square fa-lg"></i></a>
        <a href="https://github.com/webdevjeffus"><i class="fa fa-github-square fa-lg"></i></a>
      </section>

    </aside>

  </main>

  <footer>
    <p>
      <a href="#"><NAME></a> - All content is <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC-by-NC-SA</a> unless otherwise noted.
    </p>
  </footer>

</body>

</html>


<!--
# BLOG TEMPLATE REFLECTION QUESTIONS
### By <NAME>, 9.19.15, for DBC Phase 0

#### How was it to wireframe and create an HTML page with a pair?

In all honesty, I am not sure that wireframing and cranking out a basic HTML file benefits greatly from direct pairing. We decided to give pairing our best shot, working on a single wireframe and a single HTML template in a driver/navigator arrangement. Because we are relatively new to web development, working together that closely did have some educational benefit - there were definitely places where one of us knew how to do something that the other one didn't, and that happened in both directions. Yet I am not sure that the benefit of pairing on this sort of task (which consists basically of knowing and applying rules, rather than thinking through processes or algoriths) would carry over for more experienced developers. While we got along fine, and cooperated well, I am unconvinced that experienced developers would have benefitted much from collaborating on a task this basic.

That being said, I don't mean to condemn pair programming in general. I totally see how pairing would be very beneficial for even very experienced developers working on complex or difficult problems and projects. I guess my point is that whatever the experience level of the developers, pairing adds far more value when the developers are working at the edge of their ability. If they are doing fairly routine tasks - like writing a basic HTML template - I don't see that two people working together are even close to twice as effective as one person.

#### Did you find wireframing to be helpful to your development process?

In my work prior to DBC, I would usually scrawl a quick pencil sketch of my general idea for a page on a post-it note, then jump right into the HTML and CSS. I didn't spend more than a few minutes on that sketch, and deferred most of the detailed planning until I was in the editor.

Now that I'm learning a more formal development process, I can see that working with Balsamiq to create a detailed wireframe prior to beginning any work in HTML has significant benefits to quality, efficiency, and especially consistency. Doing so gives you an opportunity to plan out the page element by element, assuring that every single header, link, and icon is accounted for.

#### What did you and your pair decide made a good wireframe?

We didn't talk about "what made a good wireframe" in the abstract, but we called our wireframe done when we were sure we'd included every element we could imagine needing to include on the page, and had agreed on the prominence and position of each element.

#### What new semantic elements did you learn about (if any) ?

In preparing for this challenge, I read up on HTML outlining, and the proper use of the <main>, <article>, <section>, <header> and <footer> elements. For example, I learned that while each page can only have one <main> element, each self-contained block of content, including <body>, <main>, <article>, <section> and <aside> can have a <header> at its beginning, and a <footer> at its end.

I also learned quite a bit about coding headings. For instance, if you are adding a subheading right under a heading, only the heading goes in an <h_> tag; the subheading or byline should be put in a <p> tag and styled with CSS. This is because if you immediately follow one heading, such as an <h1>, with another, smaller heading, such as an <h3>, screenreaders and outliners will be confused because the first heading appears to have no content.

And although I never really used it, I read that the <hgroup> tag is officially not just deprecated, but completely obsolete. In HTML5, you would use the <header> element as an approximate analog for the old <hgroup>.

-->
{'fraction_non_alphanumeric': 0.08513504843780073, 'fraction_numerical': 0.004683390004490922, 'mean_word_length': 3.5091119467746603, 'pattern_counts': {'":': 0, '<': 276, '<?xml version=': 0, '>': 276, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5412638', 'n_tokens_mistral': 4806, 'n_tokens_neox': 4457, 'n_words': 1944}