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"


If you need your Redux store to last beyond a page load or refresh, look no further! redux-persist is here to the rescue. Based on this guide and this guide, you need to update your reducers and store to enjoy persistence: Install redux-persist: yarn add redux-persist @types/redux-persist Update root reducer and store: // Copied from the official README and edited import { Provider } from 'react-redux'; import { createStore, Store } from 'redux'; import { persistReducer, persistStore } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import rootReducer from '.

Continue reading "redux-persist"

String.format equivalent in TypeScript

While working on a problem during work, I thought I needed a way to do a String.format equivalent operation in TypeScript (it turns out I didn’t need to). I didn’t want to install Lodash (50 kB for _.template alone) or sprintf (40 kB), so I came up with the following: // Warning: Untested code export const compileTemplate = (template: string, values: Map<string, string>) => { const variables = Array.from(values.keys()).map(key => ':' + key).

Continue reading "String.format equivalent in TypeScript"

TypeScript Shortcuts

TL;DR: I learnt how to (invert a map) and (copy a map and override the values of the copy) in TypeScript. Ctrl+F TYPESCRIPT_SHORTCUT_1 and TYPESCRIPT_SHORTCUT_2 to get to the code. Context: Yesterday, I did not invest time into inverting a TypeScript Map<string, string>. Today, I received feedback that I should extract the encode logic into a function of its own. I decided to put in more effort. Here’s the new original code:

Continue reading "TypeScript Shortcuts"

CryptoJS and URL

Like this Stack Overflow thread, I needed to encrypt some string which will become part of a URL. However, there was a slash in one of the encrypted strings, like c3ViamVjdHM/X2Q9MQ==. Feel free to decode this. It’s something I copied from the internet. I thought there would be a lot of symbols in the Base64 alphabet at first (I was wrong). I didn’t want to deal with them and set up a giant substitution map, like a Map<string, string>.

Continue reading "CryptoJS and URL"