My learning diary

Constants

I thought consolidating constants was evil. Just two or three dozens of them were enough to become a huge headache for me. In Java, this practice is frowned upon. In JavaScript, it seemed alright. The answer which received the bounty recommended the following: // Warning: This answer was written in 2014. module.exports = Object.freeze({ MY_CONSTANT: 'some value', ANOTHER_CONSTANT: 'another value' }); It was my first time encountering Object.freeze, so I went to google for the difference between Object.

Continue reading "Constants"

Javascript heap limit

For the past week, I could not fathom why my diffs seemed to not be on hot reload. It turned out to be a JavaScript heap limit problem. As a result, the codebase did not rebuild and remained stale. This issue does not happen to everyone. I am using a MacBook Air (13-inch, 2017) with 8 GB of RAM. Notice the line above the last which says, FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory.

Continue reading "Javascript heap limit"

redux-persist

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"

Challenges of a multi-step flow with permalinks

I decided to invest my time into covering the edge cases that were not handled by Design #1. Refer to yesterday’s post for the context. The edge cases are: Forms which need data from the preceding forms Dynamic form links I can deal with the first pain point by leveraging query parameters. A persistent Redux store is not needed (yet). A persistent Redux store is one which persists between page loads and refreshes.

Continue reading "Challenges of a multi-step flow with permalinks"

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"