<?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>Forem: Hao Nguyen</title>
    <description>The latest articles on Forem by Hao Nguyen (@brokensmile2103).</description>
    <link>https://forem.com/brokensmile2103</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%2F3220539%2Ff2095f61-e44f-4777-b538-c556b8be80a2.jpg</url>
      <title>Forem: Hao Nguyen</title>
      <link>https://forem.com/brokensmile2103</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/brokensmile2103"/>
    <language>en</language>
    <item>
      <title>Tank 300IQ — A Smart Ricochet Tank Shooter Right in Your Browser</title>
      <dc:creator>Hao Nguyen</dc:creator>
      <pubDate>Fri, 28 Nov 2025 03:57:47 +0000</pubDate>
      <link>https://forem.com/brokensmile2103/tank-300iq-a-smart-ricochet-tank-shooter-right-in-your-browser-17lm</link>
      <guid>https://forem.com/brokensmile2103/tank-300iq-a-smart-ricochet-tank-shooter-right-in-your-browser-17lm</guid>
      <description>&lt;h1&gt;
  
  
  🚀 Introducing &lt;strong&gt;Tank 300IQ&lt;/strong&gt; — A Ricochet Tank Shooter With Adaptive AI
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Play now:&lt;/strong&gt; &lt;a href="https://en.inithtml.com/tank-300iq/" rel="noopener noreferrer"&gt;https://en.inithtml.com/tank-300iq/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you enjoy fast-paced arena shooters, physics-style ricochet mechanics, and bots that &lt;em&gt;actually learn&lt;/em&gt;, you’ll probably vibe with &lt;strong&gt;Tank 300IQ&lt;/strong&gt; — a tiny-but-chaotic browser tank game where bullets bounce, tanks dash, and both sides shoot down incoming fire mid-air.&lt;/p&gt;

&lt;p&gt;Runs directly in your browser (PC + Mobile), no downloads, no account — just play.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 What Makes Tank 300IQ Special?
&lt;/h2&gt;

&lt;p&gt;Tank 300IQ is built around smart ricochet combat and a tactical AI “brain” per difficulty. Each bot adapts based on how you play, storing its behavior profile in &lt;code&gt;localStorage&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  🧠 &lt;strong&gt;5 Difficulty Levels (Easy → Insane)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Bots can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Lead shots and analyze angles
&lt;/li&gt;
&lt;li&gt;Perform ricochet &amp;amp; multi-bounce calculation
&lt;/li&gt;
&lt;li&gt;Read distance, danger, and advantage
&lt;/li&gt;
&lt;li&gt;Flank, spread out, crossfire, retreat or hold
&lt;/li&gt;
&lt;li&gt;Shoot down incoming bullets
&lt;/li&gt;
&lt;li&gt;
&lt;em&gt;Insane bots can even short-teleport (“blink”) to dodge&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;Use survival-weighted dodge vectors
&lt;/li&gt;
&lt;li&gt;Make shield-aware attack/retreat decisions&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🔥 Game Modes
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Classic&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Fully customizable battles: difficulty, team sizes, bullet speed, bounce count, friendly fire…&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Adventure&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Multi-stage progression with unique maps and boss fights.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Survival / Endless&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Random maps, scaling waves, increasing chaos.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Team Presets&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Instant 1v1, 1vN, full squads, ally teams, anything you want.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎮 Controls
&lt;/h2&gt;

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

&lt;ul&gt;
&lt;li&gt;Move: WASD / Arrow keys
&lt;/li&gt;
&lt;li&gt;Aim: Mouse
&lt;/li&gt;
&lt;li&gt;Fire: Click
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;Left joystick: Move
&lt;/li&gt;
&lt;li&gt;Right joystick: Aim + hold to fire
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Supports &lt;strong&gt;manual control&lt;/strong&gt; or &lt;strong&gt;auto-aim/auto-fire&lt;/strong&gt; using the same tactical brain as the bots (great for mobile).&lt;/p&gt;




&lt;h2&gt;
  
  
  🛡️ Skills (Instant Cast)
&lt;/h2&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;1&lt;/code&gt; — Shield
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;2&lt;/code&gt; — Triple Shot
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;3&lt;/code&gt; — Rally
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;Tap skill icons
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Skill details:&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Shield:&lt;/strong&gt; Temporary bullet immunity
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Triple Shot:&lt;/strong&gt; Lane control, corner traps, multi-hit chains
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rally:&lt;/strong&gt; Player-only squad charge — a well-timed all-in that can flip any match&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🔧 Sandbox Settings
&lt;/h2&gt;

&lt;p&gt;Tune almost anything:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ally/enemy count
&lt;/li&gt;
&lt;li&gt;Difficulty
&lt;/li&gt;
&lt;li&gt;Tank &amp;amp; bullet speed
&lt;/li&gt;
&lt;li&gt;Max bounce
&lt;/li&gt;
&lt;li&gt;Friendly fire
&lt;/li&gt;
&lt;li&gt;Bullet break mode
&lt;/li&gt;
&lt;li&gt;And more…&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything is saved in &lt;code&gt;localStorage&lt;/code&gt;.&lt;br&gt;&lt;br&gt;
The entire game runs &lt;strong&gt;100% client-side JavaScript&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎮 Play Now
&lt;/h2&gt;

&lt;p&gt;👉 &lt;strong&gt;Link:&lt;/strong&gt; &lt;a href="https://en.inithtml.com/tank-300iq/" rel="noopener noreferrer"&gt;https://en.inithtml.com/tank-300iq/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you discover a sick multi-bounce trickshot, let me know — I absolutely want to see it.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>gamedev</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Init View Count – Accurate Post Views with REST API &amp; Custom Shortcodes</title>
      <dc:creator>Hao Nguyen</dc:creator>
      <pubDate>Thu, 26 Jun 2025 16:11:18 +0000</pubDate>
      <link>https://forem.com/brokensmile2103/init-view-count-accurate-post-views-with-rest-api-custom-shortcodes-2hpn</link>
      <guid>https://forem.com/brokensmile2103/init-view-count-accurate-post-views-with-rest-api-custom-shortcodes-2hpn</guid>
      <description>&lt;h2&gt;
  
  
  A fast, minimalist view counter for WordPress – REST-first and developer-friendly
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Init View Count&lt;/strong&gt; tracks post views using JavaScript + REST API for precision and flexibility. It includes shortcodes, tabbed rankings, template overrides, and works with any post type.&lt;/p&gt;

&lt;p&gt;No jQuery. No cookies. No fluff.&lt;/p&gt;




&lt;h3&gt;
  
  
  Features at a Glance
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Lightweight and Accurate
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Tracks views via REST API + scroll + delay logic&lt;/li&gt;
&lt;li&gt;Prevents duplicates with session/localStorage&lt;/li&gt;
&lt;li&gt;Optional batch mode: queue views and send in groups&lt;/li&gt;
&lt;li&gt;Optional strict IP-based filtering (no raw IP storage)&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Flexible Shortcodes
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;[init_view_count]&lt;/code&gt; – show current post view count&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;[init_view_list]&lt;/code&gt; – show list of most viewed posts&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;[init_view_ranking]&lt;/code&gt; – tabbed ranking by day/week/month/total&lt;/li&gt;
&lt;li&gt;Fully theme-overridable templates (&lt;code&gt;your-theme/init-view-count/*.php&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Format options: raw, formatted, short number, schema.org support&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Clean Admin Tools
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Dashboard widget to show top viewed posts&lt;/li&gt;
&lt;li&gt;Settings panel to enable post types, batch, delay, scroll, etc.&lt;/li&gt;
&lt;li&gt;Shortcode builders for all views with live preview&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Minimal Overhead
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;No assets loaded unless shortcode used&lt;/li&gt;
&lt;li&gt;CSS can be disabled completely&lt;/li&gt;
&lt;li&gt;No tracking, no analytics bloat&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Built for Developers
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Custom meta key support via filters&lt;/li&gt;
&lt;li&gt;Exposed REST API endpoints for tracking + top posts&lt;/li&gt;
&lt;li&gt;Fully filterable output and query logic&lt;/li&gt;
&lt;li&gt;Compatible with headless setups and SPAs&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  REST API Endpoints
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;POST /wp-json/initvico/v1/count&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;Record one or more post views.&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;post_id&lt;/code&gt; (int|array): One or more post IDs&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;code&gt;GET /wp-json/initvico/v1/top&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;Retrieve top posts by views.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters include:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;range&lt;/code&gt;: &lt;code&gt;total&lt;/code&gt;, &lt;code&gt;day&lt;/code&gt;, &lt;code&gt;week&lt;/code&gt;, &lt;code&gt;month&lt;/code&gt;, &lt;code&gt;trending&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;number&lt;/code&gt;: Number of posts&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;post_type&lt;/code&gt;, &lt;code&gt;category&lt;/code&gt;, &lt;code&gt;tag&lt;/code&gt;, etc.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;fields&lt;/code&gt;: &lt;code&gt;minimal&lt;/code&gt; or &lt;code&gt;full&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;no_cache&lt;/code&gt;: Disable transient caching&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;👉 &lt;a href="https://en.inithtml.com/wordpress/guide-to-using-the-top-rest-api-endpoint-in-init-view-count/" rel="noopener noreferrer"&gt;Full REST Guide&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Shortcode Examples
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Shortcode&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;[init_view_count]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show view count for current post&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;[init_view_list]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Most viewed posts list&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;[init_view_ranking]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Tabbed list by day/week/month/total&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Add &lt;code&gt;template&lt;/code&gt;, &lt;code&gt;range&lt;/code&gt;, &lt;code&gt;icon&lt;/code&gt;, &lt;code&gt;schema&lt;/code&gt;, &lt;code&gt;class&lt;/code&gt;, &lt;code&gt;field&lt;/code&gt;, and other options as needed.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://en.inithtml.com/wordpress/using-shortcodes-in-init-view-count-flexible-view-display/" rel="noopener noreferrer"&gt;Full Shortcode Guide&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Dev Tools You Get
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Filters like &lt;code&gt;init_plugin_suite_view_count_should_count&lt;/code&gt;, &lt;code&gt;*_meta_key&lt;/code&gt;, &lt;code&gt;*_top_args&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Modify output of &lt;code&gt;/top&lt;/code&gt; API with &lt;code&gt;init_plugin_suite_view_count_api_top_item&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Theme override with &lt;code&gt;view-list-sidebar.php&lt;/code&gt;, &lt;code&gt;view-list-grid.php&lt;/code&gt;, etc.&lt;/li&gt;
&lt;li&gt;Zero jQuery. Zero cookies. Fully modular JS.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Installation
&lt;/h3&gt;

&lt;p&gt;Install via &lt;a href="https://wordpress.org/plugins/init-view-count/" rel="noopener noreferrer"&gt;WordPress.org&lt;/a&gt; or:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/brokensmile2103/init-view-count.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then activate and configure in &lt;strong&gt;Settings → Init View Count&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Ways to show views:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add &lt;code&gt;[init_view_count]&lt;/code&gt; in post content&lt;/li&gt;
&lt;li&gt;Use auto-insert (before/after post content)&lt;/li&gt;
&lt;li&gt;Place view lists with &lt;code&gt;[init_view_list]&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Show trending or ranked tabs with &lt;code&gt;[init_view_ranking]&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Part of the Init Plugin Suite
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Init View Count&lt;/strong&gt; is part of the &lt;a href="https://en.inithtml.com/init-plugin-suite-minimalist-powerful-and-free-wordpress-plugins/" rel="noopener noreferrer"&gt;Init Plugin Suite&lt;/a&gt; – a set of minimalist, performance-first tools for WordPress developers.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Thanks for reading. Got feedback or ideas?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
→ &lt;a href="https://en.inithtml.com/plugin/init-view-count/" rel="noopener noreferrer"&gt;Project Page&lt;/a&gt;&lt;br&gt;&lt;br&gt;
→ &lt;a href="https://github.com/brokensmile2103/init-view-count" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>plugin</category>
      <category>restapi</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Create an Image Shuffle Minigame for Your Fanpage with Init Image Grid Shuffler</title>
      <dc:creator>Hao Nguyen</dc:creator>
      <pubDate>Sun, 08 Jun 2025 14:31:35 +0000</pubDate>
      <link>https://forem.com/brokensmile2103/create-an-image-shuffle-minigame-for-your-fanpage-with-init-image-grid-shuffler-1ll4</link>
      <guid>https://forem.com/brokensmile2103/create-an-image-shuffle-minigame-for-your-fanpage-with-init-image-grid-shuffler-1ll4</guid>
      <description>&lt;p&gt;Looking for a fun way to boost engagement on your social media or fanpage? Try creating a &lt;strong&gt;mini tile-shuffling game&lt;/strong&gt; using &lt;a href="https://en.inithtml.com/init-image-grid-shuffler/" rel="noopener noreferrer"&gt;Init Image Grid Shuffler&lt;/a&gt; — a lightweight, browser-based tool that lets you slice and scramble any image into a grid of tiles.&lt;/p&gt;

&lt;p&gt;Let your followers guess the original picture, solve the tile order, or even race to win prizes. No Photoshop or code needed.&lt;/p&gt;




&lt;h2&gt;
  
  
  What is Init Image Grid Shuffler?
&lt;/h2&gt;

&lt;p&gt;Init Image Grid Shuffler is a free online tool that splits an image into tiles and shuffles them. You can customize tile size, border, and difficulty level. Perfect for running:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Guess-the-image games
&lt;/li&gt;
&lt;li&gt;Puzzle-like challenges
&lt;/li&gt;
&lt;li&gt;Comment-based contests
&lt;/li&gt;
&lt;li&gt;Viral tag-your-friend posts&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  How to Create a Minigame
&lt;/h2&gt;

&lt;p&gt;Here's how to build a fun image challenge in under 5 minutes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Prepare an image that fits your theme (e.g., a character, product, or meme).&lt;/li&gt;
&lt;li&gt;Upload it to the tool.&lt;/li&gt;
&lt;li&gt;Choose how many rows and columns to split into (e.g., 5×5 = 25 tiles).&lt;/li&gt;
&lt;li&gt;Generate the shuffled version.&lt;/li&gt;
&lt;li&gt;Download and post it to your fanpage with a catchy caption or puzzle prompt.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Can you guess what this image is? First 5 correct answers win a shoutout!”&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Full How-To Guide
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Step 1: Upload Your Image
&lt;/h3&gt;

&lt;p&gt;Supported formats: JPG, PNG, WebP.&lt;br&gt;&lt;br&gt;
Use the “Choose an image…” button to upload.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Pick Grid Size
&lt;/h3&gt;

&lt;p&gt;Set how many rows and columns.  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;3×3 for casual players
&lt;/li&gt;
&lt;li&gt;5×5 or 7×7 for harder puzzles
&lt;/li&gt;
&lt;li&gt;Up to 10×10 if you’re evil 😈&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Step 3: Customize Borders
&lt;/h3&gt;

&lt;p&gt;Choose border thickness (suggested: 5px–10px).&lt;br&gt;&lt;br&gt;
The tool will smartly auto-pick black or white based on image brightness for best contrast.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4: Generate the Shuffle
&lt;/h3&gt;

&lt;p&gt;Click the &lt;strong&gt;“Generate shuffled image”&lt;/strong&gt; button to preview. Adjust settings if needed.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 5: Download and Share
&lt;/h3&gt;

&lt;p&gt;Click &lt;strong&gt;“Download image”&lt;/strong&gt; and upload it to your social platform.&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%2Fdvrb3xu6wzl22kj8e77r.webp" 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%2Fdvrb3xu6wzl22kj8e77r.webp" alt="Shuffled image example" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 6: (Optional) Show the Answer
&lt;/h3&gt;

&lt;p&gt;Want to reveal or save the correct layout? Hit &lt;strong&gt;“Show answer”&lt;/strong&gt; to see a numbered key.&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%2Ffzegrrh9e1owdzjv5nwl.webp" 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%2Ffzegrrh9e1owdzjv5nwl.webp" alt="Answer key preview" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Creative Minigame Ideas
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Ask users to &lt;strong&gt;guess the image&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Let them &lt;strong&gt;comment the tile order&lt;/strong&gt; (e.g., “3, 7, 1, 5…”).&lt;/li&gt;
&lt;li&gt;Run a &lt;strong&gt;speed challenge&lt;/strong&gt; – fastest correct answer wins.&lt;/li&gt;
&lt;li&gt;Combine with &lt;strong&gt;tag-a-friend mechanics&lt;/strong&gt; for viral reach.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Why Use This Tool?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Zero setup — works directly in browser.
&lt;/li&gt;
&lt;li&gt;No design skills required.
&lt;/li&gt;
&lt;li&gt;Smart contrast for clean puzzle visuals.
&lt;/li&gt;
&lt;li&gt;Optional answer key included.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Tips for Better Engagement
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Use intriguing or funny images.
&lt;/li&gt;
&lt;li&gt;Set a &lt;strong&gt;timer or deadline&lt;/strong&gt; to boost urgency.
&lt;/li&gt;
&lt;li&gt;Highlight or pin the best answers.
&lt;/li&gt;
&lt;li&gt;Pair with small giveaways for more participation.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Try it out
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://en.inithtml.com/init-image-grid-shuffler/" rel="noopener noreferrer"&gt;Init Image Grid Shuffler&lt;/a&gt; and create your first puzzle. If you make something cool, share it in the comments — I’d love to see what you build!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>socialmedia</category>
      <category>fun</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Init Live Search – Smarter WordPress Search with Slash Commands &amp; REST API</title>
      <dc:creator>Hao Nguyen</dc:creator>
      <pubDate>Thu, 29 May 2025 05:26:45 +0000</pubDate>
      <link>https://forem.com/brokensmile2103/init-live-search-smarter-wordpress-search-with-slash-commands-rest-api-2jgm</link>
      <guid>https://forem.com/brokensmile2103/init-live-search-smarter-wordpress-search-with-slash-commands-rest-api-2jgm</guid>
      <description>&lt;h2&gt;
  
  
  A fast, flexible live search modal for WordPress – powered by REST API and slash commands&lt;a href="https://dev.tourl"&gt;&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Init Live Search&lt;/strong&gt; replaces the default WordPress search with a modern modal. Built on the REST API, it works instantly, supports keyboard navigation, slash commands, and integrates smoothly with WooCommerce, SEO plugins, and ACF.&lt;/p&gt;

&lt;p&gt;No jQuery. No page reloads. No BS.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/nZocaTpi2hM"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;




&lt;h3&gt;
  
  
  Features at a Glance
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Minimalist, Modern UX
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Modal-based UI (&lt;code&gt;Ctrl + /&lt;/code&gt;, triple-click, &lt;code&gt;data-ils&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Instant results via REST API (no &lt;code&gt;admin-ajax&lt;/code&gt;, no jQuery)&lt;/li&gt;
&lt;li&gt;Infinite scroll support&lt;/li&gt;
&lt;li&gt;Local caching with &lt;code&gt;localStorage&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Smarter Search Logic
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Match by title + tags with bi-gram fallback&lt;/li&gt;
&lt;li&gt;Search in SEO metadata (Yoast, Rank Math, AIOSEO, TSF, SEOPress)&lt;/li&gt;
&lt;li&gt;Support ACF fields (e.g. &lt;code&gt;company_name&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Tunable ranking (e.g. title &amp;gt; SEO &amp;gt; tags)&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Productivity Built-In
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Slash commands: &lt;code&gt;/recent&lt;/code&gt;, &lt;code&gt;/id&lt;/code&gt;, &lt;code&gt;/fav&lt;/code&gt;, &lt;code&gt;/product&lt;/code&gt;, &lt;code&gt;/sku&lt;/code&gt;, &lt;code&gt;/price&lt;/code&gt;, etc.&lt;/li&gt;
&lt;li&gt;Full keyboard support: &lt;code&gt;↑ ↓ ← → Enter Esc&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Quick search tooltip when selecting text&lt;/li&gt;
&lt;li&gt;Voice search via &lt;code&gt;SpeechRecognition&lt;/code&gt; (optional)&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  WooCommerce Ready
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Filter by SKU, stock, price, sale status&lt;/li&gt;
&lt;li&gt;Show prices, badges, "Add to Cart"&lt;/li&gt;
&lt;li&gt;Slash commands: &lt;code&gt;/product&lt;/code&gt;, &lt;code&gt;/on-sale&lt;/code&gt;, &lt;code&gt;/stock&lt;/code&gt;, &lt;code&gt;/sku&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Theming &amp;amp; Customization
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Built-in style presets: &lt;code&gt;style-full.css&lt;/code&gt;, &lt;code&gt;style-topbar.css&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Theme override support (&lt;code&gt;style.css&lt;/code&gt; in theme)&lt;/li&gt;
&lt;li&gt;Optionally disable all plugin CSS&lt;/li&gt;
&lt;li&gt;Dark mode (&lt;code&gt;dark&lt;/code&gt;, &lt;code&gt;light&lt;/code&gt;, &lt;code&gt;auto&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Optional Lightweight Analytics
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Track query count, frequency, timestamps (no personal data)&lt;/li&gt;
&lt;li&gt;Grouped view, export as CSV&lt;/li&gt;
&lt;li&gt;Disabled by default, uses WordPress transients&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Built for Developers
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;PHP filters to override queries, ranking, result data&lt;/li&gt;
&lt;li&gt;REST API endpoints: &lt;code&gt;/search&lt;/code&gt;, &lt;code&gt;/product&lt;/code&gt;, &lt;code&gt;/id&lt;/code&gt;, etc.&lt;/li&gt;
&lt;li&gt;JS events: &lt;code&gt;ils:search-started&lt;/code&gt;, &lt;code&gt;ils:results-loaded&lt;/code&gt;, etc.&lt;/li&gt;
&lt;li&gt;Complete developer docs + override guide&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Slash Command Examples
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Command&lt;/th&gt;
&lt;th&gt;Action&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/recent&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show latest posts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/id 123&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Load post by ID&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/product&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;List products&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/sku ABC123&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Find by SKU&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/on-sale&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show sale items&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/price 100 500&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Filter by price range&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/fav&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show saved favorites (localStorage)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/random&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Jump to a random post&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;👉 &lt;a href="https://en.inithtml.com/wordpress/how-to-use-slash-commands-in-init-live-search/" rel="noopener noreferrer"&gt;Full Command Guide&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Dev Tools You Get
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;JS events like &lt;code&gt;ils:modal-opened&lt;/code&gt;, &lt;code&gt;ils:results-loaded&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;PHP filters for SEO fields, fallback logic, and more&lt;/li&gt;
&lt;li&gt;Theme override with custom &lt;code&gt;style.css&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Zero jQuery. Zero indexing. Zero external dependencies.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Installation
&lt;/h3&gt;

&lt;p&gt;Install via &lt;a href="https://wordpress.org/plugins/init-live-search/" rel="noopener noreferrer"&gt;WordPress.org&lt;/a&gt; or:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/brokensmile2103/init-live-search.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then activate and configure in &lt;strong&gt;Settings → Init Live Search&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Ways to trigger the modal:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Focus any &lt;code&gt;&amp;lt;input name="s"&amp;gt;&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Press &lt;code&gt;Ctrl + /&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Triple-click anywhere&lt;/li&gt;
&lt;li&gt;Click elements with &lt;code&gt;data-ils&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;URL: &lt;code&gt;?modal=search&amp;amp;term=seo&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Part of the Init Plugin Suite
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Init Live Search&lt;/strong&gt; is part of the &lt;a href="https://en.inithtml.com/init-plugin-suite-minimalist-powerful-and-free-wordpress-plugins/" rel="noopener noreferrer"&gt;Init Plugin Suite&lt;/a&gt; – a set of minimalist, performance-first tools for WordPress developers.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Thanks for reading. Got feedback or questions?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
→ &lt;a href="https://en.inithtml.com/plugin/init-live-search/" rel="noopener noreferrer"&gt;Project Page&lt;/a&gt;&lt;br&gt;&lt;br&gt;
→ &lt;a href="https://github.com/brokensmile2103/init-live-search" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/p&gt;

</description>
      <category>wordpress</category>
      <category>plugin</category>
      <category>restapi</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
