My learning diary

Reuse Stories When Testing

My volunteering experience at an open source project led me to appreciate Storybook. Developing frontend components in isolation makes me happy. Unexpected behaviour is localised, and you are appropriately enticed to write your components better. By better, I meant modular. Modularity encourages simplicity (think SRP), and this makes code more reusable and self-documenting. There’s no greater joy than not having to explain your code. But wait, there’s more: If you think writing stories is exclusive to your Storybook instance and thus a pain to write, think again.

Continue reading "Reuse Stories When Testing"

react-hook-form

It’s been a while since I last had the chance to assess several libraries to solve parts of a problem. My most recent project required me to evaluate JavaScript libraries which make form management a breeze. The “me” in the past would have jumped at any first possibility, like how a chick imprints on the first living thing they see. Not anymore. My ex-company taught me to set up decision tables and make recommendations according to concrete criteria and their priorities.

Continue reading "react-hook-form"

Core React Training Day 1

I am thankful to be able to attend a React training workshop organised by my company. I have been using React in my job but this workshop made me realise I still have lots to learn. The exercises were very manageable. I learnt the most from the instructor’s detailed explanation of how React works: Babel is not part of React but it was helpful to know how Babel makes our lives easier by parsing JSX.

Continue reading "Core React Training Day 1"

Reach Router Match

I use Reach Router. I have a component which isn’t a child of Router, so it does not have the useLocation hook. But I need to access the current URL in that component. Here’s how I did it after seeing Jacek’s hint: <div> <Match path="/*"> {(props) => ( <MyComponent path="/*" match={props.match ?? ''} /> )} </Match> <Router> ... </Router> </div> interface Props { match: any; } export const MyComponent: FC<Props> = (props: Props) => { const pathname = props.

Continue reading "Reach Router Match"