Jimmy Cleveland Jimmydalecleveland
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
| #!/usr/bin/env node | |
| const result = "A gist on Github run with npx" | |
| console.log(result) |
Jimmydalecleveland
/ index.html
Created
December 7, 2021 16:22
Minimal example of state and class instantiation/presentation from JS to HTML
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Html JS class example</title> | |
| </head> | |
| <body> | |
| <h1>HTML JS Class Example</h1> |
Jimmydalecleveland
/ styledComponentExample.js
Created
March 10, 2020 19:01
Example usage of styled components with theme providers
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
| // First example: using a callback for every line to access theme | |
| export const PretendContainer1 = styled.div` | |
| background-color: ${({ theme }) => theme.colors.primary}; | |
| color: ${({ theme }) => theme.colors.secondary}; | |
| padding: ${({ theme }) => theme.spacing.medium}; | |
| margin-bottom: ${({ theme }) => theme.spacing.small}; | |
| `; | |
| // Second example: using a single call back that returns `css` for | |
| // a single reusable theme prop |
Jimmydalecleveland
/ composeContext.js
Created
September 15, 2019 14:28
composing context example that Scott T. found
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
| function ProviderComposer({ contexts, children }) { | |
| return contexts.reduceRight( | |
| (kids, parent) => | |
| React.cloneElement(parent, { | |
| children: kids, | |
| }), | |
| children | |
| ); | |
| } |
Jimmydalecleveland
/ blog-tagged-template-5.js
Last active
August 22, 2019 00:18
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
| function styled(css, ...variables) { | |
| // . . . | |
| const computedCss = css | |
| .map( | |
| (chunk, index) => | |
| // now fires a callback at 'variables[index]' | |
| `${chunk}${variables[index] ? variables[index](props) : ''}` | |
| ) | |
| .join('') | |
| return computedCss |
Jimmydalecleveland
/ blog-tagged-template-4.js
Created
August 22, 2019 00:16
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
| function styled(css, ...variables) { | |
| const theme = { | |
| spacing: { | |
| min: '2px', | |
| max: '24px', | |
| }, | |
| colors: { | |
| primary: 'coral', | |
| secondary: 'peachpuff', | |
| }, |
Jimmydalecleveland
/ blog-tagged-template-3.js
Created
August 22, 2019 00:12
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 theme = { | |
| spacing: { | |
| min: '2px', | |
| max: '24px', | |
| }, | |
| colors: { | |
| primary: 'coral', | |
| secondary: 'peachpuff', | |
| }, | |
| } |
Jimmydalecleveland
/ blog-tagged-template-2.js
Created
August 22, 2019 00:10
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
| /** | |
| * To use this function, pass in your damage as the first variable | |
| * and your bonus (modifier) as the second variable. | |
| * | |
| * optional: Start the string with what happens to you for flavor. | |
| * @example: | |
| * doDamage`${18}${3}` | |
| * doDamage`trip on a stone${7}${3}` | |
| * */ |
Jimmydalecleveland
/ blog-tagged-template-1.js
Created
August 22, 2019 00:05
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
| function taggedTemplate(stringArray, variable) { | |
| console.log(stringArray) | |
| // [ 'The string will be split here: ', ' Then it resumes here.' ] | |
| console.log(variable) | |
| // I am the great divider! | |
| return `${stringArray[0]}${variable}${stringArray[1]}` | |
| } |
Jimmydalecleveland
/ blog-styled-button-example.js
Created
August 22, 2019 00:02
An intro example of styled components from their docs
NewerOlder