June 19, 2019

Working on brands list for TAP

Used this package to make the brands scroll

It's client side only, so found some new ways in Nuxt to make this work

Use the no-ssr component

<no-ssr v-if="showBanner">
  <marquee-text :duration="30" :repeat="2">
    ...
  </marquee-text>
</no-ssr>

Import inside components method

  components: {
    'MarqueeText': () => import('vue-marquee-text-component')
  },

Then only show the no-ssr component after mount

  mounted() {
    if (process.client) {
      this.showBanner = true
    }
  }

Weird rotation and lots of z-index issues here.
Used my first production sass loop to indent at an angle

li {
  padding: 0.666em 0.5em 0.666em 0;
  @for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      padding-left: #{0.125*$i}em;
    }
  }
}

E led our weekly lunch and we talked about Docker.

Learned about the difference between images and containers, and some commands
docker image -ls and docker ps
compose files and volumes

wondering if I should abandon the UI kit and just use the Nuxt site
Got navigation done, had to add a wrapper to control animation overflow, but that's fine, added a click handler for it close.
Used some wonky stuff to communicate between child components, normal pattern, ok, but maybe I should have used vuex?