Skip to content

Instantly share code, notes, and snippets.

Avatar

Dave Geddes geddski

View GitHub Profile
@geddski
geddski / geddes-french-bread.md
Last active Dec 30, 2019
Mama Geddes' French Bread Recipe
View geddes-french-bread.md

BEFORE YOU MAKE THIS: These will turn out best if you use french bread pans

Mix together in a bowl 2 Tbls Yeast 1/2 cup warm water 1 tsp sugar let yeast activate (about 10 minutes)

In large bowl, combine:

View sample.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
@geddski
geddski / useComponentRect.js
Created Nov 16, 2019
hook for calculating a component's bounding rect
View useComponentRect.js
import React, { useState, useEffect, useLayoutEffect, useContext } from 'react';
import debounce from "debounce";
function useComponentRect(containerRef, debounceTime = 100) {
const [rect, setRect] = useState();
const calculateRect = debounce(() => {
if (containerRef.current){
const rect = containerRef.current.getBoundingClientRect();
setRect(rect);
@geddski
geddski / StretchTitle.jsx
Created Nov 16, 2019
StretchTitle component
View StretchTitle.jsx
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import React, {useRef, useEffect, useState, useLayoutEffect} from "react"
import useComponentRect from "shared/hooks/useComponentRect"
const StretchTitle = (props) => {
const containerRef = useRef();
const textRef = useRef();
const componentRect = useComponentRect(containerRef, 10);
const [scale, setScale] = useState(1);
@geddski
geddski / Brewfile
Last active Mar 3, 2021
Dave Geddes' Brewfile for awesome mac automation
View Brewfile
cask_args appdir: "/Applications"
tap "homebrew/bundle"
tap "homebrew/cask"
tap "homebrew/cask-drivers"
tap "homebrew/cask-fonts"
tap "homebrew/core"
brew "fish"
brew "git"
brew "httpie"
brew "github/gh/gh"
View 6.9.js
crossbow {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
.target.goo{
flex-grow: 1;
}
@geddski
geddski / create-react-app-for-testing
Created Aug 30, 2017
quick way to start testing ES6 code with a real browser (using create-react-app and Jasmine)
View create-react-app-for-testing
create-react-app comes with Jest which is awesome, but sometimes you need a real DOM/browser to test with. Here's a quick way to get up and running testing your app.
1. Create a *separate* app for testing, using create-react-app:
```
create-react-app tests
cd tests
```
2. Modify the index.html to include the Jasmine spec runner (see index.html below)
3. Modify the index.js to just run your tests rather than bootstrap a React app. (see index.js below)
@geddski
geddski / index.html
Created Dec 10, 2016
zombie flexbox exercise 1.1
View index.html
<div class="crossbow">
<div class="zombie boy"></div>
<div class="zombie girl"></div>
<div class="zombie boy"></div>
</div>
@geddski
geddski / Avatar.js
Created Nov 10, 2016
Angular 1 component helper for rendering components directly
View Avatar.js
/**
* A sample Angular 1 component, created using the component helper above.
* Uses Aphrodite for CSS
*/
import component from './component';
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
avatar: {
@geddski
geddski / Task.js
Created Oct 24, 2016
workaround for angular 1.x component styling
View Task.js
// Angular 1.x components don't let you do a "replace:true", so they're always nested in another HTML tag.
// This nesting makes it so you can't use some really useful css pseudo-classes like ":last-of-type".
// This workaround puts a CSS class on the actual root, so you can take adavantage of these CSS goodies.
export default class Task {
constructor($element){
// add class to component root element for easier css styling
// using aphrodite
$element.addClass(css(styles.container))