Skip to content

Instantly share code, notes, and snippets.

View equinusocio's full-sized avatar
:octocat:
Something went wrong. Try again🁢

Equinusocio equinusocio

:octocat:
Something went wrong. Try again🁢
787 followers · 47 following
View GitHub Profile
@equinusocio
equinusocio / flat-tokens.json
Created March 13, 2026 16:23
{
"color-blue-0": "oklab(97.048% -0.00377 -0.01367)",
"color-blue-5": "oklab(93.733% -0.00857 -0.02794)",
"color-blue-10": "oklab(90.604% -0.01106 -0.04319)",
"color-blue-20": "oklab(88.234% -0.0156 -0.05488)",
"color-blue-30": "oklab(80.907% -0.02984 -0.09082)",
"color-blue-40": "oklab(71.374% -0.03802 -0.13825)",
"color-blue-50": "oklab(59.596% -0.02959 -0.15968)",
"color-blue-60": "oklab(51.818% -0.02148 -0.17519)",
"color-blue-70": "oklab(46.235% -0.01538 -0.17707)",
@equinusocio
equinusocio / script.sh
Created May 27, 2021 06:05
Add empty spaces to dock
# Copy and paste it inside your terminal and press enter.
# You may need to run this twice.
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock
@equinusocio
equinusocio / flex-grid.css
Last active March 24, 2021 09:20
emulated grid using flex and gaps
body {
margin: 0;
}
.FlexGrid {
--gap: 12px;
display: inline-flex;
flex-wrap: wrap;
margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
@equinusocio
equinusocio / example.tsx
Created November 24, 2020 10:24
React - Add attribute to componente inside prop
/* trigger is the prop that accepts a ReactNode */
const addAttr = useMemo(() => {
const InputReactObject = Children.only(trigger);
const clonedChild = cloneElement(inputReactObject, {
className: 'input-element test',
'data-attr': 'lorem'
});
return <InputReactObject />;
@equinusocio
equinusocio / git.sh
Created October 19, 2020 12:23 — forked from simon04/git.sh
Git merge/replace orphan branch into master
git checkout --orphan new-framework
# completely rewrite your application in new framework
git merge --strategy=ours --allow-unrelated-histories master
git commit-tree -p HEAD^2 -p HEAD^1 -m "Merge branch 'new-framework'" "HEAD^{tree}"
git reset --hard $OUTPUT_FROM_PREVIOUS_COMMAND
git checkout master
git merge --ff-only new-framework
@equinusocio
equinusocio / style.css
Created October 16, 2020 12:27
CSS Bleed techniques
/*
* Make the element bleed on both side,
* covering the whole viewport width.
*/
.FullBleed {
margin-left: calc(50% - 50vw);
width: 100vw;
}
@equinusocio
equinusocio / com.drevo.KeyRemapping.plist
Last active November 14, 2020 11:09
To map application key to right_option put this file here ~/Library/LaunchAgents/. More info here: https://blog.codefront.net/2020/06/24/remapping-keys-on-macos
<!--
Put this file in ~/Library/LaunchAgents/com.example.KeyRemapping.plist to
automatically remap your keys when macOS starts.
See https://developer.apple.com/library/archive/technotes/tn2450/_index.html for
the key "usage IDs". Take the usage ID and add 0x700000000 to it before putting it
into a source or destination (HIDKeyboardModifierMappingSrc and
HIDKeyboardModifierMappingDst respectively).
-->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
@equinusocio
equinusocio / .bashrc
Last active May 12, 2020 07:02
Automatic node switching for zsh and bash
# place this at the end
# ••••••••••••••••••••••••••••••••••••••••
_enter_dir() {
local git_root
git_root=$(git rev-parse --show-toplevel 2>/dev/null)
if [[ "$git_root" == "$PREV_PWD" ]]; then
return
elif [[ -n "$git_root" && -f "$git_root/.nvmrc" ]]; then
@equinusocio
equinusocio / media.pcss
Last active August 22, 2019 05:19
Custom PCSS breakpoints
/**
*
* Conversion Table (base 16px)
* 30em → 480px
* 48em → 768px
* 60em → 960px
* 80em → 1280px
* 100em → 1600px
*
*/
@equinusocio
equinusocio / readme.md
Last active June 4, 2019 20:36
Add a basic roving tabindex behaviour.

How to use

Import the utility function:

import rovingTabindex from './rovingTabindex';

Init the function by bassing the required parameter: