Skip to content

Instantly share code, notes, and snippets.

View MediawikionHeroku.md
@caseywatts
caseywatts / 0-self-publishing.md
Last active Jun 21, 2021
Self-Publishing via Markdown
View 0-self-publishing.md
View Electron on WSL2.md

Electron is tricky to get set up on Windows Subsystem for Linux, but it can work!

Four things needed overall:

  1. you need WSL2, not WSL1
  2. you need node, of course, and that part isn't so bad
  3. you need to apt install several dependencies
  4. you need an X Server so it can display the electron GUI over in Windows-land

Setup instructions, in order:

@caseywatts
caseywatts / bookmarkleting.md
Last active Jun 18, 2021
Making Bookmarklets
View bookmarkleting.md

This is one chapter of my "Chrome Extension Workshops" tutorial, see the rest here: https://gist.github.com/caseywatts/8eec8ff974dee9f3b247

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Making Bookmarklets

I'm feeling very clever. I've got this sweet line of javascript that replaces "cloud" with "butt". My mom would LOVE this, but she doesn't computer very well. I'm afraid to show her the Developer Console and have her type/paste this in. But she IS pretty good at bookmarks, she knows just how to click those!

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

@caseywatts
caseywatts / 0 - Chrome Workshop.md
Last active Jun 17, 2021
Chrome Extension Workshop
View 0 - Chrome Workshop.md
@caseywatts
caseywatts / 0 README.md
Last active May 13, 2021
Generate Graphviz Files for Project
View 0 README.md

short url: caseywatts.com/graphviz

Graphviz is like markdown, for diagrams.

It's a tool that can transform text input into a "directed graph" output, which is nodes pointing to other nodes. You can use it for architecture diagrams, DB diagrams, documentation for users, etc.

graphviz-it

You'll want to use a tool with a two-pane layout - the left side is the source text, the right side is the image output.

@caseywatts
caseywatts / quicktime-hangouts-recording.md
Last active May 9, 2021
Quicktime Hangouts Recording (using soundflower for audio)
View quicktime-hangouts-recording.md

Short link to this page: caseywatts.com/quicktime

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

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Quicktime + Hangouts Recording

Scenario: You want to talk with someone over google hangouts (like for a user study), and you want to record BOTH:

@caseywatts
caseywatts / 0 push to talk.md
Last active May 5, 2021
Push To Talk - Google Meet Bookmarklet
View 0 push to talk.md

Short link to this page: http://caseywatts.com/ptt

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

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Push To Talk in a Google Hangout (Meet)

  1. Save this bookmarklet. Right-click on boomarks toolbar Add Page...
    • Name: PTT (push to talk) or whatever you'd like (maybe short so it stays on your bookmarks toolbar)
View Intro To Programming Skill Tree.md

I wrote this skill tree diagram for teaching Intro to Programming with the YEI Tech Bootcamp Summer 2014. Boxes are greyed out after they have been covered in the course. Some topics are not required to progress to the farther parts, like how "csv import/export" isn't required to move beyond database section beyond to the web app sections, but it would be natural to teach in that section if we wanted to cover it. Each big-box section ends with a project/assessment to make sure the students understand the content enough to apply it, before move on.

This uses graphviz to print a .dot file to a png. To learn more about the dot format, check out my graphviz tutorial.

To generate the image after modifying the dot file, try this:

  1. Install graphviz brew install graphviz
  2. Run this command to create and open the image: dot -Tpng:quartz:quartz developercurriculum.dot -o courseprogress.png && open courseprogress.png
@caseywatts
caseywatts / 0instructions.md
Last active Apr 27, 2021
Easily fill out web forms using data from a spreadsheet using this bookmarklet.
View 0instructions.md

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

To set this up, paste the code below into the "location" of a bookmark. Make sure it starts with "javascript:", some browsers strip this out when you paste.

  1. Find the "name" of each form element you want to put data into. You can find the "name" by right clicking on the form box and "inspecting" it.
  2. By using a spreadsheet, create a set of urls with the data you want to input. Example: variablename1 is the "name" of the form field. "value1" is the value you want to put into the box.www.website.com/page.html?variablename1=value1&variablename2=value23. Navigate to that custom URL4. Click the bookmarklet. Voila!