
CSS has always been a skill that I am possessing a partial understanding, yet not fully proficient.

With some spare time, I shift my focus on building mobile app with React Native to polishing up my skills in web front end development.

While it's easy to get a web app up and running with `NextJS` and style it with `TailwindCSS`, I find myself focusing more on the development velocity and features more than the aesthetic aspect of it. That is okay for most of the time but it feels more satifying to be able to publish web app that is useful and at the same time good looking.

Therefore I took the 100 Days CSS Challenge to satify my craving for building beautiful UI.

Having focused on building mobile app with react-native makes me comfortable to be able to deliver good looking UI with a subset of CSS knowledge. Now, I wish to expand that boundary and mastering CSS skills.

At day 47, here are lessons I learned along the way:

#### 1. Animation and transition

Coming from react-native world, I did animation differently with `Animated`  api. In CSS, `animation` and `transition` are used heavily for visually engaging UI. At first, the usage of these two are often hard to distinguish.

Luckily it doesn't take long to differentiate the purpose and usage of the two.  `animation` offers fine grained control during the course of the effects while `transition` gives a simpler way to achieve changes in CSS properties. Both have their place and is it's easy to confuse when to use which.

#### 2. SVG, polygon, polyline and more

Animating shapes could be tricky sometimes. For example when adding a rounded border cap to a half circle is harder than I initially anticipated. SVG comes in handy when it offers a way to do it. The only tradeoff is dealing with coordinate system in drawing can be overwhelming.

#### 3. SCSS / SASS

Vanilla CSS is great, it is better with SCSS. A lot of classes can be styled dynamically with loops and mixins, therefore easier to develop and maintain.

#### 4. It takes creativity to solve UI challenges

Most of the time, when you are presented with an UI, it is easier to solve it with complicated approach. It takes practices to break down the problems and implement simpler solution.

#### 5. Others

Other related front end stuffs lke understanding what is PostCSS, Autoprefixer, bundling process, developer debug tool, 12 principles of animation and default behaviour of `TailwindCSS` also worth mentioning. Although I got sidetracked with finding out how stuffs works, but it feels great to finally knowing these tools that I am using frequently.

That's all for my lessons learned.

Thanks for reading. Happy coding!


Lessons learned from 100 Days CSS Challenge


#### 1. Introduction

Working with Cloudflare Pages is easy. This blog document the 2 issues that I encountered during the deployment and how to fix them.


#### 2. The solution

2.1: Issue with `yarn` version. Default version used by Cloudflare is not v1. If you are using yarn version 1, you need to specify it in `package.json`

```javascript
  "packageManager": "yarn@1.22.19"
```

2.2: Issue with node version. To use the desired node version. Create a file `.nvmrc` and add the version.

In my case, my `.nvmrc` looks like this.

```javascript
20
```

Now it should works!

Thanks for reading! Cheers!


Lessons learned from 100 Days CSS Challenge

27 July 2023

Next.js static page hosting with Cloudflare Pages

5 December 2024