Wade Zimmerman wadez
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import { defineRefs } from '@/helpers' | |
| const inputs = defineRefs(['f1', 'f2', 'f3']) | |
| //... | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function defineRefs(refs) { | |
| return _.chain(refs).keyBy().mapValues(ref).value(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import { ref } from 'vue'; | |
| const inputs = { | |
| f1: ref(), | |
| f2: ref(), | |
| f3: ref(), | |
| } | |
| function clickMe(refId) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div @click="clickMe('f1')"> | |
| <input ref="f1" /> | |
| <Icon/> | |
| </div> | |
| <div @click="clickMe('f2')"> | |
| <input ref="f2" /> | |
| <Icon/> | |
| </div> | |
| <div @click="clickMe('f3')"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Subscribe to my YouTube | |
| * https://shorturl.at/anuV2 | |
| */ | |
| const flatten = list => list.reduce((c, v) => { | |
| return c.concat(Array.isArray(v) ? flatten(v) : v) | |
| }, []) |
wadez
/ tailwind-aspect-config.js
Created
December 20, 2021 13:13
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| theme: { | |
| extend: { | |
| aspectRatio: { | |
| '4/3': '4 / 3', | |
| 'banner': '1500/500' | |
| }, | |
| }, | |
| }, | |
| plugins: [], |
wadez
/ tailwind-aspect.html
Created
December 19, 2021 02:09
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe class="w-full aspect-video ..." | |
| src="https://www.youtube.com/ ..."> | |
| </iframe> |
wadez
/ tailwind-aspect.html
Created
December 19, 2021 02:08
create an aspect ratio perfect video with TailwindCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe class="w-full aspect-video ..." | |
| src="https://www.youtube.com/ ..."> | |
| </iframe> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Pin to top left corner --> | |
| <div class="relative aspect-square ..."> | |
| <div class="absolute left-0 top-0 h-1/2 w-1/2 ...">01</div> | |
| </div> | |
| <!-- Span top edge --> | |
| <div class="relative aspect-square ..."> | |
| <div class="absolute inset-x-0 top-0 h-1/2 ...">02</div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul class="divide-y border"> | |
| <li class="p-3">a</li> | |
| <li class="p-3">b</li> | |
| <li class="p-3">c</li> | |
| <li class="p-3">d</li> | |
| </ul> |
NewerOlder