| APR | 03 | WED |
U |
|---|
Learning in public
I'm over the moon!! over what I just made thru a series of trial and errors that took hours and multiple tabs of stackoverflow over gosh darn CSS tables. Today I was a bit occupied with irl responsibilities so I opened my site quite late in the afternoon. But trust me when I say I've been thinking of several page ideas while I was out of the house lmaooo help me. I've never felt this creative over anything since 2020 when I was still drawing art until I fell into an indefinite art slump, but anyway that's another entry for someday LOL As soon as I got home, I wrote in my commonplace notebook (which at this point feels ingeniune to call it commonplace since all the stuff I've wrote down there are from me, literally no commonplacing taking place LOL) some page ideas. Then I opened my site and edited some codes that need a little finetuning. I feel pretty satisfied and proud with the layout of the basic pages now that I decided it's time for me to go do custom pages for my specific interests. I'd like to call them my "collections" just like the bullet journal term.
My first idea that I wanted to make was a page dedicated to stationery so I got to work and did all the basic stuff. I opened notepad and wrote down what I want for this page so I have a clue/keyword to refer. "theme: stationery; color scheme: pink, green, cream (like my hobonichi cover!); idea: try to emulate midori notebook pages and hobonichi" I already have the bulk of the layout code I wanted to do, so it was basically like making a collage out of my spaghetti codes LOL I'm very thankful for layout builders because it was so easy to customize them to what I have in mind with just their base codes. Here's where my braincells go mach speed into visualizing the page: an open notebook with dotted paper on the left and grid on the right. I tried to look for notebook CSS layouts but some of them required a picture as a container. So I was like, okay fuck it I'll just brute force the layout by coding it with hand. UGH CSS IS AMAZING!!! I actually managed to make it look like an open notebook, with spine shadows and all. WOW GJ ME I can even make it look like stitch-sewn LOL
I was already in cloud nine seeing the layout but I decided to turn up the notch and make it look exactly like Hobonichi daily pages. At first, I made multiple <div>s just to make the date box thingy and I was like, surely there's something simpler than literally making divs just for boxes with different widths. The answer is: html tables. Yes, of course why didn't I think of that earlier LOL So I played with tables, got confused what's different between <th> <th> and <tr> and finally got almost the exact date box you will see in Hobonichi. But I wasn't much satisfied with the height of the table, it was too long and height css property isn't working. Back to stackoverflow I go and I read that you can 'force' the row height through inherit stuff I didn't clearly understand. Then I had another learning moment that I can use sites like jsfiddle and codepen when I'm experimenting with codes rather than coding from the nekoweb editor LOOL AGAIN, why didn't I think of this earlier. But you know what, I'm still a baby in coding so I won't beat myself up over this and instead I took it as a learning moment (yay!). Anyway, back to me wrestling with html tables, after much head scratching, all it took was to remove the bloating styles and go back to the barebones tags and work from there. And so! I managed to make what you see in this blog entry :D Doesn't it look amazing?! I also made that colored index markers on the side and learned CSS positions absolute and relative. I wasn't listening when people said you must learn what position absolute and relative when doing layouts and now I know why. The explanation was a bit vague from w3schools but someone in stackoverflow explained it perfectly and everything makes sense now.
After a few more tweaks in the background, I finally finished the layout for my stationery page ^_^ I learned so much these past couple of days in coding and it feels great. All that's left is the writing itself but I'll probably work on it tomorrow. Ahh I just realized I unintentionally made a post learning in public! I discovered the term from Lost's post in which she says "I’m trying to learn in public more, so this is me, creating the thing I wish I had found on the web". Actually one of my page idea is how I made cherie as someone whose last experience in coding was still 2012-2014 tumblr, and maybe someone will find it helpful too; I still rely on others' resource pages and finding out like WHAT I CAN DO THAT? This is the internet that I miss, where there's a variety of sites and not just doomscrolling the same three apps over and over again. I didn't know of the term until recently but I think it's a really good concept as someone who loves learning new things ^^
I really think making my own website was a really good decision (*￣▽￣)b
- niki
Related reading: Learn in public by swyx and How to learn in public by Rizèl Scarlett