GitHub has deprecated their password authentication as of August 2021 and that means I'm having to switch over to SSH. I don't usually code on Windows machines anymore, but decided to take my Surface Go on a long-haul flight because of its compact size.

Here I ran into an issue: while setting up the new connection, I could not copy the generated public key from the WSL2 instance to the browser in Windows because pbcopy does not work.

The instructions on GitHub simply say to 'locate the hidden .ssh folder, open the file in your favorite text editor, and copy it to your clipboard.' Here's how I did this:

1. To view hidden files and directories within the folder -

ls -a

The -a flag stands for 'all' and literally shows all the files. Now we know we're in the correct folder.

2. Navigate into .ssh:

cd .ssh

3. Now let's open the key in a text editor:

vim id_ed25519.pub

SSH keys are generated in pairs, and you want the public one, the file with the .pub extension.

4. Copy the contents of that file and quit vim, easy! Juuust kidding, let's quit vim:

# press Esc
:q
# press Enter

I named a git branch incorrectly, so it was not recognized and attached to the Jira ticket I was working on. Here is what I did to correct this:

1. Made sure to checkout the branch locally:

git checkout current_branch_name

2. Renamed the branch locally:

git branch -m new_branch_name

3. Pushed the local branch to rename it remotely:

git push origin -u new_branch_name

4. Deleted the old branch:

git push origin --delete current_branch_name

Done!

To add global styles to Storybook, import them into .storybook/preview.js :

import "bootstrap/dist/css/bootstrap.min.css";
import "../path/to/app.css"

This is the way to connect a UI framework such as Bootstrap to Storybook.

Here's how to add Redux as a global decorator to Storybook in React:

1. Make sure the store is in a separate component.
2. Then in .storybook/preview.js add:

import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import store from "../path/to/store";

export const decorators = [
  (Story) => (
    <Provider store={store}>
        <MemoryRouter>
          <Story />
        </MemoryRouter>
    </Provider>
  ),
];

Bonus: the MemoryRouter component will resolve any issues your stories might have with Link and react-router-dom.

I needed to add Storybook to an existing React project a few days ago. I ran into some issues with peer-dependencies, here is how I fixed them:

1. Check and see if the project has Typescript installed. It might, even if it's not being used. This is important for Storybook's initial configuration. Make sure to uninstall this dependency if it's not being used:

yarn remove typescript

2. Add this snippet to the end of package.json :

"resolutions": {
    "babel-loader": "8.1.0"
  }

This is a known issue.

3. Remove node_modules and package-lock.json to clear up any conflicts:

rm -rf node_modules package-lock.json

4. Re-install everything:

yarn

Or if installing with npm you might need to run

npm install --legacy-peer-deps

I ran into an issue when running Docker on Mac, and got this error: DNS_PROBE_FINISHED_NXDOMAIN

You'll need to edit the hosts file to fix this, here are the steps:

1. Open a terminal and type

sudo nano /etc/hosts

2. Find the #Added by Docker Section and add

127.0.0.1 your_url_goes_here

3. Hit Ctrl + O to save, then Enter
4. Hit Ctrl + X to exit.

Now you're all set!