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.


Twtxt Config Alias -- 30.05.2020 %

Recently I started using twtxt. I installed it with brew then setup it up via the quick setup command. The problem is when you put a config file location other then the default when you call the command you get a “✗ Config file not found or not readable. You may want to run twtxt quickstart." error. This is super annoying so I aliased the command to always include the location of my config file.

  alias gpf="gp --force"
+ alias tw="twtxt -c ~/.twtxt/config"

Now posting is as easy as:

$ tw tweet "authoring a snippet on how to configure alias twtxt"
\- [ zsh, twtxt ]

JSX Comments -- 26.05.2020 %

The other day at work we have an html comment in jsx slip on to stage. Made me relize I didn’t know how to leave comments in jsx myself.

So as a reminder DON’T do this:

<div>
    <!-- comment here -->
    <h2>Hello world</h2>
</div>

Instead do this:

<div>
    {/* comment here  */}
    <h2>Hello world</h2>
</div>

source:

https://wesbos.com/react-jsx-comments

\- [ react, jsx ]

Creating K8s registry secrets -- 29.03.2020 %

Hosting side projects in kubernetes and using gitlab container registry? This is the command I run to create the needed secret for the cluster to pull the image:

$ kubectl create secret docker-registry cool-project-gitlab \
    --docker-server=registry.gitlab.com \
    --docker-username=gitlab+deploy-token-666666 \
    --docker-password=xxxxxxxxxxxxxxxxxxxx \
    --docker-email=xxxxxxxxx@xmail.com

Then in the deployment.yml use the gitlab registry image and newly created image secret:

containers:
    image: registry.gitlab.com/btbtravis/cool-project:0.0.1
    imagePullPolicy: IfNotPresent
    name: cool-project-api
imagePullSecrets:
- name: cool-projects-gitlab
\- [ kubernetes ]

Vim Open File Under Cursor -- 06.03.2020 %

Half my time in the editor I’m not coding, I’m just browsing the file system trying to understand how things are connected. Trying figure out what needs to change in order to complete my task. This module imports this module which imports this module… There are many ways to navigate the file system and read files. Since I primarily code in VIM there are two main ways I navigate.

One is using the file explorer from plugin, NerdTree. It is great for getting a general overview of folder structure of a project and moving, deleting, or creating new files. Also really good for finding sibling files using the :NerdTreeFind command which I have remapped to . Where is lacks however is opening a nested import for example. When you want to jump to a different file / module directly.

This is where the goto file comes in. Using the following commands in conjunction with moving up and down the jump list, navigation is easy. Here is an example where I use the goto command and a few of its variations.

asciicast

demo using vim's goto and jumplist commands

The most helpful ones to learn are

  • <g><f> goto file, same window
  • <c-w><f> goto file, new split
  • <c-w><g><f> goto file, new tab

Also don’t forget to use the jump list

  • <c-o> or in my case remapped to <Leader><i> to jump backwards

Resources:

\- [ vim ]

Sending Files Locally -- 05.03.2020 %

For a long time I used pushbullet to quickly send pictures to my android phone from my mac.

Ex: Took cool terminal screen shot and want to post it to my Instagram story via my phone.

Problem: The pushbullet firefox extention on mac has a dialog bug prefenting file upload.

Solution:

  1. Connect phone and mac to same WIFI network

  2. Start local seb server, hosting the screen_shots folder

    $ npx http-server ./screen_shots
    
  3. Send the local ip url to phone via pushbullet

  4. Profit

accessing files on the phone

accessing files on the phone

Resource:

\- [ sync, android, files ]

Vim Spelling -- 05.03.2020 %

Exampled by the errors in my blog posts, spelling is not my strength. Never was. Always felt focusing on spelling limited my vocabulary. So I rely on tech. From the first red squiggly line in MS Word to now.

Web UI base tools:

The problem with these is I have to leave the terminal. Tech Motto: Never leave the terminal. So I use vim’s built-in. It is surprisingly good.

In action:

asciicast

demo using vim's builtin spell check

Config:

I write in both English and German so I have key maps for both

nnoremap <leader>se :setlocal spell spelllang=en<CR>
nnoremap <leader>sd :setlocal spell spelllang=de<CR>
nnoremap <leader>sn :setlocal nospell<CR>

Other spelling and writing tools: https://www.are.na/travis-shears/writing-bqnwud28d50

\- [ vim ]

Git Repo Backup -- 23.02.2020 %

Backup a git repo without thats not hosted on remote repo with:

$ git bundle create /tmp/pass_"$(date +%s)".bundle --all

Then to confirm bundle:

$ git bundle verify /tmp/pass_1582448923.bundle

When you need to restore the backup into a new repo folder:

$ git clone -b master /tmp/pass_1582448923.bundle newrepo

I recently used this to backup my ~/.pass-store pass repo. Basically it’s a folder full of .gpg files each encrypting a password. Don’t want to store it on a remote host so I back it up locally. Create a git bundle then I encrypt the resulting bundle file and store it somewhere safe.

$ gpg --symmetric ./pass_1582448923.bundle

source:

git-memo docs

\- [ git, pass ]

Vim FZF Plugin -- 30.01.2020 %

I’ve used several fuzzy finder utilities in vim over the years like Command T or CtrlP. They both have there pluses and minuses but never found them to be that fast especially with large code bases I’m often working in. Fzf for me is superior so I was excited to see a plugin that integrates Fzf so well into vim. Its not just useful for finding files but works great with buffers, files with git changes, commands, marks, and even lines in open buffers.

My vim config for Fzf is as follows:

nnoremap <Leader>pb :Buffers<CR>
nnoremap <Leader>pf :GFiles<CR>
nnoremap <Leader>pg :GFiles?<CR>
nnoremap <Leader>pm :Marks<CR>
nnoremap <Leader>pc :History:<CR>
nnoremap <Leader>pl :Lines<CR>

This allows me to easily zip around my code base with speed.

asciicast

demo using fzf in vim

sources:

\- [ vim, search ]

JQ JSON processor -- 30.01.2020 %

One of my oldest snippets is how to Pretty print JSON in the shell. This method works great for simple things where you just need to get an idea of the JSON structure, it has the bonus of using python which you probably already have installed. The problem is when you want to do more complex tasks it is quite limited in terms of parsing. Thats where jq comes in

$ curl https://review-noticket-xxxxxxxx.eu/xxxxx/static/loadable-stats.json  | jq '.entrypoints .sharedHeader .assets' | rg --invert-match map`

Simply piping to jq pretty prints the JSON but by passing a query string, ex ".entrypoints .sharedHeader .assets”, you dig into the JSON and easily get what you need. This is easily combinable with other shell utilities like in the example above which gets a list of asset URLs than uses ripgrep invert-match to clean out the source map URLs from the list. This is now my perfered way of working with JSON in the shell.

source:

\- [ JSON, curl, jq ]

Emoji Commit Messages -- 28.01.2020 %

Something code reviews can be a bit monotonous but I always found emojis spice things up a bit. Unfortunately my xterm based terminal does not support normal UTF-8 emojis. When pasted directly from apple emoji keyboard I get nothing. Today I sought out a solution to this and found you can simply use :wrench: like shortcodes, similar to how emojis are handled in slack. Seems to work for both gitlab and github!

Ex:

commit de3eb943b880c6f34e8398d22e6c7389e72cd30c
Author: Travis Shears <travis.shears@westwing.de>
Date:   Tue Jan 28 11:58:35 2020 +0100

    NOTICKET :sparkles: shared feature toggels POC
gitlab screencap

gitlab screencap

During this process I stumbled upon a open source project putting meaning behind the emojis in the development context.

| code                        | use case                                      |
| ----------------------------------------------------------------------------|
| :art:                       | Improving structure / format of the code.     |
| :zap:                       | Improving performance.                        |
| :fire:                      | Removing code or files.                       |
| :bug:                       | Fixing a bug.                                 |
| :ambulance:                 | Critical hotfix.                              |
| :sparkles:                  | Introducing new features.                     |
| :pencil:                    | Writing docs.                                 |
| :rocket:                    | Deploying stuff.                              |
| :lipstick:                  | Updating the UI and style files.              |
| :tada:                      | Initial commit.                               |
| :white-check-mark:          | Updating tests.                               |
| :lock:                      | Fixing security issues.                       |
| :apple:                     | Fixing something on macOS.                    |
| :penguin:                   | Fixing something on Linux.                    |
| :checkered-flag:            | Fixing something on Windows.                  |
| :robot:                     | Fixing something on Android.                  |
| :green-apple:               | Fixing something on iOS.                      |
| :bookmark:                  | Releasing / Version tags.                     |
| :rotating-light:            | Removing linter warnings.                     |
| :construction:              | Work in progress.                             |
| :green-heart:               | Fixing CI Build.                              |
| :arrow-down:                | Downgrading dependencies.                     |
| :arrow-up:                  | Upgrading dependencies.                       |
| :pushpin:                   | Pinning dependencies to specific versions.    |
| :construction-worker:       | Adding CI build system.                       |
| :chart-with-upwards-trend:  | Adding analytics or tracking code.            |
| :recycle:                   | Refactoring code.                             |
| :whale:                     | Work about Docker.                            |
| :heavy-plus-sign:           | Adding a dependency.                          |
| :heavy-minus-sign:          | Removing a dependency.                        |
| :wrench:                    | Changing configuration files.                 |
| :globe-with-meridians:      | Internationalization and localization.        |
| :pencil:                    | Fixing typos.                                 |
| :poop:                      | Writing bad code that needs to be improved.   |
| :rewind:                    | Reverting changes.                            |
| :twisted-rightwards-arrows: | Merging branches.                             |
| :package:                   | Updating compiled files or packages.          |
| :alien:                     | Updating code due to external API changes.    |
| :truck:                     | Moving or renaming files.                     |
| :page-facing-up:            | Adding or updating license.                   |
| :boom:                      | Introducing breaking changes.                 |
| :bento:                     | Adding or updating assets.                    |
| :ok-hand:                   | Updating code due to code review changes.     |
| :wheelchair:                | Improving accessibility.                      |
| :bulb:                      | Documenting source code.                      |
| :beers:                     | Writing code drunkenly.                       |
| :speech-balloon:            | Updating text and literals.                   |
| :card-file-box:             | Performing database related changes.          |
| :loud-sound:                | Adding logs.                                  |
| :mute:                      | Removing logs.                                |
| :busts-in-silhouette:       | Adding contributor(s).                        |
| :children-crossing:         | Improving user experience / usability.        |
| :building-construction:     | Making architectural changes.                 |
| :iphone:                    | Working on responsive design.                 |
| :clown-face:                | Mocking things.                               |
| :egg:                       | Adding an easter egg.                         |
| :see-no-evil:               | Adding or updating a .gitignore file          |
| :camera-flash:              | Adding or updating snapshots                  |
| :alembic:                   | Experimenting new things                      |
| :mag:                       | Improving SEO                                 |
| :wheel-of-dharma:           | Work about Kubernetes                         |
| :label:                     | Adding or updating types (Flow, TypeScript)   |
| :seedling:                  | Adding or updating seed files                 |
| :triangular-flag-on-post:   | Adding, updating, or removing feature flags   |
| :goal-net:                  | Catching errors                               |
| :animation:                 | Adding or updating animations and transitions |
| :wastebasket:               | Deprecating code that needs to be cleaned up. |

source:

\- [ git, emoji ]
<---- back home