<commit_before><!DOCTYPE html>
<html>

<head>
  <title><NAME>| Web Developer</title>
  <link rel="stylesheet" type="text/css" href="./stylesheets/blog_template.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="./scripts/blog_template.js"></script>
</head>

<body>
  <header>
    <img src="./images/myself.jpg">
      <nav>
        <a class="font" href="../index.html">home</a> 
        <a class="font" href="../about.html">about</a>
        <a class="font" href="../blog_posts.html">blog</a>
        <a class="font" href="../projects.html">projects</a>
        <a class="font" href="../resources.html">resources</a>
        <a class="icon" href="http://www.github.com/matt16749"><i class="fa fa-github-square fa-2x"></i></a>
        <a class="icon" href="http://www.linkedin.com/in/matthewchan2000"><i class="fa fa-linkedin-square fa-2x"></i></a>
        <a class="icon" href="mailto:<EMAIL>"><i class="fa fa-envelope-square fa-2x"></i></a>
      </nav>
  </header>

  <div class="titlename">Backbone Components</div>

  <section>
    <article>
      <h1>Backbone.Router</h1>
      <p>Backbone's Router component watches for any changes to URL router and provides a list of callback functions that grab JSON data and renders a view.</p>
    </article>
  </section>

  <img id="cloud0" src="./images/cloud0.png">
  <img id="cloud1" src="./images/cloud1.png">
  <img id="cloud2" src="./images/cloud2.png">
</body>
<commit_msg>adds backbone workflow to backbone blog post<commit_after><!DOCTYPE html>
<html>

<head>
  <title><NAME>| Web Developer</title>
  <link rel="stylesheet" type="text/css" href="./stylesheets/blog_template.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="./scripts/blog_template.js"></script>
</head>

<body>
  <header>
    <img src="./images/myself.jpg">
      <nav>
        <a class="font" href="../index.html">home</a> 
        <a class="font" href="../about.html">about</a>
        <a class="font" href="../blog_posts.html">blog</a>
        <a class="font" href="../projects.html">projects</a>
        <a class="font" href="../resources.html">resources</a>
        <a class="icon" href="http://www.github.com/matt16749"><i class="fa fa-github-square fa-2x"></i></a>
        <a class="icon" href="http://www.linkedin.com/in/matthewchan2000"><i class="fa fa-linkedin-square fa-2x"></i></a>
        <a class="icon" href="mailto:<EMAIL>"><i class="fa fa-envelope-square fa-2x"></i></a>
      </nav>
  </header>

  <div class="titlename">Backbone Components</div>

  <section>
    <article>
      <h1>Backbone.Router</h1>
      <p>Backbone's Router component watches for any changes to URL router and provides a list of callback functions that grab JSON data and renders a view.</p>

      <h1>Backbone.View</h1>
      <p>Paired with an HTML template that can be populated with model data via Backbone.Router. The actual functions that populate the data come from the view.</p>

      <h1>Backbone.Collection/Model</h1>
      <p>A collection consists of multiple models. Models take data JSON endpoints of an API(which would be our Rails)</p>
    </article>
    <article>
      <h1>Backbone Workflow</h1>
      <ol>
        <li>Instantiate Backbone router to listen for URL hashchange events.</li>
        <li>On specific hashchange, Router will fetch model/collection data from server.</li>
        <li>After fetching model/collection data, Router instantiates a parent collection view and render into the DOM.</li>
        <li>Parent collection view also should have a reset function so that when server lists new data, the collection view will automatically iterate through each model data and output the subset model view within the collection view.</li>
      </ol>
    </article>
  </section>

  <img id="cloud0" src="./images/cloud0.png">
  <img id="cloud1" src="./images/cloud1.png">
  <img id="cloud2" src="./images/cloud2.png">
</body>

{'fraction_non_alphanumeric': 0.18262757871878393, 'fraction_numerical': 0.013029315960912053, 'mean_word_length': 3.6525252525252525, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '3291297', 'n_tokens_mistral': 1573, 'n_tokens_neox': 1510, 'n_words': 349}