Jimmy Cleveland Jimmydalecleveland

Staff Software Engineer

Jimmydalecleveland / blog-tagged-template-2.js

Created August 22, 2019 00:10

	/**
	* 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-3.js

Created August 22, 2019 00:12

Jimmydalecleveland / blog-tagged-template-4.js

Created August 22, 2019 00:16

	function styled(css, ...variables) {
	const theme = {
	spacing: {
	min: '2px',
	max: '24px',
	},
	colors: {
	primary: 'coral',
	secondary: 'peachpuff',
	},

Jimmydalecleveland / blog-tagged-template-5.js

Last active August 22, 2019 00:18

	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 / composeContext.js

Created September 15, 2019 14:28

composing context example that Scott T. found

	function ProviderComposer({ contexts, children }) {
	return contexts.reduceRight(
	(kids, parent) =>
	React.cloneElement(parent, {
	children: kids,
	}),
	children
	);
	}

Jimmydalecleveland / styledComponentExample.js

Created March 10, 2020 19:01

Example usage of styled components with theme providers

	// 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 / index.html

Created December 7, 2021 16:22

Minimal example of state and class instantiation/presentation from JS to HTML

	<!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 / index.js

Last active January 22, 2023 17:07

npx gist example

	#!/usr/bin/env node

	const result = "A gist on Github run with npx"
	console.log(result)