If you have experience with Firefox extensions, you might know that you can accomplish this task with the following background script and content script:

//Background script

browser.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.msg === "capture_tab") {
    var tabId
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      tabId = tabs[0].id
    })

    browser.tabs.captureVisibleTab(
      tabId,
      { format: "png", quality: 100, rect: request.rect },
      function (dataUrl) {
        sendResponse({ imgSrc: dataUrl })
      }
    )
    return true
  }
})

//Content script
//Define a rect based on the desired left, top, width, and height
const rect = {x: 0, y: 0, width: 100, height: 100};

browser.runtime.sendMessage(
      {
        msg: "capture_tab"
        rect: rect
      },
      function (response) {
        //response.imgSrc is your cropped image as a data URL
        }
      }
    )

However, unlike Firefox, Chrome’s version of the method does not support passing in a rectangle specifying the area to capture. Therefore, a few more steps are required to achieve the desired result.

As always, you need your desired rectangle’s width, height, left coordinate, and top coordinate. These variables will likely be obtained in a content script. Since content scripts cannot call captureVisibleTab(), send a message to the background service worker. This time, there is no point in sending the rectangle dimensions to the background script.

//Background script

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.msg === "capture_tab") {
    var tabId
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      tabId = tabs[0].id
    })

    chrome.tabs.captureVisibleTab(
      tabId,
      { format: "png", quality: 100 },
      function (dataUrl) {
        sendResponse({ imgSrc: dataUrl })
      }
    )
    return true
  }
})

Once the service worker has captured the screenshot and sent it back to the content script as a data URL, create an Image object and give it said URL as a source. Once the image has loaded, create a canvas, get the canvas context, and use the context method drawImage() to crop the picture with your rectangle’s dimensions and coordinates.

//Content script
//Define and assign left, top, width, and height

chrome.runtime.sendMessage(
      {
        msg: "capture_tab"
      },
      function (response) {
        const image = new Image()
        image.src = response.imgSrc
        image.onload = function () {
          const canvas = document.createElement("canvas")
          const scale = window.devicePixelRatio

          canvas.width = width * scale
          canvas.height = height * scale
          const ctx = canvas.getContext("2d")

          ctx.drawImage(
            image,
            left * scale,
            top * scale,
            width * scale,
            height * scale,
            0,
            0,
            width * scale,
            height * scale
          )

          const croppedImage = canvas.toDataURL()
          //Do stuff with your cropped image
        }
      }
    )

Note that scaling is applied based on the device’s pixel ratio. captureVisibleTab() will generate a screenshot multiplied by this ratio, so your cropped image may not match your intentions if you do not account for it.

Cropping a Screenshot Captured with a Chrome Extension was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

Add this function to your favorite shell config file ~/.zshrc or ~/.bashrc

sloc () {
  git ls-files | grep "$1" | grep -v grep | xargs wc -l
}

This depends on git , grep, wc and xargs which are pre-installed in most linux distributions as well as mac osx.

This is what this looks like :

h4x0rdud3@h4x0rdud3 in ~/dotfiles/vim/pack/packup/start/vim-zoom on master ✔
λ sloc
  79 README.md
  72 autoload/zoom.vim
  94 doc/zoom.txt
  16 plugin/zoom.vim
 261 total

If you wanted to get SLOC for a specific file type, just add the file extension as an argument to sloc, for example sloc vim gives you :

h4x0rdud3@h4x0rdud3 in ~/dotfiles/vim/pack/packup/start/vim-zoom on master ✔
λ sloc vim
  72 autoload/zoom.vim
  16 plugin/zoom.vim
  88 total

Quick way to get SLOC was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

When deserializing objects, there are situations where we may not know the name(s) of one or more fields. For example, the Slack API’s response format is composed of an ok field, optional warning and error fields, and a field containing the requested data. The field for this data could be named after any of the Slack API objects, from profile to view. Here’s some examples of potential responses:

{"ok": true, "profile": {...}}
{"ok": false, "error": "not_authed"}
{"ok": true, "view": {...}}

Optional Fields

Since error only exists when ok is false, we can declare the type of error in our struct as Option<String>. Thus, the deserializer can add the value None to error if the request was successful and deserialize the error field if something went wrong.

Distinct Fields

For fields where we don’t know the name, but know the set of possibilities, we can use enums. Serde will use a match pattern and attempt each variant until it successfully deserializes the object.

#[derive(Serialize, Deserialize)]
enum SlackResponse {
    ProfileResp { ok: bool, profile: Profile, error: Option<String> },
    ViewResp { ok: bool, view: View, error: Option<String> },
}

If the number of variants expected is too great or the field names are random, HashMaps are another option. We can use the serde_json crate to turn any JSON object or any other object that could be interpreted as JSON into a HashMap<String, Value>. This way, it is possible to deserialize first and iterate through the HashMap to search for fields afterward.

let map =  serde_json::from_slice::<HashMap<String, Value>(&bytes)?;
let profile = map.get("profile").unwrap();

Using these methods, deserializing objects in Rust is quick and easy, regardless of the format.

Deserializing Objects with Unknown Fields in Rust was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

While working on one of our product’s deployment workflow, I realised maintaining separate secret varaiables for each environment wasn’t going to scale. To solve this issue, it felt natural to move the environment configuration from multiple secrets to a single secret to be used as a large multiline env file.

However, a large multiline value gave me issues due to github automatically wrapping long lines. Notice how sometimes solving one issue leads you to another ? Well, to solve this issue, I resorted to base64 encoding. We base64 encode the large secret value and within the github action workflow, we decode it before using the encoded value. Here’s how :

And problem solved!

Using Large Multi-line Secrets in Github Actions was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

f = proc{|x| x + 2}
g = proc{|x| x * 3}
(f << g).call(3) # -> 11; identical to f(g(3))
(f >> g).call(3) # -> 15; identical to g(f(3))

I’ve been using Ruby for a long time and to this day, I run into such surprises now & then.

Function Composition in Ruby was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

A lot of times when jumping across branches on your Git repository, you’ll come across situations where you need to un-stash a single file from your stashes. Though there is no specific command to achieve this, there are workarounds that can be used to achieve this behavior in Git.

Checking Out a Single File From The Stash

This method will checkout the file from the stash into your working branch. Ensure that there are no local uncommitted changes on the existing file that you do not wish to lose before using this method as it will restore the version of the file as of the time when the stash was performed.

git checkout stash@{0} -- <filename>

Creating a Copy of a Stashed File Under a Different Filename

This is a non-destructive method that will let you recreate the file in the stash into the working branch under a new filename.

git show stash@{0}:stashed_file.rb > copy_of_stashed_file.rb

The stash tool can be used in conjunction with other git features to achieve desired outcomes. I would recommend checking out Atlassian’s documentation on Git Stashing:
https://www.atlassian.com/git/tutorials/saving-changes/git-stash

Fetching a Single File From Git Stash was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you have a huge list of text records with accented characters and want to get rid of the accented (diacritic) characters because you want to keep the data ASCII-only, Rails offers a simple method to get rid of accented characters without having to go through the pain of writing complex Regex matchers.

I18n.transliterate "São Paulo"

=> "Sao Paulo"

As per the official documentation, the `transliterate` method replaces non-ASCII characters with an ASCII approximation.

NOTE: In case, an ASCII Approximation for a non-ASCII character is not found, the character is replaced with a `?`.

Removing Accented Characters From Strings in Rails was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

For this I needed a way to replace everything in my repository except the _posts folder. Enter orphan branches.

Orphan branches creates a branch without any of the commit history but just the files from the source branch.

git checkout --orphan branch-name

Once done, all the existing files will be staged in git. After discarding all the changes and pulling the desired theme’s repo and checking out my existing _posts directory satisfied the requirement.

Orphan branches can also be used to erase the entire commit history of a git repository, simply checkout orphan and rename it to master (after deleting the original master branch).

Git orphan branches was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

docker history --no-trunc <image-name>

This will list all the contents of its Dockerfile along with layers information

Quickly find the docker image startup command was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.

In Postgres, it is not easy to find the location of the data folder because it can be overridden in multiple configuration files and also can be passed as a parameter when starting postgres server

However, there is an easy way to find it out from postgres interactive terminal by running the following command

show data_directory;

data_directory
 — — — — — — — — — —
/var/lib/pgsql95/data
(1 row)

Find the location of postgres data directory was originally published in TarkaLabs TIL on Medium, where people are continuing the conversation by highlighting and responding to this story.