> ## Documentation Index
> Fetch the complete documentation index at: https://howdy39.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Books

> Technical books from my circle, Tech The Toaster, available as free e-books.

I've made all the technical books I distributed at events such as Tech Book Fest available as free e-books. My circle is called "Tech The Toaster", and the idea is to be a toaster that toasts (Toast) technical knowledge (Tech) into the reader. The books are written in Japanese.

<div className="not-prose grid grid-cols-2 sm:grid-cols-4 gap-4 my-4">
  <a href="https://techthetoaster.stores.jp/items/5d86331c745e6c713fa0c02d" className="group flex flex-col overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 hover:border-primary dark:hover:border-primary-light transition-colors">
    <img src="https://imagedelivery.net/QondspN4HIUvB_R16-ddAQ/5b34e5b7ef843f3a37001a41/c044be672b7023bc32a3.png/fit=scale-down,w=460" alt="" width="460" height="650" loading="lazy" decoding="async" className="w-full m-0 object-cover" style={{ aspectRatio: "460 / 650" }} />

    <div className="p-3">
      <div className="font-semibold text-sm text-gray-800 dark:text-white">Mastering Chrome DevTools: Elements</div>
      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">E-book · Free</div>
    </div>
  </a>

  <a href="https://techthetoaster.stores.jp/items/5caca264b9d5f47ec006f784" className="group flex flex-col overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 hover:border-primary dark:hover:border-primary-light transition-colors">
    <img src="https://imagedelivery.net/QondspN4HIUvB_R16-ddAQ/5b34e5b7ef843f3a37001a41/a61a7229290f81854fa2.png/fit=scale-down,w=460" alt="" width="460" height="650" loading="lazy" decoding="async" className="w-full m-0 object-cover" style={{ aspectRatio: "460 / 650" }} />

    <div className="p-3">
      <div className="font-semibold text-sm text-gray-800 dark:text-white">Mastering Chrome DevTools: Network</div>
      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">E-book · Free</div>
    </div>
  </a>

  <a href="https://techthetoaster.stores.jp/items/5b913232a6e6ee1cc8000138" className="group flex flex-col overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 hover:border-primary dark:hover:border-primary-light transition-colors">
    <img src="https://imagedelivery.net/QondspN4HIUvB_R16-ddAQ/5b34e5b7ef843f3a37001a41/ff385d627ccbc0a31808.png/fit=scale-down,w=460" alt="" width="460" height="650" loading="lazy" decoding="async" className="w-full m-0 object-cover" style={{ aspectRatio: "460 / 650" }} />

    <div className="p-3">
      <div className="font-semibold text-sm text-gray-800 dark:text-white">Mastering Chrome DevTools: Console</div>
      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">E-book · Free</div>
    </div>
  </a>

  <a href="https://techthetoaster.stores.jp/items/5d3c2cae8e69191836ac4a7d" className="group flex flex-col overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 hover:border-primary dark:hover:border-primary-light transition-colors">
    <img src="https://imagedelivery.net/QondspN4HIUvB_R16-ddAQ/5b34e5b7ef843f3a37001a41/757e8b69a207a1bfa8af.png/fit=scale-down,w=460" alt="" width="460" height="650" loading="lazy" decoding="async" className="w-full m-0 object-cover" style={{ aspectRatio: "460 / 650" }} />

    <div className="p-3">
      <div className="font-semibold text-sm text-gray-800 dark:text-white">Getting started with performance measurement using WebPagetest</div>
      <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">E-book · Free</div>
    </div>
  </a>
</div>

[Visit the Tech The Toaster shop →](https://techthetoaster.stores.jp/)

I wrote about why I made them free in [this article](https://note.com/howdy39/n/na4c24d39b006) (in Japanese).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.