Skip to content

Instantly share code, notes, and snippets.

Avatar

Nat Burgwyn burgwyn

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.