jakedohm

/* Scroll to a certain pixel value from the top of the page */
function scrollToValue(pixel, offset = 200) {
  const newWindowTop = pixel + offset
  window.scroll({
    top: newWindowTop,
    behavior: 'smooth',
  })
}

/* Scroll to an element on the page */

jakedohm

{# Bad: Messy and Hard to Follow #}
{% if link %}
  <a href="/recipes/cookies">
{% endif %}
<span>Cookies</span>
{% if link %}
  </a>
{% endif %}

{# Good: Clean & Clear #}

jakedohm

<template>
  <div class="input-group">
    <label class="input-label"><slot></slot></label>

    <input
      class="input"
      v-model="fieldValue"
      :type="type"
      :class="inputClass"
    />

jakedohm

- pipeline: "Production"
  trigger_mode: "MANUAL" # this means builds have to be triggered manually and won't be triggered on Push or PR merge
  ref_name: "master"
  ref_type: "BRANCH"
  target_site_url: "https://applause.com"
  variables:
    - key: "APPPATH"
      value: "applications/XXXXXXXXXX/public_html/" # TODO: Input the path on the server to the webroot
      settable: false
      description: "Server path to webroot"

jakedohm

/* Apply a default duration to all .transition classes */
[class*="transition"] {
  @apply duration-300;
}

/* Default transition class must come _before_ utilities,
so it can be overridden by any .duration-x utilities */
@tailwind utilities;

jakedohm

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'teal',
      validator: value => ['teal', 'orange'].includes(value)
    }
  }
}

jakedohm

<!-- Before -->
<div class="-mx-8">
  <div class="px-8">
    <div class="bg-purple">Card #1</div>
  </div>
  <div class="px-8">
    <div class="bg-purple">Card #2</div>
  </div>
</div>

jakedohm

function generateScreens(screenSizes) {
  const getPx = val => `${val}px`
  const screenEntries = Object.entries(screenSizes)

  const minWidthBreakpoints = screenEntries.reduce(
    (acc, [name, width]) => ({
      ...acc,
      [name]: { min: getPx(width) },
    }),
    {},

jakedohm

// Import our CSS
import styles from '../css/app.pcss';
import VueConfetti from 'vue-confetti';

// App main
const main = async () => {
    // Async load the vue module
    const { createApp, defineAsyncComponent } = await import(/* webpackChunkName: "vue" */ 'vue');
    // Create our root vue instance
    const root = createApp({

jakedohm

<script>
import { usePersistedRef } from "./usePersistentRef";

export default {
  setup() {
    const name = usePersistedRef('name', 'Jake Dohm')
  }
}
</script>