<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="/scripts/pretty-feed-v3.xsl" type="text/xsl"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:h="http://www.w3.org/TR/html4/"><channel><title>Prakart&apos;s Blog</title><description>This blog is my personal knowledge lab — a place where ideas evolve, experiments happen, and insights are shared.</description><link>https://astro-pure.js.org</link><item><title>PERT Three-Pont Estimating</title><link>https://astro-pure.js.org/blog/music-journey</link><guid isPermaLink="true">https://astro-pure.js.org/blog/music-journey</guid><description>Testimating the duration of a project or task, PERT stands for Program Evaluation and Review Technique.</description><pubDate>Sat, 06 Jun 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h2&gt;Project Management: PERT Three-Point Estimating&lt;/h2&gt;
&lt;p&gt;If you are estimating the duration of a project or task, &lt;strong&gt;PERT&lt;/strong&gt; stands for &lt;strong&gt;Program Evaluation and Review Technique&lt;/strong&gt;. It calculates a weighted average of three time estimates to account for real-world uncertainty.&lt;/p&gt;
&lt;h3&gt;The formula is:&lt;/h3&gt;
&lt;p&gt;$$E = \frac{O + 4M + P}{6}$$&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;O (Optimistic):&lt;/strong&gt; The best-case scenario if everything goes perfectly.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;M (Most Likely):&lt;/strong&gt; The expected duration under normal, everyday conditions.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;P (Pessimistic):&lt;/strong&gt; The worst-case scenario if everything goes wrong.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Example&lt;/h3&gt;
&lt;p&gt;If it takes your team:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;3 days&lt;/strong&gt; in the best case,&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;5 days&lt;/strong&gt; normally,&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;13 days&lt;/strong&gt; in the worst-case scenario,&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;then your PERT estimate is:&lt;/p&gt;
&lt;p&gt;$$E = \frac{3 + (4 \times 5) + 13}{6} = \frac{36}{6} = 6\text{ days}$$&lt;/p&gt;</content:encoded><h:img src="/_astro/thumbnail.D9g_npIV.jpg"/><enclosure url="/_astro/thumbnail.D9g_npIV.jpg"/></item><item><title>Zero Supervision</title><link>https://astro-pure.js.org/blog/improve-concentration</link><guid isPermaLink="true">https://astro-pure.js.org/blog/improve-concentration</guid><description>Zero supervision refers to AI models and systems that operate, train, or optimize themselves without needing human-annotated data or external guidance.   </description><pubDate>Thu, 30 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;import { Aside } from &apos;astro-pure/user&apos;&lt;/p&gt;
&lt;h2&gt;Zero Supervision&lt;/h2&gt;
&lt;p&gt;Zero supervision refers to AI models and systems that operate, train, or optimize themselves without needing human-annotated data or external guidance.&lt;/p&gt;
&lt;p&gt;Recent advancements (2025–2026) focus on inference-time self-evolution and self-generated rewards to achieve state-of-the-art (SOTA) results in coding, reasoning, and text correction.&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;Key Developments in Zero Supervision (2025–2026)&lt;/h2&gt;
&lt;h3&gt;1. MAS-Zero (Multi-Agent Systems)&lt;/h3&gt;
&lt;p&gt;A framework that designs multi-agent systems at inference time through self-evolving meta-feedback.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Achieves superior accuracy to manual approaches in coding and reasoning&lt;/li&gt;
&lt;li&gt;Does not require labeled training data&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;2. CEC-Zero (Character Error Correction)&lt;/h3&gt;
&lt;p&gt;A zero-supervision reinforcement learning framework that allows large language models (LLMs) to correct errors in text by generating their own rewards.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Outperforms supervised models by &lt;strong&gt;10–13 F1 points&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;3. RLZero (Robot Learning)&lt;/h3&gt;
&lt;p&gt;Enables zero-shot language-to-behavior policies by &quot;imagining&quot; tasks and grounding them in video-language models.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Removes the need for supervised robot training&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;4. Absolute Zero (Reasoning)&lt;/h3&gt;
&lt;p&gt;A paradigm (AZR) where agents propose and solve their own tasks to maximize learning.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Achieves SOTA results in math and code&lt;/li&gt;
&lt;li&gt;Requires no external training data&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;5. AlphaMath &quot;Almost Zero&quot;&lt;/h3&gt;
&lt;p&gt;Uses Monte Carlo Tree Search (MCTS) to generate self-supervised process rewards.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Matches or exceeds GPT-4-supervised models in math reasoning&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Advantages&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Cost Efficiency&lt;/strong&gt;&lt;br&gt;
Eliminates the need for expensive human labor to annotate data&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Scalability&lt;/strong&gt;&lt;br&gt;
Allows models to learn from raw, unlabeled web data or self-simulation&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Adaptivity&lt;/strong&gt;&lt;br&gt;
Enables models to adapt to new problems at inference time&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Core Components&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Self-Generated Rewards&lt;/strong&gt;&lt;br&gt;
Models compute their own success metrics (e.g., semantic similarity, consensus)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Self-Evolution&lt;/strong&gt;&lt;br&gt;
Iteratively improving a model based on its own past performance&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Code Execution Verification&lt;/strong&gt;&lt;br&gt;
Using tools to test and verify answers&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;</content:encoded><h:img src="/_astro/thumbnail.CjX_ngYv.jpg"/><enclosure url="/_astro/thumbnail.CjX_ngYv.jpg"/></item><item><title>Claude Code Login/Register System</title><link>https://astro-pure.js.org/blog/claudecode-login-register</link><guid isPermaLink="true">https://astro-pure.js.org/blog/claudecode-login-register</guid><description>AI native development using Claude Code and Skills </description><pubDate>Wed, 29 Apr 2026 14:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;Claude Code + Next.js + Better Auth&lt;/h1&gt;
&lt;h2&gt;Overview&lt;/h2&gt;
&lt;p&gt;สรุปวิธีสร้างระบบ Login/Register โดยใช้:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Next.js (App Router)&lt;/li&gt;
&lt;li&gt;Tailwind CSS (Design System)&lt;/li&gt;
&lt;li&gt;Better Auth&lt;/li&gt;
&lt;li&gt;MySQL&lt;/li&gt;
&lt;li&gt;Claude Code (AI-assisted development)&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Core Concept&lt;/h2&gt;
&lt;p&gt;แนวคิดหลักคือ &lt;strong&gt;AI-driven development (Vibe Coding)&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;ใช้ Claude Code + Prompt เพื่อ generate code&lt;/li&gt;
&lt;li&gt;ใช้ Skills เพื่อ scaffold ระบบ&lt;/li&gt;
&lt;li&gt;ลดการเขียน boilerplate&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Architecture&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;Frontend (Next.js + Tailwind)
        ↓
Auth Client (better-auth/react)
        ↓
API Route (Next.js)
        ↓
Better Auth Core
        ↓
MySQL Database
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 1: Setup Project&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-bash&quot;&gt;npx create-next-app@latest my-auth-app
cd my-auth-app
npm install
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Install Tailwind&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-bash&quot;&gt;npm install tailwindcss
npx tailwindcss init
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 2: Use Claude Code Prompt&lt;/h2&gt;
&lt;p&gt;Example Prompt:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Build a login/register system using:
- Next.js App Router
- Tailwind CSS
- Better Auth
- MySQL
- Include register, login, dashboard (protected route)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Claude จะ generate:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Folder structure&lt;/li&gt;
&lt;li&gt;API routes&lt;/li&gt;
&lt;li&gt;Auth logic&lt;/li&gt;
&lt;li&gt;UI pages&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Step 3: Setup Better Auth&lt;/h2&gt;
&lt;p&gt;Install:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-bash&quot;&gt;npm install better-auth mysql2
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Create config:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-ts&quot;&gt;// lib/auth.ts
import { betterAuth } from &quot;better-auth&quot;;
import mysql from &quot;mysql2/promise&quot;;

export const auth = betterAuth({
  database: mysql.createPool({
    host: &quot;localhost&quot;,
    user: &quot;root&quot;,
    password: &quot;&quot;,
    database: &quot;auth_db&quot;,
  }),
  emailAndPassword: {
    enabled: true,
  },
});
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 4: API Route&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-ts&quot;&gt;// app/api/auth/[...all]/route.ts
import { auth } from &quot;@/lib/auth&quot;;
import { toNextJsHandler } from &quot;better-auth/next-js&quot;;

export const { GET, POST } = toNextJsHandler(auth);
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 5: Auth Client (Frontend)&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-ts&quot;&gt;// lib/auth-client.ts
import { createAuthClient } from &quot;better-auth/react&quot;;

export const { signIn, signUp, signOut, useSession } =
  createAuthClient();
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 6: Register Page&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-tsx&quot;&gt;&quot;use client&quot;;

import { signUp } from &quot;@/lib/auth-client&quot;;

async function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData(e.currentTarget);

  await signUp.email({
    email: formData.get(&quot;email&quot;),
    password: formData.get(&quot;password&quot;),
    name: formData.get(&quot;name&quot;),
  });
}
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 7: Login Page&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-tsx&quot;&gt;&quot;use client&quot;;

import { signIn } from &quot;@/lib/auth-client&quot;;

await signIn.email({
  email,
  password,
});
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 8: Protected Route&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-ts&quot;&gt;const session = await auth.api.getSession({
  headers: await headers(),
});

if (!session) {
  redirect(&quot;/login&quot;);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;hr&gt;
&lt;h2&gt;Step 9: Database (MySQL)&lt;/h2&gt;
&lt;p&gt;Better Auth จะจัดการ:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;user table&lt;/li&gt;
&lt;li&gt;session table&lt;/li&gt;
&lt;li&gt;account table&lt;/li&gt;
&lt;li&gt;verification table&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;⚡ Key Benefits&lt;/h2&gt;
&lt;h3&gt;1. Claude Code&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ลดเวลาเขียน code&lt;/li&gt;
&lt;li&gt;Generate ระบบได้เร็ว&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;2. Better Auth&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ไม่ต้องเขียน auth เอง&lt;/li&gt;
&lt;li&gt;ลด security risk&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;3. Tailwind&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;สร้าง UI ได้เร็ว&lt;/li&gt;
&lt;li&gt;Design consistency&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Benefits&lt;/h2&gt;
&lt;h3&gt;Traditional Approach&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;เขียน auth เอง&lt;/li&gt;
&lt;li&gt;ใช้เวลานาน&lt;/li&gt;
&lt;li&gt;เสี่ยง security bug&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;Modern Approach&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ใช้ Better Auth&lt;/li&gt;
&lt;li&gt;ใช้ AI generate code&lt;/li&gt;
&lt;li&gt;Focus business logic&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Suggested Extensions&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Google OAuth Login&lt;/li&gt;
&lt;li&gt;Role-based access control (RBAC)&lt;/li&gt;
&lt;li&gt;Email verification&lt;/li&gt;
&lt;li&gt;Multi-tenant support (SaaS)&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Summary&lt;/h2&gt;
&lt;p&gt;การใช้ Claude Code + Better Auth + Next.js:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;ลด development time อย่างมาก&lt;/li&gt;
&lt;li&gt;ได้ระบบที่ scalable&lt;/li&gt;
&lt;li&gt;เหมาะกับ modern AI-native development workflow&lt;/li&gt;
&lt;/ul&gt;</content:encoded><h:img src="/_astro/thumbnail.BEu3Blp1.jpg"/><enclosure url="/_astro/thumbnail.BEu3Blp1.jpg"/></item><item><title>OpenClaw on Hostinger using Claude and Telegram</title><link>https://astro-pure.js.org/blog/openclaw-hostinger-telegram</link><guid isPermaLink="true">https://astro-pure.js.org/blog/openclaw-hostinger-telegram</guid><description>Setup OpenClaw on Hostinger using Claude and Telegram</description><pubDate>Wed, 29 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;OpenClaw + Claude + Telegram (Auto AI System)&lt;/h1&gt;
&lt;h2&gt;Overview&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;สอนติดตั้งระบบ OpenClaw&lt;/li&gt;
&lt;li&gt;ใช้ Claude เป็น AI backend&lt;/li&gt;
&lt;li&gt;เชื่อมต่อกับ Telegram เพื่อใช้งานจริง&lt;/li&gt;
&lt;li&gt;Deploy บน Hostinger (หรือ VPS)&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;แนวคิดหลัก&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;ใช้ AI agent ทำงานอัตโนมัติ&lt;/li&gt;
&lt;li&gt;ใช้ Telegram เป็น UI interface&lt;/li&gt;
&lt;li&gt;ลดการเขียนระบบ backend เอง&lt;/li&gt;
&lt;li&gt;ใช้ Claude เป็นสมองของระบบ&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Architecture&lt;/h2&gt;
&lt;p&gt;User → Telegram Bot → OpenClaw → Claude API → Response&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;ขั้นตอนหลัก&lt;/h2&gt;
&lt;h3&gt;1. เตรียม Server (Hostinger)&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ใช้ VPS / hosting ที่รองรับ Node.js&lt;/li&gt;
&lt;li&gt;SSH เข้า server&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3&gt;2. ติดตั้ง OpenClaw&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;clone repo&lt;/li&gt;
&lt;li&gt;install dependencies (npm install)&lt;/li&gt;
&lt;li&gt;run project&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3&gt;3. ตั้งค่า Claude API&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ใส่ API key ของ Claude&lt;/li&gt;
&lt;li&gt;config environment (.env)&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3&gt;4. สร้าง Telegram Bot&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ใช้ BotFather&lt;/li&gt;
&lt;li&gt;ได้ token มาใช้งาน&lt;/li&gt;
&lt;li&gt;ใส่ token ใน config&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3&gt;5. เชื่อม Telegram กับ OpenClaw&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;ตั้ง webhook หรือ polling&lt;/li&gt;
&lt;li&gt;bot รับ message → ส่งเข้า AI&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h3&gt;6. Run ระบบ&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;start server&lt;/li&gt;
&lt;li&gt;ทดสอบส่งข้อความผ่าน Telegram&lt;/li&gt;
&lt;li&gt;AI ตอบกลับแบบ real-time&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;Use Case&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;AI Assistant ส่วนตัว&lt;/li&gt;
&lt;li&gt;Chatbot สำหรับธุรกิจ&lt;/li&gt;
&lt;li&gt;Automation workflow&lt;/li&gt;
&lt;li&gt;Dev tools (generate code, debug)&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;จุดเด่น&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;setup ง่าย (ไม่กี่คลิก)&lt;/li&gt;
&lt;li&gt;ใช้ AI ได้ทันที&lt;/li&gt;
&lt;li&gt;ไม่ต้องสร้าง UI เอง&lt;/li&gt;
&lt;li&gt;scale ได้ง่าย&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2&gt;ข้อควรระวัง&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;ต้องจัดการ API key ให้ดี&lt;/li&gt;
&lt;li&gt;มีค่าใช้จ่าย Claude API&lt;/li&gt;
&lt;li&gt;ต้องดูเรื่อง security (bot + server)&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;</content:encoded><h:img src="/_astro/thumbnail.CPaiK9VO.jpg"/><enclosure url="/_astro/thumbnail.CPaiK9VO.jpg"/></item><item><title>Deployment Summary: Hostinger &amp; GitHub CI/CD</title><link>https://astro-pure.js.org/blog/deployment-hostinger--github-ci/cd</link><guid isPermaLink="true">https://astro-pure.js.org/blog/deployment-hostinger--github-ci/cd</guid><description>a summary of the tasks, technical challenges, and solutions from our deployment session</description><pubDate>Thu, 23 Apr 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h3&gt;&lt;strong&gt;Deployment Summary: Hostinger &amp;#x26; GitHub CI/CD&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;1. Primary Objective&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Successfully deploy the local Astro project to a live production environment on Hostinger using automated GitHub-based deployment.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;2. Key Technical Activities&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Static Build Configuration:&lt;/strong&gt; Successfully configured the Astro project for static site generation (SSG) to ensure compatibility with standard web hosting.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Production Build Validation:&lt;/strong&gt; Ran npm run build to generate the production dist/ folder, identifying and resolving dependency and code-level errors.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;CI/CD Pipeline Setup:&lt;/strong&gt; Connected the GitHub repository to Hostinger’s built-in deployment service using SSH Deploy Keys.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Output Directory Mapping:&lt;/strong&gt; Configured the deployment settings to ensure the server correctly identifies and moves the dist/ folder to the live public_html directory.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;3. Problems Encountered &amp;#x26; Solutions&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Build Crash (Cannot read properties of undefined):&lt;/strong&gt; * &lt;em&gt;Problem:&lt;/em&gt; The production build is &quot;strict&quot; and crashed because the code was attempting to access properties (.toString()) on missing or empty data objects in the projects list.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;Solution:&lt;/em&gt; Implemented &quot;Guard Clauses&quot; and &quot;Optional Chaining&quot; (?.) in ProjectSection.astro to safely handle missing project data without crashing the build engine.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Development vs. Production Discrepancy:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;Problem:&lt;/em&gt; The site worked on localhost but failed during npm run build.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;Resolution:&lt;/em&gt; Recognized that local development environments are &quot;forgiving&quot; (only rendering what is visited), whereas production builds perform a &quot;full coverage&quot; check of all pages.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Deployment Script Error (No output directory found):&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;Problem:&lt;/em&gt; Hostinger couldn&apos;t locate the generated build artifacts.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;em&gt;Solution:&lt;/em&gt; Explicitly mapped the &quot;Output Directory&quot; setting in Hostinger hPanel to match the project&apos;s dist folder.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;4. Current Status&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Deployment:&lt;/strong&gt; Successfully live.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Workflow:&lt;/strong&gt; Automated via GitHub push.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Immediate Next Steps:&lt;/strong&gt; Review the project list on the site; fix the individual project data entries that triggered the original build errors so they can be safely uncommented and displayed.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Here is a summary of the tasks, technical challenges, and solutions from our deployment session today, organized for your notes:&lt;/p&gt;
&lt;h2&gt;Deployment Summary: Hostinger &amp;#x26; GitHub CI/CD&lt;/h2&gt;
&lt;p&gt;Put simply, 3D rendering is the process of using a computer to generate a 2D image from a digital three-dimensional scene.&lt;/p&gt;
&lt;p&gt;To generate an image, specific methodologies and special software and hardware are used. Therefore, we need to understand that 3D rendering is a process—the one that builds the image.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./nikola-arsov-still-life-interior-design-vray-3ds-max-05-930px.jpg&quot; alt=&quot;alt text&quot;&gt;&lt;/p&gt;
&lt;h2&gt;Types of 3D rendering&lt;/h2&gt;
&lt;p&gt;We can create different types of rendered image; they can be realistic or non-realistic.&lt;/p&gt;
&lt;p&gt;A realistic image could be an architectural interior that looks like a photograph, a product-design image such as a piece of furniture, or an automotive rendering of a car. On the other hand, we can create a non-realistic image such as an outline-type diagram or a cartoon-style image with a traditional 2D look. Technically, we can visualize anything we can imagine.&lt;/p&gt;
&lt;h2&gt;How is 3D rendering used?&lt;/h2&gt;
&lt;p&gt;3D rendering is an essential technique for many industries including architecture, product design, advertising, video games and visual effects for film, TV and animation.&lt;/p&gt;
&lt;p&gt;In design and architecture, renders allow creative people to communicate their ideas in a clear and transparent way. A render gives them the chance to evaluate their proposals, experiment with materials, conduct studies and contextualize their designs in the real world before they are built or manufactured.&lt;/p&gt;
&lt;p&gt;For the media and entertainment industries, 3D rendering is fundamental to the creation of sequences and animations that tell stories, whether we’re watching an animated movie, a period drama, or an action sequence with explosions, ships from the future, exotic locales, or extraterrestrial creatures.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./thanos-dd-single-image-004a.jpg&quot; alt=&quot;alt text&quot;&gt;&lt;/p&gt;
&lt;p&gt;Over the past few years, the evolution of computer graphics in these industries has replaced traditional techniques. For example, special effects are being replaced by visual effects, which means stunt people no longer risk their lives in car crashes.&lt;/p&gt;
&lt;p&gt;In advertising, I would dare to say that 90% of automotive commercials are CG—or even more. In the architecture industry, many traditional techniques to create representations, such as scale models, have been replaced with photorealistic imagery to ensure we can see exactly how something will look once it’s built.&lt;/p&gt;
&lt;p&gt;Accelerating processes, reducing costs and the demand for better quality results have helped technology evolve. Hardware is more powerful than ever and the switch to CG was inevitable.&lt;/p&gt;
&lt;h2&gt;How is a 3D rendered image generated?&lt;/h2&gt;
&lt;p&gt;Two pieces of software, with different characteristics, are used to computer-generate images and animations: render engines and game engines. Render engines use a technique called ray tracing, while game engines use a technique called rasterization—and some engines mix both techniques, but we will talk about that later on.&lt;/p&gt;</content:encoded><h:img src="/_astro/thumbnail.DzZDiYKA.jpg"/><enclosure url="/_astro/thumbnail.DzZDiYKA.jpg"/></item><item><title>Using MDX</title><link>https://astro-pure.js.org/blog/using-mdx</link><guid isPermaLink="true">https://astro-pure.js.org/blog/using-mdx</guid><description>Learning how to use MDX in Astro</description><pubDate>Sun, 01 Jun 2025 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;This theme comes with the &lt;a href=&quot;https://docs.astro.build/en/guides/integrations-guide/mdx/&quot;&gt;@astrojs/mdx&lt;/a&gt; integration installed and configured in your &lt;code&gt;astro.config.ts&lt;/code&gt; config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.&lt;/p&gt;
&lt;h2&gt;Why MDX?&lt;/h2&gt;
&lt;p&gt;MDX is a special flavor of Markdown that supports embedded JavaScript &amp;#x26; JSX syntax. This unlocks the ability to &lt;a href=&quot;https://docs.astro.build/en/guides/markdown-content/#mdx-features&quot;&gt;mix JavaScript and UI Components into your Markdown content&lt;/a&gt; for things like interactive charts or alerts.&lt;/p&gt;
&lt;p&gt;If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.&lt;/p&gt;
&lt;h2&gt;Example&lt;/h2&gt;
&lt;p&gt;Here is how you import and use a UI component inside of MDX.&lt;br&gt;
When you open this page in the browser, you should see the clickable button below.&lt;/p&gt;
&lt;p&gt;import { Button } from &apos;astro-pure/user&apos;&lt;/p&gt;
&lt;p&gt;Click Me&lt;/p&gt;
&lt;h2&gt;More Links&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://mdxjs.com/docs/what-is-mdx&quot;&gt;MDX Syntax Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages&quot;&gt;Astro Usage Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Note:&lt;/strong&gt; &lt;a href=&quot;https://docs.astro.build/en/reference/directives-reference/#client-directives&quot;&gt;Client Directives&lt;/a&gt; are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.&lt;/li&gt;
&lt;/ul&gt;</content:encoded><h:img src="undefined"/><enclosure url="undefined"/></item><item><title>Markdown 语法支持</title><link>https://astro-pure.js.org/blog/markdown-zh</link><guid isPermaLink="true">https://astro-pure.js.org/blog/markdown-zh</guid><description>Markdown 是一种轻量级的「标记语言」。</description><pubDate>Wed, 26 Jul 2023 08:00:00 GMT</pubDate><content:encoded>&lt;h2&gt;基本语法&lt;/h2&gt;
&lt;p&gt;Markdown 是一种轻量级且易于使用的语法，用于为您的写作设计风格。&lt;/p&gt;
&lt;h3&gt;标题&lt;/h3&gt;
&lt;p&gt;文章内容较多时，可以用标题分段：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;# 标题 1

## 标题 2

## 大标题

### 小标题
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;标题预览会打乱文章的结构，所以在此不展示。&lt;/p&gt;
&lt;h3&gt;粗斜体&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;_斜体文本_

**粗体文本**

**_粗斜体文本_**
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;&lt;em&gt;斜体文本&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;粗体文本&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;粗斜体文本&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;链接&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;文字链接 [链接名称](http://链接网址)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;文字链接 &lt;a href=&quot;http://%E9%93%BE%E6%8E%A5%E7%BD%91%E5%9D%80&quot;&gt;链接名称&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;行内代码&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;这是一条 `单行代码`
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;这是一条 &lt;code&gt;行内代码&lt;/code&gt;&lt;/p&gt;
&lt;h3&gt;代码块&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;```js
// calculate fibonacci
function fibonacci(n) {
  if (n &amp;#x3C;= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;// calculate fibonacci
function fibonacci(n) {
  if (n &amp;#x3C;= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;当前使用 shiki 作为代码高亮插件，支持的语言请参考 &lt;a href=&quot;https://shiki.matsu.io/languages.html&quot;&gt;shiki / languages&lt;/a&gt;。&lt;/p&gt;
&lt;h3&gt;行内公式&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;这是一条行内公式 $e^{i\pi} + 1 = 0$
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;这是一条行内公式 $e^{i\pi} + 1 = 0$&lt;/p&gt;
&lt;h3&gt;公式块&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;$$
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx
$$
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;$$
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} , dx
$$&lt;/p&gt;
&lt;p&gt;当前使用 KaTeX 作为数学公式插件，支持的语法请参考 &lt;a href=&quot;https://katex.org/docs/supported.html&quot;&gt;KaTeX Supported Functions&lt;/a&gt;。&lt;/p&gt;
&lt;h4&gt;图片&lt;/h4&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;![CWorld](https://gravatar.loli.net/avatar/1ffe42aa45a6b1444a786b1f32dfa8aa?s=200)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://gravatar.loli.net/avatar/1ffe42aa45a6b1444a786b1f32dfa8aa?s=200&quot; alt=&quot;CWorld&quot;&gt;&lt;/p&gt;
&lt;h4&gt;删除线&lt;/h4&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;~~删除线~~
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;~~删除线~~&lt;/p&gt;
&lt;h3&gt;列表&lt;/h3&gt;
&lt;p&gt;普通无序列表&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;- 1
- 2
- 3
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;1&lt;/li&gt;
&lt;li&gt;2&lt;/li&gt;
&lt;li&gt;3&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;普通有序列表&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;1. GPT-4
2. Claude Opus
3. LLaMa
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;GPT-4&lt;/li&gt;
&lt;li&gt;Claude Opus&lt;/li&gt;
&lt;li&gt;LLaMa&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;列表里可以继续嵌套语法&lt;/p&gt;
&lt;h3&gt;引用&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;&gt; 枪响，雷鸣，剑起。繁花血景。
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;枪响，雷鸣，剑起。繁花血景。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;引用里也可以继续嵌套语法。&lt;/p&gt;
&lt;h3&gt;换行&lt;/h3&gt;
&lt;p&gt;markdown 分段落是需要空一行的。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;如果不空行
就会在一段

第一段

第二段
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;如果不空行
就会在一段&lt;/p&gt;
&lt;p&gt;第一段&lt;/p&gt;
&lt;p&gt;第二段&lt;/p&gt;
&lt;h3&gt;分隔符&lt;/h3&gt;
&lt;p&gt;如果你有写分割线的习惯，可以新起一行输入三个减号&lt;code&gt;---&lt;/code&gt; 或者星号 &lt;code&gt;***&lt;/code&gt;。当前后都有段落时，请空出一行：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;---
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;高级技巧&lt;/h2&gt;
&lt;h3&gt;行内 HTML 元素&lt;/h3&gt;
&lt;p&gt;目前只支持部分段内 HTML 元素效果，包括 &lt;code&gt;&amp;#x3C;kdb&gt; &amp;#x3C;b&gt; &amp;#x3C;i&gt; &amp;#x3C;em&gt; &amp;#x3C;sup&gt; &amp;#x3C;sub&gt; &amp;#x3C;br&gt;&lt;/code&gt; ，如&lt;/p&gt;
&lt;h4&gt;键位显示&lt;/h4&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;使用 &amp;#x3C;kbd&gt;Ctrl&amp;#x3C;/kbd&gt; + &amp;#x3C;kbd&gt;Alt&amp;#x3C;/kbd&gt; + &amp;#x3C;kbd&gt;Del&amp;#x3C;/kbd&gt; 重启电脑
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;使用 Ctrl + Alt + Del 重启电脑&lt;/p&gt;
&lt;h4&gt;粗斜体&lt;/h4&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;&amp;#x3C;b&gt; Markdown 在此处同样适用，如 _加粗_ &amp;#x3C;/b&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt; Markdown 在此处同样适用，如 &lt;em&gt;加粗&lt;/em&gt; &lt;/p&gt;
&lt;h3&gt;其他 HTML 写法&lt;/h3&gt;
&lt;h4&gt;折叠块&lt;/h4&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;&amp;#x3C;details&gt;&amp;#x3C;summary&gt;点击展开&amp;#x3C;/summary&gt;它被隐藏了&amp;#x3C;/details&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;h3&gt;表格&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;| 表头1 | 表头2 |
| ----- | ----- |
| 内容1 | 内容2 |
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;| 表头1 | 表头2 |
| ----- | ----- |
| 内容1 | 内容2 |&lt;/p&gt;
&lt;h3&gt;注释&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;在引用的地方使用 [^注释] 来添加注释。

然后在文档的结尾，添加注释的内容（会默认于文章结尾渲染之）。

[^注释]: 这里是注释的内容
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;在引用的地方使用 &lt;a href=&quot;%E8%BF%99%E9%87%8C%E6%98%AF%E6%B3%A8%E9%87%8A%E7%9A%84%E5%86%85%E5%AE%B9&quot;&gt;^注释&lt;/a&gt; 来添加注释。&lt;/p&gt;
&lt;p&gt;然后在文档的结尾，添加注释的内容（会默认于文章结尾渲染之）。&lt;/p&gt;
&lt;h3&gt;To-Do 列表&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;- [ ] 未完成的任务
- [x] 已完成的任务
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;[ ] 未完成的任务&lt;/li&gt;
&lt;li&gt;[x] 已完成的任务&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;符号转义&lt;/h3&gt;
&lt;p&gt;如果你的描述中需要用到 markdown 的符号，比如 _ # * 等，但又不想它被转义，这时候可以在这些符号前加反斜杠，如 &lt;code&gt;\_&lt;/code&gt; &lt;code&gt;\#&lt;/code&gt; &lt;code&gt;\*&lt;/code&gt; 进行避免。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;\_不想这里的文本变斜体\_

\*\*不想这里的文本被加粗\*\*
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;预览：&lt;/p&gt;
&lt;p&gt;_不想这里的文本变斜体_&lt;/p&gt;
&lt;p&gt;**不想这里的文本被加粗**&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;内嵌 Astro 组件&lt;/h2&gt;
&lt;p&gt;See &lt;a href=&quot;/docs/integrations/components&quot;&gt;User Components&lt;/a&gt; and &lt;a href=&quot;/docs/integrations/advanced&quot;&gt;Advanced Components&lt;/a&gt; for details.&lt;/p&gt;</content:encoded><h:img src="/_astro/thumbnail.HAXFr_hw.jpg"/><enclosure url="/_astro/thumbnail.HAXFr_hw.jpg"/></item></channel></rss>