For the weekly #codepenchallenge, create a carousel based on grid properties and efficiently rendered by React components.
A Pen by Andreas Borgen on CodePen.
<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> |
For the weekly #codepenchallenge, create a carousel based on grid properties and efficiently rendered by React components.
A Pen by Andreas Borgen on CodePen.
<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> |
@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, |
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.
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),
});
A Pen by Andreas Borgen on CodePen.
<script> | |
console.clear(); | |
if (!window.AudioContext) { | |
if (!window.webkitAudioContext) { | |
alert('AudioContext not supported!'); | |
} | |
window.AudioContext = window.webkitAudioContext; | |
} |
A Pen by Andreas Borgen on CodePen.
<div class="loader"></div> |