<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Distinctive Quality</title>
    <meta property="og:site_name" content="Distinctive Quality">
    <meta name="apple-mobile-web-app-title" content="Distinctive Quality">
    <meta name="description" content="Distinctive Quality is the endeavor of Ovi Demetrian Jr who specializes in web design and front end development.">
    <link rel="canonical" href="https://distinctivequality.com/blog/feed/">
    <link rel="alternate" title="Ovi's Blog feed" href="https://distinctivequality.com/blog/feed.php">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/style.css">
<!-- Favicon -->
    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/homescreen-icon.jpg">
    <meta property="og:image" content="/share-preview.png">
<!-- Me -->
    <meta name="author" content="Ovi Demetrian Jr">
    <meta property="fediverse:creator" content="@ovidem@mastodon.social">
    <link rel="me" href="mailto:ovi@distinctivequality.com">
    <link rel="me" href="https://mastodon.social/@ovidem">
    <link rel="me" href="https://github.com/ovidem">
    <link rel="me" href="https://www.linkedin.com/in/ovidem/">
    <link rel="me" href="https://indieaisle.com/@distinctivequality">
    <link rel="me" href="https://x.com/ovidem">
<!-- OpenID -->
    <link rel="openid.delegate" href="https://distinctivequality.com">
    <link rel="openid.server" href="https://openid.indieauth.com/openid">
    <link rel="authorization_endpoint" href="https://distinctivequality.com/auth/">
<!-- Mentions -->
    <link rel="webmention" href="https://webmention.io/distinctivequality.com/webmention">
    <link rel="pingback" href="https://webmention.io/distinctivequality.com/xmlrpc">
  </head>

<body>
<style>
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}
</style>
<div class="parallax">
  <img src="/header-bg-yellow.svg" class="parallax-layer parallax-layer-1">
  <img src="/header-bg-orange-accent.svg" class="parallax-layer parallax-layer-2">
  <img src="/header-bg-orange.svg" class="parallax-layer parallax-layer-3">
  <img src="/header-bg-green.svg" class="parallax-layer parallax-layer-4">
  <img src="/header-bg-purple.svg" class="parallax-layer parallax-layer-5">
  <img src="/header-bg-blue.svg" class="parallax-layer parallax-layer-6">

<div id="content">

<script src="/prism.js"></script>
<script src="/webmention.js" async></script>

<!--
  <header id="intro" class="dark blog-header">
    <div class="container row" style="gap: 30px; row-gap: 0;">
      <div class="definition col-6">
        <h1 class="word"><span class="design">design blog</span></h1>

        <ol class="definitions">
          <li>web design techniques;</li>
          <li>publishing on the web</li>
          <li>occasional ranting</li>
        </ol>

      </div>
      <div class="col-6 intro">
        <div class="summary">
          <h2 style="margin-bottom: 10px;">On product design and web tech</h2>
          <ul class="subnav">
            <li><a href="/blog/">Posts</a></li>
            <li><a href="/links/">Links</a></li>
            <li><a href="/following/">Following</a></li>
          </ul>
          <a href="/follow/" class="follow">Follow Updates</a>
        </div>
      </div>
    </div>
  </header>
-->

  <main id="features">
    <article class="container row h-entry">
      <div class="col-2">
        <div id="ovi">
          <a href="https://distinctivequality.com"><img class="photo" src="/images/ovi-photo.jpg" width="50" height="50" alt="Photo of Ovi Demetrian Jr"></a>
        </div>
      </div>

      <div class="col-8">
        <h1 class="p-name"></h1>
      </div>
      <div style="grid-column: 3 / 11;">
        <hr>
        <div class="pubnotes">
          <p>Thanks for reading!<!-- Do you have any thoughts? Comment or share your own post by <a href="javascript:window.open('mailto:ovi%40distinctivequality.com?subject='+document.title);">emailing me</a>.--> Consider sharing this post with others: <a onclick="copyShareLink();" id="share-link">copy this link</a>, or <a href="javascript:window.open('mailto:?subject='+document.title+'&amp;body='+encodeURIComponent(document.querySelector('meta[name=description]').content)+'%20'+encodeURIComponent(window.location.href));">send an email</a>. And <a href="/follow/">follow my updates</a> to get future posts as they come out. You can also <a href="https://donate.stripe.com/7sIcNg3J96aw3egfYY" target="_blank">donate to buy me a coffee</a>.</p>
          <p style="margin-bottom: 0;">
            <time class="dt-published" datetime="">Originally published December 31st, 1969</time>
          </p>
        </div>
<style>
#webmentions {
  display: none;
}
#webmentions ul.reacts {
  margin-left: 0;

  & a {
    text-decoration: none;
  }

  & img {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }
}
</style>
<div id="webmentions"></div>

      </div>
    </article>
  </main>

<style>
  pre {
    position: relative;
  }
  code {
    display: inline-block;
    position: relative;
    top: -2px;
    margin-bottom: 2px;
    border-radius: 2px;
    border: #ddd 1px solid;
    max-width: 100%;
    padding: 2px 6px 0 6px;
    font-family: "Courier Prime", Courier New, Courier, Helvetica, Arial, serif;
    font-size: 18px;
    line-height: 1.2em;
    word-wrap: break-word;
    cursor: text;
    background-color: #f5f5f5;
    color: #444;
    font-weight: 600;

    @media (prefers-color-scheme: dark) {
      border: #444 1px solid;
      background-color: #111;
      color: #eee;
      font-weight: 400;
    }
    @media (min-width: 1200px) {
      font-size: 20px;
    }
  }
  code.window {
    display: block;
    margin-bottom: 20px;
    border-radius: 5px;
    width: 100%;
    max-height: 210px;
    padding: 9px 15px 6px 15px;
    overflow-x: scroll;
    white-space: pre;
  }

/* Copy Code button */

  .codecopy {
    position: absolute;
    right: 12px;
    top: -12px;
    border-radius: 3px;
    border: #aaa 1px solid;
    background-color: #e2e2e2;
    padding: 2px 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2em;
    text-decoration: none;
    text-shadow: none;
  }
  .codecopy:hover {
    cursor: pointer;
  }

  /* PrismJS syntax highlighting, modified from original: https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */

  .language-css {
    color: #8c5fff;
  }
  .token.cdata, .token.comment, .token.doctype, .token.prolog {
    color: #828282;
  }
  .token.punctuation {
    color: #666;

    @media (prefers-color-scheme: dark) {
      color: #eee;
    }
  }
  .token.namespace {
    opacity: .7;
  }
  .token.constant, .token.deleted, .token.symbol, .token.tag, .token.rule {
    color: #f4255d;
  }
  .token.property {
    color: #00d1d3;
  }
  .token.boolean, .token.number {
    color: #956df6;
  }
  .token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
    color: #9dc500;
  }
  .language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
    color: #666;

    @media (prefers-color-scheme: dark) {
      color: #eee;
    }
  }
  .token.atrule, .token.class-name, .token.function {
    color: #956df6;
  }
  .token.attr-value {
    color: #ffb600;
  }
  .token.css.value {
    color: #956df6;
  }
  .token.keyword {
    color: #f4255d;
  }
  .token.important, .token.regex {
    color: #fd831f;
  }
  /*
  .token.bold, .token.important {
    font-weight: 700;
  }
  .token.italic {
    font-style: italic;
  }
  .token.entity {
    cursor: help;
  }
  */

  #share-link:hover {
    cursor: pointer;
  }

  .reacts {
    font-size: 12px;
  }
</style>
<script>
/* Copy share link */
async function copyShareLink() {
  let text = window.location.href;

  await navigator.clipboard.writeText(text);
  document.querySelector('#share-link').innerText = "[copied]";

  setTimeout(() => {
    document.querySelector('#share-link').innerText = "copy this link";
  }, 1000);
}

/* Copy code */
let blocks = document.querySelectorAll("pre");

blocks.forEach(block => {
  let button = document.createElement("a");
  button.classList.add("codecopy");
  button.innerText = "Copy Code";
  block.appendChild(button);

  button.addEventListener("click", async () => {
    await copyCode(block, button);
  });
});

async function copyCode(block, button) {
  let code = block.querySelector('code');
  let text = code.innerText;

  await navigator.clipboard.writeText(text);
  button.innerText = "Copied!";

  setTimeout(() => {
    button.innerText = "Copy Code";
  }, 1000);
}
</script>

</div>

<footer>
  <div class="container row">
    <div class="row" style="grid-column: 3 / 11;">
      <a href="https://distinctivequality.com" id="logo" class="col-6">
        <img src="/images/distinctive-quality-logo.png" width="280" alt="Distinctive Quality, LLC"><br/>
        <small class="since">Solving problems with design since 2005</small>
      </a>
      <div class="col-6">
        <nav class="primary">
          <ul class="main-nav" style="display: inline-block;">
<!--
            <li><a href="/work/">Work</a></li>
            <li><a href="/services/">Services</a></li>
-->
            <li><a href="/blog/">Blog</a></li>
<!--
            <li><a href="/links/">Links</a></li>
            <li><a href="/following/">Feeds</a></li>
-->
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Connect</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</footer>

</div>

<script src="/global.js"></script>

<!-- Indie Aisle - connect directly to your audience -->
<script src="https://indieaisle.com/stats/get.js"></script>
<!-- / Indie Aisle -->

<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/3.js" site="IFWYQNAD"></script>
<!-- / Fathom -->

</body>
</html>
