thevangelist
/ my-component.spec.js
Created
August 4, 2016 13:06
The only React.js component test you'll ever need (Enzyme + Chai)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { shallow } from 'enzyme'; | |
| import MyComponent from '../src/my-component'; | |
| const wrapper = shallow(<MyComponent/>); | |
| describe('(Component) MyComponent', () => { | |
| it('renders without exploding', () => { | |
| expect(wrapper).to.have.length(1); | |
| }); |
thevangelist
/ my-component.scss
Last active
August 12, 2016 09:50
Interpolate assets path in SCSS/SASS (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $static: './assets'; | |
| .television { | |
| background: url(#{$img}/gray-noise.png); | |
| } |
thevangelist
/ meta-tags.html
Created
September 7, 2016 10:28
thevangelist
/ extends.scss
Created
September 8, 2016 12:37
How to compose with SCSS ($extend property)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .message { | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| color: #333; | |
| } | |
| .success { | |
| @extend .message; | |
| border-color: green; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const convertToKebabCase = (string) => { | |
| return string.replace(/\s+/g, '-').toLowerCase(); | |
| } |
thevangelist
/ version.sh
Created
September 30, 2016 08:45
Semver versioning with git tags & npm version
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/sh | |
| # Convenience script for versioning | |
| # Pass a semver-formatted version number to this script such as `npm version 2.1.0`. | |
| # | |
| # You'll get: | |
| # 1) git tag such as v2.1.0 | |
| # 2) new version to `package.json` | |
| npm version $1 |
thevangelist
/ resize.sh
Created
October 28, 2016 07:24
Resize Image With One Max Dimension and Maintain Aspect Ratio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/sh | |
| sips -Z 200 img.jpg |
thevangelist
/ init.css
Last active
November 25, 2016 23:07
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img { display: none; } /* Sorry! */ | |
| p { text-align: justify; } | |
| a { | |
| color: #0066B3; | |
| text-decoration: none; | |
| } | |
| a:hover { |
thevangelist
/ flexbox-product-grid.css
Last active
December 13, 2016 15:35
Flexbox Product Grid Blog Post (2016/11)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flex { | |
| display: flex; /* Make products flex in row direction (default) */ | |
| flex-wrap: wrap; /* Make products overflow on new row */ | |
| justify-content: center; /* Or space-between or space-around */ | |
| } | |
| .flex > section { | |
| flex: 1 1 0; /* Prevent the extra space around content */ | |
| text-align: center; /* Align text on center */ | |
| display: flex; /* Display as flex */ |
thevangelist
/ flexbox-product-grid.html
Last active
December 13, 2016 15:36
Flexbox Product Grid Blog Post (2016/11)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="flex"> | |
| <section> | |
| <img src="img.jpg" alt="description" /> | |
| <h2>Product</h2> | |
| <p>Description</p> | |
| <aside> | |
| <ul> | |
| <li>Spec</li> | |
| <li>Spec</li> | |
| </ul> |
OlderNewer