Sphinxxxx

<script>
    console.clear();

    if (!window.AudioContext) {
        if (!window.webkitAudioContext) {
            alert('AudioContext not supported!');
        }
        window.AudioContext = window.webkitAudioContext;
    }

Sphinxxxx

border-radius Playground

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

A general-purpose DOM tree walker based on https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page (Phrogz' answer and its comments).

The textNodesUnder() function would then look like this:

function textNodesUnder(el) {
    return walkNodeTree(el, {
        inspect: n => !['STYLE', 'SCRIPT'].includes(n.nodeName),
        collect: n => (n.nodeType === Node.TEXT_NODE),
        //callback: n => console.log(n.nodeName, n),

});

Sphinxxxx

HyperMorph 3000™

Remember the good old 90's, when morphing was the coolest thing ever?

Well, I finally figured out how to do it myself!

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

@function strip-unit($value, $newUnit: "") {
    //https://www.sitepoint.com/understanding-sass-units/
    $units: (
        'px':   0px,
        'cm':   0cm,
        'mm':   0mm,
        '%':    0%,
        'ch':   0ch,
        'in':   0in,
        'em':   0em,

Sphinxxxx

<h1><a href="https://github.com/Sphinxxxx/vanilla-picker" target="_blank">vanilla-picker</a> demo</h1>

<section>
    <h2>Basic example</h2>
    <a class="button" id="basic">Click me!</a>
</section>

<section>
    <h2>More <a href="https://sphinxxxx.github.io/vanilla-picker/gen/Picker.html#setOptions__anchor">options</a></h2>
    <a class="button" id="custom">Click me (and then 'Ok')!</a>

Sphinxxxx

#CodePenChallenge Grid Based Carousel

For the weekly #codepenchallenge, create a carousel based on grid properties and efficiently rendered by React components.

A Pen by Andreas Borgen on CodePen.

License.

Sphinxxxx

<script src="//unpkg.com/[email protected]"></script>
<script src="//unpkg.com/[email protected]"></script>
<script src="//unpkg.com/[email protected]"></script>

<header>
    <h2>Moon calendar</h2>
    <aside>(All data from <a target="_blank" href="https://www.timeanddate.com/moon/norway/hamar?month=9&year=2018">timeanddate.com</a> )</aside>
</header>

<form>

Sphinxxxx

<canvas></canvas>

Sphinxxxx

<main>
    <h1>&lt;meter&gt; element settings</h1>
    <h3><a target="_blank" href="https://stackoverflow.com/questions/44939391/what-exactly-do-the-low-high-and-optimum-attributes-do-in-the-meter-element">What exactly do the low, high and optimum attributes do?</a></h3>

    <label>Thresholds (<code>low</code>/<code>high</code>) & <code>optimum</code>:</label>
    <div class="slider" id="sl1">
        <div class="thumb" data-icon="▿" data-point="down" data-prop="low"></div>
        <div class="thumb" data-icon="▿" data-point="down" data-prop="high"></div>
        <div class="thumb" data-icon="★" data-point="down" data-prop="optimum" style="color:orange;"></div>
    </div>