index.html

---
layout: base
---

  <section class="must-see">
    <div class="container">
      <h2>Jank Free Must-Sees!</h2>
      <div class="intro">
        <p>Strapped for time or just getting started with eliminating jank from your projects? These are our must-see resources!</p>
      </div>

      <div class="content">
        <section>
          <h3>Articles, Posts & Guides</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'mustsee' and post.categories contains 'article' %}
              <li class="new">
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

        <section>
          <h3>Slides</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'mustsee' and post.categories contains 'slides' %}
              <li class="new">
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>
      </div>

      <section class="videos">
        <h3>Videos</h3>
        <ul>

          {% for post in site.posts %}
            {% if post.categories contains 'mustsee' and post.categories contains 'video' %}
            <li>
              <a href="{{ post.link }}">
                <span class="thumb">
                  <img src="{{ post.thumbnail }}">
                </span>
                <span class="title">{{ post.title }}</span>
              </a>
            </li>
            {% endif %}
          {% endfor %}

        </ul>
      </section>

      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>

  <section>
    <div class="container">
      <h2>Chrome DevTools & Tracing</h2>
      <div class="intro">
        <p>From memory consumption to image decoding, Chrome provides a complete range of tools for debugging and profiling your project's performance.</p>
        <p>For times where you need to dig into even more detail you can use Chrome Tracing.</p>
      </div>

      <div class="content">
        <section>
          <h3>Articles & Guides</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'devtools' and post.categories contains 'article' %}
              <li class="new">
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

        <section>
          <h3>Slides</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'devtools' and post.categories contains 'slides' %}
              <li class="new">
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>
      </div>

      <section class="videos">
        <h3>Videos</h3>
        <ul>

          {% for post in site.posts %}
            {% if post.categories contains 'devtools' and post.categories contains 'video' %}
            <li>
              <a href="{{ post.link }}">
                <span class="thumb">
                  <img src="{{ post.thumbnail }}">
                </span>
                <span class="title">{{ post.title }}</span>
              </a>
            </li>
            {% endif %}
          {% endfor %}

        </ul>
      </section>

      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>

  <section>
    <div class="container">
      <h2>Touch and Input</h2>
      <div class="intro">
        <p>Fast responses to user interactions help make your apps
          feeling fluid and a joy to use.</p>
      </div>

      <div class="content">
        <section>
          <h3>Posts</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'touch' and post.categories contains 'post' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

        <section>
          <h3>Resources</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'touch' and post.categories contains 'resource' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>

  <section>
    <div class="container">
      <h2>Paint</h2>
      <div class="intro">
        <p>Painting is the process of filling in the pixels for your page. Everything from CSS to image decoding and resizing has consequences for paint performance.</p>
      </div>

      <div class="content">
        <section>
          <h3>Articles & Guides</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'paint' and post.categories contains 'article' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

        <section>
          <h3>Tools</h3>
          <ul>
            {% for post in site.posts %}
              {% if post.categories contains 'paint' and post.categories contains 'tool' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}
          </ul>
        </section>

      </div>

      <section class="videos">
        <h3>Videos</h3>
        <ul>

          {% for post in site.posts %}
            {% if post.categories contains 'paint' and post.categories contains 'video' %}
            <li>
              <a href="{{ post.link }}">
                <span class="thumb">
                  <img src="{{ post.thumbnail }}">
                </span>
                <span class="title">{{ post.title }}</span>
              </a>
            </li>
            {% endif %}
          {% endfor %}

        </ul>
      </section>

      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>

  <section>
    <div class="container">
      <h2>Layout & Styles</h2>
      <div class="intro">
        <p>Before the browser can paint anything it has to first apply all the
          styles to your elements and figure out every element's geometry on the page.</p>
      </div>

      <div class="content">
        <section>
          <h3>Articles</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'layout' and post.categories contains 'article' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

        <section>
          <h3>Tools</h3>
          <ul>
            {% for post in site.posts %}
              {% if post.categories contains 'layout' and post.categories contains 'tool' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}
          </ul>
        </section>

      </div>

      <section class="videos">
        <h3>Videos</h3>
        <ul>

          {% for post in site.posts %}
            {% if post.categories contains 'layout' and post.categories contains 'video' %}
            <li>
              <a href="{{ post.link }}">
                <span class="thumb">
                  <img src="{{ post.thumbnail }}">
                </span>
                <span class="title">{{ post.title }}</span>
              </a>
            </li>
            {% endif %}
          {% endfor %}

        </ul>
      </section>

      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>

  <section>
    <div class="container">
      <h2>Animations</h2>
      <div class="intro">
        <p>Super slick animations and interactivity are a critical piece of making high quality and engaging projects.</p>
      </div>

      <div class="content">
        <section class="full-width">
          <h3>Articles</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'animations' and post.categories contains 'article' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>

  <section>
    <div class="container">
      <h2>Case Studies</h2>
      <div class="intro">
        <p>Want to know how other developers have fought to make their apps jank free?</p>
      </div>

      <div class="content">
        <section class="full-width">
          <h3>Articles</h3>
          <ul>

            {% for post in site.posts %}
              {% if post.categories contains 'casestudy' and post.categories contains 'article' %}
              <li>
                <a href="{{ post.link }}">
                  {{ post.title }}
                </a>
              </li>
              {% endif %}
            {% endfor %}

          </ul>
        </section>

      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </section>