jakedohm’s gists

jakedohm / Field.vue

Last active December 2, 2019 22:10

Basic concept/idea for managing forms in Vue

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

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

jakedohm / conditionally-wrap-example.twig

Created November 7, 2019 21:42

jakedohm / smooth-scroll.js

Created November 1, 2019 15:42

	/* 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 / sizzleLight.js

Created May 28, 2019 15:52

	const $ = selector => document.querySelector(selector)
	const $$ = selector => document.querySelectorAll(selector)

	// $ returns a node (or null)
	$('.nav').classList.add('open')

	// $$ returns a NodeList (which is empty if no matching elements are found)
	$$('ul > li > a').forEach($node => $node.style.background = 'red')

jakedohm / if-to-object.js

Created May 21, 2019 02:11

Showing a refactor of a function with if statements to use key/value pairs in an object

	/* Before */
	function getErrorMessage(error) {
	if(error === 'username') {
	return `Username is required`
	} else if (error === 'email') {
	return `Don't forget your email!`
	} else if (error === 'password') {
	return `Please enter your password`
	}
	}

jakedohm / Example.vue

Last active May 15, 2019 11:51

Vue Component to Dim Screen

	<template>
	<!-- Example Usage -->
	<div class="menu">
	<ScreenDimmer :visible="menuOpen" />
	</div>
	</template>

	<script>
	export default {
	data() {

jakedohm / gridsome.server.js

Last active April 24, 2020 20:42

Gridsome (0.6) + Craft CMS Integration

	// Server API makes it possible to hook into various parts of Gridsome
	// on server-side and add custom data to the GraphQL data layer.
	// Learn more: https://gridsome.org/docs/server-api

	// Changes here requires a server restart.
	// To restart press CTRL + C in terminal and run `gridsome develop`

	const { setContext } = require('apollo-link-context')
	const { HttpLink } = require('apollo-link-http')
	const {

jakedohm / SimpleConfirmModal.vue

Created May 10, 2019 18:29

	<template>
	<div v-if="visible" class="modal">
	<div>
	<div>{{ message }}</div>

	<div>
	<button class="button-secondary" @click="cancel">Cancel</button>
	<button class="button-primary" @click="confirm">Confirm</button>
	</div>
	</div>

jakedohm / Introspect Remote Schema

Created May 2, 2019 18:54

	const { setContext } = require('apollo-link-context')
	const { HttpLink } = require('apollo-link-http')
	const {
	introspectSchema,
	makeRemoteExecutableSchema,
	} = require('graphql-tools')
	const fetch = require('node-fetch')

	const http = new HttpLink({
	uri: 'http://example.com/api',

jakedohm / CreateAccountForm.vue

Created March 27, 2019 15:07

A Vue component to handle submitting account creation details with Axios, instead of with a standard HTML form

	<template>
	<form method="post" accept-charset="UTF-8">
	<h3><label for="username">Username</label></h3>
	<input v-model="username" id="username" type="text" name="username" />

	<h3><label for="email">Email</label></h3>
	<input v-model="email" id="email" type="text" name="email" />

	<h3><label for="password">Password</label></h3>
	<input v-model="password" id="password" type="password" name="password" />