<?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: Anwar Achilles</title>
    <description>The latest articles on DEV Community by Anwar Achilles (@anwarachilles).</description>
    <link>https://dev.to/anwarachilles</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%2F1423605%2Fdc437c40-7251-43f4-8c6e-55951ca38546.jpeg</url>
      <title>DEV Community: Anwar Achilles</title>
      <link>https://dev.to/anwarachilles</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/anwarachilles"/>
    <language>en</language>
    <item>
      <title>Example Online Postgre with Neon.com – Rune + RedBean CLI Application</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sat, 04 Oct 2025 14:59:16 +0000</pubDate>
      <link>https://dev.to/anwarachilles/example-online-postgre-rune-redbean-cli-application-5b0p</link>
      <guid>https://dev.to/anwarachilles/example-online-postgre-rune-redbean-cli-application-5b0p</guid>
      <description>&lt;p&gt;This project is an &lt;strong&gt;example CLI application&lt;/strong&gt; demonstrating how to use &lt;strong&gt;Neon PostgreSQL&lt;/strong&gt; (a fully managed cloud PostgreSQL platform) in combination with &lt;strong&gt;Rune&lt;/strong&gt; and &lt;strong&gt;RedBeanPHP&lt;/strong&gt;. The application allows you to perform CRUD operations on a &lt;code&gt;user&lt;/code&gt; table directly from the CLI, making it perfect for developers who want a lightweight, fast, and flexible way to interact with a database without building a full web interface.&lt;/p&gt;

&lt;p&gt;The project leverages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Neon PostgreSQL&lt;/strong&gt; – cloud-hosted PostgreSQL database&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rune&lt;/strong&gt; – for CLI management and scripting&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;RedBeanPHP&lt;/strong&gt; – lightweight ORM for PHP&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Create, read, update, and delete users using CLI commands.&lt;/li&gt;
&lt;li&gt;Easily create database tables via scripts.&lt;/li&gt;
&lt;li&gt;Works with Neon PostgreSQL in the cloud.&lt;/li&gt;
&lt;li&gt;Clean, simple, and easy-to-extend structure.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Installation &amp;amp; Setup
&lt;/h2&gt;

&lt;p&gt;Follow these steps to get started:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. Clone the repository
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/AnwarAchilles/example-online-postgre.git
&lt;span class="nb"&gt;cd &lt;/span&gt;example-online-postgre
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;2. Load vendor packages
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;composer &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;3. Configure database connection
Edit the main setup file where RedBean connects to Neon PostgreSQL. Replace placeholders with your Neon credentials:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="nv"&gt;$NEON_HOST&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$NEON_DB&lt;/span&gt;   &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$NEON_USER&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$NEON_PASS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nc"&gt;R&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s2"&gt;"pgsql:host=&lt;/span&gt;&lt;span class="nv"&gt;$NEON_HOST&lt;/span&gt;&lt;span class="s2"&gt;;dbname=&lt;/span&gt;&lt;span class="nv"&gt;$NEON_DB&lt;/span&gt;&lt;span class="s2"&gt;;sslmode=require"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nv"&gt;$NEON_USER&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nv"&gt;$NEON_PASS&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using placeholders keeps your credentials safe for sharing or pushing to a repository.&lt;/p&gt;




&lt;h2&gt;
  
  
  Running the Application
&lt;/h2&gt;

&lt;p&gt;To start the CLI application:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php cast
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will show available commands and let you run scripts, manage users, or view results.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; &lt;span class="c"&gt;#  R E G I S T E R E D.&lt;/span&gt;
 ♦ php cast script
    &lt;span class="c"&gt;#≈ runs a script, e.g., creating database t&lt;/span&gt;
    ables.
 ♦ php cast result
    &lt;span class="c"&gt;#≈ lists all user emails in the database.&lt;/span&gt;
 ♦ php cast create
    &lt;span class="c"&gt;#≈ create a new user, --email=(string)&lt;/span&gt;
 ♦ php cast update
    &lt;span class="c"&gt;#≈ update an existing user, --id=(int) --em&lt;/span&gt;
    &lt;span class="nv"&gt;ail&lt;/span&gt;&lt;span class="o"&gt;=(&lt;/span&gt;string&lt;span class="o"&gt;)&lt;/span&gt;
 ♦ php cast delete
    &lt;span class="c"&gt;#≈ delete an existing user, --id=(int)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step by Step
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;1. Create the user table
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php cast script
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This runs the script to create a user table if it does not exist.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;2. Add a new user
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php cast create &lt;span class="nt"&gt;--email&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;demo@mail.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Adds a new user to the database.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;3. View all users
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php cast result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lists all emails currently stored.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;4. Update a user’s email
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php cast update &lt;span class="nt"&gt;--id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;1 &lt;span class="nt"&gt;--email&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;updated@mail.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Updates the email for the user with id=1.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;5. Delete a user
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php cast delete &lt;span class="nt"&gt;--id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Removes the user from the database.&lt;/p&gt;




&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/devneet-id/rune" rel="noopener noreferrer"&gt;Rune GitHub&lt;/a&gt; - Mangement Tools&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://neon.com/" rel="noopener noreferrer"&gt;Neon&lt;/a&gt; - Managed PostgreSQL&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.redbeanphp.com" rel="noopener noreferrer"&gt;RedBeanPHP&lt;/a&gt; - Lightweight ORM for PHP&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/AnwarAchilles/example-online-postgre" rel="noopener noreferrer"&gt;Repo&lt;/a&gt; - Github Repository&lt;/li&gt;
&lt;/ul&gt;




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

&lt;p&gt;This project is an example showing how to integrate and use &lt;strong&gt;Neon PostgreSQL&lt;/strong&gt; in PHP, with database management organized neatly using &lt;strong&gt;Rune&lt;/strong&gt;. It demonstrates how to perform CRUD operations via CLI commands with RedBean, making it easy to understand the workflow and structure when working with a cloud PostgreSQL database.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Exploring the Concept of RUNE: A Dev Tool That’s Still Evolving</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sat, 19 Jul 2025 12:28:05 +0000</pubDate>
      <link>https://dev.to/anwarachilles/exploring-the-concept-of-rune-a-dev-tool-thats-still-evolving-1271</link>
      <guid>https://dev.to/anwarachilles/exploring-the-concept-of-rune-a-dev-tool-thats-still-evolving-1271</guid>
      <description>&lt;p&gt;&lt;strong&gt;Rune&lt;/strong&gt; is a lore-driven, modular concept beneath PHP,&lt;br&gt;
designed not to dictate development — but to respond to it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;/blockquote&gt;


&lt;h2&gt;
  
  
  A B O U T
&lt;/h2&gt;

&lt;p&gt;Within Rune’s architecture:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Ether&lt;/strong&gt; defines truth
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Essence&lt;/strong&gt; holds flow
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Entity&lt;/strong&gt; performs behavior
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each is &lt;strong&gt;awakened only when invoked&lt;/strong&gt; — making every element:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Composable 🧩
&lt;/li&gt;
&lt;li&gt;Lazy-loaded 🌙
&lt;/li&gt;
&lt;li&gt;Purpose-driven 🎯
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Rune is inherently &lt;strong&gt;lightweight&lt;/strong&gt; and &lt;strong&gt;adaptable&lt;/strong&gt;, ideal for systems that grow from &lt;strong&gt;concept&lt;/strong&gt;, not convention. Whether you’re shaping internal tools, backend systems, or modular workflows — Rune lets developers sculpt &lt;strong&gt;structure from intent&lt;/strong&gt;, not instruction.&lt;/p&gt;


&lt;h2&gt;
  
  
  C O R E
&lt;/h2&gt;

&lt;p&gt;Here’s a breakdown of the core components in Rune's system:&lt;/p&gt;
&lt;h3&gt;
  
  
  ✦ Manifest
&lt;/h3&gt;

&lt;p&gt;A &lt;strong&gt;static class&lt;/strong&gt; copied from the main controller. Used as a full-feature blueprint that users can modify and extend directly.&lt;/p&gt;
&lt;h3&gt;
  
  
  ✦ Ether
&lt;/h3&gt;

&lt;p&gt;An &lt;strong&gt;absolute, unchangeable constant&lt;/strong&gt;. Reflects rules and system-wide options — the &lt;em&gt;truth&lt;/em&gt; within the architecture.&lt;/p&gt;
&lt;h3&gt;
  
  
  ✦ Essence
&lt;/h3&gt;

&lt;p&gt;A &lt;strong&gt;mutable global state&lt;/strong&gt;. Holds dynamic data, constantly changing to reflect the system's current flow.&lt;/p&gt;
&lt;h3&gt;
  
  
  ✦ Entity
&lt;/h3&gt;

&lt;p&gt;A &lt;strong&gt;function&lt;/strong&gt;, representing a small logical behavior. Part of a broader process — activated only when needed.&lt;/p&gt;
&lt;h3&gt;
  
  
  ✦ Phantasm
&lt;/h3&gt;

&lt;p&gt;An &lt;strong&gt;auxiliary static class&lt;/strong&gt;, like a shadow of Manifest. Ideal for fallback logic or mirrored behaviors without direct control.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;💡 &lt;em&gt;Rune is not a framework. It's a concept to shape intention-first architecture beneath PHP.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;


&lt;h2&gt;
  
  
  S T R U C T U R E
&lt;/h2&gt;

&lt;p&gt;Here’s a basic overview of how a Rune-powered PHP file is structured:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;
&lt;span class="c1"&gt;// Autoload using PSR-4 standard&lt;/span&gt;
&lt;span class="k"&gt;require_once&lt;/span&gt; &lt;span class="k"&gt;__DIR__&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s1"&gt;'/vendor/autoload.php'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Importing Manifest classes for different modules&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Rune\Aether\Manifest&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nc"&gt;Aether&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Rune\Chanter\Manifest&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nc"&gt;Chanter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Rune\Weaver\Manifest&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nc"&gt;Weaver&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;use&lt;/span&gt; &lt;span class="nc"&gt;Rune\Whisper\Manifest&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nc"&gt;Whisper&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// ... Add more modules as needed&lt;/span&gt;

&lt;span class="c1"&gt;// Each Manifest exposes three key components:&lt;/span&gt;
&lt;span class="c1"&gt;// - ether()   → immutable constants (rules/options)&lt;/span&gt;
&lt;span class="c1"&gt;// - essence() → mutable state/data (flow)&lt;/span&gt;
&lt;span class="c1"&gt;// - entity()  → functional behavior (action/logic)&lt;/span&gt;
&lt;span class="nc"&gt;Aether&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;ether&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;essence&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;entity&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nc"&gt;Chanter&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;ether&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;essence&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;entity&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nc"&gt;Weaver&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;ether&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;essence&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;entity&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nc"&gt;Whisper&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;ether&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;essence&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;entity&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="c1"&gt;// ... Extendable across modules&lt;/span&gt;

&lt;span class="c1"&gt;// Start the Rune lifecycle&lt;/span&gt;
&lt;span class="nc"&gt;Aether&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;begin&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;   &lt;span class="c1"&gt;// Bootstraps or initializes the module&lt;/span&gt;

&lt;span class="c1"&gt;// "Playground" — your logic lives here&lt;/span&gt;
&lt;span class="nc"&gt;Aether&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;dd&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'welcome here'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt; &lt;span class="c1"&gt;// Debug/Display output&lt;/span&gt;

&lt;span class="c1"&gt;// End the Rune lifecycle&lt;/span&gt;
&lt;span class="nc"&gt;Aether&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nb"&gt;end&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;     &lt;span class="c1"&gt;// Gracefully terminate or finalize module processes&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php &lt;span class="o"&gt;{&lt;/span&gt;FILE&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  B U I L T - I N
&lt;/h2&gt;

&lt;h3&gt;
  
  
  ✦ Grimoire
&lt;/h3&gt;

&lt;p&gt;The grimoire is a dynamic record of the system including the phantasm of runes, and the arcane of logs.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php &lt;span class="o"&gt;{&lt;/span&gt;FILE&lt;span class="o"&gt;}&lt;/span&gt; grimoire
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ✦ Sentinel
&lt;/h3&gt;

&lt;p&gt;sentinels act as your right hand in building systems with runes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php &lt;span class="o"&gt;{&lt;/span&gt;FILE&lt;span class="o"&gt;}&lt;/span&gt; sentinel
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  ✦ Artefact
&lt;/h3&gt;

&lt;p&gt;An artifact reflects a backup or fragment of a system built in the past.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;php &lt;span class="o"&gt;{&lt;/span&gt;FILE&lt;span class="o"&gt;}&lt;/span&gt; artefact
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🖼️ I N T E R F A C E
&lt;/h2&gt;

&lt;p&gt;A visual glimpse into Rune’s internal experience.&lt;br&gt;&lt;br&gt;
Each interface represents a distinct layer of the system — from entry to execution.&lt;/p&gt;

&lt;h3&gt;
  
  
  ✦ Entrance
&lt;/h3&gt;

&lt;p&gt;The starting point of every Rune invocation.&lt;br&gt;&lt;br&gt;
Shows basic module loads, version info, and preflight checks.&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%2Fczbonj83lrb79s8sjo7j.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%2Fczbonj83lrb79s8sjo7j.png" alt="Entrance" width="800" height="753"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ✦ Built-in
&lt;/h3&gt;

&lt;p&gt;Displays available built-in commands (grimoire, sentinel, artefact).&lt;br&gt;&lt;br&gt;
Think of it as your spellbook index — fast access to internal magic.&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%2F7t3jnnduez8m4wes7gbz.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%2F7t3jnnduez8m4wes7gbz.png" alt="Built-in" width="800" height="455"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ✦ Grimoire Rune
&lt;/h3&gt;

&lt;p&gt;Visual snapshot of the &lt;strong&gt;grimoire&lt;/strong&gt; — a system record&lt;br&gt;&lt;br&gt;
containing phantasms, metadata, and spell traces (rune logs).&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%2Fr1keogyiv5guau5locg8.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%2Fr1keogyiv5guau5locg8.png" alt="Grimoire rune" width="800" height="912"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ✦ Runtime Summary
&lt;/h3&gt;

&lt;p&gt;Logs the execution performance of a rune:&lt;br&gt;&lt;br&gt;
including time spent, memory usage, and exit state.&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%2Fglcfz2vbxfomisd68qp3.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%2Fglcfz2vbxfomisd68qp3.png" alt="Runtime Summary" width="751" height="83"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ✦ Arcane Logs
&lt;/h3&gt;

&lt;p&gt;Deep dive into the mysterious flow of behavior.&lt;br&gt;&lt;br&gt;
These logs track function calls, essence changes, and triggered entities.&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%2Fze3fmr56u3w95ilga12n.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%2Fze3fmr56u3w95ilga12n.png" alt="Arcane Logs" width="800" height="463"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ✦ Zero Trust
&lt;/h3&gt;

&lt;p&gt;is a special mode where Rune limits its behavior strictly to the main process — ignoring arcane logs, bypassing the Chanter lifecycle, and preventing Whisper from triggering any end-phase emissions. This mode is ideal for clean execution environments where minimal interference and full isolation are required.&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%2F3pbi6e6gs4vdgn19porp.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%2F3pbi6e6gs4vdgn19porp.png" alt=" " width="784" height="300"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  E X I T
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://github.com/devneet-id/rune" rel="noopener noreferrer"&gt;🔗 https://github.com/devneet-id/rune&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Rune is still under active development and refinement.&lt;br&gt;&lt;br&gt;
The current implementation serves as a &lt;strong&gt;foundation&lt;/strong&gt;, laying out its lore-driven modular system — where each part reflects a story, structure, and purpose — but many advanced features and deeper integrations are still being built.&lt;/p&gt;

&lt;p&gt;This version is best suited for &lt;strong&gt;experimental use&lt;/strong&gt;, early contributions, or for developers exploring modular, composable systems outside of conventional frameworks.&lt;br&gt;&lt;br&gt;
Stability may vary between modules, and certain built-in tools (like &lt;code&gt;Grimoire&lt;/code&gt;, &lt;code&gt;Sentinel&lt;/code&gt;, and &lt;code&gt;Artifact&lt;/code&gt;) are still evolving toward their intended forms.&lt;/p&gt;

&lt;p&gt;Originally, Rune was something I built for personal use —&lt;br&gt;&lt;br&gt;
a tool to simplify tasks like automation, bundling, backup, benchmarking, and unit-testing.&lt;br&gt;&lt;br&gt;
Over time, it evolved into something deeper: a modular concept inspired by structure, clarity, and story.&lt;/p&gt;

&lt;p&gt;If you find value in its design, or feel curious about how it's built,&lt;br&gt;&lt;br&gt;
feel free to explore, fork, contribute, or simply watch the project unfold over time.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;The device is not yet complete — but its potential is waking.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>opensource</category>
      <category>php</category>
      <category>news</category>
    </item>
    <item>
      <title>Simple Pic Upload Preview</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sun, 01 Jun 2025 14:05:52 +0000</pubDate>
      <link>https://dev.to/anwarachilles/simple-pic-upload-preview-1nje</link>
      <guid>https://dev.to/anwarachilles/simple-pic-upload-preview-1nje</guid>
      <description>&lt;p&gt;This is a simple program for a file input form with image preview functionality. Users can select an image, and it will be displayed instantly before uploading. It’s easy to use and can be further developed to fit more advanced needs. Hope you like it! 💕✨&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🖥️ Showcase Preview:
&lt;/h2&gt;


&lt;div&gt;
    &lt;iframe src="https://www.youtube.com/embed/O51tw2bOLKc"&gt;
    &lt;/iframe&gt;
  &lt;/div&gt;
&lt;br&gt;
&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/YPXqyZR?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;br&gt;

&lt;h2&gt;
  
  
  🔗 Visit My Channel
&lt;/h2&gt;

&lt;p&gt;If you're interested in learning more, check out my YouTube channel where I share tutorials, tips, and coding experiments. Don't forget to subscribe and stay tuned for more!&lt;br&gt;
&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;youtube.com/@anwarachilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles" rel="noopener noreferrer"&gt;tiktok.com/@anwar.achilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Let’s Connect!
&lt;/h2&gt;

&lt;p&gt;Let’s connect more closely! Follow my social media accounts below, and don’t hesitate to reach out if you have exciting ideas for experiments or collaborations.&lt;br&gt;
&lt;a href="https://anwarachilles.pro" rel="noopener noreferrer"&gt;anwarachilles.pro&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.instagram.com/anwar_achilles" rel="noopener noreferrer"&gt;instagram.com/anwar_achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/AnwarAchilles" rel="noopener noreferrer"&gt;github.com/AnwarAchilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Glam Up My Markup: ❄️ Celebrations Winter Solstice</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Tue, 24 Dec 2024 00:03:13 +0000</pubDate>
      <link>https://dev.to/anwarachilles/glam-up-my-markup-winter-solstice-162n</link>
      <guid>https://dev.to/anwarachilles/glam-up-my-markup-winter-solstice-162n</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend-2024-12-04"&gt;Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;This landing page is designed to showcase not only a visually stunning and interactive UI/UX but also a highly optimized performance. The theme revolves around the winter solstice, complemented by an AI-generated image as the opening element. This carefully selected image serves as a bold invitation to embrace the beauty of a winter sunrise.&lt;/p&gt;

&lt;p&gt;You can explore more inspiration behind the design through this Pinterest board: &lt;a href="https://id.pinterest.com/pin/306385580915655056" rel="noopener noreferrer"&gt;https://id.pinterest.com/pin/306385580915655056&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The page combines creative code snippets and innovative elements like Overlay Scrolling, Observer Elements, and a snowflake animation. This snowflake effect isn't a simple looped animation—it perfectly aligns with user interactions, creating a cohesive and immersive experience.&lt;/p&gt;

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

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/wHAXKWRHyZo"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/JoPJExx?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;During the journey of building this landing page, I delved into techniques that blend design and performance optimization. The challenge was to make every element feel interactive yet smooth. I utilized technologies like Overlay Scrolling and Observer Elements to provide seamless user experiences.&lt;/p&gt;

&lt;p&gt;One of the most rewarding parts was crafting the snowflake animation. It follows the user’s interactions fluidly, enhancing the overall winter theme without compromising on performance. I’m particularly proud of how it turned out, as it feels alive and responsive, unlike static animations.&lt;/p&gt;

&lt;p&gt;For the next steps, I aim to incorporate more AI-generated visuals to elevate the page's artistic touch and continue refining the animations for even better performance. Collecting user feedback will also be vital in enhancing the overall experience and ensuring it resonates with the audience.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>frontendchallenge</category>
      <category>css</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Custom YouTube Player Gadget with Javascript</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sat, 21 Dec 2024 16:46:28 +0000</pubDate>
      <link>https://dev.to/anwarachilles/custom-youtube-player-gadget-39ke</link>
      <guid>https://dev.to/anwarachilles/custom-youtube-player-gadget-39ke</guid>
      <description>&lt;p&gt;This &lt;strong&gt;YouTube Video Player&lt;/strong&gt; is created using the &lt;strong&gt;YouTube Player API&lt;/strong&gt; with an iframe-based structure. It is built with JavaScript and packaged as a ready-to-use class, ensuring ease of use and customization. This project is a collaboration with the YouTube channel &lt;strong&gt;Its Nocturna&lt;/strong&gt;, featuring a curated music playlist paired with a stunning visualizer.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🖥️ Codepen Preview
&lt;/h2&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/GgKmdor?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ✨ About This Collaboration
&lt;/h3&gt;

&lt;p&gt;This project seamlessly blends technology and creativity to deliver a captivating user experience.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Development&lt;/strong&gt;: Designed and developed by &lt;strong&gt;Anwar Achilles&lt;/strong&gt;, the custom YouTube player is a versatile and robust solution built to enhance user interaction. With features like playlist integration, customizable themes, looping options, and seamless performance, this library offers a high degree of flexibility for various use cases.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Content&lt;/strong&gt;: Curated by &lt;strong&gt;Its Nocturna&lt;/strong&gt;, the playlist is a carefully selected collection of NIGHTCORE tracks that elevate the visualizer experience, perfectly syncing music.&lt;/p&gt;

&lt;p&gt;This collaboration highlights the power of combining innovative development with creative content to push the boundaries of what technology can achieve in music and entertainment.&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Project Highlights
&lt;/h2&gt;
&lt;h3&gt;
  
  
  🚀 Anwar Achilles
&lt;/h3&gt;

&lt;p&gt;Custom YouTube Player Gadget&lt;br&gt;
&lt;a href="https://youtube.com/shorts/Dm03oP-1qik" rel="noopener noreferrer"&gt;Short Video on YouTube&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles/video/7450889756721859848" rel="noopener noreferrer"&gt;Short Video on TikTok&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🚀 Its Nocturna
&lt;/h3&gt;

&lt;p&gt;NIGHTCORE - 100$ (Løvesick) Speed Up Version&lt;br&gt;
&lt;a href="https://youtube.com/shorts/Dm03oP-1qik" rel="noopener noreferrer"&gt;Short Music on YoutTube&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.youtube.com/watch?v=qrcTBZlKd60" rel="noopener noreferrer"&gt;Full Music on Youtube&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Discover Our Work
&lt;/h2&gt;
&lt;h3&gt;
  
  
  🔗 Anwar Achilles
&lt;/h3&gt;

&lt;p&gt;Check out my YouTube for tutorials, tips, and coding experiments. Subscribe for more!&lt;br&gt;
&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;youtube.com/@anwarachilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles" rel="noopener noreferrer"&gt;tiktok.com/@anwar.achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.instagram.com/anwar_achilles" rel="noopener noreferrer"&gt;instagram.com/anwar_achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/AnwarAchilles" rel="noopener noreferrer"&gt;github.com/AnwarAchilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://anwarachilles.pro" rel="noopener noreferrer"&gt;anwarachilles.pro&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  🔗 Its Nocturna
&lt;/h3&gt;

&lt;p&gt;Explore high-energy NIGHTCORE tracks and stunning visuals. Subscribe for more captivating music playlists!&lt;br&gt;
&lt;a href="https://www.youtube.com/@its.nocturna" rel="noopener noreferrer"&gt;youtube.com/@its.nocturna&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.nightcore.com/" rel="noopener noreferrer"&gt;Member of Nightcore Community&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;


&lt;p&gt;Hope you like it! 😊&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>youtube</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Targeted Element Parallax with Javascript</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Mon, 16 Dec 2024 22:04:18 +0000</pubDate>
      <link>https://dev.to/anwarachilles/targeted-element-parallax-56al</link>
      <guid>https://dev.to/anwarachilles/targeted-element-parallax-56al</guid>
      <description>&lt;p&gt;A &lt;strong&gt;parallax effect&lt;/strong&gt;, but only for HTML object elements? Yes! Here, we'll demonstrate how to create a parallax effect not on the background but instead applied to object elements. Complete with a JavaScript class you can use directly, saving you time and effort.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🖥️ Showcase Preview:
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/gkjM7Ot92v0"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/OPLWOWm?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔗 Visit My Channel
&lt;/h2&gt;

&lt;p&gt;If you're interested in learning more, check out my YouTube channel where I share tutorials, tips, and coding experiments. Don't forget to subscribe and stay tuned for more!&lt;br&gt;
&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;youtube.com/@anwarachilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles" rel="noopener noreferrer"&gt;tiktok.com/@anwar.achilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Let’s Connect!
&lt;/h2&gt;

&lt;p&gt;Let’s connect more closely! Follow my social media accounts below, and don’t hesitate to reach out if you have exciting ideas for experiments or collaborations.&lt;br&gt;
&lt;a href="https://anwarachilles.pro" rel="noopener noreferrer"&gt;anwarachilles.pro&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.instagram.com/anwar_achilles" rel="noopener noreferrer"&gt;instagram.com/anwar_achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/AnwarAchilles" rel="noopener noreferrer"&gt;github.com/AnwarAchilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>codepen</category>
    </item>
    <item>
      <title>Auto Step Input Number with Javascript</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Thu, 12 Dec 2024 17:10:30 +0000</pubDate>
      <link>https://dev.to/anwarachilles/auto-step-input-number-1p7k</link>
      <guid>https://dev.to/anwarachilles/auto-step-input-number-1p7k</guid>
      <description>&lt;p&gt;Have you ever seen a &lt;strong&gt;PIN&lt;/strong&gt; input field? It’s not just one input field but typically 6 separate input boxes. By manipulating the maxLength attribute and using a stepping technique between inputs, you can create a functional PIN input. Here's an example I’ve created for you.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🖥️ Showcase Preview:
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/I4qah_U6czs"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/MYgjZYa?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔗 Visit My Channel
&lt;/h2&gt;

&lt;p&gt;If you're interested in learning more, check out my YouTube channel where I share tutorials, tips, and coding experiments. Don't forget to subscribe and stay tuned for more!&lt;br&gt;
&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;youtube.com/@anwarachilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles" rel="noopener noreferrer"&gt;tiktok.com/@anwar.achilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Let’s Connect!
&lt;/h2&gt;

&lt;p&gt;Let’s connect more closely! Follow my social media accounts below, and don’t hesitate to reach out if you have exciting ideas for experiments or collaborations.&lt;br&gt;
&lt;a href="https://www.anwarachilles.pro" rel="noopener noreferrer"&gt;anwarachilles.pro&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.instagram.com/anwar_achilles" rel="noopener noreferrer"&gt;instagram.com/anwar_achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/AnwarAchilles" rel="noopener noreferrer"&gt;github.com/AnwarAchilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>codepen</category>
    </item>
    <item>
      <title>Image Loading Optimization with Javascript</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sun, 08 Dec 2024 06:12:17 +0000</pubDate>
      <link>https://dev.to/anwarachilles/image-loading-optimization-327e</link>
      <guid>https://dev.to/anwarachilles/image-loading-optimization-327e</guid>
      <description>&lt;p&gt;Optimize your website's &lt;strong&gt;page speed&lt;/strong&gt;, especially when it comes to loading images. If there's just one image, you might not notice the impact, but what if there are 10 images on a single page? Your page will wait for all 10 images to finish loading. The best technique to tackle this is by &lt;strong&gt;optimizing image loading&lt;/strong&gt;. How? Load images only after the page has fully loaded its markup. That's it!&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🖥️ Showcase Preview:
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/RThKHN1Kd7k"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/KwPzQOL?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔗 Visit My Channel
&lt;/h2&gt;

&lt;p&gt;If you're interested in learning more, check out my YouTube channel where I share tutorials, tips, and coding experiments. Don't forget to subscribe and stay tuned for more!&lt;br&gt;
&lt;a href="https://www.anwarachilles.pro" rel="noopener noreferrer"&gt;anwarachilles.pro&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;youtube.com/@anwarachilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles" rel="noopener noreferrer"&gt;tiktok.com/@anwar.achilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Let’s Connect!
&lt;/h2&gt;

&lt;p&gt;Let’s connect more closely! Follow my social media accounts below, and don’t hesitate to reach out if you have exciting ideas for experiments or collaborations.&lt;br&gt;
&lt;a href="https://www.instagram.com/anwar_achilles" rel="noopener noreferrer"&gt;instagram.com/anwar_achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/AnwarAchilles" rel="noopener noreferrer"&gt;github.com/AnwarAchilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>codepen</category>
    </item>
    <item>
      <title>Scrolling Sticky Overlay Effect with Javascript</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Tue, 03 Dec 2024 11:19:25 +0000</pubDate>
      <link>https://dev.to/anwarachilles/scrolling-sticky-overlay-effect-1l4a</link>
      <guid>https://dev.to/anwarachilles/scrolling-sticky-overlay-effect-1l4a</guid>
      <description>&lt;p&gt;Have you ever noticed a page scroll effect that feels like &lt;strong&gt;flipping through a book&lt;/strong&gt;? Here, we’ll create that effect, which we’ll call a scrolling sticky overlay. Below is a short example along with the code.&lt;/p&gt;

&lt;h2&gt;
  
  
  🖥️ Showcase Preview:
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/CayQK1vSNcU"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/LEPpGWE?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🔗 Visit My Channel
&lt;/h2&gt;

&lt;p&gt;If you're interested in learning more, check out my YouTube channel where I share tutorials, tips, and coding experiments. Don't forget to subscribe and stay tuned for more!&lt;br&gt;
&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;youtube.com/@anwarachilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.tiktok.com/@anwar.achilles" rel="noopener noreferrer"&gt;tiktok.com/@anwar.achilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Let’s Connect!
&lt;/h2&gt;

&lt;p&gt;Let’s connect more closely! Follow my social media accounts below, and don’t hesitate to reach out if you have exciting ideas for experiments or collaborations.&lt;br&gt;
&lt;a href="https://www.anwarachilles.pro" rel="noopener noreferrer"&gt;anwarachilles.pro&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.instagram.com/anwar_achilles" rel="noopener noreferrer"&gt;instagram.com/anwar_achilles&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/AnwarAchilles" rel="noopener noreferrer"&gt;github.com/AnwarAchilles&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;p&gt;Hope you like it! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ui</category>
      <category>codepen</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Progress Bar Animation Ideas</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sun, 27 Oct 2024 10:51:28 +0000</pubDate>
      <link>https://dev.to/anwarachilles/codepen-homeprogress-bar-animation-ideas-4hin</link>
      <guid>https://dev.to/anwarachilles/codepen-homeprogress-bar-animation-ideas-4hin</guid>
      <description>&lt;p&gt;Check Out This Pen I Made!&lt;br&gt;
Hey everyone! Check out this new Pen I created on CodePen:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/XWvRdPJ?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;If you want to see more content, feel free to visit my YouTube channel:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;🔗 Visit My YouTube Channel!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ui</category>
      <category>codepen</category>
    </item>
    <item>
      <title>Button Style Variant ideas</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Sat, 12 Oct 2024 20:08:04 +0000</pubDate>
      <link>https://dev.to/anwarachilles/button-style-variant-ideas-1mf8</link>
      <guid>https://dev.to/anwarachilles/button-style-variant-ideas-1mf8</guid>
      <description>&lt;p&gt;Check Out This Pen I Made!&lt;br&gt;
Hey everyone! Check out this new Pen I created on CodePen:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/NWQdzXo?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;If you want to see more content, feel free to visit my YouTube channel:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;🔗 Visit My YouTube Channel!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ui</category>
      <category>codepen</category>
    </item>
    <item>
      <title>Text Wave Animation</title>
      <dc:creator>Anwar Achilles</dc:creator>
      <pubDate>Fri, 11 Oct 2024 23:14:54 +0000</pubDate>
      <link>https://dev.to/anwarachilles/text-wave-animation-2lg2</link>
      <guid>https://dev.to/anwarachilles/text-wave-animation-2lg2</guid>
      <description>&lt;p&gt;Check Out This Pen I Made!&lt;br&gt;
Hey everyone! Check out this new Pen I created on CodePen:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/anwarachilles/embed/XWvpMZQ?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;If you want to see more content, feel free to visit my YouTube channel:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/@anwarachilles" rel="noopener noreferrer"&gt;🔗 Visit My YouTube Channel!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Enjoy! 😊&lt;/p&gt;

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