Skip to content

Instantly share code, notes, and snippets.

Dave Geddes geddski

Block or report user

Report or block geddski

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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
Created Aug 19, 2019
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 "n"
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))
@geddski
geddski / multichoice.js
Created Apr 28, 2016
workaround for inquirer list type not working in windows
View multichoice.js
/**
* Abstraction around multichoice questions that works in windows, despite https://github.com/nodejs/node/issues/5384
* Uses arrow keys for non-windows and number selection for windows
*/
var inquirer = require("inquirer");
var isWindows = /^win/.test(process.platform);
module.exports = function(questions) {
if (!isWindows) {
View 20CSSRulesForRyan.css
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
*, html, body { -webkit-font-smoothing: antialiased; }
a { color: #39464e; text-decoration: none; }
a:hover { text-decoration: underline; }
input, textarea, select { font-family: "Open Sans", "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; }
You can’t perform that action at this time.