Introduction 👋

Hi there, welcome to my first blog post on series of things I learn and find it useful for the past version of myself to understand things (mostly web development stuff) from the first principle practice. Summarily, first principle practice approaches (big) problems from the most basic, simplest principles (knowledge)/facts/ideas. These tiny pieces are used to build up solutions to bigger problems to achieve a desirable outcome.

My naive example: I want to eat good and tasty food with the most minimum cost → cook on my own → go to the store and buy → preprocess the raw material→ follow tutorial if I’m not good → repeat and refine this process if needed

From the day I started web programming, I mostly used third party UI libraries with pre-made components (mostly in React ecosystem) in my daily job because they save UI development time, and most importantly is they offer plenty of functionalities. Let’s take a look at the table component of Ant Design, it has many advanced features such as column dragging which can take quite an effort and time to build from scratch. These libraries does allow faster development, yet they make it hard for a product using them to customize its own theme that matches its brand’s tone. Additionally, for myself as web developer, I don’t improve my skills and taste for UI development if I just use these forever. Therefore, I just only started by watching how people analyze and build things from the ground up then try to mimic and arrive at my conclusion and experience.

Try Implementing Link Button

I started with a simple and common thing first which is a button that allow people to click and bring people to new web page. For example the Hashnode home page with buttons

First Version (and Not Ok 😅)

I decide to implement the button using HTML with a div, an anchor tag and some CSS

Can you spot the problems with this button ?

❌ Problems

• The cursor does not change to pointer when hovering the button. The cursor only changes when hovering the link tag text

• Navigating to new URL only works when clicking a text , however, it should work for any region of the button

Second Version

This 2nd version solves the 2 issues above but the CSS code of the anchor tag does not look nice since it is a little bit “hacky” to me :)

  ...
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50px; 
  display: flex;
  align-items: center;
  justify-content: center;
  ...

Here I have to change the display, width, heigh, border-radius of anchor tag so that its area can match with the parent div to allow clicking and hovering effect of the URL on the button.

So, instead of using a div and a button, I think it is better to only use an anchor tag to create a button

Final Version

This final version offers same functionality with the 2nd version but with less code to read and little bit nicer :)

Above is all I have learned when trying to create a button with plain HTML and CSS with first principle, and my thoughts on UI development with pre-made libraries.

Outro

Here is link to the resources that have inspired my first blog post on these topics

• First principle practice by Swyx - a great developer inspiration for me

• You Don’t Need A UI Framework by Josh W Comeau - a developer with many great interaction article on frontend development (like this one about flexbox)

Thank you for your time and see you again in another post ^^