Product manager: can you add a super simple sign up form today?

MEGHAN — Sat, 06 Aug 2022 08:13:00 +0000

Background

I admit, this annoying PM is me. I hinted to developer that I need a signup form quick, like in 0.5 day. She hinted me back: it is not possible. Plus, she is still bug-fixing the last iteration of our product design.

It was so blunt - her hint, I think she didn't master the 1 single most useful skill when it comes to communicating with product manager, the creatures that are constantly furious onHearing "no can't do" :

Clearly state your capacity without encouraging unrealistic expectations and intimidating at the same time.

I was ~~disencouraged~~ intimidated ☹️

What's so hard

So I had some frontend development background. Presumptuous enough, I set out to do it myself. There I met with frustratingly numerous obstacles.

🙀Git

It's a himalaya mountain in front of every not-everyday-programmer. Git cheatsheet is required every step of the way. Tiptoeing on the ice, trying very hard not to mess up with the branches. It already took me >0.5 day to do just the basics: branching, config, pull and commit.

3️⃣ Vue

Not defeated. I continue.

Here my outdated knowledge on Vue is challenged. I know vue2 but its a vue 3 era already. I do admit and is learning to admire the beauty of the vue3 by using composition API. I admire how it can accommodate both easy and confusing at the same time.

you don't need the rigid data{}, methods{}, onCreate{} blablabla anymore - dont know if Evan You the creator got his inspiration from 八股文 (a paradigm fixed style that Ancient Chinese must adhere to when they write official thesis especially in a national test). But then you have ref(), reactive() - both can be reactive but with differences. and const rect = reactive() rect can't be modified but reactive({property:value}) property can be modified. etc etc.

Form

Let me fast forward here (Forget about the process of learning the ant-design-vue framework - their documents and codesandbox did help a lot.)

The real challenge is product manager should really put some thoughts into the limitations and business purposes behind the "simple" form.

Here are some points:

Depending on which ID system we are using, what are the mandatory fields for signup and account creation.
What validation rules should apply to name, password and other mandatory fields?
What to prompt to user when validation fails?
What is the best practice in terms of filling a form?

Demo

Here are the considerations ( *I'm glad I put myself in shoes of both product manager and developer even if it's at the cost of burning midnight oil. *)

I think the best practice is real-time validation. It should not be subject to negotiation. Ant-design provides quite extensive validation supporting either builtin and custom. There is another plugin I really like - vee-validate. I used ant-design's.
Rules applied to all mandatory fields are not empty by default.
Rules applied to email is builtin and we need not worry about it.
Rules applied to password is often custom and here is where we enforce our organization's security rules in the business operations.
Two passwords must match and in case either one is changed after validation, the re-validation must happen.
after submit, there is final validation.

Here is the demo:

if you can't see the preview, here is the screenshot

here is the button linked to the codesandbox

Final product

Final product is a bit different than just a demo. Our ID system allows accounts to be used across teams so only unregistered email is allowed to be used for account creation, otherwise an invitation will happen instead.

Conclusion

Today's takeaway is an advice for Product manager: do not attempt to code on your own. Downside of it:

it's a slap in your face telling you how wrong it was to think its a 1-day thing.
it doesn't earn respect from programmers cos they be like " what's so hard" " i can do it too, maybe just a bit uglier but who cares".
at the end of the day, still one salary for doing two jobs. And the coding still doesn't make up a surviving skill for you should you lose pm job one day. its an expertise requiring expertise focus and dedication.

Ultimate boost to your programming productivity!

MEGHAN — Sat, 09 Jul 2022 05:17:34 +0000

macstudio macos monterey zsh oh-my-zsh

Today is Saturday. I had a grand plan, to replace existing serial-usb cable & drivers in my project, to increase the transmission quality ( current drivers keep giving me scrambled characters when read() from the port). Alright, by the sound of it, it is already huge. And it is indeed, 200%.

Rolling up sleeves (no, not wearing long-sleeve), shooting down espresso caffeine x3 (sneaked in some milk), I'm ready to go! yeah! boom! I'm unstoppable!

Open up google, type: "serial-usb cable", search, get the top result, then search for android drivers. Shit, it is rar, search for "unzip rar in macos". Tab after tab, hey, wait, what is this?

Out of I-forgot-where, something caught my eye. In a splitting 0.01 second, I've decided this is what I ~~want~~ Need!

search for "zsh git tag"
found oh-my-zsh theme 'agnoster'
nano ~/.zshrc to change theme, a disgusting color label with ? invalid character was displayed.

WTF? ( i meant, android way, What A Terrible Failure)

well, search for solution, noticed that a symbol font should be installed for the character to display correctly : 'powerline'
search for 'install powerline in macos'
installed it. did not work:
raise ValueError, 'unknown locale: %s' % localename ValueError: unknown locale: UTF-8"
search for fix, set below:

export LANG=en_US.UTF-8
export LC_ALL=en_US.UTF-8

then run source ~/.zshrc

new error. search for solution and decided to set PATH=$HOME/.local/bin:$PATH in zshrc
fixed everything but the color of labels is really an eye-sore
go to the theme file nano ~/.oh-my-zsh/themes/agnoster.zsh-theme you can tweek the colors
and open up terminal.app, change the color panel setting from the profile you use.

Phew! Finally! Ta-da!:

Do you feel it? you felt it? Coding productivity boooooosted x 100! Level unlocked. Skill tree lit up!

Well empty stomach calling, gotta go. But wait, I have a vague feeling that I seem to forget something, what is it?
nvm.

There is always another day.

Sun rises everyday.

Rome is not built in one day.

Work-play balance.

Peace, love.

Alright, I wasn't telling the whole story.
here it unfolds:

In case anybody asks, configure it in VS Code:
Open setting:

There you go:

DEV Community: MEGHAN