index.html

---
title: Secrets
date: 2013-06-04 00:00:00
layout: site
section: secrets
order: none
---

{% for post in site.posts do limit:1 %}
<p>Latest news - <a href="{{ post.url }}">{{ post.title }}</a></p>
{% endfor %}

<h1>Secrets</h1>

<ul class="filter-bar">
    <li class="sort">
        Show
        <div class="options">
            <a href="#" class="selected">All</a>
            <ul class="list">
                <li><a href="#" data-filter="all" data-selected="true">All</a></li>
                <li><a href="#" data-filter="favorites" data-selected="false">Favorites</a></li>
                <!--<li><a href="#" data-filter="last-month" data-selected="false">Latest</a></li>-->
            </ul>
        </div>
        <!--by
        <div class="options">
            <a href="#" class="selected">Category</a>
            <ul class="list">
                <li><a href="#" data-filter="category">Category</a></li>
                <li><a href="#" data-filter="date">Date</a></li>
                <li><a href="#" data-filter="experience-level">Experience Level</a></li>
            </ul>
        </div>-->
    </li>
    <li class="browsers"> 
        <p>
            <a href="#" data-browser="chrome" data-selected="true" class="browser-chrome selected"><span>Chrome</span></a>
            <a href="#" data-browser="firefox" data-selected="true" class="browser-firefox selected"><span>Firefox</span></a>
            <a href="#" data-browser="firebug" data-selected="true" class="browser-firebug selected"><span>Firefox</span></a>
            <a href="#" data-browser="internet-explorer" data-selected="true" class="browser-IE selected"><span>Internet Explorer</span></a>
            <a href="#" data-browser="opera" data-selected="true" class="browser-opera selected"><span>Opera</span></a>
            <a href="#" data-browser="safari" data-selected="true" class="browser-safari selected"><span>Safari</span></a>
        </p>
    </li>
</ul>

<p class="secret-count">Displaying <span>0</span> secrets</p>

<div class="controller chrome firefox internet-explorer opera safari">

{% assign parent = '' %}
{% for post in site.posts_sorted_by_order %}
    {% if post.layout == 'secret' and post.published %}
        {% if post.parent != parent %}
            {% if parent != '' %}
    </section>
            {% endif %}
            {% assign parent = post.parent %}
    <section>
        <h2>{{ post.parent | capitalize }}</h2>

        {% if post.parent == "general" %}
        <p class="meta">General hints and tips that don't fall in to any category.</p>
        {% elsif post.parent == "console" %}
        <p class="meta">Improve your console skills to find out more about your site or app.</p>
        {% elsif post.parent == "inspecting" %}
        <p class="meta">Inspect and make changes to page HTML and CSS.</p>
        {% elsif post.parent == "editing" %}
        <p class="meta">Editing your code with the console.</p>
        {% elsif post.parent == "debugging" %}
        <p class="meta">Place breakpoints and watches to help you debug code as it runs.</p>
        {% elsif post.parent == "performance" %}
        <p class="meta">Improve the way your site or app performs with these secrets.</p>
        {% elsif post.parent == "storage" %}
        <p class="meta">Find out what is in memory from your application.</p>
        {% elsif post.parent == "mobile" %}
        <p class="meta">How to debug your sites on mobile and tablet devices.</p>
        {% endif %}

        {% endif %}
        <article class="post small"
                 data-url="{{ post.url }}"
                 data-date="{{ post.date | date: '%Y%m%d' }}"
                 data-browsers="{% for browser in post.browsers do %}{{ browser }}{% if forloop.last != true %} {% endif %}{% endfor %}"
                 data-categories="{% for category in post.categories do %}{{ category }}{% if forloop.last != true %} {% endif %}{% endfor %}">
            <header class="post-header">
                <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
            </header>

            <div class="post-content type-{{ post.parent }}">
            </div>
        </article>
    {% endif %}
{% endfor %}
{% if parent != '' %}
    </section>
{% endif %}
</div>