---
title: Favorite JavaScript utilities in single line of code
layout: layouts/base.njk
---

<header class="header">
    <div class="container">
        <div class="header__logo">
            <img src="/assets/logo.png" height="256" width="256" alt="1 LOC" />
        </div>
        <h1 class="header__heading">{{ collections.posts.length }} Favorite JavaScript Utilities</h1>
        <h2 class='header__subheading'>in single line of code! No more!</h2>
    </div>

    <div class="header__github">
        <a
            href="https://github.com/phuoc-ng/1loc"
            rel="noopener noreferrer"
            target="_blank"
        >
            GitHub ★ {{ github.stargazers }}
        </a>
    </div>
</header>

<main class="main">
    <div class="container">
    {% set postsByCategory = collections.postsByCategory %}
    {% set numCategories = postsByCategory | countKeys %}
    {% set chunkSize = (products.length / numCategories) | round %}
    {% set productsEachCategory = products | chunk(chunkSize) %}

    {% for category, posts in postsByCategory %}
        <section class="section">
            <div class="section__separator">
                <div class="section__title">{{ category }}</div>
            </div>

            {% for post in posts %}
            <div class="snippet" id="{{ post.fileSlug }}">
                <h2 class="snippet__header">
                    <div class="snippet__title">{{ post.data.title }}</div>
                    <a class="snippet__anchor" href="#{{ post.fileSlug }}">#</a>
                </h2>
                <div class="snippet__body snippet__body--hidden">
                    <div class="sample-code">{{ post.templateContent | safe }}</div>
                </div>
            </div>
            {% endfor %}

            {% for product in productsEachCategory[loop.index - 1] %}
            {% include "_product.njk" %}
            {% endfor %}
        </section>
    {% endfor %}
    </div>
</main>