Miłosz Orzeł

.net, js/ts, html/css, arduino, java... no rants or clickbaits.

The Daily Grind (Quick Tips on Miscellaneous Issues, Ep. 2)

Intro

Here's a second round of random issues and quick tips for working around them. Part one is here.

The issues:

 

Firebase app GitHub Actions deploy failing (IAM_PERMISSION_DENIED)

I've added a feature that used Firebase Cloud Storage bucket. It all worked well on emulator but when I wanted to deploy it to test environment through GitHub Actions, the job failed with such error:

Error: Request to https://firebasestorage.googleapis.com/v1alpha/projects/example-project/defaultBucket had HTTP Error: 403, Permission 'firebasestorage.defaultBucket.get' denied on resource '//firebasestorage.googleapis.com/projects/example-project/defaultBucket' (or it may not exist).

"details": [
  ***
    "@type": "type.googleapis.com/google.rpc.ErrorInfo",
    "reason": "IAM_PERMISSION_DENIED",
    "domain": "firebasestorage.googleapis.com",
    "metadata": ***
      "resource": "projects/example-project/defaultBucket",
      "permission": "firebasestorage.defaultBucket.get"
    ***
  ***
]

It happened because GitHub Action was using a service account which lacked firebasestorage.defaultBucket.get permission. The permission is listed under roles/firebasestorage.viewer, so such role should be added to the service account. 

You can see your project's service accounts in Project settings / Service account page in Firebase console and manage it on GCP IAM & Admin / IAM page (IAM stands for Identity and Access Management). My project uses Tarraform and Terragrunt so after adding the role through GCP console (for a quick test) I had to add it to .tf file and run terragrunt apply to modify all the environments...

 

SignatureDoesNotMatch error while fetching file from a bucket

I was fetching a file with unusual file extension in React app (in-house DSL that programs clinical trial questionnaires). To work correctly it needed to be recognized as text/plain MIME type instead of the default application/octet-stream. When the file was loaded from Firebase hosting, I could set 'Content-Type': 'text/plain' header while fetching. When I've tired to do the same after switching to Firestore bucket, an 403 error with SignatureDoesNotMatch in response stated to appear.

The signature feature didn't like the fetch header setting, but it was possible to go without it by setting the Content-Type property in the uploaded file metadata. To edit the metadata you can go to GCP storage browser and use Storage bucket details -> Edit metadata menu.

BTW: You might face another issue while working with cloud storage: your newly uploaded file will be reachable when opening file link in browser or by doing a GET in curl but it might fail with fetch due to lack of CORS settings. If you get this issue look here or search how to use gsutil cors set cors.json gs://your-bucket-name command.

 

No level config per handler in @datadog/browser-logs

Datadog has a pretty neat feature that allows sending logs from browser to Datadog servers (including automatic reporting of unhandled errors and rejected promises). You might want to use the http handler that sends data over network (debounced) and the console handler that forwards entries to browser's console. You can set the log level (e.g. info vs debug), but the issue is that you cannot configure different level for each handler. That's a bummer, it would be cool to use info level for logs sent over network but still see the debug logs in console...

Fortunately there is a simple workaround. The datadogLogs has beforeSend callback and you can use it to filter out debug entries:

datadogLogs.init({
  // More init props here
  beforeSend: logsEvent => {
    return logsEvent.status !== 'debug';
  },
});

const logger = datadogLogs.createLogger('example-logger', {
  level: 'debug',
  handler: ['http', 'console'],
});

 

Grep skipping hidden files (fzf-lua+ripgrep in Neovim)

I like ripgrep and fzf a lot! These are great not only as standalone command line tools, but can also be combined to provide awesome search experience in Vim/Neovim. For Vim there's a fzf.vim plugin and for Neovim I can recommend se fzf-lua.

I often use life_grep command for quick regexp search of the codebase (which can later be fine tuned by fuzzy search of files that contain a match). I have this mapping:

vim.keymap.set('n', '<leader>sg', ':FzfLua live_grep<CR>', { desc = '[s]earch live [g]rep' })

I used to have such config for the fzf-lua plugin:

require('fzf-lua').setup { 'max-perf' }

but there was an issue: grepping would skip hidden files and directories (.env files, .github folder etc.). I think it's much safer and useful to check the hidden files too, so now I'm using such config: 

require('fzf-lua').setup {
  'max-perf',
  grep = {
    rg_opts = "--hidden --glob '!.git/' --color=never --no-heading --column -n --smart-case",
  },
}

With the above, live_grep still avoids scanning the .git folder, and node_modules are still skipped due to ripgrep's sensible defaults but I won't miss occurrences in hidden files.

There's a simpler option, if you don't care about .git being included in search too:

require('fzf-lua').setup {
  'max-perf',
  grep = {
    hidden = true,
  },
}

 

vim.morzel.net - Questions With Explanations

TL;DR

Click here to start a Vim quizClick here to get a random question.

 

MY TOOLS

I've always been a fan of IDEs and have used quite a few: Delphi 2..7 as a hobbyist (nostalgia), Visual Studio 2003..2019 while working as a .NET developer and a bit of IntelliJ IDEA or Eclipse when doing Java...

Having a cohesive set of tools from feature-rich code editor to integrated debugger gives a great productivity boost. The only thing that bothered me was that the tools I was using were not fully keyboard-oriented...

So when I switched to Visual Studio Code for React projects (which sits somewhere between plain code editor and fully-fledged IDE), I thought it might be a good opportunity to use the mouse less by relying more on command line and to try Vim's modal way of editing with VSCodeVim plugin. People have varying opinions about this plugin but I think it's a great way to start taking advantage of the Normal mode while keeping all the amenities that VS Code provides (for example its support for React+TypeScript projects is hard to match).

After a while, I stated to feel the limits of emulator and decided to use Vim directly, hoping to stay productive thanks to ALE and it's support for tsserver and rust-analyzer. I've used vim-plug to easily manage a bunch of plugins (fzf.vim, lightline.vim, lightline-bufferlinevim-code-dark, vifm.vim, vim-commentary, vim-surround, vim-unimpaired...) and configured my .vimrc with mappings using spacebar as leader key (love it!)... I still notice some hiccups, like Vim getting confused what sort of comments to use in TSX code blocks, but I can honestly say that I'm a happy Vim user (especially combined with tmux and Nushell) and I want to use it more and get better at it.

I'm on Vim 9, but a lot of people enjoy Neovim, so you might give it a try. You can even go a step further and use something like LunarVim to get tones of features preconfigured for a more IDE-like experience...

 

SITE FOR LEARNING

I think the best way to learn something is to try to teach it, so I've built a questions and answers site that should help Vim users discover its useful features. The site has a random questions mode and a quiz mode where you can choose interesting topics. Perhaps in the future I will add some keyboard drills too. At the time of this writing (2022-10-03) the site has 128 questions so it covers just fraction of what Vim could do but I plan to add a couple of questions every week. 

 

vim.morzel.net screen... Click to enlarge...

 

Every single question has an explanation, and it's worth checking it as even the wrong answers might inform you about something you didn't know about Vim. I also often add a tip about alternative usage or hint if there are some important details in Vim's extensive help system. I intend to keep the questions unambiguous so the correct answer should not be a matter of personal preference.

The site is a learning resource, I have made no attempt to hide the correct answer from browser so you should get an instant feedback. Yes, you can cheat just by opening devtools but what's the point? There are no prizes :)

 

HELP NEEDED

Please tell me if you see any inaccuracy in a question or explanation (the question ID becomes visible after answering).

The site should adopt to various screen sizes (from small smartphone to desktop) and is expected to work on modern browsers (I am checking in Chrome, Firefox and Edge on desktop and in Chrome on mobile)... Let me know if you see a bug.

 

THANKS!

I use this project as a playground to test some things that might be useful for me at work or that are just interesting to play with. Shout out to the authors of these open source projects:

Oh, and if you find the site useful, please share a link to it somewhere on the Internet.