Skip to content

Instantly share code, notes, and snippets.

View bryanberger's full-sized avatar
👨‍💻
always makin'

Bryan Berger bryanberger

👨‍💻
always makin'
View GitHub Profile
@bryanberger
bryanberger / record.sh
Last active February 14, 2024 17:28
Captures the screen of an Android device using an adb command and then pulls the recorded file and removes it
#!/bin/bash
echo "$(basename $0)"
KEEP_ON_PHONE=false
FILE_NAME="screen_recording_$(date +"%Y-%m-%d_%H-%M")"
TARGET_DIR_PHONE="//sdcard"
TARGET_DIR_COMP="$(pwd)"
printUsage() {
@bryanberger
bryanberger / optimizeLottieJSONFile.js
Last active August 18, 2023 17:19
Aggressively Optimize Lottie JSON files
import { readdir, readFileSync, writeFileSync, stat } from 'fs';
import { join, basename } from 'path';
function processJSONFiles(inputFolderPath, outputFolderPath) {
readdir(inputFolderPath, (err, files) => {
if (err) {
console.error('Error reading folder:', err);
return;
}
@bryanberger
bryanberger / bookmarklet.js
Created June 23, 2022 21:55
copy localstorage item to clipboard from a bookmarklet
javascript:(function()%7B(function()%7Bconst%20oldFocus%3Ddocument.activeElement%3BoldFocus.focus()%3Bnavigator.clipboard.writeText(localStorage.getItem('global_state')).then(function()%7Bconsole.log('copied!')%7D%2Cfunction(e)%7Bconsole.log('failed%20to%20copy...'%2Ce)%7D)%7D)()%3B%7D)()%3B
@bryanberger
bryanberger / mergeAlpha.js
Last active October 22, 2021 23:41
GSAP ScrollTrigger image sequence with optimized alpha masking (perf)
/**
*
* @param {HTMLImageElement} rgbImage preferably a JPG
* @param {HTMLImageElement} alphaImage preferably a PNG with alpha channel
* @param {HTMLCanvasElement} canvas optional
*/
export const mergeAlpha = (rgbImage, alphaImage, canvas) => {
/* eslint-disable no-param-reassign */
if (!canvas) {
canvas = document.createElement('canvas');
// how might this work outside of the local library? It looks like we may need to auth with and use the REST API todo this the most effcient way.
// This possibly means hardcoding the auth key in this plugin. It's private so that might be okay(?). We could ask for it up front but that seems counter productive https://www.figma.com/developers/api#get-file-styles-endpoint
const localStyles = figma.getLocalPaintStyles();
const selectedNodes = figma.currentPage.selection;
if (selectedNodes.length === 0) {
figma.notify("Nothing was selected...");
figma.closePlugin();
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="build/cog-website-styles.css" />
</head>
<body>
<section class="relative">
@bryanberger
bryanberger / Example.js
Created December 4, 2019 23:39
Formik + Yup
import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const SignupForm = () => {
return (
<Formik
initialValues={{ firstName: '', lastName: '', email: '' }}
validationSchema={Yup.object({
firstName: Yup.string()
import * as React from "react"
import {
addPropertyControls,
ControlType,
BooleanControlDescription,
EnumControlDescription
} from "framer"
import * as Cog from '../../../dist/framer/'
import { BoxProps, BoxTheme } from '../../../dist/Box'

Sketch Shared Libraries in Abstract


Agenda

  • What is a Shared Library?
  • How do you use symbols from a Shared Library?
  • How do you edit/update symbols from a Shared Library?
  • How do you link a Shared Library on Abstract to your project file?