Jiayee.net

My learning diary

Dataset Massage (head, tail, split)

#cli
Recently at work, I found an opportunity to revise / level-up my bash-fu. It probably sounds mundane and trivial to some, but I had fun solving my little problem with the command line instead of retreating into Python or JavaScript. I received a CSV file containing millions of rows. My job is to split this file into a couple of smaller files, with each file containing an increasing number of rows.

Continue reading "Dataset Massage (head, tail, split)"

useContext, useForm, and useFieldArray

#react #react-hook-form
I’m fortunate to have the opportunity to work with react-hook-form again. And work with it better. The following worked well for me: // MultiStepForm.tsx import { createContext, Dispatch, SetStateAction } from 'react' import { SubmitHandler, useFieldArray, UseFieldArrayReturn, useForm, UseFormReturn, } from 'react-hook-form' interface SomeComplexInput { someKey: string someValue: string } interface MultiStepFormInput { formFieldA: string formFieldB: SomeComplexInput[] } interface OtherContext { // Other frontend-specific values e.g. active form step index } export const MultiStepFormContext = createContext( {} as UseFormReturn<MultiStepFormInput> & UseFieldArrayReturn<MultiStepFormInput, 'formFieldB', 'id'> & OtherContext, ) export const MultiStepForm = () => { const form = useForm<MultiStepFormInput>({ mode: 'all', }) // Use fieldArray.

Continue reading "useContext, useForm, and useFieldArray"

for-in and for-of

#javascript
I needed to change my async code into synchronous. I didn’t need to track the index of the array, so I wanted a for...?? loop. Was it for...in or was it for...of!? for...in Example: for (let key in someObject) const a = [4,5,6] const b = [{'k1':'v1'},{'k2':'v2'},{'k3':'v3'}] const c = {'k1':'v1'} for (let d in a) { console.log(d) } // 0 1 2 for (let d in b) { console.log(d) } // 0 1 2 for (let d in c) { console.

Continue reading "for-in and for-of"

Fixing a11y

#foundation #hugo #lighthouse
I thought I’d need to jump through many hoops to resolve an a11y issue in this site. Today, I realised I didn’t need to. From my previous Lighthouse reports, Heading elements are not in a sequentially-descending order had been a thorn in the flesh. I didn’t want to override the original styles of the headers. But I wanted my h2 to look like h3. I wanted my h3 to look like h5.

Continue reading "Fixing a11y"

Next page