Snippets are one of my favorite parts of programming. The shear endless depth of command line tricks and customizations is so exciting! Here is a collection I maintain for myself to comeback to.

Also navigable by list of snippet types here.


wipe git commit times -- 14.01.2022 %

Some time you don’t want everyone to know exactly when you committed. This command will wipe the time stamps and set them all to today at 0:00h.

git filter-branch --env-filter '
  GIT_AUTHOR_DATE="$(date +%Y-%m-%d) 00:00:00+0000"
  GIT_COMMITTER_DATE="$(date +%Y-%m-%d) 00:00:00+0000"
  ' -- --all

It works best on fresh repos just be for pushing to remote for the first timee.

source

\- [ git ]

re export -- 05.01.2022 %

Today when writing a React hook I imported an enum type from another section of code. This enum was used as an argument to the hook. Any components that used this hook would also need to import that type enum. So just to use the hook at a minimum the component would need to import two things, the hook itself, and the type enum. To many imports cluttering stuff us!

import useCoolHook from 'Client/hooks/CoolHoook';
import HatStyleEnum from 'Client/hats/styles';

...
cool = useCoolHook(HatStyleEnum.cowboy);

What I found is the ability to re-export the type from the hook to keep the enum bundled with the hook and more easily accessible.

export {HatStyleEnum} from 'Client/hats/styles';

export const useCoolHook = (hatId: HatStyleEnum) => {
...

This way the components only have to have one import, saving space.

import useCoolHook, {HatStyleEnum} from 'Client/hooks/CoolHoook';

Also see similar snippet for js

source: stackoverflow

\- [ typescript ]

destructuring an array in javascript -- 29.11.2021 %

How I use to destructure Arrays:

const nums = [1,2,3];
const [a, _, c];
(a === 1) // true
(c === 3) // true

Problem is this _ is not needed and will cause problems with some ESLint setups. For example they might not allow unused variables. Turnes out you can just leave that spot blank!

const nums = [1,2,3];
const [a, , c];
(a === 1) // true
(c === 3) // true
\- [ js ]

emacs replace across multiple files -- 28.11.2021 %

This week I was making some changes to a hugo shortcode I use on my personal site for videos.

Old one:

{< video-with-caption
    remote_url="https://travisshears.com/image-service/videos/galtenberg-ski-tour/over_the_tree.webm"
    backup_url="https://travisshears.com/image-service/videos/galtenberg-ski-tour/over_the_tree.mp4"
    title="through the woods we go"
>}

New one:

{< video-with-caption
    webm_url="https://travisshears.com/image-service/videos/galtenberg-ski-tour/over_the_tree.webm"
    mp4_url="https://travisshears.com/image-service/videos/galtenberg-ski-tour/over_the_tree.mp4"
    title="through the woods we go"
>}

Problem is this change crosses 50+ files. I knew some ways with sed to regex substitute it across the files but I wanted something more emacs. Eventually found wgrep! Its allows you to search with normal +default/search-project then edit the results.

  • <SPC s p> to search the project
  • type search ex: “remote_url”
  • <C-c C-o> to open the results
  • delete some results with <d>
  • <C-c C-p> to make the results editable
  • make edits example :%s/remote_url/webm_url/g
  • <Z Z> to save changes across all the files
  • lastly review changes via git

final patch: https://git.sr.ht/~travisshears/travisshears.com/commit/71e9c89c32f9b9f362e8e94ca8530530c1418284


In the making of this snippet I had some other fun:

  • this screen recording led me to finding keycastr. A very helpful mac osx program that displays keys as you type them. Great for tutorials.
  • My personal site is not open source because I write lot of drafts that don’t get published for months… For this snippet I wanted to show part of that source code as a patch, decided on hosting it as a sourcehut paste. To create the paste I wrote a sourcehut-paste.
  • Video was created with Quicktime screen recording feature plus my video helper app, ts-video
\- [ emacs ]

vs code tasks -- 12.11.2021 %

For the past years whenever I needed to lint or test a single file I would:

  • right click it in the navigation tree
  • copy relative path
  • open the built in terminal with Command-J
  • Control-R to search recent commands for ’npm run test’ or ’npm run lint'
  • Select old path in the command and paste with path I want to test
  • hit Enter
  • wait

Over time doing this adds up. Recently I stumbled upon VS Code Tasks and found a way to speed things up. By configuring the following tasks.json:

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "shell",
			"label": "test single xxxxx file",
			"command": "npm run test -- ${file} --coverage=false",
			"problemMatcher": []
		},
		{
			"type": "shell",
			"label": "lint and fix single file xxxxx file",
			"command": "./node_modules/.bin/eslint ${file} --fix",
			"problemMatcher": []
		},
	]
}

Now to test the file that I’m currently working on I:

  • Command-Shift-P to bring up commands input
  • Usually ‘Tasks: Run Task’ is the last run command so just press Enter, In the case it is not typing ‘Task’ is enough to bring it up
  • Then the lint and test tasks appier in the drop down and all I have to do is hit Enter again
  • wait
  • profit

Don’t know why I held out on customizing VS Code so long! Wonder what other time saving features there are?

source: vs code docs

\- [ vscode ]

emacs mac umlauts -- 05.11.2021 %

Recently I’ve been writing a lot for the German side of my personal site. When typing in German I perfer to use the English QWERTY keyboard and just alt-u-u to type “ü”. The problem I was having was emacs would intercept this and execute the capitalize-word function 😞. After some digging into my configs, ~/.doom.d/config.el, I was able to unset M-u only problem is it still didn’t activate the mac system umlaut feature.

(global-unset-key (kbd "M-u"))

Finally after some more digging I found:

(setq ns-alternate-modifier 'none
      ns-right-alternate-modifier 'meta)

It works by un-assigning the left alt to meta, allowing the system keyboard feature to kick in.

source: https://emacs.stackexchange.com/questions/61019/umlauts-in-emacs-on-mac

\- [ emacs ]

update a local zef module -- 20.10.2021 %

Lately I’ve been working locally with raku/zef modules for my CLI apps. I install them with:

$ zef install .

Turns out you can update a package very similarity. Just bump the version in the META6.json and run the same command again.

$ zef install .

docs

\- [ raku, zef ]

make emacs words closer to vim -- 20.10.2021 %

I love doomacs but jumping around words it bugged me underscores were not considered part of the word like in vim. After six months of dealing with it I stumbled upon a solution!

Simply put this in my .doom.d/config.el.

(modify-syntax-entry ?_ "w")

source: emacs.stackexchange

\- [ emacs ]

describing a raku variable -- 15.10.2021 %

My go to way to figure out what I’m working with in Raku.

my $res = cool_thing();

say $res.WHAT;
say $res.^attributes;
say $res;
\- [ raku ]

re-export javascript function -- 05.10.2021 %

When splitting logic into files in JavaScript it sometimes happens you have a folder of files; say for a single domain like Google analytics tracking. There comes a time in another part of the code where you need to import some functions and types from this GATracking folder but you may not want to dig into which file in the folder that function is. Re-exporting allows us to keep the API of the GATracking logic consise and allow the rest of the program to not worry about how exactly the files are structured. Example:

src/client/hooks/GATracking/index.tsx

export { default as TrackingAction } from './actions';
export const track = (action: TrackingAction) =>
...

Then somewhere else: src/client/components/GoButton/index.tsx

import {TrackingAction, track} from '../hooks/GATracking';
...

source: https://stackoverflow.com/questions/34576276/re-export-a-default-export

\- [ js ]