danyn

Perfect — let’s go a bit deeper!

---

What happens if you hit a conflict during git rebase?

Imagine you start a rebase:

git rebase -i origin/main

danyn

Get a meta object definition by id

query

query getMetaobjectDefinitionById($id: ID!) {
  
  metaobjectDefinition(id: $id) {
    type,
 metaobjectsCount,

danyn

query GetShopMetafieldsByNamespace($namespace: String!) {
  shop {
    metafields(namespace: $namespace, first:50) {
      nodes {
        id,
        value
      }
    }
  }
}

danyn

<div id="app">
  <div class="container">

    <main>
      <component :is="selected">
        <svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">
          <defs>
            <filter id="inverse">
              <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0" />

danyn

<div id="app">
  <div>
    <div class="button-group">
      <button @click="animateBall" v-if="!running">Start</button>
      <button @click="cancelAnimate" v-else>Reset</button>
      <height-counter @heightincrease="incrementHeight"></height-counter>
      <radius-counter @radiusincrease="incrementRadius"></radius-counter>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" class="bounce">
      <line x1="600" x2="600" y1="0" :y2="total+radius" stroke="#555" stroke-width="2" stroke-dasharray="5, 5"/>

danyn

<div id="app"> 
 <svg class="dial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="150 0 350 600">
  <defs>
    <clipPath id="clip-path">
      <path fill="none" d="M27.7.3h331.7v332.32H27.7z"/>
    </clipPath>
    <clipPath id="clip-path-2">
      <path fill="none" clip-path="url(#clip-path)" d="M28.4.9h.6l-.6.7V.9z"/>
    </clipPath>
    <clipPath id="clip-path-3">

danyn

<div id="app">
  <div>
    <button @click="getTaco">
      Click me to order a taco
    </button>
    <h2>{{order}}</h2>
    <p v-if="orderStatus">{{ orderStatus }}</p>
    <p></p>
  </div>
</div>

danyn

Chart made with Vue, Transitioning State

Chart made without a charting library like d3, but composed of Vue directives. Showing also how to transition state with watchers

A Pen by daniel on CodePen.

License.

danyn

<div id="app">
  <section>
    <h1>🍺 Make yourself some Punk Beers 🍻</h1>
    <div v-if="!beers.length" class="loading">Loading...</div>
    <div v-for="beer in beers" class="beer-contain">
      <div class="beer-img">
        <img :src="beer.img" height="350" />
      </div>
      <div class="beer-info">
        <h2>{{ beer.name }}</h2>

danyn

Chart made with Vue, Transitioning State

Chart made without a charting library like d3, but composed of Vue directives. Showing also how to transition state with watchers

A Pen by Sarah Drasner on CodePen.

License.