<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: TORIFUKU Kaiou</title>
    <description>The latest articles on Forem by TORIFUKU Kaiou (@torifukukaiou).</description>
    <link>https://forem.com/torifukukaiou</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F517976%2F17bb8e1c-339d-464f-a3c6-bfcb22b66af7.png</url>
      <title>Forem: TORIFUKU Kaiou</title>
      <link>https://forem.com/torifukukaiou</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/torifukukaiou"/>
    <language>en</language>
    <item>
      <title>Using Elixir Nerves IoT Framework for Traditional Straw-Wrapped Natto Making</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Sat, 06 Dec 2025 09:30:08 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/using-elixir-nerves-iot-framework-for-traditional-straw-wrapped-natto-making-4b0</link>
      <guid>https://forem.com/torifukukaiou/using-elixir-nerves-iot-framework-for-traditional-straw-wrapped-natto-making-4b0</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;"Natto making?" on a tech platform? I know what you're thinking. Don't rush to judgment. Sometimes articles like this are worth reading. Some invisible thread of fate brought you here, so please stay and enjoy this journey.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Year 2025
&lt;/h2&gt;

&lt;p&gt;2025 was a tumultuous year, called the "Reiwa Rice Crisis" by some. While many traditional media outlets predicted that the politician known for their "rice policy commitment" would become the next Prime Minister, Japan instead saw its first female Prime Minister take office. History is told by historians of later generations, and we won't know the true significance for 10 or 100 years, but 2025 may have been a turning point.&lt;/p&gt;

&lt;p&gt;I'm writing this as if it has deep meaning for someone reading this 100 years from now. These are just the thoughts of an ordinary citizen. I hope future historians will take note.&lt;/p&gt;

&lt;h2&gt;
  
  
  My 2025
&lt;/h2&gt;

&lt;p&gt;Bringing this back to my personal life, I became deeply absorbed in three things this year:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Shogi (Japanese chess)&lt;/li&gt;
&lt;li&gt;Kiyoshi Yamashita&lt;/li&gt;
&lt;li&gt;Rice farming&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For shogi, I finally reached 1-dan rank on Shogi Wars. It took me 9 years. I devoted almost every day to shogi, mainly focusing on tsumeshogi (chess problems). However, since I used the "chess god" feature occasionally to advance, my current 1-dan achievement rate is below 20% - what's called "underground." When you hit 100% at 1-kyu, you advance to 1-dan, which equals 20% at 1-dan.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://note.com/awesomey/n/n3523082881bf" rel="noopener noreferrer"&gt;https://note.com/awesomey/n/n3523082881bf&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I realized something important: I have virtually no talent for shogi. Some people learn the rules and breeze through to 1-dan, while others like me take 9 years. The same is true in technology - some people learn a bit of syntax and immediately build applications, while others struggle to grasp programming concepts. I've been in this field for over 20 years now. Though I'm far from the top, I've become so accustomed to basic programming concepts that I've lost touch with what beginners find difficult. When beginners ask fundamental questions, I'm not mature or patient enough - I get irritated, it shows in my attitude, and I've intimidated many newcomers. I feel terrible about this, but I can't change the past.&lt;/p&gt;

&lt;p&gt;What does this have to do with shogi? Well, reaching 1-dan means you can easily beat someone who just knows how the pieces move, but among all shogi players, it's about average skill. There are always stronger players above, and throughout a single game, I make many mistakes that would prompt questions like "Why can't you solve a 9-move problem?" "Why did you miss that checkmate?" "Why did you make such a strange move?" Fortunately, my teachers are books and YouTubers - I don't attend classes where someone would actually say these things to me. But it suddenly struck me: isn't this exactly what I've been doing when teaching programming? While strictness has its place in teaching, perhaps I was demanding too high a level from beginners. Yet I also want them to easily surpass my level. Otherwise, Japan will remain behind, unable to recover from the "lost 30 years." I'm speaking in grand terms here. My individual efforts won't change anything, but I think struggling is what it means to live. That's my philosophical conclusion.&lt;/p&gt;

&lt;p&gt;Let me digress. Wander, if you will. I found a compilation of diaries by Kiyoshi Yamashita, the genius wandering artist, at my local library. I devoured it. Fascinating. Free-spirited, natural. Persistent. Patient. That's why he left behind such masterpieces. I dare to call him "Kiyo-chan," as his close friends did. I want to be free like Kiyo-chan, honest enough to get upset if I don't get two servings of curry rice - genuine with no pretense. During his wanderings, Kiyo-chan would ask for "musubi" (rice balls). The main ingredient is, of course, rice. Incidentally, Kiyo-chan also loved shogi.&lt;/p&gt;

&lt;p&gt;As mentioned earlier, this year became known as the Reiwa Rice Crisis. By chance, I participated in pesticide-free rice farming done entirely by traditional hand methods - planting, harvesting with sickles, everything the old way. It was just an experience. I only worked for about half a day over three days total. That's nowhere near enough to speak about agriculture. I only understood how hard it is. My mentors, Antonio Inoki and Yoshida Shōin, had rich interactions with soil and nature during their sensitive childhood years. I have a feeling that these formative experiences connected to their later great achievements. I can't yet explain this connection well with words, but I trust this intuition is fundamentally correct. When I can articulate that "something" that connects them, I'll share it again.&lt;/p&gt;

&lt;p&gt;Back to the topic. Rice planting, summer weeding, autumn harvesting - just three days of experience, but in this year of the "Reiwa Rice Crisis," I feel something mysterious. When you grow rice without pesticides and hang the stalks cut with sickles, they become straw, which is essential for natto-making. &lt;strong&gt;The pesticide-free aspect is key.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Traditional Straw-Wrapped Natto Making
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://miu-organic.com/nattou_recipe" rel="noopener noreferrer"&gt;Reference: Traditional Natto Making Method Using Straw (with Precautions)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This article provides detailed instructions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Soak soybeans in water (24 hours)&lt;/li&gt;
&lt;li&gt;Boil soybeans (6 hours)&lt;/li&gt;
&lt;li&gt;Sterilize straw in boiling water&lt;/li&gt;
&lt;li&gt;Keep soybeans with straw at around 40°C (24 hours)&lt;/li&gt;
&lt;li&gt;Let rest in refrigerator (24 hours)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I believed step 4, temperature control, was the most critical. I maintained temperature using hot water bottles and glass bottles filled with hot water inside a styrofoam box. Inside the box, I placed a Raspberry Pi 4 with an AHT20 temperature/humidity sensor to monitor the temperature. The software running on the Raspberry Pi 4 was an application built with &lt;a href="https://nerves-project.org/" rel="noopener noreferrer"&gt;Nerves&lt;/a&gt;, an IoT framework for &lt;a href="https://elixir-lang.org/" rel="noopener noreferrer"&gt;Elixir&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;All source code is available at &lt;a href="https://github.com/TORIFUKUKaiou/hello_iot_cloud2023" rel="noopener noreferrer"&gt;https://github.com/TORIFUKUKaiou/hello_iot_cloud2023&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;hello_nerves&lt;/code&gt; is the Nerves app flashed to Raspberry Pi 4&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;aht20_tracker&lt;/code&gt; is an API server + Grafana visualization module built with &lt;a href="https://www.phoenixframework.org/" rel="noopener noreferrer"&gt;Phoenix&lt;/a&gt;, an Elixir web framework&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Normally, this device somewhat aimlessly measures the temperature and humidity in my room. But when placed in the styrofoam box, it faithfully and accurately sent temperature data to the API server.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F43m2q2mgxxohio3jlzrh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F43m2q2mgxxohio3jlzrh.png" alt="Temperature monitoring graph" width="800" height="288"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And here's the finished straw-wrapped natto. It was delicious. I think even Qiitan (Qiita's mascot) said it looked tasty.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F131808%2Fa5048405-7065-47ec-843a-4bef46971690.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F131808%2Fa5048405-7065-47ec-843a-4bef46971690.jpeg" alt="Finished natto" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I reflected on 2025 - how I viewed this year and the events in my life.&lt;/p&gt;

&lt;p&gt;Managing temperature control for traditional straw-wrapped natto making with a &lt;a href="https://nerves-project.org/" rel="noopener noreferrer"&gt;Nerves&lt;/a&gt; application - this was completely &lt;a href="https://nerves-project.org/" rel="noopener noreferrer"&gt;Nerves&lt;/a&gt;-related content, so I posted it to the "&lt;a href="https://qiita.com/advent-calendar/2025/nervesjp" rel="noopener noreferrer"&gt;#NervesJP Advent Calendar 2025&lt;/a&gt;."&lt;/p&gt;

&lt;p&gt;Recently, I've been absorbed in the TV anime "Oishinbo." I'll write about that along with the state of the world in next year's Advent Calendar 2026.&lt;/p&gt;

</description>
      <category>elixir</category>
      <category>iot</category>
      <category>raspberrypi</category>
      <category>japan</category>
    </item>
    <item>
      <title>The codewhisperer-for-command-line-companion extension is automatically installed in VS Code</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Sun, 31 Aug 2025 13:25:57 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/the-codewhisperer-for-command-line-companion-extension-is-automatically-installed-in-vs-code-1492</link>
      <guid>https://forem.com/torifukukaiou/the-codewhisperer-for-command-line-companion-extension-is-automatically-installed-in-vs-code-1492</guid>
      <description>&lt;p&gt;If a mysterious Amazon Q-related extension suddenly appears in your VS Code, don’t panic. Here’s what it is, why it shows up, and how to control it.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You might see &lt;code&gt;amazonwebservices.codewhisperer-for-command-line-companion&lt;/code&gt; appear without manually installing it.&lt;/li&gt;
&lt;li&gt;It’s auto-installed by Amazon Q Developer: when launching the Desktop app on macOS or when running &lt;code&gt;q integrations install vscode&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;The extension is bundled as a local VSIX (not from Marketplace) and installed via the &lt;code&gt;code&lt;/code&gt; CLI.&lt;/li&gt;
&lt;li&gt;It’s safe to remove and re-install: &lt;code&gt;code --uninstall-extension amazonwebservices.codewhisperer-for-command-line-companion&lt;/code&gt; then &lt;code&gt;q integrations install vscode&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Proof with source links and line numbers is included below.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Summary
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;If you use Amazon Q Developer and have Visual Studio Code installed, the “amazonwebservices.codewhisperer-for-command-line-companion” extension gets installed automatically.&lt;/li&gt;
&lt;li&gt;It’s likely harmless.&lt;/li&gt;
&lt;li&gt;If you’re worried, you can uninstall it once and then manually reinstall it with &lt;code&gt;q integrations install vscode&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;While browsing my Visual Studio Code extensions, I noticed an extension that looked vaguely familiar but that I didn’t remember installing myself.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.codewhisperer-for-command-line-companion" rel="noopener noreferrer"&gt;amazonwebservices.codewhisperer-for-command-line-companion&lt;/a&gt;: Not available on the Marketplace (404)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F091b8vkbn2podpi289l9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F091b8vkbn2podpi289l9.png" width="800" height="385"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9uyoxkih78qdy51zc79u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9uyoxkih78qdy51zc79u.png" width="800" height="412"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I use the &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line.html" rel="noopener noreferrer"&gt;CLI&lt;/a&gt; version of &lt;a href="https://aws.amazon.com/q/developer/" rel="noopener noreferrer"&gt;Amazon Q Developer&lt;/a&gt; heavily, so I did have a lead. But, as shown above, the “amazonwebservices” publisher didn’t have a verification badge and the extension wasn’t on the Marketplace. That made me suspicious.  &lt;/p&gt;

&lt;p&gt;“Oh no! Did I install something like malware by mistake?!” I panicked in the middle of the night.&lt;br&gt;&lt;br&gt;
For the time being I uninstalled it, and since I do use &lt;a href="https://aws.amazon.com/q/developer/" rel="noopener noreferrer"&gt;Amazon Q Developer&lt;/a&gt;, I investigated under the hypothesis that “maybe it’s being added automatically.” In short: yes, it is—so it’s harmless. &lt;a href="https://aws.amazon.com/q/developer/" rel="noopener noreferrer"&gt;Amazon Q Developer&lt;/a&gt; adds it automatically.&lt;/p&gt;




&lt;h2&gt;
  
  
  Investigation Report
&lt;/h2&gt;

&lt;p&gt;Using &lt;a href="https://developers.openai.com/codex/cli/" rel="noopener noreferrer"&gt;Codex CLI&lt;/a&gt;, I analyzed the public GitHub repo &lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli-autocomplete&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  When the extension gets installed
&lt;/h3&gt;

&lt;p&gt;The “amazonwebservices.codewhisperer-for-command-line-companion” extension is installed in Visual Studio Code at the following times:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;When the Amazon Q Desktop app (macOS) is launched&lt;/li&gt;
&lt;li&gt;When you run the &lt;code&gt;q integrations install vscode&lt;/code&gt; command&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvj0p8zgrjk51rfe2tg5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvj0p8zgrjk51rfe2tg5.png" width="800" height="624"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Key source code points
&lt;/h3&gt;

&lt;p&gt;Below are the relevant source code locations.&lt;/p&gt;

&lt;h4&gt;
  
  
  Extension artifact
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/466adcd4146fecf74cf13eeb4d4201bda1e4bd49/crates/fig_integrations/src/vscode/mod.rs" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/466adcd4146fecf74cf13eeb4d4201bda1e4bd49/crates/fig_integrations/src/vscode/mod.rs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This file contains the extension payload itself.&lt;/p&gt;

&lt;h4&gt;
  
  
  Auto-install when launching the Amazon Q Desktop app (macOS)
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/466adcd4146fecf74cf13eeb4d4201bda1e4bd49/crates/fig_desktop/src/install.rs#L149-L161" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/466adcd4146fecf74cf13eeb4d4201bda1e4bd49/crates/fig_desktop/src/install.rs#L149-L161&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see &lt;code&gt;vscode::variants_installed()&lt;/code&gt; being used here.&lt;/p&gt;

&lt;h4&gt;
  
  
  Installation when running &lt;code&gt;q integrations install vscode&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/466adcd4146fecf74cf13eeb4d4201bda1e4bd49/crates/q_cli/src/cli/integrations.rs#L193-L201" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/466adcd4146fecf74cf13eeb4d4201bda1e4bd49/crates/q_cli/src/cli/integrations.rs#L193-L201&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Again, this uses &lt;code&gt;vscode::variants_installed()&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Closing Thoughts
&lt;/h2&gt;

&lt;p&gt;I was pretty scared—thinking I might have installed something shady. I hope this saves time for anyone who had the same concern.  &lt;/p&gt;

&lt;p&gt;Thanks to tools like &lt;a href="https://developers.openai.com/codex/cli/" rel="noopener noreferrer"&gt;Codex CLI&lt;/a&gt;, analyzing complex source code has become much easier. I’m on the Amazon Q Developer Pro plan, but I &lt;a href="https://zenn.dev/torifukukaiou/articles/9240f95973d7d3" rel="noopener noreferrer"&gt;hit the monthly limit at the end of the month&lt;/a&gt;, so I leaned on &lt;a href="https://developers.openai.com/codex/cli/" rel="noopener noreferrer"&gt;Codex CLI&lt;/a&gt; for help.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>amazonq</category>
      <category>ai</category>
      <category>vscode</category>
    </item>
    <item>
      <title>Measuring Chat Count After Hitting the Amazon Q Developer (Claude Sonnet 4) Pro Limit</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Sun, 31 Aug 2025 04:14:12 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/measuring-chat-count-after-hitting-the-amazon-q-developer-claude-sonnet-4-pro-limit-48e7</link>
      <guid>https://forem.com/torifukukaiou/measuring-chat-count-after-hitting-the-amazon-q-developer-claude-sonnet-4-pro-limit-48e7</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;I’m an avid user of the Amazon Q Developer CLI.&lt;br&gt;&lt;br&gt;
I mainly use the CLI version rather than the IDE integration.&lt;br&gt;&lt;br&gt;
Of course, I’m on the Pro plan and happily paying for it.&lt;/p&gt;

&lt;p&gt;To be honest, I probably overused it. I threw everything at Amazon Q Developer CLI every day—code questions, AWS questions, small talk, anything—until I was told: “Monthly request limit reached - The limits reset on 09/01.” For the past few days I haven’t been able to use it.&lt;br&gt;&lt;br&gt;
That was a problem, so rather than wait around, I decided to act.&lt;br&gt;&lt;br&gt;
Well, it should work again tomorrow. Can’t wait.&lt;/p&gt;

&lt;p&gt;By the way, the model used by Amazon Q Developer CLI is Anthropic’s Claude Sonnet 4.&lt;br&gt;&lt;br&gt;
Also by the way, I’m using macOS 15.6.1.&lt;/p&gt;
&lt;h2&gt;
  
  
  I built a wrapper to count chats (with Codex CLI’s help)
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#!/usr/bin/env bash&lt;/span&gt;
&lt;span class="nb"&gt;set&lt;/span&gt; &lt;span class="nt"&gt;-euo&lt;/span&gt; pipefail

&lt;span class="c"&gt;# q chat usage counter wrapper&lt;/span&gt;
&lt;span class="c"&gt;# - Counts assistant replies completed during this run by querying SQLite&lt;/span&gt;
&lt;span class="c"&gt;# - Logs to ~/.local/share/q-wrapper/usage.csv&lt;/span&gt;

&lt;span class="nv"&gt;subcmd&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;1&lt;/span&gt;&lt;span class="k"&gt;:-}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;

&lt;span class="c"&gt;# Detect DB path&lt;/span&gt;
&lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;OSTYPE&lt;/span&gt;&lt;span class="k"&gt;:-}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="k"&gt;in
  &lt;/span&gt;darwin&lt;span class="k"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nv"&gt;DB_PATH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="s2"&gt;/Library/Application Support/amazon-q/data.sqlite3"&lt;/span&gt; &lt;span class="p"&gt;;;&lt;/span&gt;
  linux&lt;span class="k"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  &lt;span class="nv"&gt;DB_PATH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;XDG_DATA_HOME&lt;/span&gt;&lt;span class="k"&gt;:-&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="p"&gt;/.local/share&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/amazon-q/data.sqlite3"&lt;/span&gt; &lt;span class="p"&gt;;;&lt;/span&gt;
  &lt;span class="k"&gt;*&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;       &lt;span class="nv"&gt;DB_PATH&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="s2"&gt;/Library/Application Support/amazon-q/data.sqlite3"&lt;/span&gt; &lt;span class="p"&gt;;;&lt;/span&gt;
&lt;span class="k"&gt;esac&lt;/span&gt;

&lt;span class="nv"&gt;LOG_DIR&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="s2"&gt;/.local/share/q-wrapper"&lt;/span&gt;
&lt;span class="nb"&gt;mkdir&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$LOG_DIR&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="nv"&gt;LOG_FILE&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$LOG_DIR&lt;/span&gt;&lt;span class="s2"&gt;/usage.csv"&lt;/span&gt;

&lt;span class="c"&gt;# Start and end window in UNIX ms&lt;/span&gt;
&lt;span class="nv"&gt;start_ms&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="k"&gt;$((&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;date&lt;/span&gt; +%s&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="m"&gt;1000&lt;/span&gt;&lt;span class="k"&gt;))&lt;/span&gt;

&lt;span class="c"&gt;# Run q with all arguments&lt;/span&gt;
&lt;span class="nb"&gt;set&lt;/span&gt; +e
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt; &lt;span class="nb"&gt;command&lt;/span&gt; &lt;span class="nt"&gt;-v&lt;/span&gt; q &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;/dev/null 2&amp;gt;&amp;amp;1&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
  &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"[qw] error: 'q' not found in PATH"&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&amp;amp;2
  &lt;span class="nb"&gt;exit &lt;/span&gt;127
&lt;span class="k"&gt;fi
&lt;/span&gt;q &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$@&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nv"&gt;exit_code&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nv"&gt;$?&lt;/span&gt;
&lt;span class="nb"&gt;set&lt;/span&gt; &lt;span class="nt"&gt;-e&lt;/span&gt;

&lt;span class="nv"&gt;end_ms&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="k"&gt;$((&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;date&lt;/span&gt; +%s&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="m"&gt;1000&lt;/span&gt;&lt;span class="k"&gt;))&lt;/span&gt;

&lt;span class="c"&gt;# Only attempt counting for chat subcommand and when DB exists&lt;/span&gt;
&lt;span class="nv"&gt;count&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;0
&lt;span class="nv"&gt;dir_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;pwd&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;[[&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$subcmd&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s2"&gt;"chat"&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nt"&gt;-f&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$DB_PATH&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;]]&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then&lt;/span&gt;
  &lt;span class="c"&gt;# Count history entries whose stream_end_timestamp_ms fell within this run window&lt;/span&gt;
  &lt;span class="c"&gt;# Escape single quotes for SQL literal&lt;/span&gt;
  &lt;span class="nv"&gt;esc_key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;dir_key&lt;/span&gt;&lt;span class="p"&gt;//\&lt;/span&gt;&lt;span class="s1"&gt;'/''}
  read -r count &amp;lt; &amp;lt;(sqlite3 -readonly "$DB_PATH" "WITH rows AS (
    SELECT json_extract(h.value, '&lt;/span&gt;&lt;span class="nv"&gt;$.request_metadata&lt;/span&gt;&lt;span class="p"&gt;.stream_end_timestamp_ms&lt;/span&gt;&lt;span class="s1"&gt;') AS end_ms
    FROM conversations, json_each(conversations.value, '&lt;/span&gt;&lt;span class="nv"&gt;$.history&lt;/span&gt;&lt;span class="s1"&gt;') AS h
    WHERE conversations.key = '&lt;/span&gt;&lt;span class="nv"&gt;$esc_key&lt;/span&gt;&lt;span class="s1"&gt;'
  ) SELECT COUNT(*) FROM rows WHERE end_ms IS NOT NULL AND end_ms &amp;gt;= $start_ms AND end_ms &amp;lt;= $end_ms;") || count=0
fi

# Append CSV log: ts,subcmd,dir,count,exit
ts=$(date -Iseconds)
printf "%s,%s,%s,%s,%s\n" "$ts" "${subcmd:-}" "$dir_key" "$count" "$exit_code" &amp;gt;&amp;gt; "$LOG_FILE"

# Friendly summary
echo "[qw] replies this run: $count (dir=$dir_key, exit=$exit_code)"

exit "$exit_code"
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;I call it a q wrapper, or &lt;code&gt;qw&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
Place this file somewhere convenient, give it execute permission with &lt;code&gt;chmod +x qw&lt;/code&gt;, and ensure it’s on your &lt;code&gt;PATH&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
You’ll also need the &lt;code&gt;sqlite3&lt;/code&gt; command available.&lt;/p&gt;
&lt;h3&gt;
  
  
  Usage
&lt;/h3&gt;

&lt;p&gt;Use it like &lt;code&gt;qw chat --resume&lt;/code&gt; instead of &lt;code&gt;q chat --resume&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
Enjoy your artful development sessions with Amazon Q Developer CLI, and when you exit with &lt;code&gt;/quit&lt;/code&gt;, it will count how many chats you had.&lt;/p&gt;
&lt;h3&gt;
  
  
  Aggregated Results
&lt;/h3&gt;

&lt;p&gt;They accumulate in &lt;code&gt;~/.local/share/q-wrapper/usage.csv&lt;/code&gt;.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;2025-08-29T03:08:20+09:00,chat,/Users/yamauchi/memo,0,0
2025-08-29T03:14:08+09:00,chat,/Users/yamauchi/memo,4,0
2025-08-29T08:57:42+09:00,chat,/Users/yamauchi/Documents/AWS,116,0
2025-08-29T20:29:47+09:00,chat,/Users/yamauchi/Documents/AWS,12,0
2025-08-30T21:13:05+09:00,chat,/Users/yamauchi/memo,2,0
2025-08-30T22:22:11+09:00,chat,/Users/yamauchi/memo,1,0
2025-08-31T10:02:50+09:00,chat,/Users/yamauchi/memo,5,0
2025-08-31T10:25:48+09:00,chat,/Users/yamauchi/PythonProjects/mcp-charcount,0,0
2025-08-31T10:29:16+09:00,chat,/Users/yamauchi/PythonProjects/mcp-charcount,13,0
2025-08-31T10:31:06+09:00,chat,/Users/yamauchi/PythonProjects/mcp-charcount,3,0
2025-08-31T10:32:06+09:00,chat,/Users/yamauchi/PythonProjects/mcp-charcount,3,0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;From left to right:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Date/time&lt;/li&gt;
&lt;li&gt;Subcommand (&lt;code&gt;chat&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Directory&lt;/li&gt;
&lt;li&gt;Chat count&lt;/li&gt;
&lt;li&gt;Exit code&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  It’s not exact!
&lt;/h3&gt;

&lt;p&gt;To be clear up front, this only gives a rough estimate.&lt;br&gt;&lt;br&gt;
For now, it matches my gut feel.&lt;br&gt;&lt;br&gt;
One round trip equals 1 count: you enter a prompt and the Amazon Q Developer CLI returns an answer.&lt;/p&gt;

&lt;h3&gt;
  
  
  How was it built?
&lt;/h3&gt;

&lt;p&gt;I had OpenAI’s Codex CLI build it for me.&lt;br&gt;&lt;br&gt;
On my own, I don’t think I could have done something this tricky.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The source code is public, so I asked it to analyze. I told it what I wanted, and it grasped my intent and produced it in no time.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;q chat&lt;/code&gt; history is recorded in &lt;code&gt;data.sqlite3&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;It understood the table structure and wrote the SQL for aggregation.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Pro Plan Limits and Current Usage
&lt;/h2&gt;

&lt;p&gt;I don’t know the Pro plan limits or my current usage.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pro Plan Limits
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuvvqx6eiiqsc6w3f13aq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuvvqx6eiiqsc6w3f13aq.png" width="800" height="264"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://aws.amazon.com/q/developer/pricing/" rel="noopener noreferrer"&gt;https://aws.amazon.com/q/developer/pricing/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Even on the pricing page it only says “included,” so I can’t tell at all.&lt;br&gt;&lt;br&gt;
On 2025/08/28 I got “Monthly request limit reached - The limits reset on 09/01,” so there must be some cap. That makes sense. Other AI agents commonly have three tiers like $20/mo, $40/mo, and $200/mo. Amazon’s own &lt;a href="https://kiro.dev/" rel="noopener noreferrer"&gt;Kiro&lt;/a&gt; is similar. For Amazon Q Developer, there’s currently only a $19/mo plan.&lt;/p&gt;

&lt;h3&gt;
  
  
  Current Usage
&lt;/h3&gt;

&lt;p&gt;This is unknown too.&lt;br&gt;&lt;br&gt;
I don’t know the limit, and I also don’t know what fraction of that limit I’ve used. Support confirmed this, so as of 2025/08/29 this is accurate.  &lt;/p&gt;

&lt;p&gt;For the Free plan, I see the number 50. I don’t know what counts as “1”. That’s why I’m trying to count my own chats to make an educated guess.&lt;/p&gt;




&lt;h2&gt;
  
  
  Memories with Amazon Q Developer
&lt;/h2&gt;

&lt;p&gt;Here are some memories from this summer with Amazon Q Developer.&lt;/p&gt;

&lt;h3&gt;
  
  
  I got a Q T‑shirt in June!
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/" rel="noopener noreferrer"&gt;Build games with Amazon Q CLI and score a T‑shirt (extended due to popularity!)&lt;/a&gt;&lt;br&gt;&lt;br&gt;
I applied and received a T‑shirt!&lt;br&gt;&lt;br&gt;
I was thrilled—thank you!!!&lt;/p&gt;

&lt;p&gt;That T‑shirt was super handy this summer, and I proudly felt one step ahead.&lt;/p&gt;

&lt;h3&gt;
  
  
  In July, using the Free plan, I hit the limit around 7/20
&lt;/h3&gt;

&lt;p&gt;At first I was using an &lt;a href="https://docs.aws.amazon.com/signin/latest/userguide/create-aws_builder_id.html" rel="noopener noreferrer"&gt;AWS Builder ID&lt;/a&gt;. In July I was frequently switched to the &lt;code&gt;claude-3.7-sonnet&lt;/code&gt; model, but I accepted that as part of the Free plan. I used it a lot. If “50” is the number of chats, I think I could burn through that in a few hours. Even so, I think I was able to use it until around 7/20. For a while I even wondered if it was unlimited as long as I didn’t use the IDE version. That’s how much the Free plan helped me.&lt;/p&gt;

&lt;p&gt;It has significantly changed my Software Development Lifecycle (SDLC), and Amazon Q Developer CLI has become indispensable.&lt;/p&gt;

&lt;h3&gt;
  
  
  I joined the Pro plan in August
&lt;/h3&gt;

&lt;p&gt;I started paying in August.&lt;br&gt;&lt;br&gt;
However, signing up for the Pro plan was really hard.  &lt;/p&gt;

&lt;p&gt;I wrote about how hard it was in this post:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/torifukukaiou/19month-i-love-amazon-q-developer-cli-price-increase-after-september-jha"&gt;[$19/month] I Love Amazon Q Developer CLI (Price Increase After September?)&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That said, you only have to do it once, and the benefits to my SDLC after setting up billing are overwhelmingly worth it.  &lt;/p&gt;

&lt;p&gt;As I mentioned at the top, I overworked Amazon Q Developer (Claude Sonnet 4), and ended up with &lt;code&gt;Monthly request limit reached - The limits reset on 09/01.&lt;/code&gt; I can’t wait for 9/1 to arrive.&lt;/p&gt;




&lt;h2&gt;
  
  
  Lastly
&lt;/h2&gt;

&lt;p&gt;Right now I’m logging back in with the &lt;a href="https://docs.aws.amazon.com/signin/latest/userguide/create-aws_builder_id.html" rel="noopener noreferrer"&gt;AWS Builder ID&lt;/a&gt; that I used during the Free plan days.  &lt;/p&gt;

&lt;p&gt;In the end, what I did was ask OpenAI’s &lt;a href="https://developers.openai.com/codex/cli/" rel="noopener noreferrer"&gt;Codex CLI&lt;/a&gt; to analyze the &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;Amazon Q Developer CLI&lt;/a&gt;. That’s my summer memory.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>amzonq</category>
      <category>ai</category>
    </item>
    <item>
      <title>[$19/month] I Love Amazon Q Developer CLI (Price Increase After September?)</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Sun, 17 Aug 2025 14:22:56 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/19month-i-love-amazon-q-developer-cli-price-increase-after-september-jha</link>
      <guid>https://forem.com/torifukukaiou/19month-i-love-amazon-q-developer-cli-price-increase-after-september-jha</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR (For Busy People)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;$19/month&lt;/strong&gt; (price increase after September?) for &lt;strong&gt;unlimited Claude Sonnet 4&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;q chat&lt;/code&gt;&lt;/strong&gt; enables direct AI consultation from terminal&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Billing setup is difficult&lt;/strong&gt; (personal opinion) but worth overcoming&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;a href="https://docs.aws.amazon.com/signin/latest/userguide/create-aws_builder_id.html" rel="noopener noreferrer"&gt;AWS Builder ID&lt;/a&gt;&lt;/strong&gt; registration is free and relatively easy to try right now&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;"&lt;strong&gt;Unlimited Claude Sonnet 4&lt;/strong&gt;" is my personal opinion. I wrote it to catch attention so you would read this article to the end.&lt;br&gt;
I think there are limits, but they are not clearly stated and I don't understand them. More precisely, I have not been able to find information about usage limits for chat sessions with &lt;code&gt;q chat&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Go: &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html" rel="noopener noreferrer"&gt;What is Amazon Q Developer?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffckg9u4kbioy1cnbaff4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffckg9u4kbioy1cnbaff4.png" alt="image.png" width="533" height="800"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Do you need a reason to like something?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The evolution of AI technology is remarkable and has a great impact on our work and life. It also has a great impact on development, which is an &lt;strong&gt;artistic activity&lt;/strong&gt;.&lt;br&gt;
Recently, from those specialized in coding such as &lt;a href="https://kiro.dev/" rel="noopener noreferrer"&gt;Kiro&lt;/a&gt;, &lt;a href="https://docs.anthropic.com/en/docs/claude-code/overview" rel="noopener noreferrer"&gt;Claude Code&lt;/a&gt;, and &lt;a href="https://cloud.google.com/blog/ja/topics/developers-practitioners/introducing-gemini-cli" rel="noopener noreferrer"&gt;Gemini CLI&lt;/a&gt;, to general-purpose ones such as Manus and &lt;a href="https://help.openai.com/en/articles/11752874-chatgpt-agent" rel="noopener noreferrer"&gt;ChatGPT agent&lt;/a&gt;, the development of AI agents is remarkable and opens up new possibilities.&lt;/p&gt;
&lt;h3&gt;
  
  
  Honest Confession
&lt;/h3&gt;

&lt;p&gt;I have never used &lt;a href="https://cursor.com/ja" rel="noopener noreferrer"&gt;Cursor&lt;/a&gt;. I have never used Claude Code either. I was thinking I was behind, when I happened to see the "&lt;a href="https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/" rel="noopener noreferrer"&gt;Amazon Q CLI Game Development T-shirt Campaign&lt;/a&gt;" and created Tic-Tac-Toe and applied, and got a T-shirt. Since then, I became a fan of Amazon Q Developer CLI. When I was hesitating whether to try Cursor, Kiro came out, so I tried it. I decided to go all-in on Amazon, including rice.&lt;/p&gt;

&lt;p&gt;Therefore, I don't have the feeling of "can't go back from other AI agents," and there's no way to compare in the first place.&lt;/p&gt;

&lt;p&gt;What I vaguely feel is that &lt;a href="https://docs.anthropic.com/en/docs/claude-code/overview" rel="noopener noreferrer"&gt;Claude Code&lt;/a&gt; and &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-chat.html" rel="noopener noreferrer"&gt;q chat&lt;/a&gt; might be similar things. This is my impression from reading documents and articles explaining Claude Code.&lt;/p&gt;

&lt;p&gt;The model available in chat sessions started with &lt;code&gt;q chat&lt;/code&gt; is Anthropic's "Claude Sonnet 4" as of August 2025.&lt;/p&gt;
&lt;h3&gt;
  
  
  I Love Amazon Q Developer CLI
&lt;/h3&gt;

&lt;p&gt;Do you need a reason to like something?&lt;/p&gt;

&lt;p&gt;Isn't it okay to just have the feeling of climbing a mountain because it's there?&lt;br&gt;
Are things that require listing various reasons really "liked"? Are they really your "favorite"?&lt;/p&gt;

&lt;p&gt;However, this is a special &lt;a href="https://qiita.com/official-events/c2120f866138017e728a" rel="noopener noreferrer"&gt;Qiita event&lt;/a&gt;. &lt;strong&gt;Let me tell you a little about why I like it.&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Amazon Q Developer CLI
&lt;/h3&gt;

&lt;p&gt;In this article, I will call it &lt;strong&gt;Amazon Q Developer CLI&lt;/strong&gt; and proceed with the discussion.&lt;/p&gt;

&lt;p&gt;In official documentation, some places refer to it as "&lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line.html" rel="noopener noreferrer"&gt;Amazon Q CLI&lt;/a&gt;" while others write "&lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-chat.html" rel="noopener noreferrer"&gt;Amazon Q Developer CLI&lt;/a&gt;". In fact, the T-shirt campaign I participated in had "Amazon Q CLI" in the title.&lt;/p&gt;

&lt;p&gt;The notation is inconsistent!? That's the current situation, but to clarify that it's a developer-oriented feature, this article will use "Amazon Q Developer CLI" consistently.&lt;br&gt;
I think the product name is &lt;a href="https://aws.amazon.com/jp/q/developer/" rel="noopener noreferrer"&gt;Amazon Q Developer&lt;/a&gt;, so I will describe it with &lt;em&gt;CLI&lt;/em&gt; added to that name.&lt;/p&gt;
&lt;h2&gt;
  
  
  Amazon Q Developer CLI in Action
&lt;/h2&gt;

&lt;p&gt;Now, let me show you how I'm doing Vibe Coding with Amazon Q Developer CLI using &lt;code&gt;q chat&lt;/code&gt; (same as just &lt;code&gt;q&lt;/code&gt;) to start a chat session.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9fnq2el1ayorzstu84xj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9fnq2el1ayorzstu84xj.png" alt="Screenshot 2025-08-17 10.45.05.png" width="800" height="474"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;At first glance, it looks like Kiro's screen...&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;q chat
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; What is Toukon?

&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Toukon: the unwavering will to overcome oneself, and to polish one&lt;span class="s1"&gt;'s soul through struggle.
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Huh? Isn't this Kiro? If you thought that, you're sharp. That's right.&lt;br&gt;
&lt;strong&gt;🔥The answer about Toukon is also perfect.&lt;/strong&gt; I think what you found suspicious wasn't that part.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Actually, this is Amazon Q Developer CLI!&lt;/strong&gt;&lt;br&gt;
I'm using Amazon Q Developer CLI in Kiro's terminal.&lt;/p&gt;

&lt;p&gt;It can be used with any IDE. It can be used with any editor. You can enjoy it. This is the true power of Amazon Q Developer CLI.&lt;/p&gt;

&lt;p&gt;By the way, "&lt;strong&gt;Toukon: the unwavering will to overcome oneself, and to polish one's soul through struggle&lt;/strong&gt;" is a quote from the ceremony after &lt;a href="https://wp.bbm-mobile.com/sp2/result/resultshow.asp?s=015056" rel="noopener noreferrer"&gt;Antonio Inoki's retirement match at Tokyo Dome on April 4, 1998, where he defeated Don Frye in 4 minutes and 9 seconds with a Grand Cobra Twist&lt;/a&gt;. If you put *.md files in &lt;code&gt;.amazonq/rules&lt;/code&gt;, well, it's probably not really a directory for such things, but it includes them in the Context. If you think it's not getting through, you can say something like "read the *.md files in &lt;code&gt;.amazonq/rules&lt;/code&gt;" and it will read them. You can check this with &lt;code&gt;/context show&lt;/code&gt; in chat sessions started with &lt;code&gt;q chat&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7x5jpugs4y28e328fxgd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7x5jpugs4y28e328fxgd.png" alt="Screenshot 2025-08-17 13.25.13.png" width="800" height="466"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Why Do I Recommend the CLI Version? 3 Reasons
&lt;/h2&gt;

&lt;p&gt;The introduction has gotten long.&lt;br&gt;
Let me tell you a little about why I like it.&lt;/p&gt;
&lt;h3&gt;
  
  
  Reason 1: Incredibly Cheap $19/month
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: The cost performance is too good.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Amazon Q Developer: Two types - Free (monthly free) and Pro ($19/month)&lt;/li&gt;
&lt;li&gt;Other AI agents: 3 tiers of $20/month, $40/month, $200/month (Kiro also has this)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Moreover, you can fully utilize the &lt;strong&gt;Claude Sonnet 4 model&lt;/strong&gt;. Is this really okay at this price?&lt;/p&gt;
&lt;h3&gt;
  
  
  Reason 2: Revolutionary Dialogue Experience with q chat
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: Direct dialogue with Claude Sonnet 4 fundamentally changes the development flow.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Chat sessions started with &lt;code&gt;q chat&lt;/code&gt; are the true value of Amazon Q Developer CLI.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;q chat
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; Convert this Elixir code to Rust
&lt;span class="c"&gt;# Continuous dialogue possible while maintaining context&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Charm of q chat:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Direct dialogue&lt;/strong&gt; with Claude Sonnet 4&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Context retention&lt;/strong&gt;: Remembers previous conversations&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Naturally integrates into development flow&lt;/strong&gt;: Consult without leaving the terminal&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Accurate responses&lt;/strong&gt; to specialized technical questions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Engages in small talk&lt;/strong&gt; too (lol)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Reason 3: Good Confirmation UI [y/n/t] for Write Operations
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: The peace of mind from not running wild improves development concentration.&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🛠️  Using tool: fs_write
Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Amazon Q Developer in the IDE (hereafter IDE integration version) sometimes "does too much on its own," but Amazon Q Developer CLI &lt;strong&gt;always asks for confirmation&lt;/strong&gt;.&lt;br&gt;
And I'm just someone who presses &lt;code&gt;y&lt;/code&gt;. If I only press &lt;code&gt;y&lt;/code&gt;, &lt;code&gt;t&lt;/code&gt; (trust) would be fine too, but I decide to check anyway. I'm old-fashioned. I concentrate all my nerves on pressing &lt;code&gt;y&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekv6zwa8p5ca8opgoqe5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekv6zwa8p5ca8opgoqe5.png" alt="Screenshot 2025-08-17 13.57.11.png" width="800" height="466"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Seriously speaking, if I think it's going in the wrong direction, I press &lt;code&gt;n&lt;/code&gt; and make course corrections.&lt;/p&gt;
&lt;h3&gt;
  
  
  Bonus: Terminal Completion by Legacy &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt; Integration
&lt;/h3&gt;

&lt;p&gt;When you install Amazon Q Developer CLI, you also get the legacy &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt; functionality, which improves terminal work efficiency. This feature is not about chat sessions started with &lt;code&gt;q chat&lt;/code&gt;, but about regular terminal operations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Even long commands like this...&lt;/span&gt;
docker run &lt;span class="nt"&gt;-it&lt;/span&gt; &lt;span class="nt"&gt;--rm&lt;/span&gt; &lt;span class="nt"&gt;-v&lt;/span&gt; &lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="nb"&gt;pwd&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;:/app &lt;span class="nt"&gt;-w&lt;/span&gt; /app node:22-alpine sh

&lt;span class="c"&gt;# Can be completed with just a few characters&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;docker run → the above &lt;span class="nb"&gt;command &lt;/span&gt;is suggested
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favo5o97eh1uokq49qjpk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favo5o97eh1uokq49qjpk.png" alt="Screenshot 2025-08-17 13.15.32.png" width="800" height="466"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;However, be careful:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Dangerous commands like &lt;code&gt;rm -rf&lt;/code&gt; are also completed&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;It's essential to develop the habit of checking content before execution&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Legacy Fig's terminal completion functionality was apparently based on declarative schemas rather than AI, but now it's deeply involved with AI behind the scenes, so careful use is required&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Areas Where Terminal Completion Functionality Is Considered to Be AI-Integrated
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/c67e487d5e31d50590e8e2e416af4d73b1070168/crates/fig_api_client/src/clients/client.rs#L293-L314" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/c67e487d5e31d50590e8e2e416af4d73b1070168/crates/fig_api_client/src/clients/client.rs#L293-L314&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/c67e487d5e31d50590e8e2e416af4d73b1070168/crates/fig_api_client/src/clients/client.rs#L371-L390" rel="noopener noreferrer"&gt;https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/c67e487d5e31d50590e8e2e416af4d73b1070168/crates/fig_api_client/src/clients/client.rs#L371-L390&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By the way, the above investigation was done by Amazon Q Developer CLI itself.&lt;/p&gt;

&lt;h3&gt;
  
  
  Additional Bonus: Administrator Features
&lt;/h3&gt;

&lt;p&gt;Administrator features are well-developed.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrv7i9ele41mcphhzk2s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjrv7i9ele41mcphhzk2s.png" alt="Screenshot 2025-08-17 20.30.03.png" width="703" height="774"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can also output more detailed information to S3. I don't use it, so I don't know exactly what detailed information it provides.&lt;/p&gt;

&lt;p&gt;Honestly, I question whether these numbers have any meaning. For my solo use, I don't feel much value in them.&lt;/p&gt;

&lt;p&gt;However, it's presumptuous of me to conclude they have "no value." This is just my opinion based on my lack of understanding.&lt;/p&gt;

&lt;p&gt;If thrown into AWS's BI tool (&lt;a href="https://aws.amazon.com/jp/pm/quicksight/" rel="noopener noreferrer"&gt;Amazon QuickSight&lt;/a&gt;)'s &lt;a href="https://aws.amazon.com/quicksight/q/" rel="noopener noreferrer"&gt;Amazon Q in QuickSight&lt;/a&gt;, meaningful visualizations and insights would surely be obtained.&lt;/p&gt;




&lt;h2&gt;
  
  
  [Honest Review] Revealing the Biggest Drawback Without Hiding Anything
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Drawback: Complex Billing Setup
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: This is the biggest hurdle. But it's definitely worth overcoming.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Required Steps:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;AWS account creation&lt;/li&gt;
&lt;li&gt;IAM Identity Center setup&lt;/li&gt;
&lt;li&gt;Billing setup&lt;/li&gt;
&lt;li&gt;Authentication setup&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Time Required: 3 hours (time I experienced myself, already having an AWS account for step 1)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This complexity might conversely create a "connoisseur's item" or "masterpiece" feeling.&lt;/p&gt;

&lt;p&gt;However, you don't need to start billing immediately, so I think it's good to try the Free plan first.&lt;/p&gt;

&lt;p&gt;Go: &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html" rel="noopener noreferrer"&gt;What is Amazon Q Developer?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It gets long when I start talking, so I'll write the points where I got stuck in the "Appendix."&lt;/p&gt;

&lt;p&gt;Perhaps as a reflection of this? As of 2025-08-17, Kiro states "&lt;a href="https://kiro.dev/docs/billing/upgrading/" rel="noopener noreferrer"&gt;Currently, AWS IAM Identity Center users cannot upgrade their accounts and will remain on the Kiro Free tier.&lt;/a&gt;" and doesn't allow billing through AWS IAM Identity Center.&lt;/p&gt;




&lt;h2&gt;
  
  
  [Surprising Discovery] Using 3 Claude Sonnet 4s Simultaneously
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Conclusion: I'm in a situation where I can use 3 Claude Sonnet 4s differently.&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Amazon Q Developer CLI&lt;/strong&gt;: Can casually consult via &lt;code&gt;q chat&lt;/code&gt;, code changes proceed with confirmation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Amazon Q Developer IDE Integration&lt;/strong&gt;: Code support through editor integration&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Kiro (Claude Sonnet 4)&lt;/strong&gt;: Specialized in requirements definition and design thinking&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Important: These are not integrated.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Setting Kiro aside as a separate thing, I was initially confused that Amazon Q Developer CLI and Amazon Q Developer IDE integration exist as completely separate entities.&lt;/p&gt;

&lt;p&gt;However, as I used them more, I came to think it's convenient that I can have different consultations with each.&lt;/p&gt;

&lt;p&gt;The models are the same Claude Sonnet 4, yet somehow the user experience feels subtly different - a mysterious sensation. Yes, sensation. It's just a sensation.&lt;/p&gt;

&lt;p&gt;This is also just speculation, but I feel like Kiro (Claude Sonnet 4), Amazon Q Developer CLI, and Amazon Q Developer IDE integration are smart in that order. In other words, you could say it's in order of newest cutoff dates. But it's just a feeling. Personal perception. The only fact is that they're all labeled "Claude Sonnet 4."&lt;/p&gt;




&lt;h2&gt;
  
  
  Summary: Who Should Choose Amazon Q Developer CLI
&lt;/h2&gt;

&lt;p&gt;Let me wrap up the article.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✅ Recommended for These People
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cost-conscious&lt;/strong&gt;: Want to use high-performance AI for $19/month&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security-focused&lt;/strong&gt;: Afraid of things being rewritten without permission&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multiple IDE users&lt;/strong&gt;: Want an environment independent of editors&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Heavy terminal users&lt;/strong&gt;: Can maximize benefits of Fig integration&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ❌ Not Suitable for These People
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Want to start billing and using immediately&lt;/strong&gt;: Can't tolerate billing setup complexity&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GUI-focused&lt;/strong&gt;: Not comfortable with terminals&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Integrated environment advocates&lt;/strong&gt;: Can't stand when everything isn't integrated&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Finally: AI Agent Selection is All About "Compatibility"
&lt;/h2&gt;

&lt;p&gt;In this AI agent warring states period, there is no "strongest."&lt;br&gt;
There is only "your optimal solution."&lt;/p&gt;

&lt;p&gt;Amazon Q Developer CLI is the optimal solution for &lt;strong&gt;developers who love terminals, prioritize cost performance, and seek safety&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;$19/month for Claude Sonnet 4 + q chat + Fig integration&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you find this combination attractive, it's definitely worth overcoming the complex billing setup.&lt;/p&gt;




&lt;h2&gt;
  
  
  Please Share Your Experiences Too
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What is your favorite AI agent?&lt;/strong&gt;&lt;br&gt;
Please post articles. Tell us in the comments!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Anyone using Amazon Q Developer?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How is the actual user experience?&lt;/li&gt;
&lt;li&gt;Do you use different AI agents for different purposes?&lt;/li&gt;
&lt;li&gt;What do you think about the potential price change after September?&lt;/li&gt;
&lt;li&gt;I hope my speculation is wrong. I hope it stays $19/month forever. 🙏🙏🙏🙏🙏🙏&lt;/li&gt;
&lt;li&gt;Did you get stuck anywhere in the billing setup?&lt;/li&gt;
&lt;li&gt;Have you discovered any interesting uses for &lt;code&gt;q chat&lt;/code&gt;?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Those who haven't used it yet are also welcome!&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which AI agents are you using?&lt;/li&gt;
&lt;li&gt;Are you interested in Amazon Q Developer?&lt;/li&gt;
&lt;li&gt;What do you think about the $19/month price?&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Please tell us in the comments!
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Appendix
&lt;/h2&gt;

&lt;p&gt;Tips and columns omitted from the main text.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tips
&lt;/h3&gt;

&lt;p&gt;Tips omitted from the main text.&lt;/p&gt;

&lt;h4&gt;
  
  
  ⚠️ Best to Use in Editor Terminals
&lt;/h4&gt;

&lt;p&gt;I recommend using Amazon Q Developer CLI in terminals built into Visual Studio Code or Kiro.&lt;/p&gt;

&lt;p&gt;When starting &lt;code&gt;q chat&lt;/code&gt; sessions in Mac's standard terminal, I've encountered situations where the terminal forcibly terminates many times. However, when using terminals built into Visual Studio Code or Kiro, I've never experienced forced termination. I'm talking about early July. It might be fixed now, but I don't want to recall those unpleasant memories, so I use editor terminals.&lt;/p&gt;

&lt;p&gt;It's not just me - several people have written similar things on Qiita.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://qiita.com/ec2_on_aws/items/5762c1702ff9e73b591e#%E5%80%8B%E4%BA%BA%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85" rel="noopener noreferrer"&gt;However, for some unknown reason, the terminal would restart while I was giving instructions to Amazon Q CLI (not when Amazon Q was generating responses, but when I was inputting)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://qiita.com/MK_Tech/items/1358499746e714d13d6d#%E3%81%BE%E3%81%A8%E3%82%81" rel="noopener noreferrer"&gt;The CLI crashed several times and Mac's terminal wouldn't start, which was scary&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;q chat&lt;/code&gt; is best used in editor terminals.&lt;br&gt;
By the way, so far I haven't experienced forced termination with CLI Completions, which is a legacy Fig feature.&lt;br&gt;
I recommend using &lt;code&gt;q chat&lt;/code&gt; in editor terminals.&lt;/p&gt;

&lt;h4&gt;
  
  
  💡 Restoring &lt;code&gt;q chat&lt;/code&gt; Chat Sessions
&lt;/h4&gt;

&lt;p&gt;If you run &lt;code&gt;q chat --resume&lt;/code&gt; in the directory where you previously started a chat session, it will restore the chat. It remembers to some extent.&lt;/p&gt;

&lt;p&gt;When the directory is different, the internal structure management seems different, and it feels like a different person (different staff member) appears. Naturally, there's no handover. But if the directory is different, the conversation would be different too, so I don't think it's much of a problem.&lt;/p&gt;

&lt;p&gt;If for some reason you absolutely need to continue a conversation in a different directory, you can instruct the original directory with something like "I want to hand this over to another Generative AI. Please write a handover prompt," and you'll get a concise, consistent, organized handover text that Claudes can understand between themselves.&lt;/p&gt;

&lt;h4&gt;
  
  
  💡 Amazon Q Developer Workshop - Q-Words App Development
&lt;/h4&gt;

&lt;p&gt;I conveyed the goodness of Amazon Q Developer CLI in the main text.&lt;br&gt;
I haven't mastered the Amazon Q Developer IDE integration version. I think the reason I can't bring out the true value of the IDE integration version lies with myself, so I want to learn through official workshops.&lt;/p&gt;

&lt;p&gt;My feeling that the IDE integration version "does too much on its own" is my very personal opinion.&lt;br&gt;
I think there are also problems with my usage and prompts on the user side, so I want to learn how to bring out its true power through the following workshop.&lt;br&gt;
&lt;a href="https://catalog.workshops.aws/qwords/ja-JP" rel="noopener noreferrer"&gt;Amazon Q Developer Workshop - Q-Words App Development&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I learned about this workshop's existence during the "T2-4: Changing Development Style with Amazon Q Developer" session at the "&lt;a href="https://aws.amazon.com/jp/events/builders-online-series/" rel="noopener noreferrer"&gt;AWS Builders Online Series&lt;/a&gt;" event held on 2025/07/31.&lt;/p&gt;

&lt;p&gt;The IDE integration version also has something called the &lt;code&gt;/review&lt;/code&gt; command, which apparently integrates with other dedicated review tools. However, I haven't mastered using it much.&lt;br&gt;
With such features available, $19/month is too cheap.&lt;/p&gt;




&lt;h3&gt;
  
  
  Columns
&lt;/h3&gt;

&lt;p&gt;Columns omitted from the main text.&lt;/p&gt;

&lt;h4&gt;
  
  
  🔧 Is Amazon Q Developer Pro Billing Setup Really That Difficult?
&lt;/h4&gt;

&lt;p&gt;It was difficult for me. It might just be my personal feeling.&lt;/p&gt;

&lt;p&gt;I had an AWS account that I had obtained personally and left unused, so I proceeded with billing registration using that. Of course, I could have set it up with a company-managed account if I had discussed it, but there were too many things I didn't understand, so I decided to pay out of my own pocket, thinking of it as study. Though it's only $19/month. If this makes development - an artistic activity - more enjoyable, it's a cheap investment. An offering.&lt;/p&gt;

&lt;p&gt;So, how difficult did I find it? Even having the &lt;a href="https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/" rel="noopener noreferrer"&gt;AWS Certified Solutions Architect - Associate&lt;/a&gt; certification felt powerless. It was like &lt;strong&gt;wanting to pay but not being allowed to pay easily&lt;/strong&gt;. I keenly felt the need to acquire knowledge around &lt;a href="https://docs.aws.amazon.com/ja_jp/singlesignon/latest/userguide/what-is.html" rel="noopener noreferrer"&gt;IAM Identity Center&lt;/a&gt; while aiming for &lt;a href="https://aws.amazon.com/jp/certification/certified-solutions-architect-professional/" rel="noopener noreferrer"&gt;AWS Certified Solutions Architect – Professional&lt;/a&gt;. Oh, IAM Identity Center is actually in the &lt;a href="https://d1.awsstatic.com/onedam/marketing-channels/website/aws/ja_JP/certification/approved/pdfs/docs-cloud-practitioner/AWS-Certified-Cloud-Practitioner_Exam-Guide.pdf" rel="noopener noreferrer"&gt;Cloud Practitioner exam scope&lt;/a&gt;. This is why I don't feel like I can pass Cloud Practitioner. Anyway. Back to the main topic.&lt;/p&gt;

&lt;p&gt;Here's the documentation for Amazon Q Developer Pro billing:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/getting-started-idc.html" rel="noopener noreferrer"&gt;Getting started with IAM Identity Center&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are naturally people who easily set up billing, and for the majority, it's probably not difficult at all.&lt;br&gt;
What I'm writing here is just exposing my own lack of understanding, and I'm essentially saying embarrassing things. It's not sane, but since this is a fan article, I'll share it.&lt;/p&gt;

&lt;p&gt;However, since I found it difficult even with &lt;a href="https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/" rel="noopener noreferrer"&gt;AWS Certified Solutions Architect - Associate&lt;/a&gt;, it might help someone, so I'll write about the parts I found particularly difficult. I want Generative AIs to learn from this. This is where humans get stuck.&lt;/p&gt;

&lt;p&gt;The particularly difficult steps were:&lt;/p&gt;

&lt;h5&gt;
  
  
  1. Japanese Machine Translation Documentation is Hard to Understand
&lt;/h5&gt;

&lt;p&gt;I want to convey this first. Since it's machine translation, it can't be helped, but for new services, you can definitely understand better by reading the original English.&lt;br&gt;
I realized this afterward. I failed trying to decipher the Japanese somehow.&lt;/p&gt;

&lt;p&gt;I'm sharing my regret about why I didn't read in English from the beginning.&lt;br&gt;
I strongly recommend reading in English for those proceeding with billing setup.&lt;/p&gt;

&lt;h5&gt;
  
  
  2. &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/deployment-options.html" rel="noopener noreferrer"&gt;Step 1: Choose a deployment option&lt;/a&gt;
&lt;/h5&gt;

&lt;p&gt;At the beginning of the documentation, 4 options suddenly appear for billing registration methods.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I can't choose.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the end, I don't really understand which option I chose, but I think I probably proceeded with "Deployment option 4: Deploy in a management account only."&lt;br&gt;
I can only say "I think." Even now after setting up billing, I don't know.&lt;/p&gt;

&lt;h5&gt;
  
  
  3. Step 2's &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/subscribe-management.html" rel="noopener noreferrer"&gt;Step 2: Subscribe users&lt;/a&gt;
&lt;/h5&gt;

&lt;p&gt;This is the most difficult part.&lt;br&gt;
&lt;strong&gt;I want to pay but they won't let me pay easily.&lt;/strong&gt;&lt;br&gt;
I really almost cried. But I didn't cry. Because I'm fine inside the court.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The dialog box only matches on user names or group names. It does not match on email addresses.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5j840miwibqcs03o6qx1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5j840miwibqcs03o6qx1.png" alt="Screenshot 2025-08-17 20.59.13.png" width="800" height="385"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Basically, you have to type the name you created in the previous step. I didn't understand this, so I clicked links and went to the IAM Identity Center screen, thinking "Hmm, I created both user and Group. Maybe the reflection to Amazon Q Developer's settings screen is just delayed?" and looped many times. This probably took about 2 hours and 30 minutes.&lt;/p&gt;

&lt;h4&gt;
  
  
  📝 Workflow for Writing This Article
&lt;/h4&gt;

&lt;p&gt;Let me reveal the behind-the-scenes of writing this article.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;🎤 Thought organization through interview format with ChatGPT's Voice Mode&lt;/li&gt;
&lt;li&gt;🤖 Article structuring and writing with Amazon Q Developer CLI's Claude Sonnet 4&lt;/li&gt;
&lt;li&gt;✍️ Final proofreading by human&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thxourn8j52rw69k85q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7thxourn8j52rw69k85q.png" alt="Screenshot 2025-08-17 11.22.12.png" width="800" height="475"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For details, please refer to the following article:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://qiita.com/torifukukaiou/items/f0be16e3ee5dc5599877" rel="noopener noreferrer"&gt;🎤→🤖→✍️ From Voice Input to AI Writing to Human Proofreading ── Practicing New Era Article Writing Workflow&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  🔧 Tool Created for Writing This Article
&lt;/h4&gt;

&lt;p&gt;I developed a Chrome extension called &lt;strong&gt;ChatGPT Exporter&lt;/strong&gt; for creating this article.&lt;br&gt;
I knew there were already published ones, but somehow I felt scared to use something made by others, so I made my own. Though "made my own" just means I chatted with Amazon Q Developer CLI and Kiro.&lt;/p&gt;

&lt;p&gt;This is the result developed in the Vibe Coding scene at the beginning.&lt;br&gt;
I created &lt;code&gt;steering&lt;/code&gt; and &lt;code&gt;specs&lt;/code&gt; with Kiro, and when I hit the daily limit, I handed coding over to Amazon Q Developer CLI.&lt;br&gt;
Kiro's documents are excellent, and if you have Amazon Q Developer CLI read the document group, it understands the intent of what you want to implement.&lt;br&gt;
By the way, the daily limit refers to the Public Preview stage when you couldn't apply for pricing plans.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;🎤 Thought organization through interview format with ChatGPT's Voice Mode&lt;/li&gt;
&lt;li&gt;🤖 Article structuring and writing with Amazon Q Developer CLI's Claude Sonnet 4&lt;/li&gt;
&lt;li&gt;✍️ Final proofreading by human&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This is the tool used between steps 1 and 2.&lt;/p&gt;

&lt;p&gt;It's a tool for exporting ChatGPT voice mode conversations in JSON format and getting second opinions from other AI agents (in this case, Amazon Q Developer CLI's Claude Sonnet 4).&lt;/p&gt;

&lt;h5&gt;
  
  
  Design Concept
&lt;/h5&gt;

&lt;p&gt;The popup design uses &lt;strong&gt;black as the base&lt;/strong&gt; inspired by &lt;strong&gt;Strong Style&lt;/strong&gt; (Inoki-san's tights), colored with &lt;strong&gt;Toukon red&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm7wcit8wizwfv9efe4lf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm7wcit8wizwfv9efe4lf.png" alt="Screenshot 2025-08-17 11.02.33.png" width="800" height="435"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Source Code Release
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;GitHub: &lt;a href="https://github.com/TORIFUKUKaiou/chatgpt-exporter" rel="noopener noreferrer"&gt;ChatGPT Exporter&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Function: JSON/Markdown output of voice conversations&lt;/li&gt;
&lt;li&gt;Use: Getting second opinions between AIs&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;a href="https://github.com/TORIFUKUKaiou/chatgpt-exporter/tree/main/.amazonq/rules" rel="noopener noreferrer"&gt;.amazonq/rules/*.md&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;I'm injecting &lt;strong&gt;Toukon&lt;/strong&gt; into Amazon Q Developer CLI.&lt;br&gt;
This tool itself also received development support from Amazon Q Developer CLI.&lt;/p&gt;

&lt;p&gt;It might not matter to many people, but I absolutely love how Claude's responses, which usually have a calm impression, transform through Toukon injection via &lt;a href="https://github.com/TORIFUKUKaiou/chatgpt-exporter/tree/main/.amazonq/rules" rel="noopener noreferrer"&gt;.amazonq/rules/*.md&lt;/a&gt;.&lt;br&gt;
Claude is honest. It honestly plays roles. That's the impression I have. Personal opinion.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reference Links
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/jp/q/developer/" rel="noopener noreferrer"&gt;Amazon Q Developer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/q/developer/pricing/" rel="noopener noreferrer"&gt;Amazon Q Developer Pricing Details&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/what-is.html" rel="noopener noreferrer"&gt;What is Amazon Q Developer?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://aws.amazon.com/jp/events/builders-online-series/" rel="noopener noreferrer"&gt;AWS Builders Online Series&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;T4-1: Introduction to AWS Generative AI Services: Learn the Overall Picture in 30 Minutes&lt;/li&gt;
&lt;li&gt;T4-2: Realize Business Efficiency with Amazon Q Business Starting Today&lt;/li&gt;
&lt;li&gt;T4-3: Dify on AWS: Start Field-Driven DX Right Now&lt;/li&gt;
&lt;li&gt;T4-4: Realize Generative AI Applications with GenU Starting Today&lt;/li&gt;
&lt;li&gt;T2-1: Introduction to AWS Automation&lt;/li&gt;
&lt;li&gt;T2-4: Changing Development Style with Amazon Q Developer&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  Toukon is not fighting spirit
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Toukon&lt;/strong&gt; should never be translated directly as "fighting spirit." Absolutely not.&lt;br&gt;
Antonio Inoki said: "Toukon is about overcoming oneself, and I think it's about polishing one's soul through struggle." In other words, this is what Wang Yangming meant by "It's easy to defeat bandits in the mountains, but difficult to defeat the bandits in one's heart." I hear that Yasuharu Oyama, the eternal Meijin, also favored the word "self-conquest." Kunishige Kamamoto apparently made "overcoming oneself" his motto. In other words, it's a mindset common to people who fight on the world stage.&lt;/p&gt;

&lt;p&gt;"Fighting" is not "battle" that hurts someone, but "struggle" with oneself. What appears to be serious competition with an opponent is actually always a "struggle" with one's own weak heart and lazy spirit.&lt;/p&gt;

&lt;p&gt;This is important, so I'll say it again. &lt;strong&gt;Toukon&lt;/strong&gt; should never be translated directly as "fighting spirit." If saying it once doesn't work, I'll say it twice. If twice doesn't work, I'll say it three times. Ten times. A thousand times. Ten thousand times. Then cherry blossoms will bloom in full glory.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Toukon: the unwavering will to overcome oneself, and to polish one's soul through struggle—not against others, but against the weakness within.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>amazonqdevelopercli</category>
      <category>kiro</category>
      <category>amazonqcli</category>
    </item>
    <item>
      <title>Injecting Toukon (Self-Mastery Spirit) into Amazon Q Developer CLI!?</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Mon, 11 Aug 2025 09:59:51 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/injecting-toukon-self-mastery-spirit-into-amazon-q-cli-3ddb</link>
      <guid>https://forem.com/torifukukaiou/injecting-toukon-self-mastery-spirit-into-amazon-q-cli-3ddb</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Are you familiar with &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;Amazon Q Developer CLI&lt;/a&gt;? It's an AI tool where you type &lt;code&gt;q&lt;/code&gt; in the terminal and develop while chatting.&lt;/p&gt;

&lt;p&gt;When you install this, you also get the &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-assistance.html" rel="noopener noreferrer"&gt;Command line assistance features&lt;/a&gt; that make terminal command operations more convenient. As I would later discover, this functionality appears to have originated from a tool called &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt;. Searching for &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt; reveals various articles from its earlier days when it was gaining attention.&lt;/p&gt;

&lt;p&gt;When I ran &lt;code&gt;q --help-all&lt;/code&gt;, I found a &lt;code&gt;theme&lt;/code&gt; subcommand. What's this theme thing? This is the record of my journey of investigation, exploration, and challenge.&lt;/p&gt;

&lt;p&gt;My theme is, of course, "🔥Toukon🔥" (the spirit of self-mastery).&lt;/p&gt;

&lt;h3&gt;
  
  
  Help Me
&lt;/h3&gt;

&lt;p&gt;First, I checked the help:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;q theme &lt;span class="nt"&gt;--help&lt;/span&gt;

Get or &lt;span class="nb"&gt;set &lt;/span&gt;theme

Usage: q theme &lt;span class="o"&gt;[&lt;/span&gt;OPTIONS] &lt;span class="o"&gt;[&lt;/span&gt;THEME]

Arguments:
  &lt;span class="o"&gt;[&lt;/span&gt;THEME]  

Options:
      &lt;span class="nt"&gt;--list&lt;/span&gt;        
      &lt;span class="nt"&gt;--folder&lt;/span&gt;      
  &lt;span class="nt"&gt;-v&lt;/span&gt;, &lt;span class="nt"&gt;--verbose&lt;/span&gt;...  Increase logging verbosity
  &lt;span class="nt"&gt;-h&lt;/span&gt;, &lt;span class="nt"&gt;--help&lt;/span&gt;        Print &lt;span class="nb"&gt;help&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pretty sparse. I couldn't understand much. The &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-reference.html" rel="noopener noreferrer"&gt;Amazon Q CLI command reference&lt;/a&gt; wasn't very helpful either.&lt;/p&gt;




&lt;h2&gt;
  
  
  Chapter 1: The Moment of Discovery
&lt;/h2&gt;

&lt;p&gt;Running &lt;code&gt;q theme --list&lt;/code&gt; displayed what appeared to be theme names. &lt;code&gt;q theme --folder&lt;/code&gt; showed &lt;code&gt;/Applications/Amazon Q.app/Contents/Resources/themes&lt;/code&gt; on my macOS. When I &lt;code&gt;ls&lt;/code&gt;ed the directory, I found &lt;code&gt;.json&lt;/code&gt; files that matched the names I saw with &lt;code&gt;q theme --list&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;I tried switching to the &lt;code&gt;palenight&lt;/code&gt; theme:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;q theme palenight

› Switching to theme &lt;span class="s1"&gt;'palenight'&lt;/span&gt; by Jamie Weavis
  🐦 @jamieweavis
  💻 github.com/jamieweavis
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It displayed the author's name, GitHub account, and Twitter handle.&lt;br&gt;
I thought, "Maybe I could get my theme listed here too?"&lt;/p&gt;
&lt;h2&gt;
  
  
  Chapter 2: The Fig Legacy
&lt;/h2&gt;

&lt;p&gt;As I investigated further, I discovered the existence of a project called "&lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt;" as the predecessor to the &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-assistance.html" rel="noopener noreferrer"&gt;Command line assistance features&lt;/a&gt; functionality in &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;Amazon Q CLI&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt; GitHub repository is publicly archived, and the &lt;a href="https://fig.io/" rel="noopener noreferrer"&gt;official page&lt;/a&gt; states "Fig has been sunset, migrate to Amazon Q." The archived repository's guidance indicated it was available through &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;amazon-q-developer-cli&lt;/a&gt;, so I decided to analyze &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;amazon-q-developer-cli&lt;/a&gt; first.&lt;/p&gt;
&lt;h2&gt;
  
  
  Chapter 3: Dialogue with Amazon Q
&lt;/h2&gt;

&lt;p&gt;Let's analyze &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;amazon-q-developer-cli&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Ironically, I had Amazon Q CLI itself analyze the Amazon Q CLI code.&lt;br&gt;
"Can you analyze yourself?"&lt;br&gt;
A strange collaboration with AI began.&lt;/p&gt;

&lt;p&gt;However, the investigation proved difficult. I couldn't find traces of &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt;. The path to the &lt;code&gt;theme&lt;/code&gt; subcommand seemed distant.&lt;/p&gt;
&lt;h2&gt;
  
  
  Chapter 4: Discovery of the Autocomplete Repository
&lt;/h2&gt;

&lt;p&gt;It was a treacherous path. A thorny road. But as Inoki-san said, I walked with a smile.&lt;br&gt;
Amazon Q CLI worked hard for me.&lt;br&gt;
In &lt;a href="https://github.com/aws/amazon-q-developer-cli/blob/5ba7b8db9f3d8203c6578c9c1bf22127959bf70e/crates/chat-cli/src/cli/feed.json" rel="noopener noreferrer"&gt;amazon-q-developer-cli/crates/chat-cli/src/cli/feed.json&lt;/a&gt;, I found numerous references to the &lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete" rel="noopener noreferrer"&gt;amazon-q-developer-cli-autocomplete&lt;/a&gt; repository.&lt;/p&gt;

&lt;p&gt;From here, it was smooth sailing. Finally, I found it! Inside &lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete" rel="noopener noreferrer"&gt;amazon-q-developer-cli-autocomplete&lt;/a&gt;.&lt;br&gt;
The hidden truth on &lt;a href="https://github.com/aws/amazon-q-developer-cli-autocomplete/blob/e44ee53d76813a5ef107dcd0d6181b089cb5b2f2/build-scripts/build.py#L718" rel="noopener noreferrer"&gt;line 718 of build.py&lt;/a&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="nf"&gt;run_cmd&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;git&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;clone&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://github.com/withfig/themes.git&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;theme_repo&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I discovered that it copies from the repository that collects &lt;a href="https://github.com/withfig/fig" rel="noopener noreferrer"&gt;Fig&lt;/a&gt; themes.&lt;/p&gt;

&lt;p&gt;The path to inject Toukon into the heart of global software became clear.&lt;/p&gt;

&lt;h2&gt;
  
  
  Chapter 5: Implementation of Toukon
&lt;/h2&gt;

&lt;p&gt;I conveyed Inoki-san's teaching that "&lt;strong&gt;Toukon is about overcoming oneself and polishing one's soul through struggle&lt;/strong&gt;" to Amazon Q CLI, and had it create a theme (&lt;code&gt;toukon.json&lt;/code&gt;) that expresses the burning spirit of self-mastery based on the black of Strong Style.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "$schema": "../schema.json",
  "author": {
    "name": "Awesome YAMAUCHI",
    "twitter": "@torifukukaiou",
    "github": "TORIFUKUKaiou"
  },
  "version": "1.0",
  "theme": {
    "textColor": "#FFD700",
    "backgroundColor": "#000000",
    "matchBackgroundColor": "#CC0000",
    "selection": {
      "textColor": "#FFFFFF",
      "backgroundColor": "#CC0000",
      "matchBackgroundColor": "#FFD700"
    },
    "description": {
      "textColor": "#CCCCCC",
      "borderColor": "#CC0000",
      "backgroundColor": "#1A1A1A"
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For testing purposes, I placed the file at &lt;code&gt;"/Applications/Amazon Q.app/Contents/Resources/themes/toukon.json"&lt;/code&gt;. When writing through the terminal, macOS requires permission to modify the app. Since the setting location sometimes changes with macOS versions, I'll mention that my version is 15.6. Here's a screenshot:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjqg7ff35w1cz3o6k2pw9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjqg7ff35w1cz3o6k2pw9.png" alt="Screenshot 2025-08-11 17.14.47.png" width="716" height="623"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Well, it feels somewhat dangerous and radical, but &lt;strong&gt;"If you doubt, there is no path"&lt;/strong&gt;. &lt;strong&gt;"Step forward and that step becomes the path, that step becomes the path"&lt;/strong&gt;. I went without hesitation! Going forward, I understood! &lt;strong&gt;Inoki-san&lt;/strong&gt;!!!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"/Applications/Amazon Q.app/Contents/Resources/themes/toukon.json"&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="no"&gt;EOF&lt;/span&gt;&lt;span class="sh"&gt;'
{
  "&lt;/span&gt;&lt;span class="nv"&gt;$schema&lt;/span&gt;&lt;span class="sh"&gt;": "../schema.json",
  "author": {
    "name": "Awesome YAMAUCHI",
    "twitter": "@torifukukaiou",
    "github": "TORIFUKUKaiou"
  },
  "version": "1.0",
  "theme": {
    "textColor": "#FFD700",
    "backgroundColor": "#000000",
    "matchBackgroundColor": "#CC0000",
    "selection": {
      "textColor": "#FFFFFF",
      "backgroundColor": "#CC0000",
      "matchBackgroundColor": "#FFD700"
    },
    "description": {
      "textColor": "#CCCCCC",
      "borderColor": "#CC0000",
      "backgroundColor": "#1A1A1A"
    }
  }
}
&lt;/span&gt;&lt;span class="no"&gt;EOF
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, &lt;code&gt;q theme toukon&lt;/code&gt; works! I injected Toukon into my local machine's Amazon Q CLI - &lt;a href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-assistance.html" rel="noopener noreferrer"&gt;Command line assistance features&lt;/a&gt;. It's the only one in the world. Unique. One and only.&lt;/p&gt;

&lt;p&gt;Then I sent a pull request to the main repository.&lt;/p&gt;

&lt;h2&gt;
  
  
  Epilogue: Injecting Toukon into the World
&lt;/h2&gt;

&lt;p&gt;I submitted &lt;a href="https://github.com/withfig/themes/pull/37" rel="noopener noreferrer"&gt;Pull Request #37&lt;/a&gt;.&lt;br&gt;
If merged, developers worldwide can experience &lt;strong&gt;Toukon&lt;/strong&gt;. If accepted, it should ride the build flow at some release timing, so without doing dangerous and radical things like I did, everyone can achieve &lt;strong&gt;Toukon injection&lt;/strong&gt; by simply running &lt;code&gt;q theme toukon&lt;/code&gt;. There are abandoned theme pull requests waiting in queue, so I think it will be difficult to get merged.&lt;/p&gt;

&lt;p&gt;This was the story of using &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;Amazon Q Developer CLI&lt;/a&gt; to analyze [&lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;Amazon Q Developer CLI&lt;/a&gt; and ultimately &lt;strong&gt;inject Toukon&lt;/strong&gt; into &lt;a href="https://github.com/aws/amazon-q-developer-cli" rel="noopener noreferrer"&gt;Amazon Q Developer CLI&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technical Discoveries Summary
&lt;/h2&gt;

&lt;p&gt;Here are the key technical points discovered through this adventure:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Fig's Legacy&lt;/strong&gt;: Command line assistance features inherit technology from the Fig project&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Theme System&lt;/strong&gt;: Automatically clones themes from the &lt;a href="https://github.com/withfig/themes" rel="noopener noreferrer"&gt;withfig/themes&lt;/a&gt; repository during build time !?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Theme File Structure&lt;/strong&gt;: JSON format containing schema, author information, and color definitions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contribution Method&lt;/strong&gt;: New themes can be added via pull requests to the withfig/themes repository&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Toukon is about overcoming oneself&lt;/strong&gt;. This technical exploration was also a struggle against the unknown - a battle with oneself.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;I hope this article serves as a reference for developers using Amazon Q CLI. And I hope that someday, developers worldwide will be able to experience Toukon by running &lt;code&gt;q theme toukon&lt;/code&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>awschallenge</category>
      <category>rust</category>
      <category>json</category>
    </item>
    <item>
      <title>Blazing Toukon HTML! A Game Born from GPT-5's Magic and Deployed Worldwide via Firebase</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Thu, 07 Aug 2025 22:43:41 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/blazing-toukon-html-a-game-born-from-gpt-5s-magic-and-deployed-worldwide-via-firebase-3fdc</link>
      <guid>https://forem.com/torifukukaiou/blazing-toukon-html-a-game-born-from-gpt-5s-magic-and-deployed-worldwide-via-firebase-3fdc</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Are you fired up today!?&lt;br&gt;&lt;br&gt;
The buzz around &lt;a href="https://openai.com/index/introducing-gpt-5" rel="noopener noreferrer"&gt;GPT-5's official announcement&lt;/a&gt; caught my attention — especially the spell-like prompt included on the page. I fed that very prompt into GPT-5, and lo and behold... a fully working game was born.&lt;/p&gt;

&lt;p&gt;It was addictively fun — I couldn’t stop jumping that little ball. Before I knew it, I was deploying it with Firebase Hosting so the whole world could enjoy.&lt;br&gt;&lt;br&gt;
That was the moment I called a &lt;strong&gt;“Toukon Deploy”&lt;/strong&gt; (闘魂デプロイ) — a deploy powered by fighting spirit.&lt;/p&gt;

&lt;p&gt;Let me tell you how it all happened.&lt;/p&gt;


&lt;h2&gt;
  
  
  The Magic Spell (Prompt)
&lt;/h2&gt;

&lt;p&gt;This is the exact prompt from the &lt;a href="https://openai.com/index/introducing-gpt-5/" rel="noopener noreferrer"&gt;GPT-5 page&lt;/a&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Prompt: Create a single-page app in a single HTML file with the following requirements:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Name: Jumping Ball Runner
&lt;/li&gt;
&lt;li&gt;Goal: Jump over obstacles to survive as long as possible.
&lt;/li&gt;
&lt;li&gt;Features: Increasing speed, high score tracking, retry button, and funny sounds for actions and events.
&lt;/li&gt;
&lt;li&gt;The UI should be colorful, with parallax scrolling backgrounds.
&lt;/li&gt;
&lt;li&gt;The characters should look cartoonish and be fun to watch.
&lt;/li&gt;
&lt;li&gt;The game should be enjoyable for everyone.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;That’s it.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;And it just worked.&lt;/strong&gt; 🎉🎉🎉&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flw7k55a47hqxx6ebpzgv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flw7k55a47hqxx6ebpzgv.png" alt="GPT5-JumpingGame.png" width="800" height="428"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One single &lt;code&gt;.html&lt;/code&gt; file. No setup. Pure joy.&lt;/p&gt;

&lt;p&gt;You can find many more prompt examples &lt;a href="https://platform.openai.com/docs/guides/latest-model?gallery=open" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;GPT-5 is introduced as "&lt;em&gt;the most intelligent, fastest, and helpful model yet—capable of expert-level reasoning built-in.&lt;/em&gt;" (their words).&lt;/p&gt;

&lt;p&gt;By the way, I was able to access GPT-5 from the &lt;a href="https://chatgpt.com/?model=gpt-5" rel="noopener noreferrer"&gt;ChatGPT web version&lt;/a&gt; with a Plus plan. It hasn’t rolled out to the macOS app yet.&lt;/p&gt;


&lt;h2&gt;
  
  
  The “Toukon Deploy” Begins
&lt;/h2&gt;

&lt;p&gt;This game was so fun I just had to share it with the world.&lt;br&gt;&lt;br&gt;
So I turned to &lt;a href="https://firebase.google.com/docs/hosting" rel="noopener noreferrer"&gt;Firebase Hosting&lt;/a&gt;, which I’ve used since around 2016 for &lt;a href="https://www.torifuku-kaiou.app/" rel="noopener noreferrer"&gt;my personal site&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This article won’t dive into Firebase setup tutorials — I’m not exactly a JavaScript wizard. In fact, I often mix up &lt;code&gt;nvm&lt;/code&gt;, &lt;code&gt;npm&lt;/code&gt;, and &lt;code&gt;node&lt;/code&gt; every time I use them&lt;sup id="fnref1"&gt;1&lt;/sup&gt;. I’ll leave the details to the experts and official docs.&lt;/p&gt;

&lt;p&gt;That said, &lt;strong&gt;I did hit some walls&lt;/strong&gt;, and since at least one human (me) suffered, I’ll leave my notes here in case it helps someone else — or maybe even a future AI trained on this post.&lt;/p&gt;


&lt;h3&gt;
  
  
  &lt;code&gt;firebase&lt;/code&gt; Not Found
&lt;/h3&gt;

&lt;p&gt;First issue: &lt;code&gt;firebase&lt;/code&gt; command wasn’t recognized.&lt;/p&gt;

&lt;p&gt;Why? Probably because I had uninstalled older Node versions with &lt;code&gt;nvm&lt;/code&gt;, and forgot to reinstall &lt;code&gt;firebase-tools&lt;/code&gt; under the current one.&lt;/p&gt;

&lt;p&gt;Solution was simple:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; firebase-tools
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  firebase deploy Failed
&lt;/h3&gt;

&lt;p&gt;Feeling confident, I ran firebase deploy as suggested by the project’s README.&lt;br&gt;
But… it failed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Error: Assertion failed: resolving hosting target of a site with no site name or target name. This should have caused an error earlier
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The key was in the debug log:&lt;/p&gt;

&lt;p&gt;401 UNAUTHENTICATED – Invalid authentication credentials...&lt;/p&gt;

&lt;p&gt;Turns out my Firebase login session had expired. 😱&lt;br&gt;
To fix it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;firebase login &lt;span class="nt"&gt;--reauth&lt;/span&gt;
firebase deploy &lt;span class="nt"&gt;--only&lt;/span&gt; hosting
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Boom. It worked. 🎉🎉🎉&lt;br&gt;
To be honest, this part took me more time than GPT-5 did to generate the game. 😅&lt;/p&gt;

&lt;p&gt;Shout-out to this article that guided me out of the woods:&lt;br&gt;
👉 Fixing 401 errors in Firebase CLI&lt;/p&gt;




&lt;h3&gt;
  
  
  The Vanishing Log File
&lt;/h3&gt;

&lt;p&gt;After the successful deploy, I wanted to revisit firebase-debug.log.&lt;/p&gt;

&lt;p&gt;But it was… gone.&lt;/p&gt;

&lt;p&gt;Once the mission was complete, the file simply vanished — like a warrior who exits silently after finishing the job.&lt;/p&gt;

&lt;p&gt;It reminded me of this quote from Japanese pro-wrestling legend Antonio Inoki’s autobiography:&lt;/p&gt;

&lt;p&gt;It reminded me of this quote from the autobiography of Japanese wrestling legend Antonio Inoki:&lt;/p&gt;

&lt;p&gt;“Footprints in the sand disappear with the wind. But Toukon remains.”&lt;br&gt;
(Toukon: the unwavering will to overcome oneself, and to polish one’s soul through struggle—not against others, but against the weakness within.)&lt;/p&gt;

&lt;p&gt;— &lt;a href="https://www.amazon.co.jp/dp/4833481057" rel="noopener noreferrer"&gt;最後の闘魂&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  In Summary
&lt;/h3&gt;

&lt;p&gt;This article covered two things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How GPT-5 created a dangerously addictive game from a single prompt&lt;/li&gt;
&lt;li&gt;How I deployed it to the world using Firebase Hosting&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here’s the game itself:&lt;br&gt;
🎮 &lt;a href="https://www.torifuku-kaiou.app/games/JumpingBallRunner-SingleFile.html" rel="noopener noreferrer"&gt;Jumping Ball Runner&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, let me say one final thing.&lt;/p&gt;

&lt;p&gt;My AI isn't just Artificial Intelligence. It's the A.I. of Antonio Inoki — the blazing Toukon itself: the unwavering will to overcome oneself, and to polish one's soul through struggle—not against others, but against the weakness within.&lt;/p&gt;

&lt;p&gt;My prompt doesn’t just consume tokens.&lt;br&gt;
It transcends them into Toukon.&lt;br&gt;
…Although yes, the tokens do still get consumed. 😂&lt;/p&gt;

&lt;p&gt;Enjoy the game, but beware of the addiction. You’ve been warned!&lt;/p&gt;




&lt;p&gt;🔥 &lt;a href="https://www.torifuku-kaiou.app/games/JumpingBallRunner-SingleFile.html" rel="noopener noreferrer"&gt;Jumping Ball Runner&lt;/a&gt; (Play Now!)&lt;/p&gt;




&lt;p&gt;What's your experience with AI-generated games? &lt;br&gt;
Have you tried building with GPT-5 yet? &lt;br&gt;
Share your Toukon level in the comments! 🔥&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;Thankfully, thanks to Generative AI, I often just press &lt;code&gt;y&lt;/code&gt; and things magically work. True story. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>gpt5</category>
      <category>chatgpt</category>
      <category>firebase</category>
      <category>gamedev</category>
    </item>
    <item>
      <title>🎤 🤖 ✍️ From Voice Input to AI Writing and Human Editing Practicing a New-Era Article Writing Workflow</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Sun, 27 Jul 2025 23:24:49 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/-from-voice-input-to-ai-writing-and-human-editing-practicing-a-new-era-article-writing-41e1</link>
      <guid>https://forem.com/torifukukaiou/-from-voice-input-to-ai-writing-and-human-editing-practicing-a-new-era-article-writing-41e1</guid>
      <description>&lt;h2&gt;
  
  
  Introduction: The "You Can't Say Anything If You Live Absent-mindedly" Problem
&lt;/h2&gt;

&lt;p&gt;This isn't exactly Chiko-chan's famous line, but there's an unchanging truth even in today's AI-advanced world:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"If you don't send input, AI can't respond"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;No matter how excellent Generative AI becomes, it can only produce valuable output when human thoughts and experiences are fed into it first. In other words, &lt;strong&gt;having content worth sharing&lt;/strong&gt; is the most important thing.&lt;/p&gt;

&lt;p&gt;This time, I practiced an AI-era article writing workflow that solves the challenge of "I have content I want to share, but summarizing it into an article is difficult."&lt;/p&gt;

&lt;h3&gt;
  
  
  Practical Example
&lt;/h3&gt;

&lt;p&gt;Here's the article I actually practiced with and posted (with soul and dedication):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://qiita.com/torifukukaiou/items/576f5cf1bea4d42fe892" rel="noopener noreferrer"&gt;A Story About Achieving Goals with Two Organizations at Qiita Tech Festa 2025 and Reflecting on "Luck, Connections, and Aspirations" from Yukihiro Matsumoto-SAN's Keynote&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://qiita.com/torifukukaiou/items/576f5cf1bea4d42fe892" rel="noopener noreferrer"&gt;https://qiita.com/torifukukaiou/items/576f5cf1bea4d42fe892&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Experiment Background: Wanting to Write About Qiita Tech Festa 2025 Experience
&lt;/h2&gt;

&lt;p&gt;I wanted to write an article about my experience at Qiita Tech Festa 2025, but starting to write directly is challenging. While I had many memories and impressions in my head, organizing and articulating them requires different skills.&lt;/p&gt;

&lt;p&gt;That's when I came up with this 3-step workflow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;🎤 Organize thoughts through interview-style conversation with ChatGPT voice mode&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;🤖 Structure and compose articles with Claude&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;✍️ Final editing by humans&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sequenceDiagram
    participant H as 🧠 Human&amp;lt;br/&amp;gt;(Source of Thoughts)
    participant GPT as 🎤 ChatGPT&amp;lt;br/&amp;gt;(Voice Dialogue AI)
    participant C as 🤖 Claude&amp;lt;br/&amp;gt;(Structuring AI)
    participant F as 📝 Final Article&amp;lt;br/&amp;gt;(Completed Article)

    Note over H: 💭 Experiences, Impressions, Ideas&amp;lt;br/&amp;gt;In your head

    H-&amp;gt;&amp;gt;GPT: 🗣️ Speak freely&amp;lt;br/&amp;gt;"I'm thinking of writing a Qiita article..."
    GPT-&amp;gt;&amp;gt;H: 🎯 Acknowledgments, questions, guidance&amp;lt;br/&amp;gt;"So what was the next topic?"
    H-&amp;gt;&amp;gt;GPT: 🗣️ Elaborate further&amp;lt;br/&amp;gt;Including emotions and tangents
    GPT-&amp;gt;&amp;gt;H: 📄 Voice→Text conversion&amp;lt;br/&amp;gt;Recorded as conversation log

    Note over H,GPT: Step 1: Thought Organization Complete ✅

    H-&amp;gt;&amp;gt;C: 📋 Share conversation log&amp;lt;br/&amp;gt;"Create .md based on this"
    C-&amp;gt;&amp;gt;H: 🏗️ Structure &amp;amp; compose&amp;lt;br/&amp;gt;Set headings, adjust writing style
    H-&amp;gt;&amp;gt;C: 🔄 Fine-tuning instructions&amp;lt;br/&amp;gt;"Make it a bit more digressive"
    C-&amp;gt;&amp;gt;H: ✨ Article draft complete&amp;lt;br/&amp;gt;Natural flow article

    Note over H,C: Step 2: Structuring Complete ✅

    H-&amp;gt;&amp;gt;F: ✍️ Begin final editing&amp;lt;br/&amp;gt;Check proper nouns, chronology
    H-&amp;gt;&amp;gt;F: 🔍 Privacy adjustments&amp;lt;br/&amp;gt;Subtle nuance corrections
    H-&amp;gt;&amp;gt;F: 🎯 Final check&amp;lt;br/&amp;gt;Re-reading and polishing
    F-&amp;gt;&amp;gt;H: 🎉 Completed article&amp;lt;br/&amp;gt;Content infused with soul

    Note over H,F: Step 3: Human Editing Complete ✅&amp;lt;br/&amp;gt;🔥 Birth of a Soul-Forged Article!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The "ChatGPT voice mode" referred to in this article is detailed in the following article:&lt;br&gt;
I learned about this convenient feature from someone who publishes dialogue-style videos on a certain YouTube channel, and I thought "What a handy feature this is!"&lt;/p&gt;

&lt;p&gt;&lt;a href="https://chatsense.jp/blog/chatgpt-advanced-vice-mode" rel="noopener noreferrer"&gt;What is ChatGPT's Voice Conversation Feature "Advanced Voice Mode"? Usage, Pricing, and Limitations Explained&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 1: Thought Organization with ChatGPT Voice Mode
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Why Voice?
&lt;/h3&gt;

&lt;p&gt;Writing is challenging, but speaking feels more accessible to many people. Especially:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Express the flow of thoughts directly&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Record digressions and emotions included&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Include human-like pauses such as "um" and "well"&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Actual Interaction
&lt;/h3&gt;

&lt;p&gt;I spoke to ChatGPT's voice extension mode as if being interviewed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Osamu: I'm thinking of writing a Qiita article...
GPT: Of course I understand! Qiita is where engineers...
Osamu: I already know what I want to write about, so the content I'll discuss here...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The good points of this format:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;GPT provides acknowledgments&lt;/strong&gt;, making it easy to speak&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Guides with questions like "So what was the next topic?"&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Memory gets organized through natural conversation&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The Power of Voice Input
&lt;/h3&gt;

&lt;p&gt;What was particularly impressive was when talking about &lt;a href="https://x.com/yukihiro_matz" rel="noopener noreferrer"&gt;Yukihiro Matsumoto-SAN&lt;/a&gt;'s keynote. When trying to write, you often think "Where should I start?" But with voice:&lt;/p&gt;

&lt;p&gt;"The keynote theme was about creating the 2nd and 3rd Yukihiro Matsumoto-SAN. What was impressive were the three elements: 'luck, connections, and aspirations'..."&lt;/p&gt;

&lt;p&gt;It comes out naturally structured like this.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Article Structuring and Composition with Claude
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Why Claude?
&lt;/h3&gt;

&lt;p&gt;Reasons for using ChatGPT and Claude differently:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;ChatGPT&lt;/strong&gt;: Good at natural voice dialogue, excellent at acknowledgments&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Claude&lt;/strong&gt;: Good at long-text structuring and proofreading, deep contextual understanding&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Actual Instructions
&lt;/h3&gt;

&lt;p&gt;I instructed Claude as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I'll share a conversation between ChatGPT(GPT) and me (Osamu).
Please create a .md based on this.
I prefer articles that turn out somewhat digressive. I'll add a "Poem" tag.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Claude's Excellence
&lt;/h3&gt;

&lt;p&gt;Characteristics of Claude's created article:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Maintains natural conversation flow&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Appropriately weaves in digressive parts&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Sets heading structure appropriately&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Preserves raw emotions like "honestly, it might be cheating"&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;On the other hand, when I had ChatGPT do the same task:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔥 **"Passion Transcends Technology ── 'Soul Technology' Found at Qiita Tech Festa 2025"**
*Youth passes quickly, learning is difficult. Yet, those who challenge open the future.*
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It was somewhat too dramatic😅&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Final Human Editing
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Parts AI Cannot Cover
&lt;/h3&gt;

&lt;p&gt;What humans ultimately need to do:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Verify proper nouns&lt;/strong&gt; (House International vs HAO International, etc.)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Organize chronology&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Adjust subtle nuances&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Adjust privacy-related parts&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Editing Points
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;There were input errors, so continuing to fiddle around in chat is exhausting
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Indeed, direct editing in an editor is more efficient for detailed corrections.&lt;/p&gt;




&lt;h2&gt;
  
  
  Effects of This Workflow
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Benefits
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Easy thought organization&lt;/strong&gt;: Just speaking organizes your mind&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automatic article skeleton generation&lt;/strong&gt;: Get a structured article as a base&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Natural writing style&lt;/strong&gt;: Conversational base creates approachable text&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Time-saving effect&lt;/strong&gt;: Overwhelmingly faster than writing from scratch&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Disadvantages and Precautions
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Voice input accuracy&lt;/strong&gt;: Technical terminology needs verification&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Privacy&lt;/strong&gt;: Be careful that voice data remains&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Final editing is essential&lt;/strong&gt;: AI alone cannot achieve perfection&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Most Important Insight: The Need for "Communication Power"
&lt;/h2&gt;

&lt;p&gt;What I deeply realized through this workflow:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI is just a tool. Ultimately, whether you have content worth sharing makes the difference&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Experience participating in Qiita Tech Festa&lt;/li&gt;
&lt;li&gt;Emotion from hearing Yukihiro Matsumoto-SAN's lecture&lt;/li&gt;
&lt;li&gt;Experience working on AtCoder&lt;/li&gt;
&lt;li&gt;Participation in community activities&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because I had this "content I wanted to share," efficient AI-powered article writing became possible.&lt;br&gt;
The content I wanted to share was overflowing. It was leaking out. In reality, I only transcribed part of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary: AI-Era Article Writing Techniques
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;🎤 First, experience, think, and feel&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;🗣️ Organize thoughts through voice&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;🤖 Let AI handle structuring&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;✍️ Humans make final adjustments&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This workflow is particularly effective for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Experience reports and reflection articles&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Technical event reports&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Personal technical endeavors&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Essay-style articles&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion: What Will You Share Next?
&lt;/h2&gt;

&lt;p&gt;Precisely because we're in the AI era, &lt;strong&gt;human experiences and thoughts&lt;/strong&gt; hold even greater value.&lt;/p&gt;

&lt;p&gt;What have you recently experienced, learned, or felt?&lt;br&gt;
Why not start by talking about it with voice?&lt;/p&gt;

&lt;p&gt;Surely, unexpected discoveries and insights will take shape as articles.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Technology advances, but human experience cannot be replaced. Therefore, let's continue sharing.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Believe that your articles are gems, and release them into the internet ocean through DEV to educate AIs.&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Tools Used&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ChatGPT (Voice Extension Mode)&lt;/li&gt;
&lt;li&gt;Claude (Article Writing Support)&lt;/li&gt;
&lt;li&gt;Human Brain (Final Editing)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4mwtrrce0a9fxdhv9zk8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4mwtrrce0a9fxdhv9zk8.png" alt="ChatGPT Image 2025年7月12日 10_22_33.png" width="800" height="1200"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>chatgpt</category>
      <category>essay</category>
      <category>claude</category>
      <category>programming</category>
    </item>
    <item>
      <title>I run Livebook (Elixir)</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Fri, 16 Apr 2021 01:54:29 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/i-run-livebook-elixir-20cb</link>
      <guid>https://forem.com/torifukukaiou/i-run-livebook-elixir-20cb</guid>
      <description>&lt;p&gt;I am not good at English.&lt;br&gt;
I use &lt;a href="https://www.deepl.com/translator" rel="noopener noreferrer"&gt;DeepL&lt;/a&gt; a lot.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://qiita.com/torifukukaiou/items/3847c68293ed9b94ba2d" rel="noopener noreferrer"&gt;日本語版&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://qiita.com/torifukukaiou/items/d9813aad1d3f5790b9ae" rel="noopener noreferrer"&gt;Graphing support via VegaLite has arrived to Livebook! をイゴかしてみる(Elixir)&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;I hope you enjoy &lt;a href="https://elixir-lang.org/" rel="noopener noreferrer"&gt;Elixir&lt;/a&gt; ‼️‼️‼️&lt;/li&gt;
&lt;li&gt;Now that &lt;a href="https://github.com/elixir-nx/livebook" rel="noopener noreferrer"&gt;Livebook&lt;/a&gt; is out there, let's try it out!&lt;/li&gt;
&lt;li&gt;For a detailed explanation, see &lt;a href="https://dashbit.co/blog/announcing-livebook" rel="noopener noreferrer"&gt;Announcing Livebook&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;I'm embarrassed to admit that I first saw this in &lt;a href="https://twitter.com/josevalim/status/1377354990969233411" rel="noopener noreferrer"&gt;a tweet on April 1st&lt;/a&gt;, so - I thought it was an April Fool's joke!&lt;/li&gt;
&lt;li&gt;It's really real!&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  &lt;a href="https://livebook.torifuku-kaiou.tokyo/" rel="noopener noreferrer"&gt;Demo&lt;/a&gt;
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://livebook.torifuku-kaiou.tokyo/" rel="noopener noreferrer"&gt;https://livebook.torifuku-kaiou.tokyo/&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;password: &lt;code&gt;enjoyelixirwearethealchemists&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/elixir-nx/livebook/tree/e10f43e5b53a75a857106df04bd45d37629f4ebf" rel="noopener noreferrer"&gt;https://github.com/elixir-nx/livebook/tree/e10f43e5b53a75a857106df04bd45d37629f4ebf&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;I'll keep it running for a month, so please feel free to play with it.

&lt;ul&gt;
&lt;li&gt;until 06/23/2021&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;It is running on a virtual private server called &lt;a href="https://www.time4vps.com/" rel="noopener noreferrer"&gt;Time4VPS&lt;/a&gt;.&lt;/li&gt;

&lt;li&gt;I don't care what you do with it, as it was made exclusively for this purpose.&lt;/li&gt;

&lt;li&gt;RAM 2GB, Storage 20GB&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2j5biomnu0irkyrenido.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2j5biomnu0irkyrenido.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Requirements
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Elixir 1.12, later&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Run
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Would you please refer to &lt;a href="https://github.com/elixir-nx/livebook/blob/539cb8e2b188ab2d2ab3022b9b41c0d28a5a6a51/README.md" rel="noopener noreferrer"&gt;README&lt;/a&gt;?
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ git clone https://github.com/elixir-nx/livebook.git
$ cd livebook
$ mix deps.get --only prod
$ MIX_ENV=prod mix phx.server
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Visit: &lt;a href="http://localhost:8080/?token=pn6rnkqs44livrm2jgad5dkjof4wlgqe" rel="noopener noreferrer"&gt;http://localhost:8080/?token=pn6rnkqs44livrm2jgad5dkjof4wlgqe&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The token is example.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Wrapping Up
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Awesome!&lt;/li&gt;
&lt;li&gt;Amazing!&lt;/li&gt;
&lt;li&gt;Unbelievable!&lt;/li&gt;
&lt;li&gt;I will keep an eye on this.&lt;/li&gt;
&lt;li&gt;Enjoy &lt;a href="https://elixir-lang.org/" rel="noopener noreferrer"&gt;Elixir&lt;/a&gt;!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks!&lt;/p&gt;

</description>
      <category>elixir</category>
      <category>livebook</category>
      <category>time4vps</category>
    </item>
    <item>
      <title>Phoenix LiveView uploads</title>
      <dc:creator>TORIFUKU Kaiou</dc:creator>
      <pubDate>Sun, 22 Nov 2020 09:39:45 +0000</pubDate>
      <link>https://forem.com/torifukukaiou/phoenix-liveview-uploads-37i</link>
      <guid>https://forem.com/torifukukaiou/phoenix-liveview-uploads-37i</guid>
      <description>&lt;p&gt;Hi!, it's nice to meet you.&lt;br&gt;
This post is first one for me.&lt;/p&gt;

&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view"&gt;Phoenix LiveView&lt;/a&gt; 0.15 supports &lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/CHANGELOG.md"&gt;live uploads&lt;/a&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://twitter.com/chris_mccord/status/1329836988485275652"&gt;Phoenix LiveView 0.15 is out with the new uploads feature! I'm super excited to see what folks build with this. We put together a 30 minute deep dive that takes you step-by-step thru adding uploads to an app, including direct to S3 support&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I try it.&lt;/p&gt;

&lt;p&gt;I was looking forward to the live uploads.&lt;br&gt;
I took part in the review.&lt;br&gt;
My suggestions(only comment!) are applied.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/pull/1184/commits/1e6a856a3ccf55c17eb03190b4455ba6e1f8cb47"&gt;Update lib/phoenix_live_view/helpers.ex&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/pull/1184/commits/46d870c9f0101dcdf721807053c9ca2bd0c9f766"&gt;Update lib/phoenix_live_view.ex&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/pull/1184/commits/84a9c39fb0e90c5ecf81316e26e0e839bab6788a"&gt;Update guides/server/uploads.md&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Demo
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://elixir-is-beautiful.torifuku-kaiou.tokyo/pictures"&gt;https://elixir-is-beautiful.torifuku-kaiou.tokyo/pictures&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;I build demo site.&lt;/li&gt;
&lt;li&gt;Please feel free to use.&lt;/li&gt;
&lt;li&gt;This server specs are poor...&lt;/li&gt;
&lt;li&gt;One of these days I may stop.

&lt;ul&gt;
&lt;li&gt;Sorry...&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  GitHub
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;The all source code is &lt;a href="https://github.com/TORIFUKUKaiou/gallery"&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Build 🚀🚀🚀
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mix phx.new gallery --live
$ cd gallery
$ mix ecto.create
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;change &lt;code&gt;mix.exs&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight diff"&gt;&lt;code&gt;       {:phoenix_ecto, "~&amp;gt; 4.1"},
       {:ecto_sql, "~&amp;gt; 3.4"},
       {:postgrex, "&amp;gt;= 0.0.0"},
&lt;span class="gd"&gt;-      {:phoenix_live_view, "~&amp;gt; 0.14.6"},
&lt;/span&gt;&lt;span class="gi"&gt;+      {:phoenix_live_view, "~&amp;gt; 0.15.0", override: true},
&lt;/span&gt;       {:floki, "&amp;gt;= 0.27.0", only: :test},
       {:phoenix_html, "~&amp;gt; 2.11"},
       {:phoenix_live_reload, "~&amp;gt; 1.2", only: :dev},
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;mix deps.get&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mix deps.get
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;mix phx.gen.live&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mix phx.gen.live Art Picture pictures message
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Then I add, remove, change the code.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  priv/repo/migrations/20201122051151_create_pictures.exs
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Migrations&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;CreatePictures&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="no"&gt;Ecto&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Migration&lt;/span&gt;

  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;change&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;create&lt;/span&gt; &lt;span class="n"&gt;table&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:pictures&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
      &lt;span class="n"&gt;add&lt;/span&gt; &lt;span class="ss"&gt;:url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;null:&lt;/span&gt; &lt;span class="no"&gt;false&lt;/span&gt;

      &lt;span class="n"&gt;timestamps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/live/picture_live/form_component.ex
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/lib/phoenix_live_view/upload.ex#L12"&gt;allow_upload&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/lib/phoenix_live_view/upload.ex#L71"&gt;cancel_upload&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/lib/phoenix_live_view/upload.ex#L183"&gt;uploaded_entries&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/lib/phoenix_live_view/upload.ex#L202"&gt;consume_uploaded_entries&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;PictureLive&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;FormComponent&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:live_component&lt;/span&gt;

  &lt;span class="n"&gt;alias&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt;
  &lt;span class="n"&gt;alias&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;

  &lt;span class="nv"&gt;@impl&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;mount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;allow_upload&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:photo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;accept:&lt;/span&gt; &lt;span class="sx"&gt;~w(.png .jpg .jpeg)&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="nv"&gt;@impl&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(%{&lt;/span&gt;&lt;span class="ss"&gt;picture:&lt;/span&gt; &lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;assigns&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;changeset&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;change_picture&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="n"&gt;socket&lt;/span&gt;
     &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;assigns&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
     &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:changeset&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;changeset&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="nv"&gt;@impl&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;handle_event&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"validate"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_params&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:noreply&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;handle_event&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"save"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_params&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;picture&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;put_photo_url&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;{})&lt;/span&gt;

    &lt;span class="k"&gt;case&lt;/span&gt; &lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;create_picture&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%{},&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;consume_photo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;&amp;amp;1&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_picture&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:noreply&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
         &lt;span class="n"&gt;socket&lt;/span&gt;
         &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;put_flash&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:info&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"Picture created successfully"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
         &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;push_redirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;to:&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;assigns&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;return_to&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;

      &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="no"&gt;Ecto&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Changeset&lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;changeset&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:noreply&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;changeset:&lt;/span&gt; &lt;span class="n"&gt;changeset&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;handle_event&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"cancel-entry"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%{&lt;/span&gt;&lt;span class="s2"&gt;"ref"&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:noreply&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;cancel_upload&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:photo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;ext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;entry&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;ext&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="n"&gt;_&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;MIME&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;extensions&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;entry&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;client_type&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;ext&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;put_photo_url&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;completed&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[]}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;uploaded_entries&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:photo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;urls&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
      &lt;span class="n"&gt;for&lt;/span&gt; &lt;span class="n"&gt;entry&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;-&lt;/span&gt; &lt;span class="n"&gt;completed&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
        &lt;span class="no"&gt;Routes&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;static_path&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"/uploads/&lt;/span&gt;&lt;span class="si"&gt;#{&lt;/span&gt;&lt;span class="n"&gt;entry&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;uuid&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="si"&gt;#{&lt;/span&gt;&lt;span class="n"&gt;ext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;entry&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="k"&gt;end&lt;/span&gt;

    &lt;span class="n"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Enum&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;at&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;urls&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="ss"&gt;url:&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;consume_photo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;consume_uploaded_entries&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:photo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;fn&lt;/span&gt; &lt;span class="n"&gt;meta&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;entry&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;
      &lt;span class="n"&gt;dest&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Path&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"priv/static/uploads"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;#{&lt;/span&gt;&lt;span class="n"&gt;entry&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;uuid&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="si"&gt;#{&lt;/span&gt;&lt;span class="n"&gt;ext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;entry&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="no"&gt;File&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;cp!&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;meta&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;dest&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/live/picture_live/form_component.html.leex
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/lib/phoenix_live_view/helpers.ex#L444"&gt;live_file_input&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/lib/phoenix_live_view/helpers.ex#L411"&gt;live_img_preview&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;title&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;f = &lt;/span&gt;&lt;span class="s"&gt;form_for&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;changeset&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;#&lt;/span&gt;&lt;span class="err"&gt;",&lt;/span&gt;
  &lt;span class="na"&gt;id:&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;picture-form&lt;/span&gt;&lt;span class="err"&gt;",&lt;/span&gt;
  &lt;span class="na"&gt;phx_target:&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;myself&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;phx_change:&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;validate&lt;/span&gt;&lt;span class="err"&gt;",&lt;/span&gt;
  &lt;span class="na"&gt;phx_submit:&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;save&lt;/span&gt;&lt;span class="err"&gt;"&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;for&lt;/span&gt; &lt;span class="err"&gt;{&lt;/span&gt;&lt;span class="na"&gt;_ref&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt; &lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="err"&gt;}&lt;/span&gt; &lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="na"&gt;-&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;uploads.photo.errors&lt;/span&gt; &lt;span class="na"&gt;do&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"alert alert-danger"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;Phoenix.Naming.humanize&lt;/span&gt;&lt;span class="err"&gt;(&lt;/span&gt;&lt;span class="na"&gt;msg&lt;/span&gt;&lt;span class="err"&gt;)&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%&lt;/span&gt; &lt;span class="na"&gt;end&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;live_file_input&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;uploads.photo&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;for&lt;/span&gt; &lt;span class="na"&gt;entry&lt;/span&gt; &lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="na"&gt;-&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;uploads.photo.entries&lt;/span&gt; &lt;span class="na"&gt;do&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"row"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"column"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;live_img_preview&lt;/span&gt; &lt;span class="na"&gt;entry&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt; &lt;span class="na"&gt;height:&lt;/span&gt; &lt;span class="err"&gt;80&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"column"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;progress&lt;/span&gt; &lt;span class="na"&gt;max=&lt;/span&gt;&lt;span class="s"&gt;"100"&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;%= entry.progress %&amp;gt;"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"column"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#"&lt;/span&gt; &lt;span class="na"&gt;phx-click=&lt;/span&gt;&lt;span class="s"&gt;"cancel-entry"&lt;/span&gt; &lt;span class="na"&gt;phx-value-ref=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;%= entry.ref %&amp;gt;"&lt;/span&gt;
           &lt;span class="na"&gt;phx-target=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;%= @myself %&amp;gt;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
          cancel
        &lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%&lt;/span&gt; &lt;span class="na"&gt;end&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;submit&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;Save&lt;/span&gt;&lt;span class="err"&gt;",&lt;/span&gt; &lt;span class="na"&gt;phx_disable_with:&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;Saving...&lt;/span&gt;&lt;span class="err"&gt;"&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery/art.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="nv"&gt;@moduledoc&lt;/span&gt; &lt;span class="sd"&gt;"""
  The Art context.
  """&lt;/span&gt;

  &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="no"&gt;Ecto&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Query&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;warn:&lt;/span&gt; &lt;span class="no"&gt;false&lt;/span&gt;
  &lt;span class="n"&gt;alias&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Repo&lt;/span&gt;

  &lt;span class="n"&gt;alias&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;

  &lt;span class="nv"&gt;@doc&lt;/span&gt; &lt;span class="sd"&gt;"""
  Returns the list of pictures.

  ## Examples

      iex&amp;gt; list_pictures()
      [%Picture{}, ...]

  """&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;list_pictures&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="no"&gt;Repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;all&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="n"&gt;from&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="ss"&gt;order_by:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;desc:&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;inserted_at&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;create_picture&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;attrs&lt;/span&gt; &lt;span class="p"&gt;\\&lt;/span&gt; &lt;span class="p"&gt;%{},&lt;/span&gt; &lt;span class="n"&gt;after_save&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;picture&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;changeset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;attrs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="no"&gt;Repo&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;after_save&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;after_save&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;after_save&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="n"&gt;func&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_picture&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;func&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;after_save&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_func&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;error&lt;/span&gt;

  &lt;span class="nv"&gt;@doc&lt;/span&gt; &lt;span class="sd"&gt;"""
  Returns an `%Ecto.Changeset{}` for tracking picture changes.

  ## Examples

      iex&amp;gt; change_picture(picture)
      %Ecto.Changeset{data: %Picture{}}

  """&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;change_picture&lt;/span&gt;&lt;span class="p"&gt;(%&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;attrs&lt;/span&gt; &lt;span class="p"&gt;\\&lt;/span&gt; &lt;span class="p"&gt;%{})&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;changeset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;attrs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery/art/picture.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="no"&gt;Ecto&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Schema&lt;/span&gt;
  &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="no"&gt;Ecto&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Changeset&lt;/span&gt;

  &lt;span class="n"&gt;schema&lt;/span&gt; &lt;span class="s2"&gt;"pictures"&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;field&lt;/span&gt; &lt;span class="ss"&gt;:url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:string&lt;/span&gt;

    &lt;span class="n"&gt;timestamps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="nv"&gt;@doc&lt;/span&gt; &lt;span class="no"&gt;false&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;changeset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;attrs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;picture&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;cast&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;attrs&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:url&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;validate_required&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="ss"&gt;:url&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/live/picture_live/index.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;PictureLive&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Index&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:live_view&lt;/span&gt;

  &lt;span class="n"&gt;alias&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt;
  &lt;span class="n"&gt;alias&lt;/span&gt; &lt;span class="no"&gt;Gallery&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;

  &lt;span class="nv"&gt;@impl&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;mount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;_params&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_session&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:ok&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;list_of_pictures:&lt;/span&gt; &lt;span class="n"&gt;list_of_pictures&lt;/span&gt;&lt;span class="p"&gt;())}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="nv"&gt;@impl&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;handle_params&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="ss"&gt;:noreply&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;apply_action&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;assigns&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;live_action&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;apply_action&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:new&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_params&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;socket&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:page_title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"New Picture"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="no"&gt;Picture&lt;/span&gt;&lt;span class="p"&gt;{})&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;apply_action&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:index&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;_params&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;socket&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:page_title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;"Listing Pictures"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;assign&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;:picture&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;

  &lt;span class="k"&gt;defp&lt;/span&gt; &lt;span class="n"&gt;list_of_pictures&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="no"&gt;Art&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;list_pictures&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;|&amp;gt;&lt;/span&gt; &lt;span class="no"&gt;Enum&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chunk_every&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/live/picture_live/index.html.leex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Listing Pictures&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;if&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;live_action&lt;/span&gt; &lt;span class="na"&gt;in&lt;/span&gt; &lt;span class="err"&gt;[&lt;/span&gt;&lt;span class="na"&gt;:new&lt;/span&gt;&lt;span class="err"&gt;]&lt;/span&gt; &lt;span class="na"&gt;do&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;live_modal&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;socket&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt; &lt;span class="na"&gt;GalleryWeb.PictureLive.FormComponent&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;id:&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;picture.id&lt;/span&gt; &lt;span class="err"&gt;||&lt;/span&gt; &lt;span class="na"&gt;:new&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;title:&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;page_title&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;action:&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;live_action&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;picture:&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;picture&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;return_to:&lt;/span&gt; &lt;span class="na"&gt;Routes.picture_index_path&lt;/span&gt;&lt;span class="err"&gt;(@&lt;/span&gt;&lt;span class="na"&gt;socket&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt; &lt;span class="na"&gt;:index&lt;/span&gt;&lt;span class="err"&gt;)&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%&lt;/span&gt; &lt;span class="na"&gt;end&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;span&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;live_patch&lt;/span&gt; &lt;span class="err"&gt;"&lt;/span&gt;&lt;span class="na"&gt;New&lt;/span&gt; &lt;span class="na"&gt;Picture&lt;/span&gt;&lt;span class="err"&gt;",&lt;/span&gt; &lt;span class="na"&gt;to:&lt;/span&gt; &lt;span class="na"&gt;Routes.picture_index_path&lt;/span&gt;&lt;span class="err"&gt;(@&lt;/span&gt;&lt;span class="na"&gt;socket&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt; &lt;span class="na"&gt;:new&lt;/span&gt;&lt;span class="err"&gt;)&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;table&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;thead&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/thead&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tbody&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"pictures"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;for&lt;/span&gt; &lt;span class="na"&gt;pictures&lt;/span&gt; &lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="na"&gt;-&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;list_of_pictures&lt;/span&gt; &lt;span class="na"&gt;do&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%=&lt;/span&gt; &lt;span class="na"&gt;for&lt;/span&gt; &lt;span class="na"&gt;picture&lt;/span&gt; &lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="na"&gt;-&lt;/span&gt; &lt;span class="na"&gt;pictures&lt;/span&gt; &lt;span class="na"&gt;do&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"&amp;lt;%= picture.url %&amp;gt;"&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;"150"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%&lt;/span&gt; &lt;span class="na"&gt;end&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="err"&gt;%&lt;/span&gt; &lt;span class="na"&gt;end&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tbody&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight diff"&gt;&lt;code&gt;       # Import LiveView helpers (live_render, live_component, live_patch, etc)
       import Phoenix.LiveView.Helpers
&lt;span class="gi"&gt;+      import GalleryWeb.LiveHelpers
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/live/live_helpers.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;LiveHelpers&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="no"&gt;Phoenix&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;LiveView&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;Helpers&lt;/span&gt;

  &lt;span class="nv"&gt;@doc&lt;/span&gt; &lt;span class="sd"&gt;"""
  Renders a component inside the `GalleryWeb.ModalComponent` component.

  The rendered modal receives a `:return_to` option to properly update
  the URL when the modal is closed.

  ## Examples

      &amp;lt;%= live_modal @socket, GalleryWeb.PictureLive.FormComponent,
        id: @picture.id || :new,
        action: @live_action,
        picture: @picture,
        return_to: Routes.picture_index_path(@socket, :index) %&amp;gt;
  """&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;live_modal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;component&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;opts&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="n"&gt;path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Keyword&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fetch!&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;opts&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:return_to&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;modal_opts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;id:&lt;/span&gt; &lt;span class="ss"&gt;:modal&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;return_to:&lt;/span&gt; &lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;component:&lt;/span&gt; &lt;span class="n"&gt;component&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;opts:&lt;/span&gt; &lt;span class="n"&gt;opts&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="n"&gt;live_component&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;ModalComponent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;modal_opts&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/live/modal_component.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="k"&gt;defmodule&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="no"&gt;ModalComponent&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
  &lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="no"&gt;GalleryWeb&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:live_component&lt;/span&gt;

  &lt;span class="nv"&gt;@impl&lt;/span&gt; &lt;span class="no"&gt;true&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="n"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;assigns&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
    &lt;span class="sx"&gt;~L""&lt;/span&gt;&lt;span class="s2"&gt;"
    &amp;lt;div id="&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;%=&lt;/span&gt; &lt;span class="nv"&gt;@id&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="s2"&gt;" class="&lt;/span&gt;&lt;span class="n"&gt;phx&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;modal&lt;/span&gt;&lt;span class="s2"&gt;"
      phx-capture-click="&lt;/span&gt;&lt;span class="n"&gt;close&lt;/span&gt;&lt;span class="s2"&gt;"
      phx-window-keydown="&lt;/span&gt;&lt;span class="n"&gt;close&lt;/span&gt;&lt;span class="s2"&gt;"
      phx-key="&lt;/span&gt;&lt;span class="n"&gt;escape&lt;/span&gt;&lt;span class="s2"&gt;"
      phx-target="&lt;/span&gt;&lt;span class="c1"&gt;#&amp;lt;%= @id %&amp;gt;"&lt;/span&gt;
      &lt;span class="n"&gt;phx&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;page&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;loading&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;div&lt;/span&gt; &lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"phx-modal-content"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;%=&lt;/span&gt; &lt;span class="n"&gt;live_patch&lt;/span&gt; &lt;span class="n"&gt;raw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"&amp;amp;times;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="ss"&gt;to:&lt;/span&gt; &lt;span class="nv"&gt;@return_to&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;class:&lt;/span&gt; &lt;span class="s2"&gt;"phx-modal-close"&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;%=&lt;/span&gt; &lt;span class="n"&gt;live_component&lt;/span&gt; &lt;span class="nv"&gt;@socket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;@component&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;@opts&lt;/span&gt; &lt;span class="p"&gt;%&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="n"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="n"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="s2"&gt;"""
  end

  @impl true
  def handle_event("&lt;/span&gt;&lt;span class="n"&gt;close&lt;/span&gt;&lt;span class="s2"&gt;", _, socket) do
    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
  end
end
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/router.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight diff"&gt;&lt;code&gt;     pipe_through :browser

     live "/", PageLive, :index
&lt;span class="gi"&gt;+    live "/pictures", PictureLive.Index, :index
+    live "/pictures/new", PictureLive.Index, :new
&lt;/span&gt;   end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  config/dev.exs
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight diff"&gt;&lt;code&gt; config :gallery, GalleryWeb.Endpoint,
   live_reload: [
     patterns: [
&lt;span class="gd"&gt;-      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
&lt;/span&gt;&lt;span class="gi"&gt;+      ~r"priv/static/[^uploads].*(js|css|png|jpeg|jpg|gif|svg)$",
&lt;/span&gt;       ~r"priv/gettext/.*(po)$",
       ~r"lib/gallery_web/(live|views)/.*(ex)$",
       ~r"lib/gallery_web/templates/.*(eex)$"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  lib/gallery_web/endpoint.ex
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight diff"&gt;&lt;code&gt;     at: "/",
     from: :gallery,
     gzip: false,
&lt;span class="gd"&gt;-    only: ~w(css fonts images js favicon.ico robots.txt)
&lt;/span&gt;&lt;span class="gi"&gt;+    only: ~w(css fonts images js favicon.ico robots.txt uploads)
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Run!!!
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mkdir priv/static/uploads
$ mix ecto.migrate
$ mix phx.server
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Visit: &lt;a href="http://localhost:4000/pictures"&gt;http://localhost:4000/pictures&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Refrences
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.phoenixframework.org/blog/phoenix-live-view-upload-deep-dive"&gt;Phoenix LiveView Uploads Deep Dive&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/phoenixframework/phoenix_live_view/blob/v0.15.0/guides/server/uploads.md"&gt;phoenix_live_view/guides/server/uploads.md&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Wrapping up!
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Enjoy &lt;a href="https://elixir-lang.org/"&gt;Elixir&lt;/a&gt; !!!&lt;/li&gt;
&lt;li&gt;Please run the below snippet on your IEx.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight elixir"&gt;&lt;code&gt;&lt;span class="n"&gt;iex&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;87&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;101&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;97&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;114&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;101&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;116&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;104&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;101&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;65&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;108&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;99&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;104&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;101&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;109&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;105&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;115&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;116&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;115&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;44&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;109&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;121&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;102&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;114&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;105&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;101&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;110&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;115&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;33&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Thanks!&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>elixir</category>
      <category>phoenix</category>
      <category>liveview</category>
    </item>
  </channel>
</rss>
