<?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: Hao Nguyen</title>
    <description>The latest articles on DEV Community by Hao Nguyen (@brokensmile2103).</description>
    <link>https://dev.to/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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3220539%2Ff2095f61-e44f-4777-b538-c556b8be80a2.jpg</url>
      <title>DEV Community: Hao Nguyen</title>
      <link>https://dev.to/brokensmile2103</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/brokensmile2103"/>
    <language>en</language>
    <item>
      <title>Annotate Screenshots Instantly in Your Browser with Init Clipboard Image</title>
      <dc:creator>Hao Nguyen</dc:creator>
      <pubDate>Wed, 22 Jul 2026 05:54:54 +0000</pubDate>
      <link>https://dev.to/brokensmile2103/annotate-screenshots-instantly-in-your-browser-with-init-clipboard-image-5bmn</link>
      <guid>https://dev.to/brokensmile2103/annotate-screenshots-instantly-in-your-browser-with-init-clipboard-image-5bmn</guid>
      <description>&lt;p&gt;Ever needed to quickly mark up a screenshot — circle a bug, blur out an email address, number the steps of a tutorial — without opening Photoshop or installing yet another app? &lt;a href="https://en.inithtml.com/init-clipboard-image/" rel="noopener noreferrer"&gt;Init Clipboard Image&lt;/a&gt; does exactly that, right in your browser, in seconds.&lt;/p&gt;

&lt;p&gt;Paste, draw, blur, crop, copy back to clipboard. No install, no upload, no signup.&lt;/p&gt;




&lt;h2&gt;
  
  
  What is Init Clipboard Image?
&lt;/h2&gt;

&lt;p&gt;Init Clipboard Image is a free, 100% client-side screenshot annotation tool. You paste an image straight from your clipboard (&lt;code&gt;Ctrl + V&lt;/code&gt;), drag &amp;amp; drop a file, or pick one from your computer — then mark it up with a full annotation toolkit and copy or download the result instantly.&lt;/p&gt;

&lt;p&gt;Everything runs locally in the browser. Nothing is ever uploaded to a server, which makes it a solid choice for screenshots that contain sensitive info you're about to blur out anyway.&lt;/p&gt;

&lt;p&gt;Perfect for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bug reports &amp;amp; QA testing&lt;/li&gt;
&lt;li&gt;Step-by-step tutorials and documentation&lt;/li&gt;
&lt;li&gt;Design/UI feedback&lt;/li&gt;
&lt;li&gt;Redacting sensitive data before sharing&lt;/li&gt;
&lt;li&gt;Quick edits on anything you copy from chat, email, or docs&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  How to Annotate a Screenshot in Under a Minute
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Copy a screenshot from anywhere (or have an image file ready).&lt;/li&gt;
&lt;li&gt;Paste it into the tool with &lt;code&gt;Ctrl + V&lt;/code&gt;, drag &amp;amp; drop it, or click to browse.&lt;/li&gt;
&lt;li&gt;Pick a tool — pencil, highlighter, arrow, rectangle, X mark, blur, crop, step marker, or text note.&lt;/li&gt;
&lt;li&gt;Mark up the image: highlight the bug, draw an arrow, blur out a token, number the steps.&lt;/li&gt;
&lt;li&gt;Copy the result back to your clipboard (&lt;code&gt;Ctrl + C&lt;/code&gt;) or download it (&lt;code&gt;Ctrl + S&lt;/code&gt;).&lt;/li&gt;
&lt;/ol&gt;

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

&lt;blockquote&gt;
&lt;p&gt;Paste a UI screenshot → draw an arrow at the broken button → add a text note "this throws a 500" → copy and paste straight into your bug tracker.&lt;/p&gt;
&lt;/blockquote&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9aws6vnnf71oduooyxk5.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9aws6vnnf71oduooyxk5.png" alt="Example" width="685" height="493"&gt;&lt;/a&gt;&lt;/p&gt;




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

&lt;h3&gt;
  
  
  Step 1: Get an Image In
&lt;/h3&gt;

&lt;p&gt;Paste with &lt;code&gt;Ctrl + V&lt;/code&gt;, drag &amp;amp; drop a file onto the page, or click to open the file picker. JPG, PNG, and WebP are all supported.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Pick Your Tool
&lt;/h3&gt;

&lt;p&gt;The toolbar covers everything you'd actually reach for on a screenshot:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Pencil&lt;/strong&gt; — freehand drawing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Highlighter&lt;/strong&gt; — soft, marker-style highlight, great for docs and screenshots&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Arrow&lt;/strong&gt; — point at exactly what matters&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rectangle&lt;/strong&gt; — frame a section of the image&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;X Mark&lt;/strong&gt; — click to mark a spot, &lt;code&gt;Ctrl + Click&lt;/code&gt; to cross out the whole image&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Blur / Pixelate&lt;/strong&gt; — redact emails, phone numbers, tokens, API keys&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Crop&lt;/strong&gt; — trim to just the part you need&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Step Marker&lt;/strong&gt; — auto-numbered stamps for tutorials, click to place 1, 2, 3...&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Text Note&lt;/strong&gt; — inline, multi-line text directly on the image&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Step 3: Fine-Tune Stroke &amp;amp; Font Size
&lt;/h3&gt;

&lt;p&gt;Both line thickness and font size auto-scale to the image's resolution, so annotations look consistent whether you're marking up a tiny icon or a 4K screenshot. Hold &lt;code&gt;Shift&lt;/code&gt; while drawing to snap lines to a straight horizontal or vertical axis.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4: Undo/Redo as Needed
&lt;/h3&gt;

&lt;p&gt;Full undo/redo history (&lt;code&gt;Ctrl + Z&lt;/code&gt; / &lt;code&gt;Ctrl + Y&lt;/code&gt;) so you can experiment freely.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 5: Copy or Download
&lt;/h3&gt;

&lt;p&gt;Hit &lt;strong&gt;Copy Image&lt;/strong&gt; to send the annotated image straight to your clipboard — ready to paste into Slack, an issue tracker, or an email — or &lt;strong&gt;Download&lt;/strong&gt; to save it as a file.&lt;/p&gt;




&lt;h2&gt;
  
  
  Keyboard Shortcuts
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Key&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;B&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Pencil&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;H&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Highlighter&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;A&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Arrow&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;X&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;X mark&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;R&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Rectangle&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;M&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Blur / Pixelate&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;K&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Crop&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;N&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Step marker&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;T&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Text note&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Shift&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Snap line to horizontal/vertical&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl + C&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Copy image to clipboard&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl + S&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Download image&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl + Z&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Undo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;Ctrl + Y&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Redo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;code&gt;Delete&lt;/code&gt; / &lt;code&gt;Backspace&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;Clear current image&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;?&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show shortcut cheat sheet&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Real-World Use Cases
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Bug reports &amp;amp; QA&lt;/strong&gt; — highlight, arrow, or X-mark the exact issue instead of writing a paragraph describing where it is.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tutorials &amp;amp; docs&lt;/strong&gt; — use the Step Marker to number a sequence of UI actions in seconds.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Design review&lt;/strong&gt; — annotate a Figma export or a live site screenshot with direct feedback.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Privacy before sharing&lt;/strong&gt; — blur out emails, phone numbers, tokens, and API keys before posting a screenshot publicly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Teaching&lt;/strong&gt; — highlight key parts of a slide or document to explain visually.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Everyday quick edits&lt;/strong&gt; — mark up anything from chat, email, or docs without switching apps.&lt;/li&gt;
&lt;/ul&gt;




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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Zero setup&lt;/strong&gt; — open the page, start pasting.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No upload&lt;/strong&gt; — all processing happens on your device.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Full toolkit&lt;/strong&gt; — draw, highlight, arrow, blur, crop, number, and annotate with text, all in one place.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Auto-scaling&lt;/strong&gt; — stroke width and font size adapt to image resolution automatically.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Clipboard-first workflow&lt;/strong&gt; — paste in, copy out, no file management required.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Works everywhere&lt;/strong&gt; — modern Chrome, Edge, Firefox, and Safari.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Tips for Faster Annotation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Learn the single-letter shortcuts (&lt;code&gt;B&lt;/code&gt;, &lt;code&gt;H&lt;/code&gt;, &lt;code&gt;A&lt;/code&gt;, &lt;code&gt;X&lt;/code&gt;, &lt;code&gt;M&lt;/code&gt;...) — switching tools becomes instant.&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;Shift&lt;/code&gt; when drawing arrows or rectangles to keep them perfectly straight.&lt;/li&gt;
&lt;li&gt;Blur first, annotate second, if a screenshot has sensitive data — one less thing to forget.&lt;/li&gt;
&lt;li&gt;Use Step Marker instead of manually typing numbers for anything with more than 3 steps.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Try It Out
&lt;/h2&gt;

&lt;p&gt;Head over to &lt;a href="https://en.inithtml.com/init-clipboard-image/" rel="noopener noreferrer"&gt;Init Clipboard Image&lt;/a&gt; and paste your first screenshot — it takes less time than opening an image editor. If you build something useful with it (a bug report template, a tutorial workflow), share it in the comments!&lt;/p&gt;

</description>
      <category>clipboard</category>
      <category>annotate</category>
      <category>screenshot</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Init User Engine – A gamified, frontend-first user system for WordPress</title>
      <dc:creator>Hao Nguyen</dc:creator>
      <pubDate>Wed, 22 Jul 2026 05:37:11 +0000</pubDate>
      <link>https://dev.to/brokensmile2103/init-user-engine-a-gamified-frontend-first-user-system-for-wordpress-57m7</link>
      <guid>https://dev.to/brokensmile2103/init-user-engine-a-gamified-frontend-first-user-system-for-wordpress-57m7</guid>
      <description>&lt;p&gt;&lt;strong&gt;Init User Engine&lt;/strong&gt; is a lightweight, no-bloat user system for modern WordPress sites. It replaces the default profile/login experience with a full gamification layer — EXP &amp;amp; levels, a Coin/Cash wallet, daily check-in, VIP membership, referrals, and an inbox — all rendered through a fast, modal-driven frontend powered by the REST API.&lt;/p&gt;

&lt;p&gt;No jQuery. Minimal settings. Smart by default.&lt;/p&gt;




&lt;h3&gt;
  
  
  Why Init User Engine?
&lt;/h3&gt;

&lt;p&gt;Most "membership" or "points" plugins for WordPress are heavy, admin-ajax-based, and hard to theme. Init User Engine takes the opposite approach: everything dynamic — avatar, dashboard, check-in, inbox, VIP purchase — is rendered client-side in pure Vanilla JS and talks to a clean REST API. Drop in one shortcode and you get a full gamified account system on top of native WordPress users.&lt;/p&gt;

&lt;p&gt;It's the core user system behind 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; — the same minimalist, performance-first philosophy as &lt;a href="https://wordpress.org/plugins/init-live-search/" rel="noopener noreferrer"&gt;Init Live Search&lt;/a&gt;.&lt;/p&gt;




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

&lt;h4&gt;
  
  
  Gamified Progression
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;EXP &amp;amp; Level system with fully hookable progression logic&lt;/li&gt;
&lt;li&gt;Coin &amp;amp; Cash wallet with transaction logs (dedicated DB tables, not user meta)&lt;/li&gt;
&lt;li&gt;Daily check-in with streak milestones and an online-time bonus timer&lt;/li&gt;
&lt;li&gt;Daily task list, extensible via filter&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Frontend-First UX
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;One shortcode: &lt;code&gt;[init_user_engine]&lt;/code&gt; — avatar button + full modal dashboard&lt;/li&gt;
&lt;li&gt;Avatar system with upload, live preview, and revert-to-default support&lt;/li&gt;
&lt;li&gt;Login/Register modals for logged-out visitors, with custom redirect URLs&lt;/li&gt;
&lt;li&gt;Pure Vanilla JS — no jQuery, no server-rendered admin-ajax round trips&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Monetization &amp;amp; Retention
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;VIP membership, purchased with in-site Coin, with configurable duration tiers (including lifetime)&lt;/li&gt;
&lt;li&gt;VIP bonus system — extra Coin/EXP percentage for VIP members&lt;/li&gt;
&lt;li&gt;Redeem Code / Gift Code module — generate single-use or bulk codes, redeem for rewards&lt;/li&gt;
&lt;li&gt;Referral module with cookie-based signup tracking and rewards for both sides&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Communication
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Built-in inbox with pagination, category filters (System, Rewards, Activity...), read/claim/delete&lt;/li&gt;
&lt;li&gt;Admin panel to send notifications to selected users or the whole member base, with priority and expiration&lt;/li&gt;
&lt;/ul&gt;

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

&lt;ul&gt;
&lt;li&gt;REST API for every feature — register, check-in, claim reward, inbox, VIP purchase, redeem code, profile, and more&lt;/li&gt;
&lt;li&gt;Deep set of action/filter hooks: modify EXP curves, VIP prices, referral rewards, theme colors, VIP body classes, and more&lt;/li&gt;
&lt;li&gt;Transaction and EXP logs stored in dedicated tables with &lt;code&gt;wp_cache&lt;/code&gt; support and true paginated queries — built to scale, not just to demo&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Core Modules
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Module&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;EXP &amp;amp; Level&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Award EXP via hook, auto level-up, customizable EXP curve per level&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Wallet (Coin/Cash)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Dual-currency system with full transaction history&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Check-in&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Daily rewards, streak milestones, online-duration bonus&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;VIP&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Coin-based purchase, expiry tracking, bonus % on rewards&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Referral&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Cookie-based tracking, rewards for referrer and new user&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Redeem Code&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Single-use or bulk gift codes redeemable for Coin/Cash&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Inbox&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Filterable, paginated notification center per user&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Admin Notify&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Send targeted or broadcast messages from wp-admin&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




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

&lt;p&gt;&lt;strong&gt;Base:&lt;/strong&gt; &lt;code&gt;/wp-json/inituser/v1/&lt;/code&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Endpoint&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /register&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Create a new user account&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /checkin&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Daily check-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /claim-reward&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Claim reward after online duration&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;GET /transactions&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Coin/Cash transaction log&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;GET /exp-log&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;EXP log&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;GET /inbox&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Inbox messages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /vip/purchase&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Purchase VIP package&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;GET /referral-log&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Referral history&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /avatar&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Upload new avatar&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;GET /profile/me&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Current user profile&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /exchange&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Convert Cash → Coin&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST /redeem-code&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Redeem a gift code&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;👉 Full endpoint list in the &lt;a href="https://github.com/brokensmile2103/init-user-engine" rel="noopener noreferrer"&gt;plugin readme&lt;/a&gt;.&lt;/p&gt;




&lt;h3&gt;
  
  
  Developer Hooks
&lt;/h3&gt;

&lt;p&gt;Init User Engine ships with a wide surface of filters and actions so you're never stuck waiting on a plugin update to customize behavior:&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="c1"&gt;// Change how much EXP is required per level&lt;/span&gt;
&lt;span class="nf"&gt;add_filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="s1"&gt;'init_plugin_suite_user_engine_exp_required'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nv"&gt;$required&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$level&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nv"&gt;$level&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// React to a level-up&lt;/span&gt;
&lt;span class="nf"&gt;add_action&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="s1"&gt;'init_plugin_suite_user_engine_level_up'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nv"&gt;$user_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;$new_level&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// send a custom notification, unlock content, etc.&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Other notable hooks include filters for VIP pricing, referral rewards, check-in milestones, daily tasks, theme colors, and VIP-related body classes — plus actions for EXP/Coin changes, referral completion, and admin notifications.&lt;/p&gt;




&lt;h3&gt;
  
  
  Where Data Lives
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;user_meta&lt;/code&gt; — EXP, level, Coin, Cash, VIP, referral&lt;/li&gt;
&lt;li&gt;Dedicated DB tables — transaction log and EXP log (migrated off user meta for scalability as of v1.5.0)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;wp_init_user_engine_inbox&lt;/code&gt; — inbox messages&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-user-engine/" 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-user-engine.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Activate the plugin&lt;/li&gt;
&lt;li&gt;Drop &lt;code&gt;[init_user_engine]&lt;/code&gt; into any page, post, or template&lt;/li&gt;
&lt;li&gt;Configure theme color, currency labels, and reward values under &lt;strong&gt;Settings → Init User Engine&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That's it — modals and logic load automatically.&lt;/p&gt;




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

&lt;p&gt;&lt;strong&gt;Init User Engine&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, high-performance plugins built for WordPress developers and creators who value speed, flexibility, and clarity.&lt;/p&gt;




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

</description>
      <category>wordpress</category>
      <category>plugin</category>
      <category>restapi</category>
      <category>user</category>
    </item>
    <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://dev.to/brokensmile2103/tank-300iq-a-smart-ricochet-tank-shooter-right-in-your-browser-17lm</link>
      <guid>https://dev.to/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://dev.to/brokensmile2103/init-view-count-accurate-post-views-with-rest-api-custom-shortcodes-2hpn</link>
      <guid>https://dev.to/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://dev.to/brokensmile2103/create-an-image-shuffle-minigame-for-your-fanpage-with-init-image-grid-shuffler-1ll4</link>
      <guid>https://dev.to/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://dev.to/brokensmile2103/init-live-search-smarter-wordpress-search-with-slash-commands-rest-api-2jgm</link>
      <guid>https://dev.to/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, Meilisearch &amp;amp; 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 now offers optional &lt;strong&gt;Meilisearch&lt;/strong&gt; integration for typo-tolerant, sub-50ms relevance-ranked search — with automatic fallback to the local database if Meilisearch is ever unreachable.&lt;/p&gt;

&lt;p&gt;No jQuery. No page reloads. No broken search box, ever.&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;
  
  
  What's New in v1.9.x
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Optional Meilisearch Integration&lt;/strong&gt; — connect your own self-hosted or cloud Meilisearch instance as the primary search engine, with silent, automatic fallback to local DB search&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Auto-sync to Meilisearch&lt;/strong&gt; — posts are pushed/removed from the index on publish, update, trash, and delete (non-blocking)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;WP-CLI Reindex&lt;/strong&gt; — &lt;code&gt;wp init-live-search meili-reindex&lt;/code&gt; for bulk indexing or full rebuilds&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cross-site Search&lt;/strong&gt; — fetch &amp;amp; merge results from other Init Live Search-powered sites, no CORS or auth setup needed&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;New Shortcodes&lt;/strong&gt; — &lt;code&gt;[init_live_search]&lt;/code&gt; and &lt;code&gt;[init_live_search_related_posts]&lt;/code&gt;, both buildable visually via the new &lt;strong&gt;Shortcode Builder UI&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI-Powered Related Posts&lt;/strong&gt; — &lt;code&gt;[init_live_search_related_ai]&lt;/code&gt; using multi-signal scoring (tags, ACF, series, views, comments, freshness)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Template-based Layouts&lt;/strong&gt; — &lt;code&gt;grid&lt;/code&gt;, &lt;code&gt;classic&lt;/code&gt;, &lt;code&gt;compact&lt;/code&gt;, &lt;code&gt;thumbright&lt;/code&gt;, overridable from your theme&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;404 Smart Redirect&lt;/strong&gt; — automatically redirects broken URLs to the most relevant post&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;WooCommerce Slash Expansion&lt;/strong&gt; — added &lt;code&gt;/brand&lt;/code&gt;, &lt;code&gt;/attribute&lt;/code&gt;, &lt;code&gt;/variation&lt;/code&gt;, &lt;code&gt;/coupon&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Search Operators&lt;/strong&gt; — &lt;code&gt;+musthave&lt;/code&gt; and &lt;code&gt;-mustnot&lt;/code&gt; terms now supported in queries&lt;/li&gt;
&lt;/ul&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;
&lt;strong&gt;Optional Meilisearch backend&lt;/strong&gt; — typo-tolerant, relevance-ranked, sub-50ms, with automatic local-DB fallback&lt;/li&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;li&gt;Search operators: &lt;code&gt;+musthave&lt;/code&gt;, &lt;code&gt;-mustnot&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Cross-site Search
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Query and merge results from other Init Live Search-powered sites&lt;/li&gt;
&lt;li&gt;No CORS or auth config — just &lt;code&gt;Site Name|https://example.com&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Results auto-labeled by source (e.g. "Init Docs")&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Related Posts, Two Ways
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;[init_live_search_related_posts]&lt;/code&gt; — static, SEO-friendly, JSON-LD ready&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;[init_live_search_related_ai]&lt;/code&gt; — AI-scored, multi-signal (tags, ACF, series, views, comments, freshness)&lt;/li&gt;
&lt;li&gt;Auto-insert after content/comments — no shortcode required&lt;/li&gt;
&lt;li&gt;Layout templates: &lt;code&gt;grid&lt;/code&gt;, &lt;code&gt;classic&lt;/code&gt;, &lt;code&gt;compact&lt;/code&gt;, &lt;code&gt;thumbright&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Fully overridable from your theme (&lt;code&gt;init-live-search/related-posts-{template}.php&lt;/code&gt;)&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, brand, attribute, variation, coupon&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;code&gt;/brand&lt;/code&gt;, &lt;code&gt;/attribute&lt;/code&gt;, &lt;code&gt;/variation&lt;/code&gt;, &lt;code&gt;/coupon&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;
  
  
  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;WP-CLI support for Meilisearch reindexing&lt;/li&gt;
&lt;li&gt;Complete developer docs + override guide&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;h3&gt;
  
  
  Meilisearch Integration (Optional)
&lt;/h3&gt;

&lt;p&gt;Init Live Search works great out of the box with zero setup — the built-in database search handles everything by default. If you want faster, typo-tolerant, relevance-ranked search at scale, connect your own Meilisearch instance in a few minutes.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Install and run Meilisearch yourself — self-hosted or via &lt;a href="https://www.meilisearch.com/cloud" rel="noopener noreferrer"&gt;Meilisearch Cloud&lt;/a&gt;. This plugin doesn't host or manage a server for you.&lt;/li&gt;
&lt;li&gt;Go to &lt;strong&gt;Settings → Init Live Search → Meilisearch&lt;/strong&gt;, enter your Host URL, Index Name, and a &lt;strong&gt;search-only&lt;/strong&gt; API key, then enable the integration.&lt;/li&gt;
&lt;li&gt;Index your existing content:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   wp init-live-search meili-reindex
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Done — search requests are now answered by Meilisearch. New, updated, and deleted posts stay in sync automatically.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Built for safety, not lock-in:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If Meilisearch is disabled, unconfigured, or fails to respond, the plugin silently falls back to local DB search — visitors never see a broken search box&lt;/li&gt;
&lt;li&gt;The sensitive admin/indexing key can be set via the &lt;code&gt;INIT_LIVE_SEARCH_MEILI_ADMIN_KEY&lt;/code&gt; constant in &lt;code&gt;wp-config.php&lt;/code&gt; instead of the database&lt;/li&gt;
&lt;li&gt;Turn it off any time — core search never depends on Meilisearch being present&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 (supports &lt;code&gt;sort&lt;/code&gt;/&lt;code&gt;rsort&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/brand&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Filter by product brand&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;/coupon&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Show active, usable coupons&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, ranking, and more&lt;/li&gt;
&lt;li&gt;Theme override with custom &lt;code&gt;style.css&lt;/code&gt; and related-posts templates&lt;/li&gt;
&lt;li&gt;WP-CLI command for Meilisearch reindexing&lt;/li&gt;
&lt;li&gt;Zero jQuery. Zero forced 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;a href="https://en.inithtml.com/plugin/init-live-search/" rel="noopener noreferrer"&gt;Project Page&lt;/a&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>meilisearch</category>
    </item>
  </channel>
</rss>
