DEV Community: Hao Nguyen

Share Code & Notes Instantly with Init Note — No Account, No Setup

Hao Nguyen — Wed, 22 Jul 2026 06:16:03 +0000

Need to send a teammate a config file, a stack trace, or a quick checklist without opening Slack threads or spinning up a Gist? Init Note turns any text — plain notes or syntax-highlighted code — into a shareable link in seconds. Type or paste, hit save, get a link. Done.

No account. No install. No friction.

What is Init Note?

Init Note is a free online pastebin/notepad hybrid built for speed. You type or paste content into a live editor with real syntax highlighting for 15+ languages (JavaScript, TypeScript, PHP, Python, HTML, CSS, SQL, Bash, Go, Rust, Java, C, C++, JSON, Markdown), hit "Save & Get Link", and you have a URL anyone can open instantly — no login required on either end.

The editor also runs in Markdown mode, and here's the part developers actually love: you can paste an image directly with Ctrl + V, and it's automatically uploaded and inserted into the note as Markdown — no separate image host, no manual linking.

Perfect for:

Sharing a code snippet or config with a teammate
Sending a stack trace to get help debugging
Quick notes and checklists during a meeting or while on the move
Sensitive, one-time content that should self-destruct after being read
Writing a quick Markdown doc with screenshots pasted straight in

How to Share a Note in Under 30 Seconds

Go to note.inithtml.com and start typing or pasting.
Pick a language, or let it auto-detect from what you pasted.
Optionally set a custom slug, a password, or self-destruct-after-read.
Hit "Save & Get Link" (or Ctrl + S).
Copy the link or scan the QR code — the recipient sees it instantly, no login needed.

Example:

Paste a stack trace → language auto-detected as JavaScript → save → send the link in Slack → your teammate sees it fully highlighted, no formatting lost.

Full How-To Guide

Step 1: Write or Paste Your Content

Open the editor and start typing, or paste in code, logs, or plain text. Switch to Markdown mode if you're writing documentation or notes with formatting.

Step 2: Drop In Images with Ctrl + V

This is the standout feature for Markdown notes: drag-and-drop an image, or just paste one straight from your clipboard, and Init Note uploads it and inserts the Markdown image syntax at your cursor automatically. No hunting for an image host, no manual ![]() linking.

It pairs especially well with Init Clipboard Image when you're writing a customer-facing guide or tutorial: take a screenshot, annotate it in Init Clipboard Image (arrows, highlights, step numbers), copy the result with Ctrl + C, then paste it straight into your Init Note with Ctrl + V. The annotated image is uploaded and inserted as Markdown instantly — so your whole how-to article, screenshots included, comes together in one continuous workflow.

Step 3: Pick a Language (or Skip It)

Choose from 15+ supported languages, or let the editor auto-detect the language when you paste code — it applies the right highlighting automatically.

Step 4: Customize the Link (Optional)

Set a custom slug so the URL is memorable (note.inithtml.com/your-name) instead of a random string.

Step 5: Add Protection (Optional)

Password — lock the note so only people with the password can read it. Good for long-lived, private shares.
Self-destruct after read — the note is permanently deleted after the first view. Good for one-time secrets like tokens or temporary credentials.

Step 6: Save and Share

Hit "Save & Get Link" or Ctrl + S. A QR code appears immediately in the result window — handy for sharing to a phone. Copy the link, or save the Edit Key you're given if you want to edit or delete the note later.

Step 7: Manage Your Notes

Every note you create on a device shows up under "My Notes", so you don't have to keep track of links manually. Notes are auto-deleted after 30 days of no access.

Key Features

Real syntax highlighting — 15+ languages, colored live as you type, not just monospaced plain text
Auto language detection — paste code, get the right highlighting automatically
Markdown mode with image paste — Ctrl + V an image and it's uploaded and inserted as Markdown instantly
Instant shareable link — every note gets its own URL plus an auto-generated QR code
Custom slug — memorable, brandable links
Password protection — for long-term, private sharing
Self-destruct after read — for one-time, sensitive content
Edit Key — edit or delete a note anytime with a private key
Word wrap toggle — especially useful reading notes on mobile
Note history — see every note you've created on a device under "My Notes"
Bilingual UI — English/Vietnamese, auto-detected from your browser
Fully responsive — works well on desktop and mobile alike

Real-World Use Cases

Developers — share a code snippet, config file, or script with a colleague via one link.
Teams — send instructions, checklists, or meeting notes without opening email or a doc tool.
Technical support — paste an error log or stack trace and get it reviewed with full syntax highlighting intact.
On-the-go notes — jot something down quickly, pick it back up from any device.
Sensitive info — use self-destruct-after-read for one-time secrets, or a password for longer-lived private notes.
Teaching — share exercises, code examples, or reference material through a direct link.
Quick Markdown docs — write notes with pasted screenshots included, no separate image hosting step.

Why Use Init Note?

No account, no install
Actual syntax-highlighted editor, not just a plain textbox
Auto language detection when you paste code
Markdown mode with clipboard image paste built in
Password protection for private, long-lived shares
Self-destruct mode for sensitive, one-time content
QR code generated automatically — easy to hand off to mobile
Links work for 30 days, no login required to view
Minimal, distraction-free interface
Custom slugs for links that actually mean something

Try It Out

Head to Init Note, paste a snippet or drop in some Markdown with an image or two, and see how fast you get a shareable link. If it becomes part of your daily workflow, I'd love to hear how you're using it in the comments.

Convert, Resize & Watermark Images 100% in Your Browser with Init Magick Studio

Hao Nguyen — Wed, 22 Jul 2026 06:05:47 +0000

Need to batch-convert a folder of PNGs to WebP, resize a hundred product photos to a social preset, strip GPS data before sharing, and slap a watermark on everything — without uploading a single file to a server? Init Magick Studio does the whole pipeline, right in your browser, powered by ImageMagick compiled to WebAssembly.

No account. No install. No upload. Just drag, convert, download.

What is Init Magick Studio?

Init Magick Studio is a free, browser-based image converter built on ImageMagick WASM — the same engine behind countless professional image pipelines, running entirely client-side. Every operation (format conversion, resize, compression, EXIF stripping, watermarking) happens on your device. Nothing is ever sent to a server, nothing is stored in the cloud.

It supports 100+ image formats — JPEG, PNG, WebP, AVIF, GIF, BMP, TIFF, RAW, and more — with smart resizing, Entropy-based smart crop, quality control, metadata removal, custom watermarks, and one-click ZIP export.

Perfect for:

Batch format conversion for web performance (PNG → WebP/AVIF)
Resizing images to exact social media dimensions
Stripping EXIF/GPS before sharing sensitive photos
Watermarking a whole batch of images at once
Any image job you'd rather not upload to a random online converter

How to Convert a Batch of Images in Under a Minute

Open the tool and drag in your images (or click to select).
Pick an output format — JPEG, PNG, WebP, AVIF, GIF, TIFF, or BMP.
Optionally set dimensions, or just pick a preset (Story, Square, A4, 4K...).
Optionally tweak quality, strip metadata, or add a watermark.
Hit "Convert & Download ZIP".

Example:

Drop in 40 product photos → output as WebP → preset "Social" → Privacy Mode on → watermark logo bottom-right → one ZIP, ready to upload to your store.

Full How-To Guide

Step 1: Add Your Images

Drag and drop or click to select files. There's no cap on batch size — process 1 image or 100, limited only by your browser's memory.

Step 2: Choose Output Format

JPEG for photos, PNG for lossless, WebP or AVIF for modern, smaller web-ready files, or GIF/TIFF/BMP if that's what you need.

Step 3: Set Dimensions (Optional)

Enter width/height manually, or grab one of the 13 built-in presets: FHD, Story, Square, Social, Thumb, A4, 4K, 2K, HD, Banner, FB Cover, IG Post, YT Thumb. Leave it empty to keep the original size.

If you enter both width and height, you can also enable Smart Crop — it runs an Entropy analysis to automatically keep the highest-detail region of the image instead of a naive center crop. Great for thumbnails and avatars.

Step 4: Adjust Compression Quality

A quality slider from 1–100 (default 85) lets you balance file size against visual fidelity.

Step 5: Toggle Privacy Mode

Strips EXIF, GPS tags, camera profiles, and other device metadata. It's on by default — worth knowing if you actually want to keep that data.

Step 6: Add a Watermark (Optional)

Upload a watermark image (transparent PNG supported), place it on a 3×3 position grid, and adjust size (as % of image width) and opacity.

Step 7: Convert & Download

Click "Convert & Download ZIP" or press Ctrl + Enter. First run downloads the WASM engine (~14MB, cached afterward). Watch each file move through Pending → Processing → Done/Error in the log, then grab the ZIP — or download individual files straight from the list without waiting for the whole batch.

Key Features

100% client-side — powered by ImageMagick WASM, no upload, no server ever sees your images
100+ formats — read/write JPEG, PNG, WebP, AVIF, GIF, BMP, TIFF, RAW, and more
Unlimited batch processing with a per-file progress bar
Smart Resize — proportional scaling by max width/height, or exact crop with both dimensions
Smart Crop (Entropy-based) — auto-keeps the highest-detail region
13 dimension presets for social, print, and banner formats
Compression quality control with live size preview
Privacy Mode — strips EXIF/GPS/metadata, on by default
Custom watermark — position, size, and opacity control, transparent PNG supported
Automatic ZIP export, smart-compressed per format (STORE for PNG/AVIF/WebP, DEFLATE for JPEG/BMP)
Individual downloads per file, no need to wait for the batch
Detailed processing log — every step timestamped, per-file status
Space savings display — original vs. new size with a ↓%/↑% badge
Bilingual UI — English/Vietnamese, auto-detected, saved to localStorage
Keyboard shortcut — Ctrl + Enter to start conversion

Real-World Use Cases

Developers & Designers — batch-convert PNGs to WebP/AVIF for smaller, faster-loading websites.
Marketing & Content Creators — resize to exact social dimensions in one drag-and-drop using built-in presets.
Photographers — convert RAW to JPEG, export lossless PNG for print, strip GPS before sharing, add copyright watermarks.
SEO & Web Performance — bulk-optimize an image library to next-gen formats to improve load times and Core Web Vitals.
Quick Sharing — compress screenshots or phone photos to fit email/chat size limits.
Privacy-First Processing — handle IDs, contracts, or sensitive documents with zero server exposure.
Education — convert diagrams and illustrations for slides and documents.
Photo Library Management — strip redundant metadata to shrink files and save cloud storage.

Why Use This Tool?

No registration, no software install
100% client-side — your images never leave your device
Powered by ImageMagick WASM, a genuinely professional-grade engine
100+ formats, unlimited batch size
Smart Crop, presets, watermarking, and metadata stripping all in one place
Clean, dark, ad-free interface
Works on any modern browser — desktop, laptop, tablet, or phone

Try It Out

Head to Init Magick Studio, drop in a batch of images, and see how fast a fully local, no-upload converter can be. If it saves you time on a real workflow, I'd genuinely like to hear about it in the comments.

Annotate Screenshots Instantly in Your Browser with Init Clipboard Image

Hao Nguyen — Wed, 22 Jul 2026 05:54:54 +0000

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? Init Clipboard Image does exactly that, right in your browser, in seconds.

Paste, draw, blur, crop, copy back to clipboard. No install, no upload, no signup.

What is Init Clipboard Image?

Init Clipboard Image is a free, 100% client-side screenshot annotation tool. You paste an image straight from your clipboard (Ctrl + V), drag & 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.

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.

Perfect for:

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

How to Annotate a Screenshot in Under a Minute

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

Example:

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.

Full How-To Guide

Step 1: Get an Image In

Paste with Ctrl + V, drag & drop a file onto the page, or click to open the file picker. JPG, PNG, and WebP are all supported.

Step 2: Pick Your Tool

The toolbar covers everything you'd actually reach for on a screenshot:

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

Step 3: Fine-Tune Stroke & Font Size

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 Shift while drawing to snap lines to a straight horizontal or vertical axis.

Step 4: Undo/Redo as Needed

Full undo/redo history (Ctrl + Z / Ctrl + Y) so you can experiment freely.

Step 5: Copy or Download

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

Keyboard Shortcuts

Key	Action
`B`	Pencil
`H`	Highlighter
`A`	Arrow
`X`	X mark
`R`	Rectangle
`M`	Blur / Pixelate
`K`	Crop
`N`	Step marker
`T`	Text note
`Shift`	Snap line to horizontal/vertical
`Ctrl + C`	Copy image to clipboard
`Ctrl + S`	Download image
`Ctrl + Z`	Undo
`Ctrl + Y`	Redo
`Delete` / `Backspace`	Clear current image
`?`	Show shortcut cheat sheet

Real-World Use Cases

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

Why Use This Tool?

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

Tips for Faster Annotation

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

Try It Out

Head over to Init Clipboard Image 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!

Init User Engine – A gamified, frontend-first user system for WordPress

Hao Nguyen — Wed, 22 Jul 2026 05:37:11 +0000

Init User Engine is a lightweight, no-bloat user system for modern WordPress sites. It replaces the default profile/login experience with a full gamification layer — EXP & 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.

No jQuery. Minimal settings. Smart by default.

Why Init User Engine?

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.

It's the core user system behind the Init Plugin Suite — the same minimalist, performance-first philosophy as Init Live Search.

Features at a Glance

Gamified Progression

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

Frontend-First UX

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

Monetization & Retention

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

Communication

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

Built for Developers

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

Core Modules

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

REST API

Base: /wp-json/inituser/v1/

Endpoint	Purpose
`POST /register`	Create a new user account
`POST /checkin`	Daily check-in
`POST /claim-reward`	Claim reward after online duration
`GET /transactions`	Coin/Cash transaction log
`GET /exp-log`	EXP log
`GET /inbox`	Inbox messages
`POST /vip/purchase`	Purchase VIP package
`GET /referral-log`	Referral history
`POST /avatar`	Upload new avatar
`GET /profile/me`	Current user profile
`POST /exchange`	Convert Cash → Coin
`POST /redeem-code`	Redeem a gift code

👉 Full endpoint list in the plugin readme.

Developer Hooks

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:

// Change how much EXP is required per level
add_filter( 'init_plugin_suite_user_engine_exp_required', function( $required, $level ) {
    return $level * 100;
}, 10, 2 );

// React to a level-up
add_action( 'init_plugin_suite_user_engine_level_up', function( $user_id, $new_level ) {
    // send a custom notification, unlock content, etc.
}, 10, 2 );

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.

Where Data Lives

user_meta — EXP, level, Coin, Cash, VIP, referral
Dedicated DB tables — transaction log and EXP log (migrated off user meta for scalability as of v1.5.0)
wp_init_user_engine_inbox — inbox messages

Installation

Install via WordPress.org or:

git clone https://github.com/brokensmile2103/init-user-engine.git

Then:

Activate the plugin
Drop [init_user_engine] into any page, post, or template
Configure theme color, currency labels, and reward values under Settings → Init User Engine

That's it — modals and logic load automatically.

Part of the Init Plugin Suite

Init User Engine is part of the Init Plugin Suite — a set of minimalist, high-performance plugins built for WordPress developers and creators who value speed, flexibility, and clarity.

Thanks for reading. Got feedback or questions?
→ Project Page
→ GitHub

Tank 300IQ — A Smart Ricochet Tank Shooter Right in Your Browser

Hao Nguyen — Fri, 28 Nov 2025 03:57:47 +0000

🚀 Introducing Tank 300IQ — A Ricochet Tank Shooter With Adaptive AI

Play now: https://en.inithtml.com/tank-300iq/

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

Runs directly in your browser (PC + Mobile), no downloads, no account — just play.

🎯 What Makes Tank 300IQ Special?

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 localStorage.

🧠 5 Difficulty Levels (Easy → Insane)

Bots can:

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

🔥 Game Modes

Classic

Fully customizable battles: difficulty, team sizes, bullet speed, bounce count, friendly fire…

Adventure

Multi-stage progression with unique maps and boss fights.

Survival / Endless

Random maps, scaling waves, increasing chaos.

Team Presets

Instant 1v1, 1vN, full squads, ally teams, anything you want.

🎮 Controls

PC:

Move: WASD / Arrow keys
Aim: Mouse
Fire: Click

Mobile:

Left joystick: Move
Right joystick: Aim + hold to fire

Supports manual control or auto-aim/auto-fire using the same tactical brain as the bots (great for mobile).

🛡️ Skills (Instant Cast)

PC:

1 — Shield
2 — Triple Shot
3 — Rally

Mobile:

Tap skill icons

Skill details:

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

🔧 Sandbox Settings

Tune almost anything:

Ally/enemy count
Difficulty
Tank & bullet speed
Max bounce
Friendly fire
Bullet break mode
And more…

Everything is saved in localStorage.

The entire game runs 100% client-side JavaScript.

🎮 Play Now

👉 Link: https://en.inithtml.com/tank-300iq/

If you discover a sick multi-bounce trickshot, let me know — I absolutely want to see it.

Init View Count – Accurate Post Views with REST API & Custom Shortcodes

Hao Nguyen — Thu, 26 Jun 2025 16:11:18 +0000

A fast, minimalist view counter for WordPress – REST-first and developer-friendly

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

No jQuery. No cookies. No fluff.

Features at a Glance

Lightweight and Accurate

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

Flexible Shortcodes

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

Clean Admin Tools

Dashboard widget to show top viewed posts
Settings panel to enable post types, batch, delay, scroll, etc.
Shortcode builders for all views with live preview

Minimal Overhead

No assets loaded unless shortcode used
CSS can be disabled completely
No tracking, no analytics bloat

Built for Developers

Custom meta key support via filters
Exposed REST API endpoints for tracking + top posts
Fully filterable output and query logic
Compatible with headless setups and SPAs

REST API Endpoints

`POST /wp-json/initvico/v1/count`

Record one or more post views.

Parameters:

post_id (int|array): One or more post IDs

`GET /wp-json/initvico/v1/top`

Retrieve top posts by views.

Parameters include:

range: total, day, week, month, trending
number: Number of posts
post_type, category, tag, etc.
fields: minimal or full
no_cache: Disable transient caching

👉 Full REST Guide

Shortcode Examples

Shortcode	Description
`[init_view_count]`	Show view count for current post
`[init_view_list]`	Most viewed posts list
`[init_view_ranking]`	Tabbed list by day/week/month/total

Add template, range, icon, schema, class, field, and other options as needed.

👉 Full Shortcode Guide

Dev Tools You Get

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

Installation

Install via WordPress.org or:

git clone https://github.com/brokensmile2103/init-view-count.git

Then activate and configure in Settings → Init View Count.

Ways to show views:

Add [init_view_count] in post content
Use auto-insert (before/after post content)
Place view lists with [init_view_list]
Show trending or ranked tabs with [init_view_ranking]

Part of the Init Plugin Suite

Init View Count is part of the Init Plugin Suite – a set of minimalist, performance-first tools for WordPress developers.

Thanks for reading. Got feedback or ideas?

→ Project Page

→ GitHub

Create an Image Shuffle Minigame for Your Fanpage with Init Image Grid Shuffler

Hao Nguyen — Sun, 08 Jun 2025 14:31:35 +0000

Looking for a fun way to boost engagement on your social media or fanpage? Try creating a mini tile-shuffling game using Init Image Grid Shuffler — a lightweight, browser-based tool that lets you slice and scramble any image into a grid of tiles.

Let your followers guess the original picture, solve the tile order, or even race to win prizes. No Photoshop or code needed.

What is Init Image Grid Shuffler?

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:

Guess-the-image games
Puzzle-like challenges
Comment-based contests
Viral tag-your-friend posts

How to Create a Minigame

Here's how to build a fun image challenge in under 5 minutes:

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

Example:

“Can you guess what this image is? First 5 correct answers win a shoutout!”

Full How-To Guide

Step 1: Upload Your Image

Supported formats: JPG, PNG, WebP.

Use the “Choose an image…” button to upload.

Step 2: Pick Grid Size

Set how many rows and columns.

3×3 for casual players
5×5 or 7×7 for harder puzzles
Up to 10×10 if you’re evil 😈

Step 3: Customize Borders

Choose border thickness (suggested: 5px–10px).

The tool will smartly auto-pick black or white based on image brightness for best contrast.

Step 4: Generate the Shuffle

Click the “Generate shuffled image” button to preview. Adjust settings if needed.

Step 5: Download and Share

Click “Download image” and upload it to your social platform.

Step 6: (Optional) Show the Answer

Want to reveal or save the correct layout? Hit “Show answer” to see a numbered key.

Creative Minigame Ideas

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

Why Use This Tool?

Zero setup — works directly in browser.
No design skills required.
Smart contrast for clean puzzle visuals.
Optional answer key included.

Tips for Better Engagement

Use intriguing or funny images.
Set a timer or deadline to boost urgency.
Highlight or pin the best answers.
Pair with small giveaways for more participation.

Try it out

Go to Init Image Grid Shuffler and create your first puzzle. If you make something cool, share it in the comments — I’d love to see what you build!

Init Live Search – Smarter WordPress Search with Slash Commands & REST API

Hao Nguyen — Thu, 29 May 2025 05:26:45 +0000

A fast, flexible live search modal for WordPress – powered by REST API, Meilisearch & slash commands

Init Live Search 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 Meilisearch integration for typo-tolerant, sub-50ms relevance-ranked search — with automatic fallback to the local database if Meilisearch is ever unreachable.

No jQuery. No page reloads. No broken search box, ever.

What's New in v1.9.x

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

Features at a Glance

Minimalist, Modern UX

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

Smarter Search Logic

Optional Meilisearch backend — typo-tolerant, relevance-ranked, sub-50ms, with automatic local-DB fallback
Match by title + tags with bi-gram fallback
Search in SEO metadata (Yoast, Rank Math, AIOSEO, TSF, SEOPress)
Support ACF fields (e.g. company_name)
Tunable ranking (e.g. title > SEO > tags)
Search operators: +musthave, -mustnot

Cross-site Search

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

Productivity Built-In

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

WooCommerce Ready

Filter by SKU, stock, price, sale status, brand, attribute, variation, coupon
Show prices, badges, "Add to Cart"
Slash commands: /product, /on-sale, /stock, /sku, /brand, /attribute, /variation, /coupon

Theming & Customization

Built-in style presets: style-full.css, style-topbar.css
Theme override support (style.css in theme)
Optionally disable all plugin CSS
Dark mode (dark, light, auto)

Built for Developers

PHP filters to override queries, ranking, result data
REST API endpoints: /search, /product, /id, etc.
JS events: ils:search-started, ils:results-loaded, etc.
WP-CLI support for Meilisearch reindexing
Complete developer docs + override guide

Optional Lightweight Analytics

Track query count, frequency, timestamps (no personal data)
Grouped view, export as CSV
Disabled by default, uses WordPress transients

Meilisearch Integration (Optional)

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.

Install and run Meilisearch yourself — self-hosted or via Meilisearch Cloud. This plugin doesn't host or manage a server for you.
Go to Settings → Init Live Search → Meilisearch, enter your Host URL, Index Name, and a search-only API key, then enable the integration.
Index your existing content:

   wp init-live-search meili-reindex

Done — search requests are now answered by Meilisearch. New, updated, and deleted posts stay in sync automatically.

Built for safety, not lock-in:

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
The sensitive admin/indexing key can be set via the INIT_LIVE_SEARCH_MEILI_ADMIN_KEY constant in wp-config.php instead of the database
Turn it off any time — core search never depends on Meilisearch being present

Slash Command Examples

Command	Action
`/recent`	Show latest posts
`/id 123`	Load post by ID
`/product`	List products
`/sku ABC123`	Find by SKU
`/on-sale`	Show sale items
`/price 100 500`	Filter by price range (supports `sort`/`rsort`)
`/brand`	Filter by product brand
`/coupon`	Show active, usable coupons
`/fav`	Show saved favorites (localStorage)
`/random`	Jump to a random post

👉 Full Command Guide

Dev Tools You Get

JS events like ils:modal-opened, ils:results-loaded
PHP filters for SEO fields, fallback logic, ranking, and more
Theme override with custom style.css and related-posts templates
WP-CLI command for Meilisearch reindexing
Zero jQuery. Zero forced dependencies.

Installation

Install via WordPress.org or:

git clone https://github.com/brokensmile2103/init-live-search.git

Then activate and configure in Settings → Init Live Search.

Ways to trigger the modal:

Focus any <input name="s">
Press Ctrl + /
Triple-click anywhere
Click elements with data-ils
URL: ?modal=search&term=seo

Part of the Init Plugin Suite

Init Live Search is part of the Init Plugin Suite – a set of minimalist, performance-first tools for WordPress developers.

Thanks for reading. Got feedback or questions?
→ Project Page
→ GitHub