I like to discover new technologies related to my career. This website, for example, was created using Next.js, TailwindCSS and TinaCMS. I am also interested in keeping up with the latest trend in other technologies, such as web3 technologies which includes the use of (but not limited to) blockchains, cryptocurrencies and nfts.

Outside of work, I do some mentoring for those who needs help in coding. This includes (but not limited to) the skills mentioned in the sections below. Feel free to reach out to me by email if you have any queries.

—————

What I meant by farming is actually testing, as when you add more features into your websites the amount of tests you need to include will also increase (assuming you have testing in your project). This is parallel to the amount of tasks you need to do if you are increasing the number of food you are growing in the farm. For this you have 2 options: hire more people to do the tasks or try to automate the tasks. Since this is programming, not real farming, I have obviously chosen to automate testing by using these tools: Cypress and Cucumber (hence the pun). I have integrated these tools recently into this website project as they are currently some of the most popular tools to test your frontend/backend and that more companies nowadays are considering testing as a skill requirement to have. Cypress is used for automating integration and end-to-end testing, while Cucumber is used for implementing a BDD approach to testing by making it as readable as possible to people.

Feature: Home Page
  Scenario: Check Home Buttons
    Given user is offline
    Then home buttons exist

As you can see, this example test is very easy to understand for a non-technical person. This is made possible by using Cucumber, which uses Gherkin syntax to structure this test. By combining this with Cypress, automation of these tests are made possible and that translating the example test to tasks to be processed can be done as shown in the example below:

/// <reference types="cypress" />
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';

const envMapping: { [key: string]: string } = {
  offline: 'http://localhost:3000/',
  online: Cypress.env('online-url')
};

Given('user is {word}', (status: string) => {
  cy.visit(envMapping[status]);
});

Then('home buttons exist', () => {
  cy.get('#homeButtonAbout')
    .should('have.attr', 'aria-label')
    .and('include', 'about page button');
  cy.get('#homeButtonBlog')
    .should('have.attr', 'aria-label')
    .and('include', 'blog page button');
});

These are only basic examples and that the testing tools mentioned can do a lot more than what I have mentioned. There are also other types of testing like unit testing and component/UI testing, which aren't covered in this post. For unit testing I use Jest, and for component testing I use Storybook with its Jest addon. In conclusion, it is probably a good idea to start learning how to do automation testing if you want to have a career as a programmer and haven't done so already, which I recommend using these tools if you don't know which tools to use.

—————

Brainf___ was invented in 1993 by Urban Müller, with the sole purpose of being simple enough to be understood by the smallest possible compiler. It consists of 8 character commands, which can be used to create real-life programs like "Hello World".

++++++++++[>+>+++>+++++++>++++++++++<<<<-]>>>++++++++++++++.>+++++++++++.<<++.>>-------------.+++.<<.>>++++++++++.+++.<<.>>----.+.+++++.<<.>>.-----.<<.>>-------------.+++.

As you can see from this example, it shows how a computer language doesn't necessarily need to have redundant things such as variables, loops, functions and classes, and that it just requires users to be able to type like a caveman. If this elegant program is to be translated (code is in this link), it will translates to a Shakespearean quote "To be, or not to be", which is beautiful in its own way as it indicates that it simply exists and that even a pile of s___ language is good enough to create a program. The possibilities of using this language are endless and that it could help solve many of the world's problems, such as reducing the need to worry about hacking and cyber security as it would reduce their lifespan significantly if they tried to do it.

—————

As a philosopher, I used to ponder how this language is still relevant in today's society, especially when our lives may be meaningless and that it seems like all hope is lost. But, after much deliberation, I can conclude that no matter how meaningless its existence may be, it is up to us to give it value, like the Bored Ape NFT that literally has an average price of around $400k. Like, wtf, I could've invested in that when it started. Next time, we will discuss about how you can make some money just by selling farts in a jar.

“Why, hello there” - a delusional magician

As time goes by, I had a curiosity in finding a CMS that is headless, while also simple to use without having to purchase a server to connect to a database. This new website I'm making will be my new online profile, with capabilities of having my own blog posts being able to be created and edited on the fly without needing to touch code, like this one. It also gives me a reason to polish up my frontend skills and learn more about frontend technologies like Next.js which is SSR for React. So, as I was browsing the results given by the search engine, I found out in Jamstack that there were technologies that uses Git to store page content in markdown files as an alternative to API-based, which includes Tina and Netlify CMS as the top two listed for Git-based and open-source. At the time, I chose Tina just because it has better integration with Next.js from looking at comments on couple of websites. I'll probably try out micro-frontend with Astro when it is no longer in beta, with Netlify CMS or other git-backed CMS if Tina still isn't supporting other JS frameworks that isn't Next.js.

—————

During the creation of this website, I chose Next.js because it is currently one of the most popular JavaScript frameworks to use that has SSR capability, and that my workplace planned to migrate one of their main websites to use it. As oppose to just using React as it is and rely on third-party libraries to handle things like routing, Next.js have that covered plus more such as performance optimization features like image optimization.

—————

Thanks to Tina, I managed to accomplish my goal in being able to edit my website's content on the fly. Since it was still on beta during the time I created this website, there were couple of things that were not found in the documentations (had to browse their code in GitHub) and some bugs, which was expected. I was lucky to find James Perkins, who is part of the Tina team and was kind enough to help me resolve most of the issues I was having at the time.

—————

For this website I decided to not rely on any UI pre-styled component packages and go for a minimal approach by using a utility-first CSS framework, which is where Tailwind CSS comes in. This framework allows me to simply use their classes without needing to write the styling myself, which also allows me to overcome the limitation of using CSS modules (which is a feature supported in Next.js) such as having opacity animation effects when doing page transitions. I wanted to avoid using custom global styling where possible and scope the styling to the component, and Tailwind CSS allows me to do that easily in addition to using CSS modules.