Jiayee.net

My learning diary

Center

#css
Why “Center” instead of “Centre”? Well, that’s because “center” is the version used in CSS. There were moments in my life when I wanted to give up writing in British English. There are so many other people using American English… except for me. Programming languages are expressed using American English as well. I felt like a rebel for naming my variables in British English, but that’s what I’ve learnt in school.

Continue reading "Center"

Javascript heap limit

#javascript
For the past week, I couldn’t 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 didn’t rebuild and remained stale. This issue does not happen to everyone. I’m 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

#redux
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

#javascript
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"

Challenges of a multi-step flow with permalinks

#react
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"

Previous page
Next page