Skip to content

Instantly share code, notes, and snippets.

View PolyDevil's full-sized avatar

‮((^_^ PolyDevil

View GitHub Profile
@PolyDevil
PolyDevil / machine.js
Created September 28, 2021 12:23
Generated by XState Viz: https://xstate.js.org/viz
const fetchMachine = Machine({
id: 'search',
initial: 'idle',
context: {
search: '',
isDropdownRendered: false,
maxFocusedIndex: 0,
focusedIndex: -1,
},
@PolyDevil
PolyDevil / machine.js
Created February 26, 2021 14:01
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions

How to override anchor parent for element with fixed positioning

There is a simple user avatar component with an upload button: image

There are some requirements we need to meet:

  • both image and icon should be clickable;
  • icon should be accessible with keyboard;

Clickable area:

// XPath CheatSheet
// To test XPath in your Chrome Debugger: $x('/html/body')
// http://www.jittuu.com/2012/2/14/Testing-XPath-In-Chrome/
// 0. XPath Examples.
// More: http://xpath.alephzarro.com/content/cheatsheet.html
'//hr[@class="edge" and position()=1]' // every first hr of 'edge' class
@PolyDevil
PolyDevil / dabblet.css
Last active October 10, 2019 07:58
Untitled
html {
font-size: calc(1vmin + 1.6vh + 1.6vw);
}
grid {
display: grid;
grid-gap: 1rem;
justify-content: center;
grid-template-columns: 40% 40%;
}
new Array(100)
.fill(0)
.map((e, i) => i + 1)
.map(id => [[3, 'Miss'], [5, 'Kiss']].reduceRight((p, c) => id % c[0] === 0 ? c[1] + p : p, '') || id)
.map((e, i) => setTimeout(() => console.log(e), i * 50));
new Array(100)
.fill(0)
.map((e, i) => i + 1)
.map(e => e % 3 === 0 ? (e % 5 === 0 ? 'MissKiss' : 'Miss') : e % 5 === 0 ? 'Kiss' : e)
.map((e, i) => setTimeout(() => console.log(e), i * 50));