JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<ul>
                            <li><a href="#">Different Types of Arrays in JavaScript + When to Use Them</a></li>
                            <li><a href="#">Detecting the OS, Browser and Browser Version before old methods Deprecate đź’€</a></li>
                            <li><a href="#">Why I decided to Stop Semicolons In JavaScript</a></li>
                            <li><a href="#">ES Modules: Testing Private Functions</a></li>
                            <li><a href="#">Understanding State Management</a></li>
                            <li><a href="#">XssKillah — A fast HTML Sanitization Library</a></li>
                            <li><a href="#">Why you should use AVIF over JPEG, WebP, PNG and GIF In 2024</a></li>
                            <li><a href="#">WebGPU — Tutorial 1: “Hello World!”</a></li>
                            <li><a href="#">Stop Using localStorage</a></li>
                            <li><a href="#">The Power of IndexedDB and the Birth of db64: A Practical Alternative</a></li>
                            <li><a href="#">Tailwind vs Modern CSS</a></li>
                            <li><a href="#">You May Not Need TypeScript</a></li>
                            <li><a href="#">The need for Template Literal Highlighting</a></li>
                            <li><a href="#">JavaScript: The Framework Engineering Problem</a></li>
                            <li><a href="#">Golang: For-loop Concurrency Quirk</a></li>
                            <li><a href="#">Why Go: The benefits of Golang</a></li>
                            <li><a href="#">Golang: Is ioutil depreciated?</a></li>
                            <li><a href="#">Responsive Images in 2020… Vision</a></li>
                            <li><a href="#">State Management for User Interfaces</a></li>
                            <li><a href="#">JavaScript: Poorly Designed?— Part 4: Object-based, Higher-order, Functional Programming</a></li>
                            <li><a...

CSS

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* Adjust as needed */
}

JavaScript

// Function to generate random glitch effect
function glitchText() {
    var text = document.getElementById("glitch-text");
    var originalText = text.innerText;
    
    // Generate random glitch effect
    var glitchedText = originalText.split('').map(function(char) {
        if (Math.random() < 0.1) {
            // Replace character with random glitch character
            return String.fromCharCode(Math.floor(Math.random() * 94) + 33);
        } else {
            return char;
        }
    }).join('');
    
    // Update text with glitched version
    text.innerText = glitchedText;
}

// Periodically update glitch effect
setInterval(glitchText, 100);