| #NoEnv ; Recommended for performance and compatibility with future AutoHotkey releases. | |
| ; #Warn ; Enable warnings to assist with detecting common errors. | |
| SendMode Input ; Recommended for new scripts due to its superior speed and reliability. | |
| SetWorkingDir %A_ScriptDir% ; Ensures a consistent starting directory. | |
| LCtrl & Tab:: AltTab | |
| !Tab:: Send ^{Tab} | |
| !+Tab:: Send ^+{Tab} | |
| ^Space:: Send ^{Esc} |
| 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 |
| 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/) |
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.
| Store | |
| URL | |
| Search bar | |
| Url has values | |
| Store has values | |
| Search& | |
| Search Bar | |
| Inactive* | |
| focus bar -> Active | |
| Active& | |
| cancel out -> Inactive | |
| Input States | |
| delete all text -> Idle |
| // 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) { |
| 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({ |
| // in some file | |
| const request = useRef(); | |
| useEffect(() => { | |
| if (request.current !== undefined) { | |
| request.current.cancel("Cancelled"); | |
| } | |
| request.current = axios.CancelToken.source(); |
| 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() { |