jamcgrath

<script lang="ts">
  import { throttle } from 'lodash-es'
  import { tick } from 'svelte'

  export let recipients: string[]

  let recipientsString: string = ''
  let recipientsDisplay: HTMLElement
  let recipientsDisplayRecipients: HTMLElement
  let recipientsDisplayBadge: HTMLElement

jamcgrath

<style>
    .m-custom {
        margin: var(--m-custom, 0); /* 0 is default value for margin */
    }

    .p-custom {
        padding: var(--p-custom, 0);
    }

    @media (min-width: 40em) {

jamcgrath

nextItem() {
      let offset = -260; //change to state cardWidth: mobile or desktop (positive value)
      const carouselCard = this.$refs.carouselCard;

      for (let i = 0; i < this.cards.length; i++) {
        const currentPos = getComputedStyle(carouselCard[i]).getPropertyValue(
          "--offsetX"
        );
        const newPos = parseInt(currentPos) + offset;
        carouselCard[i].style.setProperty("--offsetX", `${newPos}px`);

jamcgrath

toggleAriaPressed(className, e) {
	console.log(e.target, className);
	if (e.target.getAttribute("aria-pressed") === "true") {
		return e.target.setAttribute("aria-pressed", "false");
	}
	const pressedButton = document.querySelector(
		`.${className}[aria-pressed='true']`
	);
	if (pressedButton) {
		pressedButton.setAttribute("aria-pressed", "false");

jamcgrath

/\*((?!\*/).|\n)+\*/

jamcgrath

https://catswhocode.com/ffmpeg-commands/
https://gist.github.com/protrolium/e0dbd4bb0f1a396fcb55

jamcgrath

mp4 (safari support)
ffmpeg -i input.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p output.mp4

webm 
ffmpeg -i input.gif -c vp9 -b:v 0 -crf 41 output.webm

jamcgrath

box-shadow: 0 1px 0 0 red; /* Border bottom */
box-shadow: 0 -1px 0 0 red; /* Border top */
box-shadow: -1px 0 0 0 red; /* Border left */
box-shadow: 1px 0 0 0 red; /* Border right */
box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */

https://www.codementor.io/@michelre/using-box-shadow-to-construct-a-border-ex0rpxvng

jamcgrath

file upload 
https://accessabilly.com/a-styled-accessible-file-upload/

Minpatters UI          
https://ebay.gitbook.io/mindpatterns/

WAI-ARIA Authoring Practices    
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal?utm_campaign=chrome_series_ariaauthoringpractices_061617&utm_source=chromedev&utm_medium=yt-desc

jamcgrath

const isSupported = window.CSS &&
    window.CSS.supports && window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}