[WK1-M] Goal setting, Pull repository

0 What product?

The current product (DFD) I'm working on is a product created in response to surging covid patients - it's a portal where patients can check their symptoms and deal with lots of other various clinical-related matters. Before this product, the existing portal only allowed existing, registered patients to do so, but now anonymous patients (who probably newly encountered covid and therefore became a patient) can use this website to quickly check up on their symptoms. That's all I know for now.

1 Storybook

I'll be working on Storybook integration. 

1.1 Motivation

DFD team figured that they need to:

- Quickly find component

- Documentation on each component to quickly pick up how to use it

- UX designers can go and see the component to see whether their UX design (created through say Figma) matches the implementations. I infer that this is, for example, testing how the component behaves to resizing, different screen size, different states (how much texts are there) etc.

 

We essentially want to create a Design System: a consistent and comprehensive view of the components involved. It's a development tooling. Storybook is a component library for Javascript/React that allows you to create such design system with its plugins and tools. With component library you can reuse themes and assemble screens that follow design / UX principles. Also, Storybook allows you to take snapshot of the components (freeze the state of the component, showing baseline of what the stuff should render like. So it helps you to do regression.

 

1.2 Current stage

Currently, we only use Storybook as a component library, so it's not useful for people in UX. There's lack of documentations for each component too. I'm to explore plugins and tools to build a design system (documentations, component library, snapshots, various plugins at one stop).

 

The team follows atomic design (it's a principle - atoms, molecules etc as reusable components). 

 

1.3 To-do

- Get familiar with storybook

- Get familiar with concept of design system and UX principles - think about what storybook features can aid these.

    - what to document

    - how to integrate storybook

- Come up with recommendation on how Storybook can be integrated to current development to create a design system.

 

 

2 Bit bucket

1. Create key pair with the command. Go with the default option to have the key pair saved in ~/.ssh preferrably (also no passphrase needed). It creates ~/.ssh/id_rsa (private key) and ~/.ssh/id_rsa.pub (public key).

ssh-keygen -t rsa

2. Convert the private key to RSA format

ssh-keygen -p -m PEM -f ~/.ssh/id_rsa

3. Copy and paste the public key into bitbucket profile.

pbcopy < ~/.ssh/id_rsa.pub

4. Use git clone via ssh (below is an example command)

git clone ssh://git@XXXXX:XXXX/XXX/XXX.git 

3 Yarn

It's 12:21AM now, and I was trying to get yarn working on the machine. It was failing because Yarn was keep using python 3 instead of 2, which causes the syntax error when I type in 'yarn'. I didn't capture the output when I had it, so here's a output similar to what I had when I ran yarn:

This issue is well known for node-gyp, and it's actually been solved. But... how did I end up working on it so long? I could have worked on this tomorrow anyways, but I somehow ended up digging it up until I found out the solution for it.

3.1 Solution

The solution is simple. It's not shown properly on the above output, but the error output makes it clear that the error is caused by the use of python3, which is being used as part of yarn configuration. To confirm this, type:

yarn config list

Then you will see that python key is mapped to python3. We simply need to switch this configuration to python2.7 which is installed default on mac, using yarn config.

yarn config set python python2.7

This should mean that executing `yarn config list` should give you this:

3.2 Why did I struggle for so long?

Part of the reason is that every solution made use of 

npm config set python python2.7

Which works for npm but not yarn. What's misleading is that as you can see above, python entry is under npm config.

 

Another reason is not using right search keywords, and digging into the same thing too much without trying to understand the problem deeply. I think I was too obsessed with finding github issue thread that has the error snippet closest to mine. However, that worked not that well for this time, because the problem itself is very deep rooted and there are way too many discussions which, as I see it now, was completely unnecessary to read. I just read them for fun, but really knew it wasn't gonna get me to the answer.

 

If I could just think about why yarn uses python3 instead of python2, I would have naturally ended at some notion of configuration. Then I would have figured to link python configuration to the python2.7 executable.

 

The lesson learnt is to not avoid looking at the problem directly at certain point. Googling can get you very deep into nothing if you keep just pasting your error output.