Skip to content

Instantly share code, notes, and snippets.

Trevor D. Miller trevordmiller

Block or report user

Report or block trevordmiller

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
@trevordmiller
trevordmiller / index.js
Last active Sep 16, 2018
Example bar chart React component
View index.js
import React from "react";
import { HorizontalBar } from "react-chartjs-2";
import processBars from "./utils/processBars";
const BarChart = ({ description, color, bars }) => {
const { labels, values } = processBars(bars);
return (
<HorizontalBar
height={bars.length * 30 + 100}
@trevordmiller
trevordmiller / index.js
Created Sep 15, 2018
Example text submit React component
View index.js
import React, { Component } from "react";
class TextSubmit extends Component {
state = {
value: "",
text: ""
};
handleInputChange = event => {
this.setState({ value: event.target.value });
@trevordmiller
trevordmiller / async-await.js
Created Jun 25, 2018
Promises vs Async/Await
View async-await.js
const response = await fetch('https://api...');
const json = await response.json();
console.log(json);
@trevordmiller
trevordmiller / async-await-version.js
Created Jun 18, 2018
Example converting a library with callbacks to use async/await
View async-await-version.js
const someThing = require('some-thing')
someThingWrapper = () =>
new Promise(resolve => {
someThing((err, result) => {
if (err) {
reject(err)
}
resolve(result)
@trevordmiller
trevordmiller / check-undefined-css-custom-properties
Created May 10, 2018
Check undefined CSS custom properties
View check-undefined-css-custom-properties
#!/bin/bash
set -euo pipefail
RED='\033[0;31m'
COLOR_RESET='\033[0m'
echo 'Checking for undefined CSS custom properties'
used_custom_properties=($(grep -r --include \*.css -e 'var(--\(\w\+\)' ./assets/components | grep -oh -e '--\(\w\+\)' | sort -u))
@trevordmiller
trevordmiller / edgar-testing.md
Last active Apr 7, 2018
Edgar testing examples to discuss
View edgar-testing.md

What is this thing?

This gist contains some examples of how I feel we could improve our testing approach with edgar. I'd like to discuss this with the team. If you have any questions or concerns, please comment and let's talk about it :)

Although the examples are in JavaScript with Jest, the principles apply to any programming language, test framework etc. Also, the examples are not hard rules to be taken as law but general guidelines.


Philosophy

@trevordmiller
trevordmiller / sidebar-layout.css
Created Mar 12, 2018
Brittle CSS example: sidebar layout, after
View sidebar-layout.css
.root {
padding: 10px;
max-width: 1000px;
margin: 0 auto;
}
.aside {
max-width: 400px;
}
@trevordmiller
trevordmiller / sidebar-layout.css
Created Mar 12, 2018
Brittle CSS example: sidebar layout, before
View sidebar-layout.css
.root {
padding: 20px;
width: 1000px;
margin: 0 auto;
}
.aside {
float: left;
width: 310px;
margin-right: 20px;
@trevordmiller
trevordmiller / at-mention.css
Created Mar 12, 2018
Brittle CSS example: at-mention, after
View at-mention.css
.mention {
display: inline-flex;
align-items: center;
padding: 2px;
...
}
.socialIconContainer {
display: flex;
align-items: center;
@trevordmiller
trevordmiller / at-mention.css
Created Mar 12, 2018
Brittle CSS example: @mention, before
View at-mention.css
.mention {
position: relative;
padding: 1px 2px 1px 8px;
...
}
.socialIconContainer {
position: absolute;
top: 0.06em;
left: 0.24em;
You can’t perform that action at this time.