Working on some .png map files today. I needed to covert them to small .jpg’s for uses in Oblastle. Problem being by default the transparent part fills into to black. Here is how to make it white:

$ ls
us-ak.png
us-al.png
us-ar.png
us-az.png
us-ca.png

$ for file in *.png ; do magick mogrify -format jpg -resize '500' -background white -flatten  $file; done

$ ls
us-ak.png
us-ak.jpg
us-al.png
us-al.jpg
us-ar.png
us-ar.jpg
us-az.png
us-az.jpg
us-ca.png

$ rm ./*.png

The important bit being -background white -flatten.

source

TR is a Unix until to translate characters I recently learned about as part of this awk snippet.

$ echo "TRAVIS" | tr '[:upper:]' '[:lower:]'
travis

source

My first awk snippet! Today I needed to get all the file extensions in directory for a blog post I’m writing.

I solved it with:

$ fd . --type f | awk -F"." '{print $(NF)}' |  tr  '[:upper:]' '[:lower:]' | sort | uniq | pbcopy

Break down

fd . –type f, lists all the files in a directory recursively.

awk -F"." ‘{print $(NF)}’, the -F"." tells awk to split columns on “.”. The ’{print $(NF)’} tells awk to print the last column. Normally you do something like ’{print $2}’ to print the second column.

tr ‘[:upper:]’ ‘[:lower:]’, tr is a Unix until to translate characters. In this case all upper case letters will be translated to lower case. I’ve created a seprate snippet for it as well.

sort | uniq, a classic combo sorts the results then gets rid of duplicates.

pbcopy, anther common one for me pipes the result into the clipboard.

source

Started playing with garden cli today. After playing around with the local kubernetes deployments I found it annoying it left some system containers running when I was finished. To get rid of these run the following from the project directory (the dir with project.garden.yml)

$ garden delete env

$ garden plugins local-kubernetes uninstall-garden-services

Trying to clean up my laptop a bit today by removing some unused brew packages.

Normally I would use brew list but this also list packages that are dependicies. Here is a way to list the top level packages:

$ brew leaves
asciinema
aspell
autoconf
awscli
bat
bumpversion
...

$ brew uninstall neomutt newsboat travisshears/tap/deploy_tool weechat
...

source

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

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

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

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

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