Skip to content

Instantly share code, notes, and snippets.

View caseywatts's full-sized avatar
Hi, I’m Casey!

Casey Watts caseywatts

Hi, I’m Casey!
View GitHub Profile
@caseywatts
caseywatts / Web Component Before After Example.html
Last active October 24, 2024 17:13
Web Component Before/After Example
<!-- Before -->
<div class="usa-site-alert usa-site-alert--emergency">
<div class="usa-alert">
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Emergency Status</h4>
<p class="usa-alert__text"> Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit, sed do eiusmod. </p>
</div>
</div>
</div>
@caseywatts
caseywatts / README.md
Last active November 5, 2024 19:19
Astro + Tailwind + Lit Quick Setup
  1. Install Astro pnpm create astro@latest
  2. Install Tailwind pnpm astro add tailwind docs
  3. Install a UI Framework (lit, svelte, etc) pnpm astro add lit docs
  4. Install the Astro MDX Integration pnpm add @astrojs/mdx and pnpm astro add mdx docs
  5. Install the Sitemap addon pnpm astro add sitemap docs
  6. Push to new github repository gh repo create --push --public --source=.
@caseywatts
caseywatts / Download-Slack-Profile-Pictures.js
Last active May 2, 2024 06:04 — forked from jonkwheeler/Download-Slack-Profile-Pictures.js
Download Slack Profile Pictures / Images
// 1. Navigate to the Members View
// Enter slack in the browser. https://{insert your team name here}.slack.com/messages/
// Click on the channel you want.
// Click the information icon.
// Expand the members dropdown.
// Click "See All Members"
// 2. Run JS Code To Start
// Copy-paste this whole thing
@caseywatts
caseywatts / gist:653c762abe1cada63d56f66924f3c794
Last active May 2, 2024 06:04
Using Faker in the Node.js REPL

I learned how to open a module in a Node REPL thanks to this StackOverflow post

How to use Faker in a Node.js REPL

  1. npm install --save-dev "@faker-js/faker
    • = install Faker to your repository
    • (I made an empty project folder because idk how to find -g global ones in node)
  2. node --experimental-repl-await
    • = open the Node REPL with the experimental await feature
  3. let { faker } = await import('@faker-js/faker')
@caseywatts
caseywatts / tweet-the-toot.js
Last active May 2, 2024 06:05
Toot to Twitter Bookmarklet
javascript: (function () {
const tootContents = encodeURIComponent(
document
.getElementsByClassName("detailed-status")[0]
.getElementsByClassName("status__content__text")[0].innerText
);
const twitterLink = `https://twitter.com/intent/tweet?text=${tootContents}`;
window.location.href = twitterLink;
})();
@caseywatts
caseywatts / README.md
Last active April 4, 2023 20:23
Quick Links to DMs

So many messaging apps!! It's hard to keep track of who I talk to where!

I message Brian on Signal, Sean on Discord, and Steve by sms.

I just want to type their name and BAM immediately be in the correct app.

This takes two steps:

  1. Coming up with the "weird links" to open the right app to the right person (I use a spreadsheet)
  2. Making those "weird links" easy to open (like with Apple Shortcuts)
a = `10
13
10
9
14
10`
b = a.split("\n")
c = b.map(a => Number(a))
d = c.sort((a, b) => b-a)
@caseywatts
caseywatts / 0 README.md
Last active December 24, 2024 09:58
Accordion Keyboard Layout for FL Studio

About

FL Studio support custom layouts for the "typing keyboard to piano keyboard" feature, and I made one to represent the top four rows of an accordion! The left-hand bass side of the accordion (the stradella bass system) is laid out to make playing roots of chords and common chords very easy, and it's laid out using the circle of fifths to make the common chords (V and IV) very accessible. Here is my favorite accordion fingering chart: http://accordionscanada.com/bassrangev3.jpg

Accordion 1:

  1. The 12345 row is the third of the chord row
  2. The QWERTY row is the main root chord row - the Y key is C
  3. The ASDFG row is the major chord row
  4. The ZXCVB row is the minor chord row

Accordion 2:

@caseywatts
caseywatts / 0 README.md
Last active May 2, 2024 06:05
Remove "New! Messenger App for Windows" Banner

Other gists & tricks: http://caseywatts.com/gists-and-tricks

Remove Facebook Messenger's "New! Messenger App for Windows" Banner

Bookmarklet

  1. Save this bookmarklet. Right-click on boomarks toolbar Add Page...
    • Name: Remove Messenger Banner (or whatever you like)
    • URL: (paste in the bookmarklet.js contents below)
  2. Each time you open messenger.com, click the bookmarklet and that pesky banner will be gone.