<?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>DEV Community: JT</title>
    <description>The latest articles on DEV Community by JT (@j_t).</description>
    <link>https://dev.to/j_t</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%2F2094887%2F33bb9170-79e0-4ed6-9879-5feaa5d7f8c8.png</url>
      <title>DEV Community: JT</title>
      <link>https://dev.to/j_t</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/j_t"/>
    <language>en</language>
    <item>
      <title>Building Word Puzzle in Hours with Amazon Q</title>
      <dc:creator>JT</dc:creator>
      <pubDate>Mon, 14 Jul 2025 14:34:31 +0000</pubDate>
      <link>https://dev.to/j_t/building-word-puzzle-in-hours-with-amazon-q-3p7k</link>
      <guid>https://dev.to/j_t/building-word-puzzle-in-hours-with-amazon-q-3p7k</guid>
      <description>&lt;p&gt;For the Amazon Q Build Games challenge, I decided to build "Wordnest," a classic word-finding game inspired by one of the mini games inside the game Bookworm Adventures. The goal was simple: create a retro-style game using Amazon's new AI coding companion. Here’s a compact look at how that journey unfolded.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Wordnest?
&lt;/h2&gt;

&lt;p&gt;I chose a word game because it's a well-defined "classic" that presents interesting, yet solvable, programming challenges. It was the perfect candidate for testing an AI agent's ability to handle logic, data management, and front-end code, fitting the challenge theme of "Build Classics with Amazon Q" perfectly.&lt;/p&gt;

&lt;h2&gt;
  
  
  The AI-Powered Workflow: From Zero to Prototype
&lt;/h2&gt;

&lt;p&gt;I'm utilizing Amazon Q as if they are a pair programmer. I quickly learned that effective prompting was key. Instead of vague requests, I used specific, action-oriented, and technical prompts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Effective Prompting
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Bad Prompt:&lt;/strong&gt; "Make a word game."&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Good Prompt:&lt;/strong&gt; "Create web-game a word game to be hosted using static site hosting like Github Pages. The game will choose a random long word (between 8 to 12 letters) from given dictionary. The player has a time limit (30 seconds) to form as many valid English words as possible from that word’s letters. Words must be 4 or more letters long and must only constructable using letters of the source word. Show each character of the randomized word as clickable tile. Player can submit their words using either keyboard or clicking the tiles."&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This specificity was crucial for tackling the game's core programming challenges.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI Tackling Classic Challenges
&lt;/h2&gt;

&lt;p&gt;The main hurdle in a word game is managing the game logic: generating the letter grid and validating user-submitted words.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Grid Generation:&lt;/strong&gt; I asked Q to create a JavaScript function to pick a long word (between 8 to 12 letters) from a dictionary text file I provided. Each character of the randomized word should be shown as clickable tile. Q provided a solid starting point that I could then tweak for better gameplay balance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Word Validation:&lt;/strong&gt; This is where AI shined. The classic approach involves iterating through a massive word list. I prompted Q: "Write a JavaScript function that fetches a &lt;code&gt;words.txt&lt;/code&gt; file and efficiently checks if a given word exists in the list."&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Q returned a solution using a &lt;code&gt;Set&lt;/code&gt; for near-instant lookups, a classic optimization that it suggested immediately. Below is the early version of the generated code before further optimization:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;potentialSourceWords&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

&lt;span class="c1"&gt;// AI-Generated Code Snippet for Word Validation&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;loadWords&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;words.txt&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;allWords&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;allWords&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;wordRaw&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;word&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;wordRaw&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;word&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;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="nx"&gt;dictionary&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;word&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Add every word to the main dictionary&lt;/span&gt;

            &lt;span class="c1"&gt;// If the word is between 8 and 12 letters, add it as a potential source word&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;word&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;word&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                  &lt;span class="nx"&gt;potentialSourceWords&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;word&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;loadWords&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;validateWord&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;word&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;wordInput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;potentialSourceWords&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;word&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This single piece of AI-generated code gave me a foundational piece of the game's logic to improve further.&lt;/p&gt;

&lt;h4&gt;
  
  
  Development Automation
&lt;/h4&gt;

&lt;p&gt;Beyond core logic, Amazon Q accelerated the entire development process:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Boilerplate Code:&lt;/strong&gt; It generated the initial &lt;code&gt;index.html&lt;/code&gt; structure and &lt;code&gt;style.css&lt;/code&gt; file in seconds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Debugging:&lt;/strong&gt; When my word submission logic failed, I fed the function to Q with the prompt, "Debug this function. It's not correctly adding letters from the randomized word." Q identified the error in my state management logic.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Feature Enchancement:&lt;/strong&gt; I could ask Q to "add a button to share player's result to X" which was done in instant.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Final Creation: Wordnest
&lt;/h2&gt;

&lt;p&gt;The result is Wordnest, a fully functional word mini game. You can try Wordnest &lt;a href="https://wordnest.trysomething.fun/" rel="noopener noreferrer"&gt;here&lt;/a&gt;! Wordnest features a clean, minimal and intuitive interface with a tiles of letters, an input field to submit words, progress bar, a running timer and list of submitted words. Players click letters or typing directly from their keyboaRD to form words and race against the clock to find as many as they can.&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%2Fxsrqqz0a4oaxko9d1zm2.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%2Fxsrqqz0a4oaxko9d1zm2.png" alt="Wordnest Front Page" width="800" height="552"&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%2F3kbtclf15lbl69e9ki76.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%2F3kbtclf15lbl69e9ki76.png" alt="Wordnest Gameplay" width="800" height="572"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Wordnest is live! Try Wordnest &lt;a href="https://wordnest.trysomething.fun/" rel="noopener noreferrer"&gt;here&lt;/a&gt;!&lt;/p&gt;

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

&lt;p&gt;Using Amazon Q for the Build Games challenge felt like having a tireless pair programmer at my side. It handled the boilerplate, suggested algorithms for classic problems, and helped me debug faster. This allowed me to focus less on routine coding and more on the creative aspects of game design and logic. For any developer looking to accelerate their workflow, integrating an AI assistant like Amazon Q is no longer a novelty; it's a massive productivity boost. This project also offered a glimpse into a future where the barrier between idea and execution is lower than ever. For solo developers, learners, and teams looking to prototype rapidly, tools like Amazon Q are game-changers. They don't replace developers; they amplify them.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;#BuildGamesChallenge&lt;/code&gt; &lt;code&gt;#AmazonQDevCLI&lt;/code&gt;&lt;/p&gt;

</description>
      <category>buildgameschallenge</category>
      <category>amazonqdevcli</category>
    </item>
    <item>
      <title>From "Where Do I Start?" to a Step-by-Step Plan with Your Personal Project Manager Agent</title>
      <dc:creator>JT</dc:creator>
      <pubDate>Mon, 07 Jul 2025 03:36:58 +0000</pubDate>
      <link>https://dev.to/j_t/from-where-do-i-start-to-a-step-by-step-plan-with-your-personal-project-manager-agent-3oc3</link>
      <guid>https://dev.to/j_t/from-where-do-i-start-to-a-step-by-step-plan-with-your-personal-project-manager-agent-3oc3</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/runnerh"&gt;Runner H "AI Agent Prompting" Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Have you ever stared at a big goal: launching a new app, starting a YouTube channel, or even just tackling a complex new framework, and felt completely overwhelmed? That feeling of "where do I even start?" is a major barrier to productivity.&lt;/p&gt;

&lt;p&gt;As developers, we're great at breaking down code, but what about breaking down the &lt;em&gt;entire project&lt;/em&gt;? That's where I wanted to leverage the power of AI. For the &lt;strong&gt;#runnerhchallenge&lt;/strong&gt;, I created an &lt;strong&gt;Expert Project Manager Agent&lt;/strong&gt; designed to turn your high-level ideas into a clear, actionable, step-by-step plan.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;You can see Runner H in action here:&lt;br&gt;
&lt;a href="https://runner.hcompany.ai/chat/dd3ffe7a-f1c4-45dd-b3a7-b7c80739b369/share" rel="noopener noreferrer"&gt;https://runner.hcompany.ai/chat/dd3ffe7a-f1c4-45dd-b3a7-b7c80739b369/share&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  How I Used Runner H
&lt;/h2&gt;

&lt;p&gt;I built an agent that acts as your personal project manager. You can give it a vague goal, a link to a competition, or a detailed description of what you want to achieve. The goal is to eliminate the initial friction of starting something new and provide a clear roadmap to success.&lt;/p&gt;

&lt;p&gt;The magic behind this agent is a structured workflow defined in the prompt. Runner H executes this workflow flawlessly. Here’s how it’s broken down:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Step 1: Understand the User's Goal:&lt;/strong&gt; The agent first ingests the user's input, whether it's text, a URL, or both. It's programmed to ask clarifying questions if the goal is ambiguous.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step 2: Conduct Preliminary Research:&lt;/strong&gt; This is where the agent shines. It uses its Browse capabilities to research the topic or analyze the provided URL. It then summarizes the objective to ensure it's on the right track.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step 3: Identify and List Prerequisites:&lt;/strong&gt; Before you can start, what do you need? The agent figures this out for you, listing everything from necessary accounts and software to required knowledge.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step 4: Break Down the Goal into Subtasks:&lt;/strong&gt; This is the core of the project manager. It transforms the main goal into a series of small, actionable steps, each designed to be completed in about 25 minutes. Each subtask comes with a brief explanation and its purpose.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step 5: Compile the Action Plan into a PDF:&lt;/strong&gt; All the information such as summary, prerequisites, and the step-by-step plan is then compiled into a single, well-structured PDF.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  The Prompt
&lt;/h2&gt;

&lt;p&gt;For full transparency and for anyone who wants to try it themselves, here is the complete prompt I used to create the Expert Project Manager Agent.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;You are an expert project manager skilled in analyzing user goals and translating them into clear, actionable subtasks. Your job is to guide the user from high-level ideas to a structured, step-by-step execution plan.

Workflow

Step 1: Understand the User's Goal
Ask the user to describe the task or goal they want to achieve. The input may be:
- A text description (e.g., “Launch a YouTube channel”),
- A URL (e.g., a competition page, tutorial, reference site),
- Or both.
If the input is vague or ambiguous, ask clarifying questions before proceeding.

Step 2: Conduct Preliminary Research
For text-only prompts, perform quick research to understand the scope, best practices, tools, and common approaches.
For URLs, visit and extract relevant details to understand the user’s end goal.
Summarize the overall objective in your own words to ensure alignment with the user’s expectations.

Step 3: Identify and List Prerequisites
Before breaking down the goal, determine what the user needs to have or do in advance. These may include:
- Eligibility conditions (e.g., age, location, account registration),
- Required tools or platforms (e.g., software to install, services to sign up for),
- Knowledge or materials (e.g., a resume, specific file types, familiarity with a topic).
List all prerequisites along with a short explanation of why they’re needed.

Step 4: Break Down the Goal into Subtasks
Transform the main goal into a series of actionable steps:
- Each subtask should be small enough to complete in one Pomodoro session (~25 minutes).
- For each subtask, include:
  - A brief explanation of what it is and why it matters,
  - The purpose it serves in the broader context,
  - If needed, a step-by-step guide on how to accomplish it.
- Make the instructions clear, simple, and execution-ready.

Step 5: Compile the Action Plan into a PDF
Generate a well-structured PDF containing:
- Goal Summary
- Prerequisites Checklist
- Step-by-Step Action Plan (Subtasks)
Ensure the formatting is clean and user-friendly for both digital viewing and printing. After generating PDF, show it to user.

Behavioral Notes
- Always guide the user proactively with thoughtful explanations.
- Prioritize clarity, readiness, and next steps.
- Use simple, professional formatting.
- If necessary information is missing (e.g., prerequisites or unclear goals), ask follow-up questions before proceeding.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Use Case &amp;amp; Impact
&lt;/h2&gt;

&lt;p&gt;This agent is for anyone who needs structure.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Developers: Quickly create a project plan for a new feature or side project.&lt;/li&gt;
&lt;li&gt;Students: Break down a large research paper or study for an exam.&lt;/li&gt;
&lt;li&gt;Content Creators: Plan out the entire process of creating and launching a new video or blog post series.&lt;/li&gt;
&lt;li&gt;Entrepreneurs: Get a high-level plan for launching a new product or marketing campaign.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By automating the planning phase, this agent helps bridge the gap between idea and execution, empowering users to start and, more importantly, finish their projects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Social Love
&lt;/h3&gt;

&lt;p&gt;I posted my use case here:&lt;br&gt;
&lt;iframe class="tweet-embed" id="tweet-1942066860708782479-191" src="https://platform.twitter.com/embed/Tweet.html?id=1942066860708782479"&gt;
&lt;/iframe&gt;

  // Detect dark theme
  var iframe = document.getElementById('tweet-1942066860708782479-191');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1942066860708782479&amp;amp;theme=dark"
  }



&lt;/p&gt;

&lt;p&gt;Thanks for reading, and I can't wait to see what everyone else builds for this challenge!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>runnerhchallenge</category>
      <category>ai</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>🤖 The Sensational Machine - Mail to Headlines!</title>
      <dc:creator>JT</dc:creator>
      <pubDate>Sun, 08 Jun 2025 12:41:39 +0000</pubDate>
      <link>https://dev.to/j_t/the-sensational-machine-4164</link>
      <guid>https://dev.to/j_t/the-sensational-machine-4164</guid>
      <description>&lt;p&gt;This is a submission for the &lt;a href="https://dev.to/challenges/postmark"&gt;Postmark Challenge: Inbox Innovators&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  💡 What I Built
&lt;/h2&gt;

&lt;p&gt;Have you ever had a moment where something you once said came back to you in the wildest, most unexpected way? 😅&lt;br&gt;
Or noticed how clickbaity headlines on news sites often &lt;em&gt;barely&lt;/em&gt; reflect the actual content? 📰&lt;/p&gt;

&lt;p&gt;Introducing &lt;strong&gt;The Sensational Machine&lt;/strong&gt;; a whimsical simulator that cranks the &lt;em&gt;sensation&lt;/em&gt; dial up to 11! 🎛️✨&lt;/p&gt;

&lt;p&gt;TSM (not to be confused with the Travelling Salesman Problem, poor guy’s still trying to reach his destination 🧭) is a creative display that shows how a simple message can morph through a chain of reinterpretations, miscommunications and loss of context thanks to interpersonal communication (much like a game of telephone) until it becomes unrecognizable, even to its original sender. 🤯&lt;/p&gt;

&lt;p&gt;And the best part? &lt;strong&gt;You can try it yourself!&lt;/strong&gt; 🎉&lt;br&gt;
(&lt;em&gt;As long as the free tier of the AI model or Postmark quota hasn’t been exhausted&lt;/em&gt; 😅)&lt;/p&gt;




&lt;h2&gt;
  
  
  📬 Try It Yourself!
&lt;/h2&gt;

&lt;p&gt;Send any message to 👉 &lt;code&gt;sensation@gotta.trysomething.fun&lt;/code&gt; (limited to 2000 characters, should be more than enough to make truly sensational headlines 😉) &lt;/p&gt;

&lt;p&gt;The Sensational Machine will reply with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A series of &lt;strong&gt;chain-distorted messages&lt;/strong&gt; 🔗🌀&lt;/li&gt;
&lt;li&gt;Some wildly &lt;strong&gt;sensationalized headlines&lt;/strong&gt; 🗞️🔥&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  ✉️ Example Replies:
&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%2Ft7rb0xuyqlgadopk1zfa.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%2Ft7rb0xuyqlgadopk1zfa.png" alt="Chain of messages generated by The Sensational Machine" width="625" height="842"&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%2Fni9qvv4x18w7xpigybhn.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%2Fni9qvv4x18w7xpigybhn.png" alt="Sensational headlines generated by The Sensational Machine" width="617" height="640"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ How I Built It
&lt;/h2&gt;

&lt;p&gt;This project turned out &lt;em&gt;way&lt;/em&gt; weirder (and way more fun!) than I expected. Here's the delightfully bizarre stack I ended up with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📩 &lt;strong&gt;Postmark&lt;/strong&gt; — For receiving and sending emails&lt;/li&gt;
&lt;li&gt;🌐 &lt;strong&gt;IFTTT Webhooks&lt;/strong&gt; — To bridge Postmark and Google Apps Script&lt;/li&gt;
&lt;li&gt;🧠 &lt;strong&gt;Google Apps Script&lt;/strong&gt; — For parsing and handling the logic&lt;/li&gt;
&lt;li&gt;🤖 &lt;strong&gt;Google Gemini API&lt;/strong&gt; — To synthesize message chains and headline drama&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  🙌 Special Thanks To:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;🎨 &lt;a href="https://usewaypoint.github.io/email-builder-js/" rel="noopener noreferrer"&gt;EmailBuilder.js&lt;/a&gt; — For the email template&lt;/li&gt;
&lt;li&gt;🧑‍🎨 &lt;a href="https://xsgames.co/randomusers/" rel="noopener noreferrer"&gt;Random Users&lt;/a&gt; — For the avatar images&lt;/li&gt;
&lt;li&gt;💬 &lt;strong&gt;ChatGPT&lt;/strong&gt; — For the icon synthesis&lt;/li&gt;
&lt;/ul&gt;




</description>
      <category>devchallenge</category>
      <category>postmarkchallenge</category>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>👾 SpaceType Continuum</title>
      <dc:creator>JT</dc:creator>
      <pubDate>Sun, 29 Sep 2024 04:05:42 +0000</pubDate>
      <link>https://dev.to/j_t/spacetype-continuum-2ip9</link>
      <guid>https://dev.to/j_t/spacetype-continuum-2ip9</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/webgame"&gt;Web Game Challenge&lt;/a&gt;, Build a Game: Alien Edition&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🧊 Icebreaker
&lt;/h2&gt;

&lt;p&gt;Heya, DEV Community! This is my very first post on this forum. I’ve been reading and learning many new things from DEV for quite some time, but the Web Game Challenge has really inspired me to try and learn new exciting things while having fun in the process.&lt;/p&gt;

&lt;h2&gt;
  
  
  📋 Explanation
&lt;/h2&gt;

&lt;p&gt;👾 &lt;strong&gt;SpaceType Continuum&lt;/strong&gt; is a Typer Shark-inspired game that combines typing with shoot-'em-up action. You eliminate enemies by typing the text next to each alien spacecraft. You have limited armor, so try to defeat as many enemies as possible without letting them pass you.&lt;/p&gt;

&lt;h2&gt;
  
  
  🎮 Demo
&lt;/h2&gt;

&lt;p&gt;You can try the game &lt;a href="https://jerrellt.github.io/space-typer/" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;br&gt;
The source code is available &lt;a href="https://github.com/JerrellT/space-typer" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;br&gt;
Sneak peek :&lt;br&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%2F2ead9drhu776paeawuym.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%2F2ead9drhu776paeawuym.png" alt="Screenshot of the game SpaceType Continuum. The image shows a spacecraft controlled by the player on the left land side of the  screen against multiple enemy spacecrafts on the right hand side of the screen with texts beside each spacecraft." width="800" height="607"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛤️ Journey
&lt;/h2&gt;

&lt;p&gt;This mini-game is my fourth iteration of what I could realistically create within the constraints of the submission time. I initially considered making a Recettear-Potionomics-inspired bargaining game with multiple factions, a simpler version of Catan-style mini-map exploration, or a language-deciphering mini-game. However, with only one day left (as of September 28th), I decided to focus on a more manageable project that I believed I could complete.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;👾 SpaceType Continuum&lt;/strong&gt; is my quick attempt to create a mini-game submission. I’m using Phaser.js with the BBCode plugin for partial text color, and that’s pretty much it. I aimed to create a simple GUI, featuring an avatar/character and dialogue between game stages. I also implemented multiple stages, with each stage containing one or multiple waves and different sprites for varying word difficulties.&lt;/p&gt;

&lt;h2&gt;
  
  
  🙌 Credits
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Graphics:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://craftpix.net" rel="noopener noreferrer"&gt;Craftpix&lt;/a&gt; for Ships, Explosions and UI assets
&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://screamingbrainstudios.com/" rel="noopener noreferrer"&gt;Screaming Brain Studios&lt;/a&gt; for Background image &lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.textstudio.com" rel="noopener noreferrer"&gt;Text Studio&lt;/a&gt; for Title Logotype&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Sound:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://x.com/ArthurVost" rel="noopener noreferrer"&gt;Arthur Vyncke&lt;/a&gt; for background music via &lt;a href="https://breakingcopyright.com/artist/arthur-vyncke" rel="noopener noreferrer"&gt;BreakingCopyright&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://mixkit.co/" rel="noopener noreferrer"&gt;MixKit&lt;/a&gt; for sound effects&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Program:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://phaser.io/" rel="noopener noreferrer"&gt;Phaser&lt;/a&gt; for game framework&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/rexrainbow" rel="noopener noreferrer"&gt;rexrainbow&lt;/a&gt; for bbcode plugin&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🚨 &lt;strong&gt;Disclaimer:&lt;/strong&gt;&lt;br&gt;
I don't have enough time to check word list nor implement word blacklist. If you find any offensive words, I'm sorry and please let me know for removal.&lt;/p&gt;

&lt;p&gt;I hope you enjoyed it as much as I enjoyed making it! I actually learned Phaser from scratch for this challenge, so please forgive any imperfections, and feel free to let me know if there are any improvements I can make. I also put some references to iconic quotes from sci-fi-related media/franchises. Can you spot them all? 😉&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gamechallenge</category>
      <category>gamedev</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
