Skip to content

Instantly share code, notes, and snippets.

@wzulfikar
Last active Nov 2, 2022
Embed
What would you like to do?
Notes

Hello world! 🌎

I write notes in this gist as comments. My original goal was to have a workflow where I can't have an excuse to not write. No websites to manage, no codes to push, no styles to update. Just write. I found Github gist fitting and I don't have issues with writing markdown.

This gist contains "problem-based", technical notes. I encounter a problem, I "google" the solution, I document the solution. Hopefully, I can accumulate the learning and don't have to google again when I encounter the same problem.

Besides problem-based, I also write my "TIL" notes here. They are the new things I learnt that often gave me that "nice" feeling when I first found about it.

There are other things I write like electronics, observations, etc. which I put in different gists. If you want to check it, here's the "sitemap" of all my notes:

flowchart TD
  Notes --You are here--> Problem-based[<strong>Problem-based</strong>]
  Notes -.-> Observations
  Notes -.-> Logs
  Notes -.-> Challenges
  Notes -.-> Electronics

  click Problem-based "https://gist.github.com/wzulfikar/ba2f58d7aeeb3cf53743316f96f91594"
  click Observations "https://gist.github.com/wzulfikar/2cff9bcd64ba5f15296e0b57ff402f79"
  click Logs "https://gist.github.com/wzulfikar/5ea5779d7f2ea0e27809e94e7904f93d"
  click Challenges "https://gist.github.com/wzulfikar/7d5e9426d1c7efc3ceeabb29adb2f4fd"
  click Electronics "https://gist.github.com/wzulfikar/16c3b5f10b8f28d8b0e325d03c948d1c"

Problem-based · Observations · Logs · Challenges · Electronics

▲▼▲

@wzulfikar
Copy link
Author

wzulfikar commented Oct 12, 2022

Wed, Oct 12, 2022
🧶 Problem: I want to execute a specific function (eg. main) if the JS file is ran from node cli
💡 Solution: require.main == module && main();
🔗 Ref: https://codewithhugo.com/node-module-entry-required/
#️⃣ Tags: js
🔢 Encounters: 1

Context:
I want my JS script to export a function while also having an alternate main function that will be run if I call the script from node (eg. node my-script.js. I remember that I can do something like if __name__ == '__main__': in Python, but I wasn't sure how to do that in NodeJS.

@wzulfikar
Copy link
Author

wzulfikar commented Oct 12, 2022

Wed, Oct 12, 2022
🧶 Problem: Must download 20GB of xcode just to use clang or make
💡 Solution: sudo xcode-select -switch /Library/Developer/CommandLineTools
🔗 Ref: SO comment
#️⃣ Tags: macos cli npm quirk
🔢 Encounters: 1

Context:
I wanted to install tfjs-node (npm i @tensorflow/tfjs-node) but it kept asking for clang and make. I googled around and followed the steps that eventually asked me to install XCode. But it was too big (20GB!) and it doesn't feel logical to me. I google around again and found the SO comment in ref. Tried it, and it works.

@wzulfikar
Copy link
Author

wzulfikar commented Oct 12, 2022

Wed, Oct 12, 2022
🧶 Problem: Need a quick way to enable syntax highlighting in nano.
💡 Solution: curl https://raw.githubusercontent.com/scopatz/nanorc/master/install.sh | sh
🔗 Ref: https://github.com/scopatz/nanorc
#️⃣ Tags: unix editor
🔢 Encounters: 2

Context:
I was editing a file in Raspberry PI with nano and I realised that I actually had to do it multiple times. So I think having a syntax highlighter can add quality of life. After some googling, I found the repo in ref (https://github.com/scopatz/nanorc) and it actually has a one-liner command to add the syntax highlighting (see "Solution"). Note that the one-liner execute the script immediately to your shell. Depending on your situation, you might not want to do that (eg. if you don't trust the script).

Before After
image image

@wzulfikar
Copy link
Author

wzulfikar commented Oct 14, 2022

Fri, Oct 14, 2022
🧶 Problem: Need to have my SSH public key but my laptop is not with me
💡 Solution: use https://github.com/{username}.keys
🔗 Ref: SO comment
#️⃣ Tags: github git ssh
🔢 Encounters: 1

Context:
Usually, I'd run cat ~/.ssh/id_ed25519.pub in my laptop to see (and copy) my public SSH key. But turns out I can get the public key from https://github.com/wzulfikar.keys if I've added it to my Github account. Handy if I need to setup a new dev machine or a server.

Here's a one-liner to show your SSH public key using Github:

curl https://github.com/{username}.keys

@wzulfikar
Copy link
Author

wzulfikar commented Oct 14, 2022

Fri, Oct 14, 2022
🧶 Problem: I want to have syntax highlighting in cat
💡 Solution: use bat and create an alias: alias cat="bat -p"
🔗 Ref: https://github.com/sharkdp/bat
#️⃣ Tags: cli tool quality-of-life
🔢 Encounters: 1

Context:
I use cat frequently and I realised it'll be better if it has syntax highlighting. I found this SO comment that suggests to use pygmentize (python) but I find it too slow for me. So I googled around and found bat and I don't feel any speed difference between bat and cat (they're both fast!). So I created shell alias to use bat instead of cat:

alias cat="bat -p"
alias catt="bat --style=full"
alias catp="/bin/cat"

cat, before the alias:

cat, after the alias:

image image

catt (bat with full style):

catp (to access the original cat):

image image

For macOS, installation is easy: brew install bat

@wzulfikar
Copy link
Author

wzulfikar commented Oct 14, 2022

Fri, Oct 14, 2022
🧶 Problem: Need to search text in a code base
💡 Solution: use rg
🔗 Ref: https://github.com/BurntSushi/ripgrep
#️⃣ Tags: cli tool workflow
🔢 Encounters: 1

Context:
I can't really remember which find args I should use to search texts and I found that rg has sensible defaults that just works. For example, here's how I search "TODO" text in a directory:

image

The nice thing about rg is it automatically exclude patterns from .gitignore (see docs) so the search result won't be cluttered. Also, it's very fast!

For macOS, installation is easy: brew install ripgrep

@wzulfikar
Copy link
Author

wzulfikar commented Oct 14, 2022

Fri, Oct 14, 2022
🧶 Problem: Add auto complete for iTerm2
💡 Solution: use fig
🔗 Ref: https://github.com/withfig/autocomplete
#️⃣ Tags: cli workflow quality-of-life
🔢 Encounters: 1

Context:
In VS Code, I can see code hints from IntelliSense which often contain new informations for me:

image

Then I found that fig can actually do the same for my terminal (iTerm2). Mind blown 🤯:

Here's a preview of fig showing hints for brew, asdf, and npm:

Screen Recording 2022-10-14 at 12 49 18 mov

For macOS, installation is easy: brew install fig

@wzulfikar
Copy link
Author

wzulfikar commented Oct 15, 2022

Sat, Oct 15, 2022
💡 TIL: bat has batdiff that gives you a prettier git diff
🔗 Ref: https://github.com/eth-p/bat-extras
#️⃣ Tags: workflow cli quality-of-life

Context:
After playing around with bat (see previous note), I found that bat has bat-extras which integrates syntax highlighting to existing tools. The two extras that I immediately use is batgrep and batdiff.

Here's the preview:

ripgrep: batgrep:
image image
git diff: batdiff:
image image

For macOS, installation is easy (after you've installed bat): brew install eth-p/software/bat-extras.

For other platform, see their README.

@wzulfikar
Copy link
Author

wzulfikar commented Oct 18, 2022

Tue, Oct 18, 2022
🧶 Problem: I want to find all node_modules folders
💡 Solution: Use find with -prune
🔗 Ref: SO comment
#️⃣ Tags: js cli
🔢 Encounters: 1

Context:
I'm curious how many node_modules folders I have accumulated and how many GB it cost me. I found the SO comment (in Ref) that suggests to use find with -prune to list all node_modules folders excluding its descendants (because node_modules can be nested). Note that I mostly use yarn and only recently started using pnpm.

The command to find all node_modules folders:

find . -type d -name node_modules -prune | tr '\n' '\0' |  xargs -0 du -sch

Turns out I have 110 node_modules folders, 31 GB in total. Maybe I should start deleting them.

Here's all my node_modules with their size, for my future reference

Note: some paths are masked (eg. "***") for privacy reason

size path
1 319M ./learn/nestjs-fundamentals/iluvcoffee/node_modules
2 197M ./learn/fireship/react-next-firebase/nextfire/node_modules
3 13M ./playground/ava-demo/node_modules
4 784M ./playground/my-solito-app/node_modules
5 0B ./playground/my-solito-app/apps/next/node_modules
6 59M ./playground/my-solito-app/apps/expo/node_modules
7 250M ./playground/my-turborepo/node_modules
8 0B ./playground/my-turborepo/packages/ui/node_modules
9 0B ./playground/my-turborepo/packages/eslint-config-custom/node_modules
10 196K ./playground/my-turborepo/apps/web/node_modules
11 196K ./playground/my-turborepo/apps/docs/node_modules
12 406M ./playground/taskbox/node_modules
13 494M ./playground/hocus2/node_modules
14 176M ./playground/node_modules
15 35M ./playground/hocuspocus/playground/frontend/node_modules
16 1.7M ./playground/hocuspocus/playground/backend/node_modules
17 732M ./playground/hocuspocus/node_modules
18 148K ./playground/hocuspocus/tests/node_modules
19 800K ./playground/hocuspocus/packages/extension-monitor/node_modules
20 0B ./playground/hocuspocus/packages/server/node_modules
21 196K ./playground/hocuspocus/packages/cli/node_modules
22 0B ./playground/hocuspocus/packages/extension-redis/node_modules
23 69M ./playground/total-typescript/advanced-typescript-workshop/node_modules
24 95M ./playground/total-typescript/beginners-typescript-tutorial/node_modules
25 32M ./playground/total-typescript/typescript-generics-workshop/node_modules
26 12M ./playground/total-typescript/type-transformations-workshop/node_modules
27 299M ./playground/rns-react-native-firebase-chat-app/node_modules
28 176M ./playground/qwik-app/node_modules
29 1.0M ./playground/faktory-node-require-jobs/node_modules
30 1.1G ./playground/nativebase-startup/node_modules
31 499M ./playground/hocus/node_modules
32 579M ./playground/nextron-tailwind/node_modules
33 333M ./playground/test-zustand/node_modules
34 145M ./playground/react-query-course/node_modules
35 305M ./playground/rns-WordleClone/node_modules
36 682M ./playground/csb-storybook-zeus/node_modules
37 280M ./playground/rns-over-the-air-update-class/node_modules
38 275M ./playground/kbar/node_modules
39 220M ./playground/slidev-multientry/node_modules
40 20M ./playground/cloudinary-folder-usage/node_modules
41 469M ./playground/expo-template-typescript-jest/node_modules
42 149M ./playground/test-zustand-vite/node_modules
43 93M ./playground/zod-tutorial/node_modules
44 245M ./playground/typesense-instantsearch-demo/node_modules
45 484M ./playground/trpc-prisma-starter/node_modules
46 1.3G ./ki***und/web_v2/node_modules
47 738M ./ki***und/web/node_modules
48 784M ./go****up/x-solito/node_modules
49 0B ./go****up/x-solito/apps/next/node_modules
50 59M ./go****up/x-solito/apps/expo/node_modules
51 1.6G ./go****up/app/node_modules
52 0B ./go****up/_tmp/next/node_modules
53 73M ./go****up/gsdb/node_modules
54 168M ./go****up/hasura/node_modules
55 265M ./go****up/mailer/node_modules
56 2.3G ./go****up/mono-template/node_modules
57 0B ./go****up/mono-template/packages/app/node_modules
58 0B ./go****up/mono-template/packages/test/node_modules
59 0B ./go****up/mono-template/packages/backend/node_modules
60 378M ./go****up/mono-template/packages/hocus/node_modules
61 1.7M ./go****up/mono-template/apps/next/node_modules
62 0B ./go****up/mono-template/apps/tauri/node_modules
63 0B ./go****up/mono-template/apps/expo/node_modules
64 377M ./go****up/mono-template/apps/nextron/node_modules
65 109M ./go****up/firebase-function-custom-user-claims/functions/node_modules
66 1.9G ./go****up/mobile/node_modules
67 0B ./go****up/mobile/packages/test/node_modules
68 0B ./go****up/mobile/packages/backend/node_modules
69 1.7M ./go****up/mobile/apps/next/node_modules
70 0B ./go****up/mobile/apps/expo/node_modules
71 377M ./go****up/mobile/apps/nextron/node_modules
72 691M ./go****up/api/node_modules
73 290M ./go****up/x/packages/app/node_modules
74 12M ./go****up/x/apps/next/node_modules
75 267M ./go****up/x/apps/next/.storybook/node_modules
76 355M ./go****up/x/apps/expo/node_modules
77 0B ./go****up/x/apps/nextron/node_modules
78 0B ./go****up/mono-template-old/packages/app/node_modules
79 0B ./go****up/mono-template-old/packages/test/node_modules
80 0B ./go****up/mono-template-old/packages/backend/node_modules
81 1.7M ./go****up/mono-template-old/apps/next/node_modules
82 268M ./go****up/mono-template-old/apps/next/.storybook/node_modules
83 0B ./go****up/mono-template-old/apps/expo/node_modules
84 5.4M ./gu****d/web/workspace/node_modules
85 1.0G ./gu****d/web/node_modules
86 13M ./github/tailwindui-storybook/node_modules
87 380M ./github/rubytricks.com/node_modules
88 93M ./github/slides/slidev-demo/node_modules
89 4.0K ./github/pr/node_modules
90 272M ./github/pr/pmndrs/node_modules
91 2.2G ./github/triv/node_modules
92 0B ./github/triv/packages/test/node_modules
93 0B ./github/triv/packages/backend/node_modules
94 126M ./github/triv/packages/hocus/node_modules
95 1.7M ./github/triv/apps/next/node_modules
96 0B ./github/triv/apps/tauri/node_modules
97 0B ./github/triv/apps/expo/node_modules
98 377M ./github/triv/apps/nextron/node_modules
99 28M ./github/csproject/node_modules
100 825M ./github/tg-sisubot/node_modules
101 284M ./github/devto/devto-nextjs-api-ts/node_modules
102 709M ./github/csb-storybook/node_modules
103 383M ./github/programmerwfh.com/node_modules
104 1.3G ./github/sensible-meeting/body/node_modules
105 32M ./github/sensible-meeting/RPI/node_modules
106 12K ./github/threejs-journey/bruno-starter-pack/05-transform-objects/node_modules
107 152M ./github/threejs-journey/node_modules
108 11M ./github/threejs-journey/apps/vite-starter/node_modules
109 253M ./github/threejs-journey/apps/fiber-starter/node_modules
110 995M ./github/hypertwind/node_modules
31G total

@wzulfikar
Copy link
Author

wzulfikar commented Oct 18, 2022

Wed, Oct 19, 2022
🧶 Problem: I want macOS to trigger a backup script when I plug in a microSD
💡 Solution: Use Apple Automator to trigger rsync
🔗 Ref: Apple Support Community
#️⃣ Tags: macOS automator workflow
🔢 Encounters: 1

Context:
I have 2 cameras that I use to record videos (DJI Pocket 2 and Akaso Brave 7). After recording some videos, I'll:

  1. take out the microSD from the camera
  2. plug it in to my card reader
  3. copy the videos to my SSD (I use rsync for this)
  4. plug out the microSD and put it back to the device.

I noticed the pattern and I thought it'd be good if I can automate number 3. I know I can trigger a script when a device mounted using systemd (eg. this gist) but macOS doesn't have systemd. So I googled and found the discussion in Apple Support Community (see Ref). Turns out I can us Automator for that.

image

Automator script:

device=$(basename $@)
script=/Volumes/wzulfikar/Devices/$device/sync.sh

[ ! -f "$script" ] && exit 1

osascript -e "display dialog \"Syncing $@..\" giving up after 5"

$script

osascript -e "display dialog \"Sync completed for $@\""

sync.sh script (eg. located in /Volumes/wzulfikar/Devices/DJIPOCKET2/sync.sh):

#!/bin/sh

source=/Volumes/DJIPOCKET2/DCIM/
target=/Volumes/wzulfikar/Devices/DJIPOCKET2/DCIM/

echo "Syncing $source to $target"

rsync -rP --ignore-existing $source $target

▲▼▲

When doing this, I also learnt that Automator stores its scripts in ~/Library/Workflows/Applications. Here's how my Folder Actions script look like in that directory:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment