cahir

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cahir</title> <meta name="description" content="Proxies, Tagged-templates and Webcomponents, side by side">  <meta itemprop="name" content="cahir"> <meta itemprop="description" content="Proxies, Tagged-templates and Webcomponents, side by side"> <meta itemprop="image" content="static/gwent-chain/logo/logo.png">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="cahir"> <meta name="twitter:description" content="Proxies, Tagged-templates and Webcomponents, side by side"> <meta name="twitter:image:src" content="static/gwent-chain/logo/logo.png">  <meta property="og:title" content="cahir"> <meta property="og:description" content="Proxies, Tagged-templates and Webcomponents, side by side"> <meta property="og:image" content="static/gwent-chain/logo/logo.png"> <meta property="og:url" content="https://github.com/IbrahimTanyalcin/Cahir"> <meta property="og:site_name" content="cahir"> <meta property="og:type" content="website"> <link rel="preload" href="static/gwent-chain/fonts/angel.ttf" as="font" crossorigin> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"/> <link rel="stylesheet" href="static/css/prism.css"/> <script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script> <style> :root { --hl-color: #dd9944aa; --font-family-base: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } #explanation { background-color: transparent; color: beige; font-size: clamp(16px, 1.2rem, 32px); } #explanation li code { color: var(--hl-color); } #explanation::first-letter, .code-action button::first-letter { font-size: 4rem; text-transform: uppercase; } .code-action button::first-letter { font-family: 'angel'; } .code-action button { all: unset; margin: 0.5rem; min-width: calc( 25% + 6rem); text-align: center; background-color: #a18c6ccc; padding: 0.2rem 1.5rem; border-radius: 0.25rem; cursor: pointer; border-top: 0.6rem ridge #774000; border-left: 0.6rem groove #774000; border-right: 0.6rem ridge #774000; border-bottom: 0.6rem groove #774000; box-shadow: inset 0px 0px 5px 3px rgba(1,1,1,0.3); } .code-action button:hover { background: radial-gradient(circle, #a18c6ccc, #44444444); box-shadow: 0px 0 5px 5px rgba(255,255,255,0.2) } details summary { list-style: none; } details div { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); z-index: 1000; } details pre { width: 80vw; height: 80vh; } </style> </head> <script src="static/js/cahir.0.0.6.evergreen.umd.js"></script> <script src="static/js/prism.js" data-manual></script> <body> <svg style="position: fixed; top: 0; left: 0; min-width: 100vw; min-height: 100vh; z-index:-1000;" viewBox="0 0 1 1" preserveAspectRatio="none"> <defs> <radialGradient id="spotlight-gradient" cx="0.5" cy="0.5" r="0.7071" spreadMethod="pad"> <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:0" /> <stop offset="60%" style="stop-color:rgb(50,50,50); stop-opacity:0.9" /> <stop offset="100%" style="stop-color:rgb(255,255,255); stop-opacity:1" /> </radialGradient> <mask id="spotlight-mask" maskUnits="userSpaceOnUse"> <circle cx="0.5" cy="0.5" r="0.7071" fill="url(#spotlight-gradient)" /> </mask> </defs> <image href="static/gwent-chain/img/gwentbg.jpg" x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice" mask="url(#spotlight-mask)" /> </svg> <div style = "margin:4rem 2rem; width: calc(100% - 2rem); text-align: center; font-family: var(--font-family-base);"> <img style = "width:120px;" src="static/gwent-chain/logo/logo.svg"/> <p style = "color: var(--hl-color)"> <span style="background: linear-gradient(40deg, crimson , gold, deeppink, royalblue 80%); -webkit-background-clip: text; background-clip: text; font-size: 3rem; font-weight: 700;"> Cahir </span><br> <span style="font-size: 2rem; font-weight: 400;">Proxies, tagged-templates and webcomponents, side by side</span><br> <i style="font-size: 1.4rem;"> In about 160 lines of code </i> </p> </div> <div class="code-action" style="position: relative; width: calc(max(320px, 30vw)); margin: 0.5rem; /* outline: 2px solid red; */"> <div id="explanation"> Cahir (<code>`ch`</code>) is a function proxy that can be interchangibly used for method chaining and tagged templates. You can:<br> <ul> <li>reuse tagged templates via <code>ch.pickle`...`</code></li> <li>label variables like `JSON` <code>ch`method variable:${some_value}`</code></li> <li>spread the values within tagged templates <code>ch`method ...${[some_array]}`</code></li> <li>or do both of above</li> <li>return webcomponents <code>ch`<game-card ${{ data: {values, d} }}/>`</code></li> </ul> Below, the data that gets rendered as cards are mutated every few seconds. You can pause the auto mutate, open the inspector and change the `data` and see for yourself! </div> <pre style="white-space: pre-line;"> <code id="code-block" class="language-js"></code> </pre> <div style="display: flex; justify-content: center; align-items: center;"> <button>Pause</button> </div> <div style="display: flex; justify-content: center; align-items: center;"> <button> <details style="user-select: text;"> <summary>App.js</summary> </details> </button> </div> <a style="all:unset; display: flex; justify-content: center; align-items: center;" href="https://github.com/IbrahimTanyalcin/Cahir" rel="nofollow noopener" target="_blank" aria-label="View source on Github" > <button> README <img style= "vertical-align: bottom; width:4rem;" src="https://upload.wikimedia.org/wikipedia/commons/c/c2/GitHub_Invertocat_Logo.svg"> </button> </a> </div> <script src="static/js/ch.js"></script> <script src="static/js/app.js"></script>  <a class="github-corner" href="https://github.com/IbrahimTanyalcin/Cahir" rel="nofollow noopener" target="_blank" aria-label="View source on Github"> <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 250 250" style="fill:#a18c6ccc; color:#3a3a3a; position: absolute; top: 0; border: 0; right: 0; z-index: 999;" aria-hidden="true"> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> </svg> </a> </body> </html>