JavaScript Guidelines

JavaScript Guidelines

What actually works in TELA - verified language features, CSS capabilities, and UI patterns from working applications.

Based on Real Working Code All features documented here are proven to work in the official tela_tests/app1 demo application. For complete source code and detailed patterns, see the TELA Demo section.

Looking for actual code to copy? The TELA Demo section has complete source code, connection patterns, API examples, and file structures ready to use.

JavaScript Patterns That Actually Work

✅ Modern JavaScript (ES6+) Works Fine

Contrary to some documentation, modern JavaScript works perfectly:

// ✅ PROVEN: ES6+ features from working tela_tests/app1
let socket;                              // let variables work
const applicationData = {                // const objects work
    "id": "71605a32e3b0c44298fc1c549afbf4c8496fb92427ae41e4649b934ca495991b",
    "name": "TELA Demo Application",
    "description": "Basic WS connection parts for TELA application",
    "url": "http://localhost:" + location.port
};
 
let typed = 0;                          // let primitives work
const typeSpeed = 50;                   // const primitives work
const jsonBody = document.getElementById("jsonDisplayBody");  // const DOM refs work

✅ Arrow Functions Work in Context

// ✅ PROVEN: Arrow functions work in HTML script tags (from tela_tests)
document.addEventListener("mousemove", (event) => {
    clearTimeout(mouseTimeout);
    svgCursor.style.opacity = 1;
    svgCursor.style.left = event.clientX - 12 + "px";
    svgCursor.style.top = event.clientY - 15 + "px";
    mouseTimeout = setTimeout(() => {
        svgCursor.style.opacity = 0;
    }, 200);
});

✅ Traditional Functions for Main Logic

// ✅ PROVEN: Traditional function declarations for main app logic
function typeWriter(text) {
    const html = document.getElementById("typingLabel");
    if (typed === 0) {
        html.innerHTML = "";
        typeText = text;
    }
    // ... rest of implementation
}
 
function sendData(d) {
    if (socket && socket.readyState === WebSocket.OPEN) {
        try {
            socket.send(JSON.stringify(d));
            // ... rest of implementation
        } catch (error) {
            console.error("Failed to send data:", error);
        }
    }
}

CSS Patterns That Actually Work

✅ Complex Animations Work Fine

From working tela_tests/app1/style.css:

/* ✅ PROVEN: Complex keyframe animations work perfectly */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
 
@keyframes half-spin {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(180deg); }
    50% { transform: rotate(175deg); }
    60%, 65% { transform: rotate(190deg); }
    100% { transform: rotate(360deg); }
}
 
@keyframes pulseGreen {
    0% { 
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--green);
    }
    50% { 
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 128, 0, 0);
    }
    100% { 
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 128, 0, 0);
    }
}
 
/* ✅ PROVEN: CSS variables work perfectly */
:root {
    --green: #46b868;
    --yellow: #fffb00;
    --red: #ed2024;
}
 
@media (prefers-color-scheme: dark) {
    :root {
        --background: #0d1117;
        --rings: #46b86815;
        --wave: #d4d4d46b;
        --typing: #ffffffbf;
        --hover: #a5a5a5;
        --text: white;
        --link: #d4d4d4;
        --gray: #7c7c7c;
    }
}

✅ Advanced CSS Features Work

/* ✅ PROVEN: Advanced CSS features from tela_tests */
.ring-image {
    width: 120%;
    height: 120%;
    animation: spin 120s ease-in infinite;  /* Long animations work */
}
 
.wave {
    background: var(--wave);
    border-radius: 1000% 1000% 0 0;        /* Complex border-radius works */
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite; /* Negative delays work */
    transform: translate3d(0, 0, 0);        /* 3D transforms work */
    opacity: 0.7;
}
 
/* ✅ PROVEN: Complex selectors work */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
/* ✅ PROVEN: Media queries work */
@media screen and (max-width: 670px) {
    .typing-container {
        margin-top: -40px;
        max-height: 280px;
        max-width: 90%;
    }
}

XSWD Integration Patterns

XSWD connection patterns, application data structures, and API integration are fully documented in the TELA Demo section with complete working code.

See:

Key Takeaway: All XSWD patterns work perfectly in TELA. The demo section has the exact code patterns to copy.

UI/UX Patterns That Work

✅ Professional Animations

<!-- ✅ PROVEN: Sophisticated SVG animations from tela_tests -->
<div class="svg-container">
    <svg class="ring-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1947.86 1950.9">
        <!-- Complex SVG paths work fine -->
    </svg>
</div>
 
<div class="svg-container">
    <svg class="ring-image2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1773.58 1769.19">
        <!-- Multiple animated SVGs work -->
    </svg>
</div>

✅ Interactive Effects

// ✅ PROVEN: Custom cursor effects from tela_tests
const svgCursor = document.getElementById("svgCursor");
document.addEventListener("mousemove", (event) => {
    clearTimeout(mouseTimeout);
    svgCursor.style.opacity = 1;
    svgCursor.style.left = event.clientX - 12 + "px";
    svgCursor.style.top = event.clientY - 15 + "px";
    mouseTimeout = setTimeout(() => {
        svgCursor.style.opacity = 0;
    }, 200);
});

✅ Typing Animation System

// ✅ PROVEN: Sophisticated typing effect from tela_tests
let typed = 0;
let typeText = "";
const typeSpeed = 50;
 
function typeWriter(text) {
    const html = document.getElementById("typingLabel");
    if (typed === 0) {
        html.innerHTML = "";
        typeText = text;
    }
 
    if (typed < typeText.length) {
        html.innerHTML += typeText.charAt(typed);
        typed++;
        setTimeout(typeWriter, typeSpeed);
    }
 
    if (typed === typeText.length) {
        setTimeout(() => {
            typed = 0;
        }, typeSpeed);
    }
}

API Integration Patterns

Complete API integration examples with DERO, Gnomon, EPOCH, and TELA-specific methods are available in the TELA Demo section.

See:

Key Takeaway: All DERO RPC methods, Gnomon indexer calls, EPOCH mining APIs, and TELA-specific methods work perfectly. The demo section has working examples of every API pattern.

File Structure & Size

Complete file structure, organization patterns, and size analysis are documented in the TELA Demo section.

See:

Key Takeaway: The 18KB limit allows for sophisticated applications. The demo shows exactly how to organize files and stay within constraints.

Summary: What Works in TELA

✅ Modern JavaScript Features

  • ES6+ syntax (let, const, arrow functions, template literals)
  • Modern DOM APIs
  • Promises and async/await patterns
  • Classes and modules (within constraints)

✅ Advanced CSS Features

  • Complex animations (@keyframes, transforms)
  • CSS variables (custom properties)
  • Media queries (responsive design)
  • Advanced selectors
  • 3D transforms and filters

✅ UI/UX Capabilities

  • Professional animations and transitions
  • Interactive effects (cursors, hover states)
  • Typing animations and text effects
  • SVG animations
  • Complex layouts and positioning

Next Steps

Ready to build? Check out the TELA Demo section for complete working code examples you can copy and adapt.

For detailed implementation:

For getting started: