ItsJonQ’s gists

ItsJonQ / autoScrollBrowser.js

Last active February 13, 2023 21:26

Auto scroll the browser

	var scroll = setInterval(() => {
	window.scrollTo(0, document.documentElement.scrollHeight)
	}, 2000)

	var stopScrolling = () => {
	clearInterval(scroll)
	}

ItsJonQ / getYouTubeHistory.js

Created February 13, 2023 21:23

Get YouTube history in the browser

	var getViewCount = (views = '') => {
	if (!views) return null;
	const viewBase = views.split(" ")[0];
	if (viewBase.includes("M")) {
	return parseInt(views.replace("M", "")) * 1000000;
	}
	if (viewBase.includes("K")) {
	return parseInt(views.replace("K", "")) * 1000;
	}
	return Number(viewBase);

ItsJonQ / forwardHtmlProps.js

Created May 15, 2022 15:40

Forward HTML Props - An improved way to forward only valid HTML props to React components.

	/**
	* @emotion/is-prop-valid uses a list of props to match against.
	*
	* @see https://github.com/emotion-js/emotion/blob/main/packages/is-prop-valid/src/props.js
	*/
	import isPropValid from '@emotion/is-prop-valid';

	/**
	* # HTML attribute reference
	*

ItsJonQ / custom-emotion-styled-with-enhanced-css-props.js

Last active May 15, 2022 15:41

Custom Emotion styled with enhanced CSS props - This implementation supports basic style features from frameworks like Styled System and Chakra UI.

	import React from 'react';
	import createEmotion from '@emotion/css/create-instance';
	import isPropValid from '@emotion/is-prop-valid';

	/**
	* Creating our custom instance of Emotion.
	* This provides us with the core css() function, which is needed for
	* CSS style compiling.
	*/
	export const {

ItsJonQ / chakra-native-css-pseudo-props.js

Created May 15, 2022 15:05

Chaka native CSS pseudo props - A collection of native CSS pseudo props supported by Chakra UI and their mappings to how it's rendered with CSS-in-JS (e.g. Emotion)

	const chakraNativeCSSPseudoProps = {
	_active: '&:active',
	_activeLink: '&[aria-current=page]',
	_activeStep: '&[aria-current=step]',
	_after: '&:after',
	_autofill: '&:-webkit-autofill',
	_before: '&:before',
	_disabled: '&[disabled]',
	_empty: '&:empty',
	_even: '&:nth-of-type(even)',

ItsJonQ / custom-emotion-styled.js

Last active May 15, 2022 14:44

Create emotion styled - Creating a custom styled component using Emotion to compile and consolidate CSS.

	import React from 'react';
	import createEmotion from '@emotion/css/create-instance';
	import isPropValid from '@emotion/is-prop-valid';

	export const {
	flush,
	hydrate,
	cx,
	merge,
	getRegisteredStyles,

ItsJonQ / styled-system-css-props.js

Last active May 15, 2022 16:10

Styled System CSS Props - A list of CSS native CSS properties that Styled System provides as part of their component styling API.

	const styledSystemCSSProps = {
	// Background
	background: true,
	backgroundImage: true,
	backgroundSize: true,
	backgroundPosition: true,
	backgroundRepeat: true,
	// Border
	border: true,
	borderBottom: true,

ItsJonQ / useCollapsibleHeightAnimation.js

Created March 2, 2021 22:07

React Spring: Height auto collapse/expand animations

	import { useReducedMotion } from '@wp-g2/styles';
	import React from 'react';
	import { animated, useSpring } from 'react-spring';

	function useCollapsibleHeightAnimation({ duration = 120, isVisible = false }) {
	const contentRef = React.useRef();
	const previouslyVisible = React.useRef(isVisible);
	const [reducedMotion] = useReducedMotion();

	const [animatedHeight, set] = useSpring(() => ({

ItsJonQ / hstack-vstack-example.js

Last active August 12, 2020 22:07

	<View css={{ margin: 'auto', maxWidth: 960 }}>
	<VStack>
	<HStack justify="space-between">
	<View>
	<Heading size={3}>
	Components: HStack, VStack, ZStack{' '}
	<View as="span" css={{ fontSize: 'inherit', opacity: 0.5 }}>
	#22
	</View>
	</Heading>

ItsJonQ / interpolate.js

Last active February 21, 2025 15:28

interpolate.js

	/**
	* Modified from:
	* https://github.com/react-spring/react-spring/blob/master/src/animated/createInterpolator.ts
	*/

	function clamp(value, min, max) {
	return Math.max(min, Math.min(max, value));
	}

	export function findRange(input, inputRange) {

Q ItsJonQ