<?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: xhorizon</title>
    <description>The latest articles on DEV Community by xhorizon (@sailorpro6).</description>
    <link>https://dev.to/sailorpro6</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%2F3983468%2Fd38edf0e-1099-42ff-ac33-c2313c4b5fac.png</url>
      <title>DEV Community: xhorizon</title>
      <link>https://dev.to/sailorpro6</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sailorpro6"/>
    <language>en</language>
    <item>
      <title>Netlify Drop, GitHub Pages, Tiiny Host: what the free tiers actually do with one HTML page (Oct 2026)</title>
      <dc:creator>xhorizon</dc:creator>
      <pubDate>Thu, 15 Oct 2026 09:52:43 +0000</pubDate>
      <link>https://dev.to/sailorpro6/netlify-drop-github-pages-tiiny-host-what-the-free-tiers-actually-do-with-one-html-page-oct-39ok</link>
      <guid>https://dev.to/sailorpro6/netlify-drop-github-pages-tiiny-host-what-the-free-tiers-actually-do-with-one-html-page-oct-39ok</guid>
      <description>&lt;p&gt;&lt;em&gt;Disclosure: I build dochost, one of the four tools below. I've tried to state its limits as plainly as the others'. Everything was checked against each provider's own docs on Oct 15, 2026.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Ask an AI assistant "how do I put this HTML page online?" and you'll usually get Netlify Drop first, then GitHub Pages. Both are good answers, for a &lt;em&gt;site&lt;/em&gt;. For one page you need someone to open today, the details of the free tier matter more than the brand. Here's what actually happens to your link on each.&lt;/p&gt;

&lt;h2&gt;
  
  
  The part that surprises people
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Netlify Drop without an account is temporary.&lt;/strong&gt; An unclaimed drop sits behind a temporary password until you claim it, and Netlify's CLI docs say anonymous deploys must be claimed within one hour or they're removed. Claim it with a free account and it stays up, with a free custom domain.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tiiny Host's free link has no expiry date, but it has an activity rule.&lt;/strong&gt; One project stays online as long as you log in at least once every three months. Free uploads are capped at 3 MB and show a Tiiny Host banner.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub Pages on GitHub Free needs a public repo.&lt;/strong&gt; So your source is public too. Changes can take up to 10 minutes to go live, and the terms rule out running a business/SaaS on Pages.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;dochost free links expire.&lt;/strong&gt; Public pages after 7 days, private (link-only) pages after 3 days. Permanent links are a paid feature. What you get in exchange is no account and a paste box: paste the HTML the assistant gave you, publish, send the link.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  At a glance
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;dochost&lt;/th&gt;
&lt;th&gt;Netlify Drop&lt;/th&gt;
&lt;th&gt;Tiiny Host&lt;/th&gt;
&lt;th&gt;GitHub Pages&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Signup to keep the link&lt;/td&gt;
&lt;td&gt;Not needed (but link expires)&lt;/td&gt;
&lt;td&gt;Yes (claim the deploy)&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes (account + repo)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Paste HTML directly&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No, drop a file/folder/zip&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Commit a file&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Markdown rendered&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Needs a build step&lt;/td&gt;
&lt;td&gt;Not advertised&lt;/td&gt;
&lt;td&gt;Yes, via Jekyll&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Free link lifetime&lt;/td&gt;
&lt;td&gt;7 days public / 3 days private&lt;/td&gt;
&lt;td&gt;Permanent once claimed&lt;/td&gt;
&lt;td&gt;Permanent while you log in every 3 months&lt;/td&gt;
&lt;td&gt;Permanent&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Free custom domain&lt;/td&gt;
&lt;td&gt;No (Max plan)&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No (Solo plan)&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript runs&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Which one, for which job
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Multi-file site (separate CSS, images, scripts):&lt;/strong&gt; Netlify Drop. Drop the folder.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Portfolio or docs you'll maintain for years:&lt;/strong&gt; GitHub Pages if you're fine with Git, otherwise a claimed Netlify Drop site.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;One small page that should stay up for free with no dev tools:&lt;/strong&gt; Tiiny Host, if the banner is OK.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;One AI-generated page (a quiz, a report) someone needs to see this week:&lt;/strong&gt; dochost. Nobody signs up, inline JS runs, and the link cleans itself up. If it needs to live longer, that's where the others win.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A practical check before using &lt;em&gt;any&lt;/em&gt; single-file publisher: search the HTML for &lt;code&gt;src="&lt;/code&gt; and &lt;code&gt;href="&lt;/code&gt; pointing at local files. A relative path to an image you didn't upload will break on every host above except a full folder deploy.&lt;/p&gt;

&lt;p&gt;The full comparison (pricing, password options, an FAQ) is on the original post: &lt;a href="https://dochost.io/blog/netlify-drop-vs-github-pages-vs-tiiny-host?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=compare-2026-10" rel="noopener noreferrer"&gt;https://dochost.io/blog/netlify-drop-vs-github-pages-vs-tiiny-host?utm_source=devto&amp;amp;utm_medium=referral&amp;amp;utm_campaign=compare-2026-10&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What's your default for "just put this one page online"? I'm curious which trade-off people hit first: the expiry, the account, or Git.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>html</category>
      <category>beginners</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Why your HTML loses styles or images after upload: a debugging checklist</title>
      <dc:creator>xhorizon</dc:creator>
      <pubDate>Tue, 13 Oct 2026 08:30:36 +0000</pubDate>
      <link>https://dev.to/sailorpro6/why-your-html-loses-styles-or-images-after-upload-a-debugging-checklist-4gjc</link>
      <guid>https://dev.to/sailorpro6/why-your-html-loses-styles-or-images-after-upload-a-debugging-checklist-4gjc</guid>
      <description>&lt;p&gt;An HTML page can look correct on your laptop and lose its images or styling after you upload it. The first thing to check is what the browser is trying to fetch—not which host has the nicest landing page.&lt;/p&gt;

&lt;p&gt;Disclosure: I work on dochost, one of the publishing options mentioned below. This guide was drafted with AI assistance. The examples explain browser URL resolution; they do not claim that every upload problem has the same cause.&lt;/p&gt;

&lt;h2&gt;
  
  
  What does a relative path mean after publishing?
&lt;/h2&gt;

&lt;p&gt;Consider this HTML:&lt;br&gt;
&lt;/p&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;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"./styles.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"./images/chart.png"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"Monthly totals"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Those references do not include the files. They tell the browser where to request them relative to the document's base URL. If you uploaded only &lt;code&gt;report.html&lt;/code&gt;, its neighboring stylesheet and image may never have reached the host.&lt;/p&gt;

&lt;p&gt;You can inspect resolution without making a network request:&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="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./images/chart.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://example.com/reviews/report.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;href&lt;/span&gt;
&lt;span class="c1"&gt;// https://example.com/reviews/images/chart.png&lt;/span&gt;

&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/images/chart.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://example.com/reviews/report.html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;href&lt;/span&gt;
&lt;span class="c1"&gt;// https://example.com/images/chart.png&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The leading slash changes the location. A &lt;code&gt;&amp;lt;base href="..."&amp;gt;&lt;/code&gt; element can also change the base used by relative links. See the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/URL" rel="noopener noreferrer"&gt;MDN URL constructor reference&lt;/a&gt; for how relative references resolve.&lt;/p&gt;

&lt;h2&gt;
  
  
  Read the failed request before editing the page
&lt;/h2&gt;

&lt;p&gt;Open the published link, open browser developer tools, select Network, and reload. Inspect failed requests for CSS, JavaScript, fonts, and images.&lt;/p&gt;

&lt;p&gt;For each request, compare the requested URL with the intended asset location. A 404 suggests checking the path and whether the file was deployed. A 200 is not sufficient: inspect the response type and body. Some hosts return an HTML fallback page at a missing asset URL, which is still the wrong content for a stylesheet.&lt;/p&gt;

&lt;p&gt;Also check filename capitalization. A reference to &lt;code&gt;Chart.png&lt;/code&gt; can fail when the deployed file is named &lt;code&gt;chart.png&lt;/code&gt;. Do not assume that a local filesystem and a remote host treat names identically.&lt;/p&gt;

&lt;h2&gt;
  
  
  Choose a single file or a complete folder
&lt;/h2&gt;

&lt;p&gt;If the report is small, make it self-contained where practical. Put CSS in a &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; element and small browser scripts in a &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element. For images, use a supported asset upload workflow, appropriate embedded image data, or stable public URLs. Weigh document size and privacy before embedding or publicly hosting an image.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dochost.io" rel="noopener noreferrer"&gt;dochost&lt;/a&gt; publishes pasted or uploaded HTML and Markdown as shareable pages. For a single HTML document, include the dependencies the page needs and test the public result. Published HTML supports JavaScript in a sandbox; that does not mean every browser API or external resource will work. Free links expire after seven days.&lt;/p&gt;

&lt;p&gt;If the page belongs to a multi-file site, deploy the complete browser-ready folder instead. &lt;a href="https://docs.netlify.com/deploy/create-deploys/" rel="noopener noreferrer"&gt;Netlify's manual deployment documentation&lt;/a&gt; explains uploading a prebuilt site folder. A source project with package imports may need a build first; uploading source code is not the same as deploying its generated output.&lt;/p&gt;

&lt;h2&gt;
  
  
  If the files load, inspect the interaction
&lt;/h2&gt;

&lt;p&gt;Once CSS and images are present, a broken button is a separate diagnosis. Read the Console for JavaScript errors. Check whether the element exists when the script runs and whether its selector matches. For a form, decide whether you want a normal navigation or a client-side interaction; an unintended submission can reload the page and discard the result.&lt;/p&gt;

&lt;p&gt;Do not label every failure as “the host blocks JavaScript.” An incorrect path, a missing file, an error in the script, or a sandbox restriction can produce different symptoms. Use a small reproduction to separate them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Test the recipient's version
&lt;/h2&gt;

&lt;p&gt;Open the link in a signed-out browser or a separate profile, then on a phone. Confirm that images and source links do not depend on your login. Try the actual buttons and check the expiry window against the review date.&lt;/p&gt;

&lt;p&gt;Keep the original HTML and its assets separately. The repair should leave you with a reproducible document or deployment folder, not a page that happens to work only in your own browser.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to share a ChatGPT HTML quiz with students: a preflight checklist</title>
      <dc:creator>xhorizon</dc:creator>
      <pubDate>Sun, 11 Oct 2026 14:18:52 +0000</pubDate>
      <link>https://dev.to/sailorpro6/how-to-share-a-chatgpt-html-quiz-with-students-a-preflight-checklist-3k8a</link>
      <guid>https://dev.to/sailorpro6/how-to-share-a-chatgpt-html-quiz-with-students-a-preflight-checklist-3k8a</guid>
      <description>&lt;p&gt;An AI assistant can give you a complete HTML quiz, but a code block in a chat is not a classroom link. Before choosing a host, check whether the output is actually a self-contained browser page.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Disclosure:&lt;/strong&gt; I build dochost. I will use it as one single-file publishing option below, alongside folder and repository hosting. Free dochost links expire after seven days, which matters if students will return to the quiz later.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Ask for a browser-ready deliverable
&lt;/h2&gt;

&lt;p&gt;A useful prompt is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Make this quiz a single self-contained HTML document. Put CSS in a style element and JavaScript in a script element. Do not require npm, a development server, a backend, API keys or local files. Keep the questions and answer checking in the document. Use standard HTML form controls and show accessible feedback after submission. Return the complete HTML source.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This makes the requirements explicit; it does not prove the generated result is correct. If you need saved scores, accounts or a teacher dashboard, you are asking for an application with data handling, not just one static file.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Test the submit button, not just the appearance
&lt;/h2&gt;

&lt;p&gt;Save the source as &lt;code&gt;quiz.html&lt;/code&gt; and open it locally. Try an unanswered question, a wrong answer and a correct answer. Check whether the score changes and whether reset clears it.&lt;/p&gt;

&lt;p&gt;For a form-based quiz, the JavaScript normally prevents the browser's default navigation and handles submission itself:&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;form&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#quiz&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;form&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;submit&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;span class="nx"&gt;event&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="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="c1"&gt;// Validate the answers and render feedback here.&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is an event-handling pattern, not a complete quiz. Ask the assistant to connect it to the actual questions and feedback elements. A page that looks finished can still have an unwired button.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Check what the file depends on
&lt;/h2&gt;

&lt;p&gt;Search the HTML for &lt;code&gt;src=&lt;/code&gt;, stylesheet links, &lt;code&gt;fetch(&lt;/code&gt; and paths such as &lt;code&gt;C:\\&lt;/code&gt; or &lt;code&gt;/Users/&lt;/code&gt;. A local image or a missing CSS file will not magically be included when you publish just the HTML.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;For a single-file publisher, inline the assets or use public asset URLs.&lt;/li&gt;
&lt;li&gt;For a folder host, upload the HTML and its CSS, JavaScript and images together, keeping the relative paths.&lt;/li&gt;
&lt;li&gt;For a framework project, build the static output first, or use a host that supports its build workflow.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Public external assets can still fail because of permissions, browser rules or service outages. Test the hosted result too.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Pick the sharing workflow
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;One self-contained HTML file:&lt;/strong&gt; &lt;a href="https://dochost.io/publish-html-website-free" rel="noopener noreferrer"&gt;dochost&lt;/a&gt; accepts pasted HTML or an uploaded file without an account or build setup. Its HTML JavaScript runs in a sandbox. Publish and copy the returned link. The free link lasts seven days; check the &lt;a href="https://dochost.io/pricing" rel="noopener noreferrer"&gt;current plans&lt;/a&gt; if you need a permanent link.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A folder of assets:&lt;/strong&gt; &lt;a href="https://docs.netlify.com/deploy/create-deploys/" rel="noopener noreferrer"&gt;Netlify Drop&lt;/a&gt; is a folder-based deployment option. Manual deployment does not run a build, so provide the ready-to-serve output.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A site you will maintain in Git:&lt;/strong&gt; &lt;a href="https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages" rel="noopener noreferrer"&gt;GitHub Pages&lt;/a&gt; serves static HTML, CSS and JavaScript from repository content. It suits a versioned course site better than a one-off paste workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Open the final link as a student
&lt;/h2&gt;

&lt;p&gt;Use a separate browser session. Submit the quiz, reset it and try it on a phone. Check the expiry against the lesson date. Do not rely on your own signed-in access as evidence that students can open it.&lt;/p&gt;

&lt;p&gt;Before sharing, remove student names, credentials and any secret API keys. Browser code can be inspected: if answers are embedded in the JavaScript, students can find them. This is suitable for practice and self-checking, not secure high-stakes assessment.&lt;/p&gt;

&lt;p&gt;The final test is simple: can a student open the URL, answer the questions and see useful feedback during the time they need it? That is a better publishing check than whether the screenshot looks polished.&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
    <item>
      <title>Building a citation-first game fieldguide without inventing the missing stats</title>
      <dc:creator>xhorizon</dc:creator>
      <pubDate>Fri, 11 Sep 2026 15:35:34 +0000</pubDate>
      <link>https://dev.to/sailorpro6/building-a-citation-first-game-fieldguide-without-inventing-the-missing-stats-37b</link>
      <guid>https://dev.to/sailorpro6/building-a-citation-first-game-fieldguide-without-inventing-the-missing-stats-37b</guid>
      <description>&lt;p&gt;Game databases have a data-integrity problem that looks deceptively simple: users want complete tables, while the primary sources are incomplete.&lt;/p&gt;

&lt;p&gt;For a new or Early Access title, the tempting implementation is to copy a value from a video, a beta screenshot, or another guide and render it with the same confidence as publisher-confirmed data. That produces a tidy UI and a weak reference.&lt;/p&gt;

&lt;p&gt;I used a stricter model while building the independent &lt;a href="https://wardogsgame.net/" rel="noopener noreferrer"&gt;WARDOGS Fieldguide&lt;/a&gt;: every claim belongs to an evidence grade, and &lt;code&gt;unknown&lt;/code&gt; is a real value rather than an empty authoring task.&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;EvidenceGrade&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;official&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;confirmed&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;beta-observed&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;unknown&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Fact&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;grade&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;EvidenceGrade&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;sourceUrl&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;observedAt&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;note&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;string&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 small distinction changes the whole publishing workflow.&lt;/p&gt;

&lt;p&gt;An official store statement can be shown directly. A value visible in a dated beta frame can be useful, but it gets a beta label and does not silently survive into the launch build. A repeated community claim with no traceable source remains unknown. The interface renders the gap honestly instead of coercing it into a number.&lt;/p&gt;

&lt;p&gt;The same rule applies at page level. A launch guide can say that WARDOGS supports up to 100 players, uses three teams, puts one randomized 2 × 2 km Control Zone inside a 256 km² map, and awards the match to the first team reaching 100 points. Those are sourced facts. A complete weapon-price table is not, because the official material does not publish one.&lt;/p&gt;

&lt;p&gt;The public &lt;a href="https://wardogsgame.net/database/" rel="noopener noreferrer"&gt;WARDOGS database&lt;/a&gt; is the resulting example. It is less “complete” than pages that guess, but it is easier to update and audit:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Store the claim with its evidence grade.&lt;/li&gt;
&lt;li&gt;Keep the source URL and observation date beside the value.&lt;/li&gt;
&lt;li&gt;Render unknowns explicitly.&lt;/li&gt;
&lt;li&gt;Downgrade beta observations when the build changes.&lt;/li&gt;
&lt;li&gt;Never promote a repeated secondary claim without finding its origin.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This pattern is useful beyond games. Any product catalog, compatibility matrix or living documentation set benefits when uncertainty is modeled instead of hidden.&lt;/p&gt;

</description>
      <category>gamedev</category>
    </item>
    <item>
      <title>HTML to URL: five ways to turn an HTML or Markdown file into a shareable link</title>
      <dc:creator>xhorizon</dc:creator>
      <pubDate>Fri, 07 Aug 2026 15:10:14 +0000</pubDate>
      <link>https://dev.to/sailorpro6/sharing-an-ai-generated-html-page-five-options-and-the-one-question-that-picks-for-you-1783</link>
      <guid>https://dev.to/sailorpro6/sharing-an-ai-generated-html-page-five-options-and-the-one-question-that-picks-for-you-1783</guid>
      <description>&lt;p&gt;You have an HTML file or Markdown document from ChatGPT or Claude. The recipient needs the rendered page, not a code block. The useful question is: &lt;strong&gt;are you sharing one self-contained file, a folder of assets, or a project that needs a build?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Disclosure:&lt;/strong&gt; I built dochost, one of the options below. This is a workflow comparison, not an independent ranking. Updated October 11, 2026: the earlier version incorrectly said dochost disabled JavaScript. Its published HTML now runs JavaScript in a sandbox; the seven-day free-link expiry still applies.&lt;/p&gt;

&lt;h2&gt;
  
  
  Choose by what you actually have
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;What you have&lt;/th&gt;
&lt;th&gt;A suitable starting point&lt;/th&gt;
&lt;th&gt;Main trade-off&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;One HTML quiz, calculator or Markdown report&lt;/td&gt;
&lt;td&gt;dochost&lt;/td&gt;
&lt;td&gt;Free links expire after seven days; single-file assets need to be self-contained or publicly accessible&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;A folder containing HTML, CSS, JS and images&lt;/td&gt;
&lt;td&gt;Netlify Drop&lt;/td&gt;
&lt;td&gt;Upload the built folder; manual deployment does not run a build&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;A static site you want to maintain in Git&lt;/td&gt;
&lt;td&gt;GitHub Pages&lt;/td&gt;
&lt;td&gt;Repository and Pages setup; no server-side application runtime&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Prebuilt site assets and a Cloudflare account&lt;/td&gt;
&lt;td&gt;Cloudflare Pages Direct Upload&lt;/td&gt;
&lt;td&gt;Account/project setup; a Direct Upload project cannot later switch to Git integration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;A frontend experiment where readers should inspect the code&lt;/td&gt;
&lt;td&gt;CodePen / JSFiddle&lt;/td&gt;
&lt;td&gt;A code playground rather than a document-first sharing workflow&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;These are starting points, not exclusive capabilities. For example, a single HTML file can also live in a repository or a static-site folder.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Netlify Drop: upload the whole static folder
&lt;/h2&gt;

&lt;p&gt;If your page references &lt;code&gt;style.css&lt;/code&gt;, &lt;code&gt;app.js&lt;/code&gt; and an &lt;code&gt;images/&lt;/code&gt; directory, keep those files together. Netlify documents a drag-and-drop deployment of the project's build/output folder. A manual deploy does not run a build command: if an AI assistant gave you a framework project, build it first and upload the output, not the unbuilt source.&lt;/p&gt;

&lt;p&gt;For a simple site, put the entry page at &lt;code&gt;index.html&lt;/code&gt; and retain the relative asset paths. When you change the site, upload the updated folder. Check the current account and plan requirements for keeping and managing the deployment.&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://docs.netlify.com/deploy/create-deploys/" rel="noopener noreferrer"&gt;Netlify deployment documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. GitHub Pages: use a repository when maintenance matters
&lt;/h2&gt;

&lt;p&gt;GitHub Pages publishes a static website from repository content, including HTML, CSS and JavaScript. It is a sensible choice when the source should be versioned and future edits should follow a Git workflow.&lt;/p&gt;

&lt;p&gt;The cost is setup rather than a paste-only workflow: create or use a repository, configure Pages and make subsequent changes in that repository. Static hosting does not give your page a Node.js/Python backend or a database. A secret API key embedded in browser JavaScript remains visible to readers.&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages" rel="noopener noreferrer"&gt;What is GitHub Pages?&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Cloudflare Pages Direct Upload: publish prebuilt assets
&lt;/h2&gt;

&lt;p&gt;Cloudflare Pages supports Direct Upload through Wrangler or dashboard drag and drop. The dashboard accepts a folder or ZIP; Wrangler accepts a folder. This works when you already have the static files and want a managed static-site project.&lt;/p&gt;

&lt;p&gt;One decision to make early: Cloudflare says a Direct Upload project cannot later switch to Git integration. If automatic repository-based deployments are your likely next step, choose that workflow at project creation instead.&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://developers.cloudflare.com/pages/get-started/direct-upload/" rel="noopener noreferrer"&gt;Cloudflare Direct Upload documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. CodePen / JSFiddle: share an experiment and its source
&lt;/h2&gt;

&lt;p&gt;A code playground is useful when the recipient is another developer who wants to inspect and modify the HTML, CSS and JavaScript. It is less natural when the deliverable is a report or lesson that should open as a finished page.&lt;/p&gt;

&lt;p&gt;Match the environment to the generated code. A full HTML document, external libraries and a multi-file project may need adaptation to the playground's editor and dependency setup. Do not assume any code block from an AI assistant will run unchanged in every editor.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. dochost: publish one HTML or Markdown document
&lt;/h2&gt;

&lt;p&gt;Paste HTML or Markdown, or upload a &lt;code&gt;.html&lt;/code&gt;/&lt;code&gt;.md&lt;/code&gt; file, then publish a shareable link without creating an account or configuring a build. Markdown renders as a page; HTML JavaScript runs in a sandbox, so self-contained quizzes and calculators can remain interactive.&lt;/p&gt;

&lt;p&gt;The important limitation is retention: &lt;strong&gt;free links expire after seven days&lt;/strong&gt;. Paid plans provide permanent links and additional options. If students need the page next month, a seven-day link is not enough.&lt;/p&gt;

&lt;p&gt;This is a single-document workflow. Inline separate CSS/JS files, or reference assets at publicly accessible URLs. Sandboxed browser JavaScript is not a backend: do not expect server code, private local files or every browser capability to work unchanged.&lt;/p&gt;

&lt;p&gt;Start with the &lt;a href="https://dochost.io/publish-html-website-free" rel="noopener noreferrer"&gt;HTML publishing page&lt;/a&gt;, and check the &lt;a href="https://dochost.io/pricing" rel="noopener noreferrer"&gt;current plans&lt;/a&gt; before choosing a permanent-link option.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check the file before sharing
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Open it locally and test the actual interaction: submit the quiz, calculate a result, or switch the chart.&lt;/li&gt;
&lt;li&gt;Look for local file paths and missing assets. Folder hosts need the referenced files included; single-file publishers need inline or public assets.&lt;/li&gt;
&lt;li&gt;Remove secrets and personal data you did not intend to publish. Browser source is accessible to recipients.&lt;/li&gt;
&lt;li&gt;Open the final URL in a separate browser session and test again. Local success does not prove hosted success.&lt;/li&gt;
&lt;li&gt;Check the link lifetime and access settings against how long the recipient needs it.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For a classroom quiz, the deciding factors are working interaction, student access and retention. For a maintained website, repository-based deployment may be a better fit. Pick the workflow that matches the deliverable.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>chatgpt</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Three ways to share your ChatGPT / Claude output as a real web page</title>
      <dc:creator>xhorizon</dc:creator>
      <pubDate>Sun, 14 Jun 2026 06:25:17 +0000</pubDate>
      <link>https://dev.to/sailorpro6/three-ways-to-share-your-chatgpt-claude-output-as-a-real-web-page-277f</link>
      <guid>https://dev.to/sailorpro6/three-ways-to-share-your-chatgpt-claude-output-as-a-real-web-page-277f</guid>
      <description>&lt;p&gt;Your LLM just produced a great report, a README, a doc, a table. Now you want to send it to someone. Pasting raw Markdown into Slack looks broken. A screenshot isn't searchable or copyable. Forwarding the whole chat shares more than you want. So how do you turn one AI output into a clean, linkable web page?&lt;/p&gt;

&lt;p&gt;Here are three approaches, with the trade-offs.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. GitHub Gist
&lt;/h2&gt;

&lt;p&gt;Paste the Markdown into a &lt;code&gt;.md&lt;/code&gt; Gist and share the link. Free, durable, and developers trust the domain.&lt;/p&gt;

&lt;p&gt;Downsides: it renders in GitHub's wrapper (not a clean standalone page), HTML isn't rendered live, and it's a weird link to send a non-technical person. Good for code snippets, awkward for a polished doc.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Publish from a static-site setup
&lt;/h2&gt;

&lt;p&gt;Drop the content into a repo with GitHub Pages, Netlify, or a notebook tool. Maximum control.&lt;/p&gt;

&lt;p&gt;Downsides: it's a project, not a 10-second action. Overkill when you just want one page to exist at one URL.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. A paste-to-link publisher
&lt;/h2&gt;

&lt;p&gt;Tools in this category take Markdown or HTML, render it, and hand you a URL. No repo, no build. Options include &lt;a href="https://telegra.ph" rel="noopener noreferrer"&gt;Telegraph&lt;/a&gt;, JotBird, mdshare, and &lt;a href="https://dochost.io" rel="noopener noreferrer"&gt;dochost&lt;/a&gt; (which I built, so fair disclosure). The differences worth knowing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;HTML support&lt;/strong&gt; — some only take Markdown. If your AI produced an HTML artifact, you want one that renders HTML directly. dochost does; check the input formats supported by each publisher.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;JavaScript&lt;/strong&gt; — dochost runs HTML JavaScript in a sandbox, so self-contained quizzes and calculators can stay interactive. This does not supply a backend or guarantee every browser capability.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Permanence&lt;/strong&gt; — free tiers often expire links (dochost's free links last 7 days). Fine for a quick share, check the tier if you need it to live forever.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Password / private&lt;/strong&gt; — check whether protection is available on your plan. An unlisted URL is not the same as a password-protected page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;A concrete walkthrough (paste-to-link)&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Copy your Markdown or HTML out of ChatGPT/Claude.&lt;/li&gt;
&lt;li&gt;Paste it into the publisher's box.&lt;/li&gt;
&lt;li&gt;Get a URL. Send it.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That's the whole loop. For AI output specifically, this is the lowest-friction of the three — no repo, renders HTML, and you're sharing a normal web page instead of a screenshot or a raw blob.&lt;/p&gt;

&lt;h2&gt;
  
  
  Which to pick
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Code snippet for other devs → Gist.&lt;/li&gt;
&lt;li&gt;A page you'll maintain and grow → static site.&lt;/li&gt;
&lt;li&gt;One-off doc / AI output you just need to &lt;em&gt;send&lt;/em&gt; → a paste-to-link tool.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Pick the boring one that matches the job. For me, sharing LLM outputs landed on the third.&lt;/p&gt;

&lt;p&gt;Updated October 11, 2026. For a more detailed comparison of file, folder and repository workflows, see &lt;a href="https://dev.to/sailorpro6/sharing-an-ai-generated-html-page-five-options-and-the-one-question-that-picks-for-you-1783"&gt;five ways to publish HTML or Markdown&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
      <category>tools</category>
    </item>
  </channel>
</rss>
