Skip to content

Instantly share code, notes, and snippets.

View cchaos's full-sized avatar
🥸
Gone incognito

Caroline Horn cchaos

🥸
Gone incognito
29 followers · 3 following
View GitHub Profile
@cchaos
cchaos / Consistent focus outlines.md
Last active May 2, 2022 21:52
Matching focus outlines to element and only on :focus-visible (React and Emotion for example only)

This gist creates a universal function that allows focus outlines to match the currently focused element and displays the outline only when the user is navigating via keyboard.

Gif example

Tabbing between the two examples show the first with a simple text-color outline, the second with a wider blue outline. Clicking the buttons with a mouse shows no outline.
@cchaos
cchaos / Logical CSS properties.md
Last active May 4, 2023 19:09
Convert standard CSS properties into logical properties (Typescript & React for example only)

Logical properties

Logical CSS properties enable UI's to support directional writing-modes. These utilities provide a few helpers to convert certain directional properties to logical properties.

logicalStyle(property, value)

Returns a style object of the logical CSS property version for the given property: value pair. Most useful for places like React style properties that require the camelCase version of property keys.

Example usage of style={logicalStyle('padding-left', '160px')}

@cchaos
cchaos / Javascript Array And Object Function.md
Last active June 9, 2021 14:38

Examples of Arrays and Objects

Array

const array1 = ["This", "is", "an", "array"];

Object

const object = {