Erik Hanchett ErikCH

🏠

Working from home

I'm a developer at @aws! I'm also an author of the Ember.js Cookbook and Vue.js in Action. Open source fan!

ErikCH / setup-web-comp.html

Created February 20, 2022 18:37

setup-web-comp

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Tester</title>
	</head>
	<body>
	<h1>Does this work?</h1>
	<my-custom-text customText="'heyyou'"></my-custom-text>

ErikCH / styles.css

Created February 7, 2022 02:03

	* {
	font-size: 1.4rem;
	font-family: "Roboto", arial, sans-serif;
	}

	html {
	font-size: 62.5%;
	padding: 1rem;
	}

ErikCH / app.js

Created February 7, 2022 02:03

	const URL = "https://www.google.com/search?q=";
	const FEELING_LUCKY = "&btnI=&sourceid=navclient&gfns=1";

	const inputDetails = document.querySelector("input");
	const lucky = document.querySelector("button[data-lucky]");

	lucky.addEventListener("click", () => {
	console.log("here", inputDetails.value);
	if (!inputDetails.value) return;
	document.location = `${URL}${inputDetails.value}${FEELING_LUCKY}`;

ErikCH / index.html

Created February 7, 2022 02:02

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Erik's Google Search</title>
	<link rel="stylesheet" href="styles.css" />
	<link rel="stylesheet" href="https://unpkg.com/normalize.css" />
	<script src="app.js" defer></script>

ErikCH / App.vue

Created January 14, 2022 03:52

App.vue for Renderless Component Video

	<script lang="ts" setup>
	import FetchJson from "./components/fetch-json.vue";
	// import { useFetch } from "@vueuse/core";

	const url = "https://api.thecatapi.com/v1/images/search";
	// const { isFetching: loading, error, data: response } = useFetch(url).json();
	</script>

	<template>
	<h3>Random Cat Pics!</h3>

ErikCH / fetch-json.vue

Created January 14, 2022 03:51

	<script setup lang="ts">
	import { ref, useSlots, getCurrentInstance } from "vue";

	const props = defineProps<{ url: string }>();
	const slots = useSlots();

	let res = ref("");
	let loading = ref(true);

	fetch(props.url)

ErikCH / App.vue

Created January 2, 2022 23:24

For YT video on watchEffect vs Watch -> https://www.youtube.com/watch?v=QkadKspKoJo

	<script setup>
	import { watchEffect, ref, computed, watch } from "vue";
	import { useRoute } from "vue-router";
	const route = useRoute();
	const welcome = ref("Hello!");
	const count = ref(0);
	const count2 = ref(0);

	// Writes to a pre tag (Like console.log)
	const write = ref("");

ErikCH / index.html

Created April 22, 2021 23:16

	<body>
	<div id="app">
	<div class="nes-container with-title is-centered">
	<p class="title">Vue Form Test</p>
	<form @submit.prevent="submit">
	<div class="nes-field">
	<label for="name_field">Character Name</label>
	<input placeholder="Enter name here" type="text"
	name="name"
	id="name_field" class="nes-input" />

ErikCH / vue3

Created February 10, 2020 04:15

	<div id="app"></div>

	<script src="vue.global.js"></script>
	<script>
	const MyComponent = {
	data: {
	name: 'Erik'
	},
	template: `<h1>{{ name }}</h1>`
	}

ErikCH / Home.vue

Created July 3, 2019 03:54

home component for new Vue function API

	<template>
	<div class="home">
	<h1>Random Dog Images</h1>
	<h2>Dog Count {{counter}}</h2>
	<button @click="getDog">Get Dogs</button>
	<div class="dog-wrapper">
	<div class="picture-dog">
	<img :src="image" alt />
	</div>
	<button v-on:click="pressMe">Increment Dog Count</button>