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
// One of my favorite things about using Emotion for CSS-in-JS is the | |
// ability to put nested CSS selectors write into my components. | |
// Ignoring my use of `bs()` from my ShevyJS library (it just mathematically | |
// calculates spacing based on my vertical rhythm config), this is such | |
// a simple way to tell this div to space these links out if they're both | |
// present. I love it. | |
function MyComponent() { | |
return ( | |
// ... lots of other code |
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
// Let's learn higher order functions, currying, and partial application | |
// with a simple, yet useful example | |
// It's a nice UI touch is to dynamically change a word in a phrase from | |
// singular to plural based on the quantity of that item | |
// 4 cats | |
// 0 dogs | |
// 1 human | |
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
// This code solves a problem, but it doesn't tell me _what_ the problem is | |
// or _why_ I need to stop propagation. In the long run, someone | |
// will come across this code and have no idea why it's written this way | |
function handleItemSelection(event) { | |
event.stopPropagation() | |
selectItem(assetId) | |
} | |
// Here's my solution, one additional function, a small indirection that |
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
// Naming things based on what they do means we don't have to change | |
// the name when we change the implementation details | |
function applyDiscountToItems(items) { | |
return items.map(item => ({ | |
...item, | |
price: item.price * .75 | |
})) | |
} |
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 VIEWS = { | |
FULL: 'FULL', | |
SIDE: 'SIDE' | |
} | |
const itemMachine = Machine({ | |
id: 'item', | |
context: { | |
view: VIEWS.SIDE, | |
}, |
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 designerSubChart = { | |
initial: 'standard', | |
states: { | |
standard: { | |
on: { | |
'': { | |
target: 'readOnly', | |
cond: 'hasReadOnlyParam' | |
}, | |
ENTER_PREVIEW: 'preview', |
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 itemMachine = Machine( | |
{ | |
id: "item", | |
context: { | |
view: "SIDE", | |
}, | |
on: { | |
SELECT_ALL: "forSelection.selected", | |
SET_VIEW: { | |
target: ["forHover.idle", "forSelection.unselected"], |
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 getBooleanTable = number => Array(Math.pow(2, number)) | |
.fill() | |
.map((_, idx) => idx) | |
.map(num => num.toString(2).padStart(number, '0')) | |
.map(stringOfBits => | |
stringOfBits.split('').map(bit => Boolean(parseInt(bit))) | |
) | |
console.log(getBooleanTable(3)) |
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' | |
export default SimpleForm () { | |
const [value, setValue] = React.useState('') | |
const handleSubmit = e => { | |
e.preventDefault() | |
console.log(value) | |
} | |
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 hexagons = ({ | |
fill = COLORS.white.replace('#', ''), | |
opacity = 0.08, | |
width = 28, | |
}) => { | |
const height = (width * 49) / 28 | |
return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23${fill}' fill-opacity='${opacity}' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") | |
` | |
} |