| // Available variables: | |
| // - Machine | |
| // - interpret | |
| // - assign | |
| // - send | |
| // - sendParent | |
| // - spawn | |
| // - raise | |
| // - actions |
| const getRandom = (min, max) => { | |
| return Math.floor(Math.random() * (max - min + 1)) + min | |
| } | |
| export default class ExtraSparkles { | |
| static get inputProperties() { | |
| return ['--extra-sparkleNumber', '--extra-sparkleHue', '--extra-sparkleHeightVariance', '--extra-sparkleWidthVariance', '--extra-sparkleWeightVariance'] | |
| } | |
| init() { |
| // in some file | |
| const request = useRef(); | |
| useEffect(() => { | |
| if (request.current !== undefined) { | |
| request.current.cancel("Cancelled"); | |
| } | |
| request.current = axios.CancelToken.source(); |
| import { useEffect } from 'react'; | |
| export function useOutsideClick(containerRef, triggerRef, cb) { | |
| function isOutsideClick(evt) { | |
| if ( | |
| (containerRef.current !== null && | |
| containerRef.current.contains(evt.target)) || | |
| (triggerRef !== null && triggerRef.current.contains(evt.target)) | |
| ) { | |
| return cb({ |
| // useSearch file | |
| import React, { useEffect } from "react"; | |
| import axios from "axios"; | |
| import { useImmerReducer } from "./useImmerState"; | |
| import { baseSelectedItems } from "../constants"; | |
| export function useSearch(selectedItems) { | |
| function reducer(draft, action) { | |
| switch (action.type) { |
| Search& | |
| Search Bar | |
| Inactive* | |
| focus bar -> Active | |
| Active& | |
| cancel out -> Inactive | |
| Input States | |
| delete all text -> Idle |
| Store | |
| URL | |
| Search bar | |
| Url has values | |
| Store has values | |
The CSS grid structure utilizes a flexbox-based layout to enable developers to quickly craft layout. Use of our grid classes is not required, but is there to help align and speed the development process with the design specifications of the grid.
The grid system is loosely based around the semantics of the Bootstrap grid, so if you're familiar with the technicalities of that grid, this should feel similar.
| CSS Variables | |
| - [Using CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) | |
| - [Getting Reactive with CSS](https://www.youtube.com/watch?v=4IRPxCMAIfA) | |
| - [Why You Should Care CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) | |
| Demos | |
| - [David Khourshid CSS Variables Collection](https://codepen.io/collection/DNzQqY/) | |
| - [Mike Ruthmieler - Using CSS Variables](https://madebymike.com.au/writing/using-css-variables/) |
| curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - | |
| echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list | |
| sudo apt get update && sudo apt-get install yarn git make build-essential |