<?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: toni liu</title>
    <description>The latest articles on DEV Community by toni liu (@toni_liu_901860180e2da47d).</description>
    <link>https://dev.to/toni_liu_901860180e2da47d</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3553707%2F93b26a50-d1a8-4b93-967d-47323fa988ed.png</url>
      <title>DEV Community: toni liu</title>
      <link>https://dev.to/toni_liu_901860180e2da47d</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/toni_liu_901860180e2da47d"/>
    <language>en</language>
    <item>
      <title>How a Static Game Guide Keeps Its Sitemap and Navigation in Sync</title>
      <dc:creator>toni liu</dc:creator>
      <pubDate>Fri, 06 Nov 2026 08:00:21 +0000</pubDate>
      <link>https://dev.to/toni_liu_901860180e2da47d/how-a-static-game-guide-keeps-its-sitemap-and-navigation-in-sync-2hcp</link>
      <guid>https://dev.to/toni_liu_901860180e2da47d/how-a-static-game-guide-keeps-its-sitemap-and-navigation-in-sync-2hcp</guid>
      <description>&lt;p&gt;A small game wiki can become difficult to maintain when its navigation, sitemap and article files are edited separately. For &lt;a href="https://underkeepwiki.info/" rel="noopener noreferrer"&gt;Underkeep Wiki&lt;/a&gt;, we use one content inventory to drive the generated site.&lt;/p&gt;

&lt;h2&gt;
  
  
  The content model
&lt;/h2&gt;

&lt;p&gt;Each guide has a slug, publication status, title, summary, update date, source list, and Markdown body. The generator uses published entries to create HTML routes and links, while draft entries stay out of the site. This makes publication an explicit content decision instead of a matter of remembering several manual edits.&lt;/p&gt;

&lt;h2&gt;
  
  
  Validate before replacing output
&lt;/h2&gt;

&lt;p&gt;The build checks configuration, references and internal links. Invalid input should fail the build rather than quietly producing a broken navigation link or an incomplete sitemap. In this project the generated sitemap and canonical URLs use the production domain.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keep game-specific data out of the renderer
&lt;/h2&gt;

&lt;p&gt;The rendering code handles generic concepts such as cards, article figures, source lists and categories. The content package supplies the Underkeep descriptions, images and links. This keeps the site independent from the original template and lets updates remain localized.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make claims easy to check
&lt;/h2&gt;

&lt;p&gt;Platform information links to official store and developer sources; player build suggestions are identified as player advice. The &lt;a href="https://underkeepwiki.info/party-building/" rel="noopener noreferrer"&gt;party-building page&lt;/a&gt; is one example. Exact maps and secret coordinates are not included until there is enough evidence to verify them.&lt;/p&gt;

&lt;p&gt;Before shipping, build the site, inspect desktop and mobile layouts, follow important links and request the live sitemap. A successful build confirms the generated files are internally consistent; it does not guarantee search-engine indexing.&lt;/p&gt;

&lt;p&gt;This article was prepared with AI assistance and reviewed against the project configuration and build checks.&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>softwaredevelopment</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Designing a two-photo AI video workflow with explicit settings and credit costs</title>
      <dc:creator>toni liu</dc:creator>
      <pubDate>Mon, 05 Oct 2026 15:43:22 +0000</pubDate>
      <link>https://dev.to/toni_liu_901860180e2da47d/designing-a-two-photo-ai-video-workflow-with-explicit-settings-and-credit-costs-5bjf</link>
      <guid>https://dev.to/toni_liu_901860180e2da47d/designing-a-two-photo-ai-video-workflow-with-explicit-settings-and-credit-costs-5bjf</guid>
      <description>&lt;p&gt;I work on Hotel Lobby AI, a focused photo-to-video app that turns two uploaded images into a short duo clip in an orange studio. This post looks at its user flow and a few interface decisions that are useful for other AI media tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with a bounded task
&lt;/h2&gt;

&lt;p&gt;A general text box asks users to describe the scene, performers, motion and output format at once. A template can make those decisions explicit. In this app, the starting inputs are two real photos or anime-style character images. The user then chooses a template, duration and format instead of writing a prompt.&lt;/p&gt;

&lt;p&gt;For a developer, this suggests treating the form as a small configuration object. Here is an illustrative shape, not the public API of this app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;ClipSettings&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;durationSeconds&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;aspectRatio&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;landscape&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;portrait&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;square&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;audioSource&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;template&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;upload&lt;/span&gt;&lt;span class="dl"&gt;"&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;That object still needs server-side validation. A client-side select menu only improves usability; it does not establish which model options or credit costs are valid.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make the cost visible before generation
&lt;/h2&gt;

&lt;p&gt;Hotel Lobby AI uses paid credits and shows the cost before the user confirms. Duration and quality affect the generation request, so a useful review screen should show the same settings that will be submitted.&lt;/p&gt;

&lt;p&gt;In a similar app, I would keep the estimate tied to the selected configuration and invalidate it when those settings change. Avoid letting an old estimate stay visible after a user switches quality.&lt;/p&gt;

&lt;h2&gt;
  
  
  Separate input quality from output promises
&lt;/h2&gt;

&lt;p&gt;The upload flow accepts JPG, PNG and WEBP images, up to 10 MB each. Clear faces and good lighting are more useful than a long prompt when the task depends on two portraits.&lt;/p&gt;

&lt;p&gt;The interface also needs to explain what AI can change. Faces, clothing and motion can vary; exact likeness is not guaranteed. Showing this near the workflow gives users a practical way to judge the result.&lt;/p&gt;

&lt;h2&gt;
  
  
  Design the result step as part of the workflow
&lt;/h2&gt;

&lt;p&gt;The app supports 5, 10 and 15 second clips, landscape, portrait and square outputs, and template audio or uploaded WAV/MP3. Once a result is available, users can preview and download it.&lt;/p&gt;

&lt;p&gt;For builders, the broader lesson is to make a generation task understandable from upload through result. A focused template, explicit settings and visible cost can reduce the decisions users must make before they get something useful.&lt;/p&gt;

&lt;p&gt;You can see the workflow at &lt;a href="https://hotel-lobbyai.online/?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=content" rel="noopener noreferrer"&gt;Hotel Lobby AI&lt;/a&gt;. I am associated with the project. This article was prepared with AI assistance from the app's current product information.&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
  </channel>
</rss>
