argyleink

export default class CustomElement extends HTMLElement {
  
  constructor() {
    super()
    this.$shadow            = this.attachShadow()
    this.$shadow.innerHTML  = this.render()
  }

  connectedCallback() {}
  disconnectedCallback() {}

argyleink

app.notify = (function() {

  // Determine the correct object to use
  var notification = window.Notification || window.mozNotification || window.webkitNotification || false
    , permission = false
    , note;

  function init() {
    notification && notification.requestPermission(permissionSuccess);
  }

argyleink

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {

argyleink

div {
  background: conic-gradient(at top right, deeppink, rebeccapurple);
}

argyleink

figcaption {
  background: linear-gradient(to top, 
    hsla(0 0% 0% / 90%), 
    75%, /* <color-hint> */
    hsla(0 0% 0% / 0)
  );  
}

argyleink

/*
 Pure CSS3 Accordion System inspired by the CSS Ninja
 */

body{ font-family:sans-serif; background:#f9f9f9; }

dl {
  padding: 10px;
}

argyleink

/* HSL's 50% lightness */

/* middle grey */
hsl(0 0% 50%)
lab(53.39% 0 -0.01)
/* 3.94:1 ❌ */

/* lime */
hsl(100 100% 50%)
lab(88.66% -77.99 84.31)

argyleink

main {
  /*  writing mode contextual shorthand for border-top and border-bottom respectively   */
  border-block: 1px solid hotpink;
  
  /*  writing mode contextual shorthand for border-left and border-right respectively   */
  border-inline: 1px solid hotpink;
}

argyleink

foo {
  color: hsl(100,80%,75%);
  background-color: hsl(100,20%,25%);
}

foo.map(styles => ({
  ...styles,
  color: 'hsl(100,80%,75%)',
  background-color: 'hsl(100,20%,25%)',
}))

argyleink

const sugar = {
  on: function(names, fn) {
    names
      .split(' ')
      .forEach(name =>
        this.addEventListener(name, fn))
  },
  setAttributes: function(attrs) {
    Object.entries(attrs)
      .forEach(([key, val]) =>