Skip to content

Instantly share code, notes, and snippets.

Nat Burgwyn burgwyn

Block or report user

Report or block burgwyn

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
@burgwyn
burgwyn / gist:5602186
Created May 17, 2013
This snippet iterates through the AppSettings entries and returns an unordered list of bolded keys and values. I like to add this to the 'About' page that comes bundled in the web project templates in Visual Studio.
View gist:5602186
StringBuilder sb = new StringBuilder();
if (ConfigurationManager.AppSettings.HasKeys())
{
sb = new StringBuilder( "<ul style=\"list-style-type:none;\">" );
foreach (string key in ConfigurationManager.AppSettings.Keys)
{
sb.AppendFormat( "<li><strong>{0}</strong> - {1}</li>", key, ConfigurationManager.AppSettings[key] );
}
@burgwyn
burgwyn / GoodPropTypes.jsx
Last active Oct 14, 2017
PropTypes and DefaultProps - Good Example
View GoodPropTypes.jsx
import propTypes fromprop-types’;
const propTypes = {
findDelay: PropTypes.number,
columns: PropTypes.array,
loadCollapsed: PropTypes.bool,
tableHeight: PropTypes.number,
rowHeight: PropTypes.number,
defaultColWidth: PropTypes.number,
};
View BadPropTypes.jsx
this.findDelay = typeof this.props.findDelay === 'number' ? this.props.findDelay : 500;
this.options = props.gridOptions;
this.options.columns = this.options.columns ? this.options.columns : [];
this.options.loadCollapsed = this.options.loadCollapsed ? this.options.loadCollapsed : false;
this.options.tableHeight = this.options.tableHeight ? this.options.tableHeight : 500;this.options.rowHeight = this.options.rowHeight ? this.options.rowHeight : 96;
this.defualtColWidth = this.options.columns.length ? `${100 / this.options.columns.length}%` : null;
View StatelessFunctionalComponent.jsx
const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
@burgwyn
burgwyn / BadStyles.jsx
Created Oct 16, 2017
Setting `style` is often bad
View BadStyles.jsx
<Modal
isOpen={this.props.isOpen}
className="wrapper no-select"
contentLabel="No Content Modal"
style={{overlay: {"backgroundColor": "transparent"}}}>
View GoodStyles.jsx
# JSX
render() {
let hiddenClass = '';
if (this.props.hideArrow) {
hiddenClass = 'hide';
}
return (
<button className={`filter-toggle ${hiddenClass}`}
@burgwyn
burgwyn / SampleUnitTests.jsx
Created Oct 16, 2017
Assertions using Jest, Enzyme, and Snapshots
View SampleUnitTests.jsx
import React from 'react';
import { shallow } from 'enzyme';
import toJSON from 'enzyme-to-json';
import StarRating from '../components/StarRating';
describe('StarRating sharedComponent', () => {
it('should match a snapshot', () => {
const wrapper = shallow(<StarRating />);
expect(toJSON(wrapper)).toMatchSnapshot();
@burgwyn
burgwyn / IndexAsKeyBad.jsx
Created Oct 16, 2017
Example of Index as Key anti-pattern
View IndexAsKeyBad.jsx
items.map((item, index) => {
return (<ItemComponent key={index} item={item} />);
});
@burgwyn
burgwyn / IndexAsKeyGood.jsx
Created Oct 16, 2017
Avoiding using key as index, even when one is unavailable
View IndexAsKeyGood.jsx
const shortid = require('shortid');
items.map((item) => {
return (<ItemComponent key={shortid.generate()} item={item} />);
});
@burgwyn
burgwyn / SinonExample.jsx
Last active Oct 16, 2017
Example of unit test using Sinon
View SinonExample.jsx
describe('BidListButtonComponent', () => {
const bidList = [{ position: { id: 1 } }];
const bidListFalse = [{ position: { id: 2 } }];
it('can call the toggleSaved function', () => {
const spy = sinon.spy();
const wrapper = shallow(
<BidListButton
id={1}
toggleBidPosition={spy}
You can’t perform that action at this time.