Brock Reece BrockReece

BrockReece / List.tsx

Last active September 28, 2021 11:29

Solid generic props

	import { JSX, For } from 'solid-js'

	interface Props<T> {
	items: T[]
	children: T => JSX.Element
	}

	function GenericList<T> (props: Props<T>) {
	return (
	<For each={ props.items }>

BrockReece / gist:bd1b4d640abfbe1e4d672ed8ccd2d97f

Created February 19, 2021 10:48

Is a random number the sum of 2 numbers in an array?

BrockReece / LazyLoadImage.vue

Created September 1, 2019 13:09

	<template>
	<div class="container">
	<img v-if="isOnScreen" width="25%" :src="src" @load="loaded">
	</div>
	</template>

	<script>
	import { useOnScreen } from "../hooks/screen";
	import { useLazyLoad } from "../hooks/lazyLoad";

BrockReece / screen.js

Created September 1, 2019 13:02

	import { onMounted, onUnmounted, ref } from "@vue/composition-api";

	export function useOnScreen() {
	let isOnScreen = ref(false);

	const observer = new IntersectionObserver(entries => {
	isOnScreen.value = entries.some(entry => entry.intersectionRatio > 0);
	});

	onMounted(function() {

BrockReece / performanceObserver.js

Last active February 8, 2018 22:31

	const observer = new PerformanceObserver(list => {
	list.getEntries().forEach((entry) => {
	//handle each performance mark
	})
	})

	observer.observe({ entryTypes: [ 'mark', 'measure'] })

BrockReece / performance.js

Created February 5, 2018 20:12

Vue.config.performance = true

BrockReece / LazyTemplate.vue

Created February 1, 2018 20:14

	<template>
	<div v-if="outOfView" class="placeholder"> </div>
	<div v-else>
	<slot></slot>
	</div>
	</template>

BrockReece / HandlingPromises.js

Last active February 1, 2018 17:08

Promises vs AsyncAwait

	export default {
	methods: {
	// better for readability
	async veryReadable() {
	const { data } = await axios.get(`https://jsonplaceholder.typicode.com/post/${response.data[0]}/comments?_page=1`)
	this.comments = data
	},

	// better for returning a promise for chaining
	returningPromise() {

BrockReece / IntersectionObserver.js

Last active February 1, 2018 22:38

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.intersectionRatio > 0) {
	observer.disconnect()
	this.showComments = true
	}
	})
	}, this.options)

	observer.observe(this.$refs.ending)

BrockReece / LazyLoad.vue

Last active January 31, 2018 21:06

Lazy Load HOC

	<template>
	<div v-if="outOfView" class="placeholder"> </div>
	<div v-else>
	<slot></slot>
	</div>
	</template>

	<script>
	export default {
	props: {