Forem: Sam M.

Setting up multiple github accounts on the same computer (without having to change the repo url)

Sam M. — Mon, 07 Sep 2020 05:25:20 +0000

Issue:

You need to use two different github accounts from one computer.
You don't want to have to configure your ssh keys every time you switch accounts.
You don't want to edit the repo's ssh address every time you clone a repo either as suggested by a lot of online tutorials.

Solution: You put all your work repos in one folder and update your ssh config to conditionally use a different SSH key. Everything else will use the default ssh key (your personal account).

Github uses the SSH protocol with the RSA cryptosystem to authenticate your computer. When you generate a new SSH key, there will be two keys created - a private key and a public key. You'll need to add the public key to your github account but leave the private key on your machine. You can read more about public-key cryptography here.

If you've already generated and added your SSH keys to your github account, skip this section.

Generating and Adding SSH keys to your github account.

Checking for existing keys

First, check if there are SSH keys present on your machine by going to terminal and run ls -al ~/.ssh . By default, the filenames of the public keys start with id_rsa and end in .pub .
If you're not sure which key belongs to which account and want to start with new keys, you can delete your keys by running ssh-add -D from terminal. This only removes manually added keys so if you're running into issues, take a look at this stackoverflow answer. Make sure to go to the folder where your SSH keys are located - run open ~/.ssh from terminal and save a copy before overwriting them.

Generating new keys

From terminal, run
```
 ssh-keygen -t rsa -f ~/.ssh/id_rsa -C "your.email@example.com"
```
If you get asked to overwrite an existing key of the same name, type y if you want to overwrite it. If you don't want to overwrite it, type n and reenter the above command with a new filename. Just change id_rsa to something else like id_rsa_PERSONAL .
Enter a secure passphrase. This will generate two a private key id_rsa and a public key id_rsa.pub.
Copy the public key id_rsa.pub by running pbcopy < ~/.ssh/id_rsa.pub from terminal. You can also open the SSH key directory by running open ~/.ssh , dragging the id_rsa.pub file into your code editor and copying the contents of the file.
From a browser, go to the settings of your github account by clicking your profile picture from the top right corner.
In the user settings sidebar, click SSH and GPG keys .
Click New SSH key
Paste your copied public key in the "Key" field and give it an appropriate title in the "Title" field.
Click Add SSH key .

Repeat the above steps to generate and add a new key for your second github account. Just make sure to give a different name like id_rsa_COMPANY .

Setting up SSH config

From terminal, run cd ~/.ssh .
Check if a config file exists by running - ls config . If you see ls: config: No such file or directory , create a new config file by running touch config .
Open the config file by dragging it into your code editor.
Paste the following into the file:
```
  Host github.com
    HostName github.com
    User git
    IdentitiesOnly yes
    AddKeysToAgent yes
    UseKeychain yes

  Match Host github.com !exec "pwd | grep '/COMPANY' > /dev/null"
    IdentityFile ~/.ssh/id_rsa

  Match Host github.com exec "pwd | grep '/COMPANY' > /dev/null"
    IdentityFile ~/.ssh/id_rsa_$COMPANY
```
Source for the above snippet.

Setting UseKeychain to yes stores your passphrase in the keychain so you don't have to retype it every time. exec "pwd | grep '/COMPANY' > /dev/null" checks if the current folder is nested inside your COMPANY folder. If it is, it'll use id_rsa_$COMPANY SSH key and your default one otherwise. [1]
Then run chmod 600 ~/.ssh/config .

Setting your user.name and user.email

Now that you've set up your SSH keys, you still need to configure your user.name and user.email variables. These determine what ends up in the author and committer field of commit objects. Without setting this, you'll be able to push to your work directory but if you want your commits to have your work email and name, you have set up your .gitconfig files.

Check if you have an existing .gitconfig in your root by running ls ~/.gitconfig . If you don't have one, create one by running touch ~/.gitconfig .
Do the same for your work directory.

Open the .gitconfig in your root and inside there add your personal git user name and email. Also include an includeIf path that tells git to use a different .gitconfig for your work repos.

# ~/.gitconfig
[user]
email = your.email@example.com
name = your-user-name
[user]
email = your.email@example.com
name = your-user-name
[includeIf "gitdir:~/PATH/TO/WORK/DIR/RELATIVE/TO/ROOT"]
    path = ~/PATH/TO/WORK/DIR/RELATIVE/TO/ROOT/.gitconfig

Inside the .gitconfig in your work directory, add your work email and work user name.

# ~/PATH/TO/WORK/DIR/RELATIVE/TO/ROOT/.gitconfig
[user]
email = your.work.email@example.com
name = your-work-user-name

Now you'll be able to use both git accounts with SSH and your commits will have the right email and name for author.

[1] Note: Detailed breakdown of exec "pwd | grep '/COMPANY' > /dev/null":
pwd stands for print working directory . The | takes the standard output of the command on the left, and pipes it as standard input to the command on the right. grep searches plain text for a match. > redirects the results of the previous command to the file on the right. /dev/null is a "black hole" where all data written gets discarded. Read more about /dev/null here.

So the command is basically saying to get your current working directory, search for your COMPANY name and discard the returned value. The exit code from this command will determine which SSH key to use.

Using MutationObserver and ResizeObserver to measure a changing DOM element in Vue

Sam M. — Mon, 07 Sep 2020 05:03:43 +0000

There is something like the window's onresize event listener but for DOM elements. It's called ResizeObserver and makes measuring dynamic elements very easy. The only problem is it's not standard. 😑 It's been in the editor's draft list for years. Almost all browsers support it. Safari started supporting it since 13.1 but Internet Explorer and Firefox android still don't support it. So... is there another way to measure a changing element other than a setInterval? Enter MutationObserver.

Here's a demo of the code that will be explained below:

The `<template>` or HTML part

<template>
  <div class="resize-observer">
    <div class="box" ref="box">
      <h4>Resize Me</h4>
      <p>
        width: <span class="size">{{ width }}</span>
      </p>
      <p>
        height: <span class="size">{{ height }}</span>
      </p>
    </div>
  </div>
</template>

We'll be resizing the div element with class "box" by giving it a css property resize: both. This will give the rendered box a small triangle on the bottom-right corner that allows for resizing.

Since we'll need access to the actual HTML element and its changing dimensions, we'll be using a ref. You can read more about refs here.

The `<script>` Code for Resizing with `MutationObserver`

<script>
  export default {
    data() {
      return {
        width: null,
        height: null,
        observer: null,
      }
    },

    mounted() {
      const box = this.$refs.box,
        boxSize = box.getBoundingClientRect()

      this.width = boxSize.width + 'px'
      this.height = boxSize.height + 'px'
      // initialize the observer on mount
      this.initObserver()
    },

We'll add the width, height and the observer to our state. Then when the component is mounted, we'll set the width and height. We'll also initialize the observer by calling this.initObserver.

    beforeDestroy() {
      if (this.observer) this.observer.disconnect()
    },

We also need to make sure we disconnect the observer before destroy.

We've now reached the main part of this tutorial. In the initObserver method, we create and initialize an observer which is an instance of MutationObserver. This observer tracks our box element's mutations and calls another method - onResize when the mutation type is attributes (the box's width and height attributes will fall under this). onResize is our resize handler.

    methods: {
     initObserver() {
        const config = {
            attributes: true,
          },
          vm = this

        // create the observer
        const observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
            // check if the mutation is attributes and
            // update the width and height data if it is.
            if (mutation.type === 'attributes') {
              // call resize handler on mutation
              vm.onResize()
            }
          })
        })

        // observe element's specified mutations
        observer.observe(this.$refs.box, config)
        // add the observer to data so we can disconnect it later
        this.observer = observer
      },

The resize handler updates the state when the dimensions change. Optionally, you can emit an event that other components can listen to. More info on emitting events with vue.

      // Resize handler
      onResize() {
        const box = this.$refs.box,
          vm = this
        let { width, height } = box.style

        this.width = width
        this.height = height
        // Optionally, emit event with dimensions
        this.$emit('resize', { width, height })
      },
    },
  }
</script>

The `<script>` code for Resizing with `ResizeObserver`

Here's how you would do it with ResizeObserver. You'll notice that it's a lot less code when you implement with ResizeObserver. The <template> and <style> portion will stay the same.

<script>
  export default {
    data() {
      return {
        width: null,
        height: null,
        observer: null,
      }
    },

    mounted() {
      // initialize the observer on mount
      this.initObserver()
    },

    // unobserve before destroy
    beforeDestroy() {
      if (this.observer) this.observer.unobserve(this.$refs.box)
    },

    methods: {
      onResize() {
        const box = this.$refs.box,
          width = this.$refs.box.offsetWidth + 'px',
          height = this.$refs.box.offsetHeight + 'px'

        this.width = width
        this.height = height

        this.$emit('resize', { width, height })
      },
      initObserver() {
        const observer = new ResizeObserver(this.onResize)
        observer.observe(this.$refs.box)
        this.observer = observer
      },
    },
  }
</script>

And here's the full code with <template>, <script> and <style> for resizing with MutationObserver.

<template>
  <div class="resize-observer">
    <div class="box" ref="box">
      <h4>Resize Me</h4>
      <p>
        width: <span class="size">{{ width }}</span>
      </p>
      <p>
        height: <span class="size">{{ height }}</span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        width: null,
        height: null,
        observer: null,
      }
    },

    mounted() {
      const box = this.$refs.box,
        boxSize = box.getBoundingClientRect()

      this.width = boxSize.width + 'px'
      this.height = boxSize.height + 'px'
      // initialize the observer on mount
      this.initObserver()
    },

    //disconnect the observer before destroy
    beforeDestroy() {
      if (this.observer) this.observer.disconnect()
    },

    methods: {
      // Resize handler
      onResize() {
        const box = this.$refs.box,
          vm = this
        let { width, height } = box.style

        this.width = width
        this.height = height
        // Optionally, emit event with dimensions
        this.$emit('resize', { width, height })
      },

      initObserver() {
        const config = {
            attributes: true,
          },
          vm = this

        // create the observer
        const observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
            // check if the mutation is attributes and
            // update the width and height data if it is.
            if (mutation.type === 'attributes') {
              // call resize handler on mutation
              vm.onResize()
            }
          })
        })

        // observe element's specified mutations
        observer.observe(this.$refs.box, config)
        // add the observer to data so we can disconnect it later
        this.observer = observer
      },
    },
  }
</script>

<style lang="scss" scoped>
  .resize-observer {
    text-align: center;

    h4 {
      margin-top: 30px;
      text-align: center;
    }

    .box {
      box-sizing: border-box;
      width: 210px;
      height: 210px;
      border: 2px solid red;
      padding: 10px;
      margin: 0 auto;
      resize: both;
      overflow: auto;
    }
    .size {
      color: #2a9966;
      font-weight: 600;
    }
  }
</style>