caseywatts

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

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)

caseywatts

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

javascript:(function(){
  const title = document.querySelectorAll("h1.ytd-watch-metadata")[0].innerText;
  const url = window.location.href;
  window.prompt("Here's your markdown link!",`[${title}](${url})`);
})();

caseywatts

Chrome is, by far, the easiest browser to make extensions for. Google's documentation for this is pretty good and thorough!

Getting Started

Setup

1. Make a folder cloudtobutt somewhere on your computer (in a code folder? or on your desktop? up to you!)
2. Save your js script in that folder as cloudtobutt.js
3. Make a file named manifest.json and copy-paste in an example:

caseywatts

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!

caseywatts

Short url: caseywatts.com/mediawikionheroku

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

How to get set up with Mediawiki running on Heroku.

Create Git Repo

Fork https://github.com/mediawiki/mediawiki (from the web interface)

(master worked fine for me, but you might want the last stable tag?)

caseywatts

Short link to this gist: http://tinyurl.com/browsersync-via-foreman

(or http://caseywatts.com/browsersync)

The "Browser Sync Simple" section is probably what you want.

If you need something more advanced than that, then the "Browser Sync with Foreman" would help.

caseywatts

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

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

Open Current Image in Pixlr Express

This bookmarklet is good for quickly modifying an image, such as overlaying some text.

1. Save this bookmarklet. Right-click on boomarks toolbar Add Page...

• Name: pixlr or whatever you'd like (maybe short so it stays on your bookmarks toolbar)

caseywatts

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