Skip to content

Instantly share code, notes, and snippets.

View dandean's full-sized avatar
🌧️
It's raining.

Dan Dean dandean

🌧️
It's raining.
View GitHub Profile
export interface Car {
doors: number;
}
export const Car: Car = {
doors: 4
};
@dandean
dandean / define-color.scss
Last active January 6, 2020 23:34
Given input CSS color, component parts are declared as CSS Custom Properties for use with rbg() and hsl() functions.
/**
* Defines a color as a CSS custom property, along with a custom property for
* all of the color's component parts in both RGB and HSL.
*
* Example:
*
* :root {
* @include defineColor("blue", #0000ff);
* }
*
### Keybase proof
I hereby claim:
* I am dandean on github.
* I am dandean (https://keybase.io/dandean) on keybase.
* I have a public key ASBxY7cqp9cbHPp4eGOlt6zX8kCdm3-y8H_bZ62sU-i5sAo
To claim this, I am signing this object:
@dandean
dandean / Contact.graphql
Last active June 3, 2019 08:24
GraphQL Directive to Rename a Field from Source to Schema Context
directive @fromSourceField(name: String!) on FIELD
"""
This is a Contact type where the data source uses type-specific field names
for their ID fields. In this case we're renaming this field to `id` instead
of `contact_id`, making it much more friendly to the consuming application.
"""
type Contact {
id: ID! @fromSourceField(name: "contact_id")
...
@dandean
dandean / cloneElement.js
Created July 18, 2016 18:18
Remove props...
// I haven't tested this one, but something like this should work?
class Component1 extends React.Component {
render() {
// Create a new `props` object without `foo` and `bar` properties
const {
...props,
foo,
bar
} = someComponent.props;
let i = 0;
class UsesConditional extends React.Component {
render() {
i++;
return (
<div>
<Conditional if={i % 2}>
<span>Show Me</span>
</Conditional>
<div className="pricing" style={{ opacity: purchasing ? 0.25 : '' }}>
<Conditional if={purchaseComplete}>
<div className="purchase-complete">
<h2>Thanks!</h2>
<p>
Thank you for your purchase of {formatPrice(this.state.total)}.
We’ll send you a receipt shortly.
</p>
<p>
<button
import args from "assert-args";
// Annotate functions for argument warnings in non-production environments:
@args({ bar: String, baz: Function })
function foo(bar, baz) {
}
foo();
// Argument Warning: expected bar to be String, found undefined
// Argument Warning: expected baz to be Function, found undefined
@dandean
dandean / es6.js
Last active August 29, 2015 14:17
Holy shit private members!
var foo = Symbol('foo');
class MyClass {
constructor() {
// Calling a private method!!!
this[foo]();
}
[foo]() {
alert('FOOOOOO!!!!!!');