Hello! This is a website I made to compile the recipes I'm learning from Ah Ma (maternal grandmother) and other family members, mainly my aunts Kim Kim and Ee.
I tried to make sure it looks good on mobile devices too because I intend to share the links with relatives who will primarily be accessing them on their phones.
I'll be adding more recipes progressively. I'm also thinking of compiling things I cook from cookbooks, though I won't be uploading the recipes for those because of copyright, just the final products for my own record :)
I wanted to create this website after my recent trip to visit Ah Ma in Penang (March 2026)! I asked my mum what were some of the dishes that Ah Ma cooked for her most often when she was growing up, and which were her favourites. Then I asked Ah Ma if she could teach me how to cook those :-) Her wok used to belong to Kong Kong's grandmother, i.e. my great-great-grandmother! That's amazing!
Recipes so far:
- Jiu Hu Char: Bangkuang (jicama, something like a turnip) stir-fry with jiuhu (dried shredded cuttlefish) and other vegetables. Eaten in lettuce wraps. My favourite!
- Fried Fish with Lamchut: I've always liked Ah Ma's fried fish, but this was my first time trying it with the lamchut dipping sauce.
- Bakstik: My mum's favourite, and Ethan's too. Also my first time trying it. Meat patties with potatoes, tomatoes and onions.
- Tau Yu Bak: Braised pork belly in soy sauce, with hard-boiled eggs. Ah Ma says this is easy to make :)
- Taugeh Taukwa / Random Vegetable Stir-Fry: Apparently Taugeh (bean sprouts) + Taukwa (extra firm tofu) is a classic Ah Ma stir-fry combo. I never would've thought of that, but maybe it's because you can buy both taugeh and taukwa from the same pasat/ wet market stall. The stir-fry procedure is the same for any random vegetables, such as spinach and carrots.
- Sardines: Ah Ma says you don't have to cook it (just squeeze lime/lemon and add sugar), but she prefers to cook it.
Nice website features, I guess:
- Hyperlinks that have a colour change animation when you hover over them
- Horizontal scroll image galleries with arrows at the sides that fade in and out when there's more to scroll
- Resize side-by-side images to the same height
- Mobile friendly :)
This thing can be found at upload.html and upload.js. The intention was to make it easy to generate a nicely formatted recipe page for any new recipe I want to add, since everything mostly follows the same template. It works okay but it's definitely not meant for public use (only works if you use it in a certain way & sequence, and for a certain outcome). It probably doesn't actually save that much time but I guess it was just nice to code it for fun. The UI is terrible but I'm not going to fix it right now because I'm the only one using it, hehe.ehe.
How it's supposed to work:
- Input the recipe title, one-word recipe name (used for the slug and for the folder name), subtitle, photo of the final dish (used for the cover image), and list of ingredients.
- Press "Add step" to add as many steps as you want. For each step, write a one-word step name (used for image file names), description of the step, and photos depicting the step, which will be displayed in a horizontal scroll gallery.
- Press "Preview" to generate a preview of the formatted recipe.
- If all looks good, press "Download ZIP" and a zip file will be generated, containing:
- The HTML text for the formatted recipe
- A folder titled "recipe_{one-word recipe name}" containing all the images, named in the format "{one-word recipe name}_{one-word step name}_1.HEIC".
- Run unzip.py on the zip file, move the extracted .html file to the recipes folder, run heic-to-jpg.py on the HEIC images
Future features to maybe add:
- Input a unique recipe code name to save progress, so you can come back later to continue and submit. I don't think GitHub Pages can do this sort of thing, though.
- Make it mobile-friendly so I can upload the photos directly from my phone to create the zip file on my phone and email the zip file to my computer.
- upload photos from phone to Temp google drive folder
- Ctrl+A and download zip file of all the photos, in HEIC. Save to the folder you want to extract the images to
- unzip.py
- heic-to-jpg.py
- For videos: upload to YouTube (unlisted), it'll be a Short so change
shorts/in the URL towatch?v=, click Share and copy the iframe embed. Adjust the width and height.
More tedious process that I used previously for the bakstik recipe, now solved!
- upload photos from phone to Temp google drive folder
- Ctrl+A to download zip file of all the photos, in HEIC
- extract the zip file
- go to iloveimg.com HEIC to JPG converter and select the photos depicting the current cooking step (since iloveimg limits to max 30 images processed at once)
- download converted photos, extract all JPGs from zip file, rename all photos, move them to the main folder with the rest of the photos for that recipe
- type in the img srcs in the html
- I thought the converting and renaming could probably be done with a script, so I created heic-to-jpg.py and unzip.py :)
- I found a colour combo for the
as that was I thought looked really nice, but it would fit better if the site background colour was blue or white. I think a yellow theme suits a cooking site better than blue, so I'm just parking the blue combo here to use for future projects:background-image: linear-gradient(#99d8ff, #99d8ff), linear-gradient(to right, #ff98c5, #db94ff, #8eb0ff); - Horizontal scroll: Crop the photos so they're more evenly sized when made to be the same height.