Skip to content

Instantly share code, notes, and snippets.

Rob Wierzbowski robwierzbowski

View GitHub Profile
@robwierzbowski
robwierzbowski / index.js
Last active Nov 15, 2017
No `sort()` anagram tester
View index.js
// Takes two strings.
// Returns true if they're anagrams, false if not.
function isAnagram (a, b) {
const remove = (string, pattern) => string.replace(new RegExp(pattern, 'ig'), '');
// Discard whitespace; anagrams can be different numbers of words
let lettersA = remove(a, '\\s');
let lettersB = remove(b, '\\s');
@robwierzbowski
robwierzbowski / additive.scss
Last active Nov 2, 2017
Example of additive styles
View additive.scss
.userPreview {
border: solid $off-black;
&.--default {
border-width: 5px;
font-size: 1.5rem;
background: $light-gray;
}
&.--compact {
@robwierzbowski
robwierzbowski / non-additive.scss
Last active Nov 2, 2017
Example of non-additive styes
View non-additive.scss
.userPreview {
border: 5px solid $off-black;
font-size: 1.5rem;
background: $light-gray;
&.--compact {
border: 1px solid $off-black;
font-size: 1rem;
background: transparent;
}
@robwierzbowski
robwierzbowski / UserList.html
Created Nov 2, 2017
UserList template example
View UserList.html
<article styleName='userList'>
<h1 styleName='title'>Friends</h1>
<ul styleName='users'>
<li styleName='user'>
<UserPreview user={1} compact={true} />
</li>
<li styleName='user'>
<UserPreview user={2} compact={true} />
</li>
<li styleName='user'>
@robwierzbowski
robwierzbowski / mixins.scss
Last active Nov 2, 2017
PostCSS mixin example
View mixins.scss
/* type.css */
@import 'vars.css';
@define-mixin header {
font-family: $font-sans;
font-weight: 600;
letter-spacing: -0.01em;
}
@robwierzbowski
robwierzbowski / UserSummary.html
Last active Nov 2, 2017
UserSummary template example
View UserSummary.html
<article styleName="userSummary --compact">
<img styleName="image -loading" src="/low-res.jpg" />
<div styleName="firstName">Mr. Jim</div>
<div styleName="lastName">Business</div>
</article>
@robwierzbowski
robwierzbowski / variables.scss
Last active Nov 2, 2017
Example PostCSS variables usage
View variables.scss
/* vars.css */
$off-black: hsl(0, 0%, 14%);
$serif-family: "Charter BT", "Times New Roman", serif;
/* component style.css */
@import 'vars.css';
.firstName {
@robwierzbowski
robwierzbowski / states.scss
Last active Nov 2, 2017
Example state rulesets
View states.scss
.image {
/* element rules */
&.-loading {
/* state rules */
}
&.-loaded {
/* state rules */
}
@robwierzbowski
robwierzbowski / modifiers.scss
Last active Nov 2, 2017
Example modifier rulesets
View modifiers.scss
.userSummary {
/* element rules */
&.--compact {
/* modifier rules */
}
}
.image {
/* element rules */
@robwierzbowski
robwierzbowski / elements.scss
Last active Nov 2, 2017
Example element rulesets
View elements.scss
.userSummary {
/* element rules */
}
.image {
/* element rules */
}
.firstName,
.lastName {
You can’t perform that action at this time.