How to keep custom commands, add-ons, and terminal extensions fast and stable.

The Cointacted Social Terminal is lightweight, but poorly written commands or add-ons can still cause:

• slow input
• laggy animations
• freezing output
• excessive DOM size
• duplicate event listeners
• multiple script loads
• unnecessary REST calls

This article explains how to avoid all of that.

---

🔹 1. Avoid Unnecessary DOM Insertions #

Every append_line() creates a new DOM element.

❌ Bad:

for (let i = 0; i < 1000; i++) {
    append_line("Spam line " + i);
}

This will:

• blow up DOM size
• freeze scrolling
• crash older mobile devices

---

✔ Good (batch output) #

const buffer = [];
for (let i = 0; i < 100; i++) {
    buffer.push("Line " + i);
}

buffer.forEach(line =>
    append_line(line)
);

Or even better — minimize output.

---

🔹 2. DO NOT Rewrite the Terminal DOM #

Never do:

document.querySelector('.cointacted-social-terminal__output').innerHTML = "";

This destroys:

• history state
• scroll state
• the internal cursor
• lifecycle integrity

Use the built-in command:

clear

Or programmatically:

CointactedSocialTerminalTerminal.registry.clear(input);

---

🔹 3. Avoid Endless Loops in Commands #

Dangerous:

while (true) {}

This will freeze the browser.

✔ Use async timers instead: #

function loop() {
    // work
    setTimeout(loop, 50);
}
loop();

---

🔹 4. Use Async/Await for Heavy Work #

Long blocking tasks freeze the UI:

❌ Bad:

for (let i = 0; i < 1e9; i++) {}
append_line("Done");

✔ Good:

await new Promise(r => setTimeout(r));
doHeavyWorkInChunks();

---

🔹 5. Limit REST Calls (Debounce & Cache) #

Example of BAD REST usage:

append_line(await fetch('/wp-json/...'));
append_line(await fetch('/wp-json/...'));
append_line(await fetch('/wp-json/...'));

This causes:

• resource spam
• rate limits
• slow responses

✔ Cache responses #

let cachedData = null;

CointactedSocialTerminalTerminal.registry.mycmd = async function () {
    if (!cachedData) {
        const res = await fetch('/wp-json/...'); 
        cachedData = await res.json();
    }

    append_line(JSON.stringify(cachedData), "system");
};

---

🔹 6. Remove Event Listeners When Not Needed #

Do NOT attach endless event listeners:

❌ Bad:

document.addEventListener('cointacted_social_terminal_output', fn);
document.addEventListener('cointacted_social_terminal_output', fn);
document.addEventListener('cointacted_social_terminal_output', fn);

If your script loads twice, you get duplicate triggers.

✔ Best practice: #

• Use one listener per script
• Use named functions
• Use .removeEventListener if needed

Example:

function onOutput(e) {
    console.log(e.detail);
}

document.addEventListener('cointacted_social_terminal_output', onOutput);

// Later, if needed:
document.removeEventListener('cointacted_social_terminal_output', onOutput);

---

🔹 7. Prevent Duplicate Script Loading #

Make sure your extension script loads only once:

Check:

• child theme’s functions.php
• add-on plugin
• page builders
• caching plugins injecting it multiple times

Use DevTools → Network → JS tab.

---

🔹 8. Keep Commands Simple #

Commands should be:

• short
• efficient
• readable
• minimal

Avoid stuffing:

• giant data sets
• heavy processing
• multi-MB JSON
• massive logs

---

🔹 9. Avoid Printing Massive JSON Objects #

Long output gives:

• slow rendering
• ugly UI
• overwhelming scroll
• lag on mobile

Instead highlight essentials:

❌ Bad:

append_line(JSON.stringify(bigObject), "system");

✔ Good:

append_line("Items: " + bigObject.items.length, "system");
append_line("Status: " + bigObject.status, "system");

---

🔹 10. Do NOT Override Core Logic in Heavy Ways #

Avoid:

• overriding the run() method
• overriding parser
• overriding typing handler
• overriding deep internals

You can safely:

• wrap commands
• add events
• add your own logic

But never replace the core machinery.

---

🔹 11. Avoid Large Inline Styles or Huge CSS Animations #

CSS is cheap, but:

• huge shadows
• heavy blurs
• many simultaneous animations

can slow down older devices.

Prefer clean, lightweight styles.

---

🔹 12. Unsubscribe or Stop Running Timers #

If you use:

setInterval()

Make sure to clear it when done, or it will run forever.

Example:

const interval = setInterval(() => {
    append_line("tick");
}, 1000);

// Stop after 5 ticks
setTimeout(() => clearInterval(interval), 5000);

---

🔹 13. Avoid Large Audio or Image Loads #

Don’t load:

• large MP3 files
• uncompressed WAV
• 4K images

Keep everything lightweight.

---

🔹 14. Keep Add-On Code Modular & Namespaced #

Good:

const MyAddon = {};
MyAddon.commands = {};

Bad:

let x = 10;
function a() {}

Namespace everything to avoid conflicts.

---

🔹 15. Use Logging Responsibly #

Too much logging slows down DevTools:

❌ Bad:

console.log("message", massiveData);

✔ Good:

console.log("Status OK");

Or remove logs in production.

---

🎯 Summary #

To maintain blazing-fast performance:

✔ Limit DOM insertions #

✔ Avoid infinite loops #

✔ Use async for heavy tasks #

✔ Cache REST responses #

✔ Avoid duplicate scripts or listeners #

✔ Keep commands lightweight #

✔ Avoid massive JSON/output #

✔ Avoid deep core overrides #

✔ Clean up timers #

✔ Namespace everything #

✔ Avoid expensive animations #

Following these guidelines ensures your command ecosystem stays smooth, responsive, and future-proof.