Something went wrong. Try again🁢

Equinusocio equinusocio

Something went wrong. Try again🁢

As UX Engineer I build web interfaces, components library and design systems with a special love for CSS.

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 / 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 / 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 / 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 / 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 / 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 / .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 / media.pcss

Last active August 22, 2019 05:19

Custom PCSS breakpoints

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:

equinusocio / ReviewIndicator.scss

Last active May 30, 2019 14:24

Pure CSS review indicator (not interactive) based on data attribute and SVG gradient to make the half star.

	$i: 5;
	$halfstar-style: url(#half-star) currentColor;
	$dimmed-star-opacity: 0.3;

	.ReviewIndicator {
	display: inline-flex;

	/**
	* Set consecutive icons spacing
	*/