Category: Learning

  • Learning Gutenberg

    I decided to brush up on my website building skills and deepen my understanding of the new gutenberg system – a change up from the classic wordpress editor from 7 years ago.

    I’ve been a long-time fan of wordpress, and my first website was built on it with a free wordpress.com account. I eventually went on to build corporate, multi-lingual, ecommerce and personal websites with domain + host + wordpress CMS.

    WordPress remains the most versatile CMS with extendability of plugins, and I was keen to gain further understanding of the tool.

    This is a record of what was done, and any tips for people looking to learn Gutenberg and wordpress.

    10 Days of Gutenberg Challenge

    I completed the 10 days of gutenberg challenge with Riad Mahmud, who has created an exceptional series which I will link below:

    Youtube: https://youtu.be/MIp4KsAbxAU?si=HMPUlWpdxKYXso7B

    My practise pages: Days 2 and Advanced Grid

    I’ve also gained knowledge on how to transfer from Figma design to Gutenberg, which was highly useful.

    Tips Regarding the Challenge

    The link to the figma files are here.

    Figma Shortcuts:

    Ctrl+click – to select element

    Hold Option to check spacing between elements

    i to select colour

    Apps:

    Apple’s native Colour Digital Meter app – Command+shift+c to copy any website colour without compromising and showing data to colour plugins

    Break-points:

    Gutenberg is limited in break points and the way certain containers are coded and updated by wordpress makes for interesting behaviours that can be frustrating.

    Grid vs Columns for Responsive Design

    Grid – relies on rem-based auto spacing, if manual spacing of 3 columns was corrected, will cause smaller screens to still have 3 columns and there will be not flowing and stacking elements.

    Columns – this was in fact the better option – it has automatic break-points that will stack elements if it gets undreadable at 3 columns.

    Correct Use of Padding in Gutenberg:

    Understanding where to add padding correctly is good practise can keep your styles consistent. For example, for a dark background section (Group element) with 3 cards within it (Grid element rem 20), and you want some padding for the top and bottom of the section. The padding should be added to the section (Group element) NOT the cards (Grid element).

    Secondly, a mobile-responsive design should also have padding in the content (Grid) section to ensure the content is presented as accurately to design as possible. An investigation into this article will show that modern design breakpoints are pretty much hard coded for the best effect. The responsive effect can be done in pixel with reference to the figma transfer, however, a rem-based or custom css-based will be better.

    Defining Content Width for Responsive Design in Gutenberg:

    A good mobile responsive design includes appropriate wide-width overall restrictions (either in pixel/rem/%). Note that wide-width restriction does not replace inner content padding.

    The wide-width restrictions defines content space can be default wordpress wide width (mobile) or can be defined in pixel/rem/% (need to be tested) . Pixel can create precise details while rem/% is fluid.

    Some common screen sizes and content widths (Chatgpt):

    CategoryScreen Width (px)Content Width (px)Content Width (rem)
    Small laptop~1280px960–1100px60–69rem
    Standard laptop~1440px1000–1150px62–72rem
    Large screen~1920px1100–1280px69–80rem
    Ultrawide2560px+1200–1440px75–90rem

    If going for defined pixel/rem/% wide width instead of wordpress-wide width, then a rem-based approach is better than pixel. See image below for wordpress width inputs. You can set 63 rem for content width and 78 rem for wide width for the perfect size. If working in pixel, 79%~80% is ideal for content width and 57% almost works for wide width.

    Conclusion

    I completed an invaluable and easy-to-follow course by Riad Mahmud, which taught the basic building blocks of Gutenberg Group, Row, Stack & Grids. The next step is to complete a course on the design-flow of a full website website, specifically defining global colours and texts to prevent changing individual elements so much.

  • The Egg Game

    I created a command-line egg game in C, where players can discover the optimal cooking time for boiling an egg. I’ve designed a dozen endings depending on how many minutes the egg was cooked.

    Motivation

    I love eggs, so I decided to make my first coding project based on something I really like.

    Research

    I decided to complete a small project so I can see it through from beginning to end as a full cycle. I knew about scope creep and it definitely tried to derail me a few times (e.g. easter eggs, achievements chart, extra levels), however, I cut down the extra features and instead focused on finishing the game first.

    I initially thought a text-based game based on boiling the egg would be quite simple to achieve. However, since I wanted to accurately present the boiled egg state depending on real-life timings, I realised the amount of heuristics that humans use during cooking when I got down to planning.

    Egg, pot, water, stove. Just four things to manipulate – or is it?

    What is the temperature of the pot of water when I put the eggs in – cold or boiling water? What are the states for different eggs for different minutes? Do I put the lid on the eggs when boiling? Should I use medium or high heat when boiling? What about the altitude we are cooking our eggs in?

    To address all these questions, I researched from popular Chinese cooking app XiaChuFang, which had egg charts for different states. One of the english-looking charts recommended taking water to the boil, then boiling the egg for 11 minutes for a firm yolk with a teeeeeeny bit of just-firming-up-yolk in the middle – just perfect.

    I conducted the experiment with five 700g eggs and actually took them out at different intervals to investigate the runniness of the yolk. It turns out 11 minutes did not, in fact, yield the yolk of my dreams. It was still a bit runny in the centre. The egg also cracked a bit – which I usually think is normal and dismiss it. But that day, it struck me – I was using fridge eggs! Which means they are very cold (unlike Chinese eggs which are sometimes not kept in the fridge).

    I then decided to check out a bunch of other guides, mainly because I think having the stove on for 11 minutes is SUCH a waste of gas. And then I struck gold. So here is the definitive way I’ve found to boiling an egg!

    The Perfect Boiled Egg Method

    1. Egg should be normal temperature. If using fridge eggs, wash it a bit under tap water to bring the temperature down. This will also prevent the eggs from cracking in the pot (Mystery of randomly cracking eggs in the pot solved)!
    2. Add tap water to the pot. We don’t need too much but enough so that it will just cover the eggs when they are put in (doesn’t need to be exact)! But don’t put the eggs in to cook just yet!
    3. Bring the water to a boil on high heat. This will raise the temperature to 100 degrees celsius and make it the perfect temperature for boiling eggs. I find that my small pot of water takes about 4 minutes to boil, but yours may be different.
    4. Place eggs into the boiling water gently (to prevent cracking the shell), and cover with a lid.
    5. Boil for 3 minutes on high heat. Then turn off the gas.
    6. Keep eggs in pot with lid on and wait for 5 minutes.
    7. FOR EASY PEELING: Take the egg out and place in a lunch box half with cold water or room-temperature water or ice bath. Close the lid on the lunch box, and shake the eggs inside for a bit. This will create small cracks in the eggs, create a separation between the internal egg and the shell due to the temperature difference and make it easy to peel! (You don’t need a lunch box, you can put it in a bowl and shake it a bit too, or simply just use the ice bath. But I find lunchboxes make it easier for shaking)
    8. Take out the eggs and peel! Check the yolk to see if it is your favourite. If you prefer it more runny, wait for less time next time!

    Now it’s time to code the game!

    Gameplay

    Screenshots of game and gameplay (spoilers!)

  • Hello world!

    Hello world!

    #include <stdio.h>

    int main(void) {

    printf(“Site name: Angela Ascertains”);

    printf(“Message: Hello world!”);

    / *about: i’m a curious and creative individual.

    I’m passionate about education, art, communities and technology.

    // Acknowledgements:

    // This site wouldn’t be possible without the support of my loved ones and friends!

    // Special mention: Nova and Jono.

    return 0;

    }