Skip to content

Instantly share code, notes, and snippets.

View TylerBarnes's full-sized avatar

Tyler Barnes TylerBarnes

  • mastra.ai
  • Victoria, BC, Canada
  • X @tylbar
View GitHub Profile
@TylerBarnes
TylerBarnes / page.jsx
Last active October 23, 2020 21:35
How to map html DOM elements to React components by tag name.
import React from "react"
import { HtmlToReact } from "./parse-html-to-react.js"
import { Link, Box } from "some-ui-package"
function MyPage(props) {
const { html } = props
return (
<div>
@TylerBarnes
TylerBarnes / machine.js
Created February 29, 2020 05:31
Generated by XState Viz: https://xstate.js.org/viz
const inGatsbyDir = {
initial: "unsureIfSourcePluginIsInstalled",
states: {
unsureIfSourcePluginIsInstalled: {
onEntry: "determineIfSourcePluginIsInstalled",
on: {
SOURCE_PLUGIN_IS_INSTALLED: "sourcePluginIsInstalled",
SOURCE_PLUGIN_IS_NOT_INSTALLED: "sourcePluginIsNotInstalled",
},
},
@TylerBarnes
TylerBarnes / machine.js
Last active February 28, 2020 09:13
Generated by XState Viz: https://xstate.js.org/viz
const inGatsbyDir = {
initial: "unsureIfPluginIsInstalled",
states: {
unsureIfPluginIsInstalled: {
onEntry: "determineIfSourcePluginIsInstalled",
on: {
SOURCE_PLUGIN_IS_INSTALLED: "sourcePluginIsInstalled",
SOURCE_PLUGIN_IS_NOT_INSTALLED: "sourcePluginIsNotInstalled",
},
},
@TylerBarnes
TylerBarnes / write_log.php
Created March 2, 2019 00:57
Write out a multiline log to the wordpress debug.log file
<?php
/**
* Write out a multiline log to the wordpress debug.log file
*/
if (!function_exists('write_log')) {
function write_log($log)
{
if (true === WP_DEBUG) {
if (is_array($log) || is_object($log)) {
@TylerBarnes
TylerBarnes / CharacterReveal.jsx
Last active July 5, 2022 16:25
Staggered Character reveal with GSAP and React Hooks
import React, { useRef, useEffect } from "react";
import { SplitText } from "../../libs/gsap/SplitText";
import { TimelineLite } from "gsap";
import styled from "styled-components";
const animateChars = nodes => {
new TimelineLite().staggerFromTo(
nodes,
1,
{ xPercent: "+=100%", opacity: 0 },
@TylerBarnes
TylerBarnes / ScrambleText.jsx
Last active April 7, 2023 03:15
GSAP ScrambleTextPlugin in React with Hooks
import React, { useRef, useEffect } from "react";
import TweenLite from "gsap";
import "../../libs/gsap/ScrambleTextPlugin";
export default ({ children }) => {
if (typeof window === "undefined") return children;
const text = useRef(null);
useEffect(() => {
#!/usr/bin/env bash
# MIT © Tyler Barnes
# git hook to run a command after `git pull` to build our theme
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
eval npm i
eval gulp init-theme
@TylerBarnes
TylerBarnes / post-merge
Last active March 27, 2018 04:59 — forked from sindresorhus/post-merge
git hook to run a command after `git pull` if a specified file was changed.In this example it's used to run `npm install` if package.json changed and `bower install` if `bower.json` changed.Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
#!/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com
# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
check_run() {
echo "$changed_files" | grep --quiet "$1" && eval "$2"
@TylerBarnes
TylerBarnes / _typographyjs.scss
Last active February 8, 2018 01:11
breakpoint support for typography.js
// Here is the unminified output
html {
font: 112.5%/1.6 HalisGR, helvetica;
box-sizing: border-box;
overflow-y: scroll
}
* {
box-sizing: inherit
}