June 10, 2019

I peer reviewed J's work on Minor's Farm to Label page.

Reviewed design changes on new PLV form.

Reviewed possible analytics issues on a JMS landing page that's in development.

• Issue is that AS provided GA and GTM code snippets. The GTM container is completely empty, so only the GA pageview is firing. Typically we wouldn't put GA and GTM on the same page, so waiting on clarification.

I updated my nuxt base with focus stuff for modal

• according to Aria practices (opens new window)
• the last part about using aria-hidden on everything else seems quite complex, skipping that
• another issue is that I designed my modal to have any interior content, but setting the focus on the item you want may not work with slots. Will need to test with real content sometime.

Added nuxt/sitemap to my nuxt base.

Updated all version numbers in package.json

Helped H with some v-model stuff related to checkboxes.

• Looks like if you have multiple checkboxes hooked up to the same model, with no values, it'll just be a boolean and they'll overwrite each other, if you set a value to a string, they'll populate an array automatically.

Researched vue based carousels / sliders, to maybe replace Hooper

• Vue Carousel : Fengyuanchen (opens new window)
• for Owl Carousel (opens new window)
• Vue Glide (opens new window)
• For Flickity! (opens new window)
• Vue Carousel (opens new window)
• More at Madewithvuejs (opens new window)

Worked on more Strapi proving out. Will meet tomorrow with other senior devs to see what they think.

Started developing button styles for TAP site.

Turns out Sass doesn't recommend interpolating numbers.

• Sass Documentation: Interpolation (opens new window)
• Used some suggestions from here instead
  • Px to Em Functions (opens new window)

$browser-context: 16;

body {
  font-size: $browser-context * 1px;
}

@function em($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }

  @if (unitless($context)) {
    $context: $context * 1px;
  }

  @return $pixels / $context * 1em;
}

h1 {
  font-size: em(48);
}

Starting development on angled things for TAP

• clip-path is great, but it lacks support.
• SVG option works but is extremely verbose.
• found a nice mixin for using psuedo elements to simulate skewed edges here (opens new window)