Scripts by jh3y

Breezy SVG Optimization

Tweet πŸ‘‰ here

One thing that feels very cumbersome in my creation process is handling SVG export for my animations, etc. Often I create an SVG in whichever editor I feel like using that day and when I'm ready to bring it to the browser, I have a process.

  1. Export SVG to the repo I need it in.
  2. Copy the markup or drag the file into SVGOMG.
  3. Tweak the SVGO settings to get what I need.
  4. Copy the output or download it.
  5. Create a new file next to the original with an --optimized.svg suffix.

But, with ScriptKit, I can get direct access to svgo from the system now 🀩

// Menu: SVGO
// Description: Optimize SVG on drop
// Author: Jhey Tompkins
// Twitter: @jh3yy
let svgo = await npm('svgo')
let { setSelectedText } = await kit('text')
let [svg] = await arg({
placeholder: 'Drop an SVG',
drop: true,
ignoreBlur: true,
})
const SVG_STRING = await readFile(svg.path, 'utf-8')
// My SVGO config
const CONFIG = {...}
// Optimize it using my preferred config
let result = await svgo.optimize(SVG_STRING, CONFIG)
// Write to file
await writeFile(svg.path.replace('.svg', '--optimized.svg'), result.data)
// Copy to clipboard
setSelectedText(result.data)

This saves me a bunch of time! And I get my preferred settings every time. Also, my config becomes version controlled with my other scripts πŸ™Œ

How could it be improved?

  • Drag files straight from VSCode. Currently, this gives an empty Array.
  • Show a preview in the prompt like we can with images and sharp.

Love ScriptKit πŸ‘ πŸ‘

Keep up the great work John! πŸ‘

Discuss Post

Using ScriptKit to Automate Mac Setup

Howdy y'all! οΌΌΚ• β€’α΄₯‒ʔ/

I decided I'd have one of those "tech" weekends where I get all my tech in order πŸ˜… A big part of this was getting my machines onto Big Sur with a blank slate and revisiting what things I install etc.

For the last few years, I've been using Kody which is something I built with Node. It's one of those "If it ain't broke, don't fix it" kinda things. It works great but once I saw "ScriptKit", that was kinda the thing I envisioned those years ago. The GUI part is a bonus!

Enough ramble. How did it go? What's my process?

  1. Fresh Big Sur install on clean machine.
  2. Install ScriptKit
  3. That prompts Git installation πŸ‘
  4. Install HomeBrew
  5. Install VSCode (Doing this so I can mess about with scripts before running them). Imagine there would be a way to automate the steps from 4 onwards.
  6. Use Terminal to add a remote for my scripts.
  7. Switch to that branch.
  8. This part was a bit of a sticker. I want to run my setup scripts (there a little rough, don't judge! πŸ˜… ) from the CLI initially so I can see what's happening. But, I'm not version controlling the bin files. Perhaps there is an automated way for me to do this. Who am I kidding? Of course there is, this is ScriptKit. But, I didn't know if there was an API I could tap into to say "Hey! Here's my scripts I brought with me. Can you hook them up to bin please?" 8a. Make a couple of tweaks to cli. Expose basename from path and rm from shelljs. Expose iterm as a global for CodePen script.
  9. Then I do a bit of a dance with setting the path in .zshrc πŸ˜…
  10. Run each of my scripts. One installs all my Homebrew packages from a config file, another symlinks all my dotfiles(which I'm currently keeping in a folder within scripts πŸ˜… ). That sets up my VSCode, sets up my Git Config, ZSH, etc. Then I have another script that runs a shell script with my OSX defaults like hide the dock, set up exposΓ©, etc. And lastly, a script that installs global npm modules, installs VSCode extensions, etc.
  11. Lastly, grab my iTerm config and Stream Deck backups from within the "scripts" folder and apply them too.
  12. πŸŽ‰ Machine ready for action.

I'm thrilled it works. My scripts are a little "rough" around the edges πŸ˜…

But, as a POC, it works! And this saved me hours of doing this myself and remembering things I install or set up. Migrating what I had already wasn't much hassle at all.

I've had some thoughts too about ways I could make this easier to sync what I'm using too.

  • Make an install script that updates my config for me upon successful HomeBrew package install 🀩 Same with uninstall.
  • Script to grab iTerm profile for me and copy it into my branch.

Another note. The file selector didn't work for me still πŸ€” I'm not sure what's going on there.

This was great fun to put together and was totally worth spending the time on to get my tech in order πŸ’ͺ

Thanks @johnlindquist πŸ™ Keep up the great work!

Discuss Post