Posts

Posted on

Site was down a few days..

Due to a configuration error the site was inaccessible or severely diminished the last few days. I was chatting with the host for hours last night trying to get things fixed. Today I gave up and deleted the entire site and configurations thinking I had backed up everything.

Well I cleared out everything and did a fresh install. We are back and working 90%. There are two recent posts that got purged, I will recreate them.

If you find something that does not work please contact me using the web form. https://hazlema.us/index.php/contact/

Thank god for backups!

Posted on

Svelte Transition Example: Fade out an element, alter its value then fade it back in

Link to the Svelte development page.

Svelte Transition Example: Achieve Smooth Visual Transitions by Fading Out an HTML Element, Applying Changes, and Fading It Back In

  • Create an object called opacity
JavaScript
    const opacity = tweened(1, {
        duration: duration,
        delay: 0,
    });

  • Inserts the value of opacity ($opacity) into the HTML
JavaScript
<div style="opacity:{$opacity}">{phraseText}</div>

  • Full Code
Svelte
<script>
    import { tweened } from "svelte/motion";

    let duration = 1000;
    let phraseText = "Phrase Generator";
    let phrases = [
        "1.. 2.. 3.. blast off!",
        "Huston, we have a problem!",
        "It's going to blow!",
        "Dammit Jim, I'm a doctor not a programmer!",
        "I think you should sit down for this...",
        "I can't do that Dave!",
        "Please don't press the any key!",
    ];

    const opacity = tweened(1, {
        duration: duration,
        delay: 0,
    });

    const getPhrase = () => {
        return phrases[Math.floor(Math.random() * phrases.length)];
    };

    const changePhrase = () => {
        opacity.set(0);

        setTimeout(() => {
            phraseText = getPhrase();
            opacity.set(1);
        }, duration);
    };
</script>

<div style="opacity:{$opacity}">{phraseText}</div>

<button
    on:click={() => {
        changePhrase();
    }}>Change Phrase</button
>
Posted on

Ansi Console Colors

Add ANSI colors to your nodejs application.  Supports 16 foreground and background colors using PCBoard BBS syntax.

For a listing of the codes go to the GITHUB page.

You can also install via NPM
npm install ansi-console-colors